/* Styling for `If Nibiru hits` boxes */
details {
    border: 2px solid #444;
    background-color: hsl(210, 25%, 8%);
    padding: 1.5rem;
}

/* Make video player match the guide colors */
body {
    --plyr-video-controls-background: rgba(0, 0, 0, 0);
    --plyr-color-main: darkorange;
}

/* Prevent flash of unfiltered content */
#sidebar,
.sidebar-scrollbox {
    visibility: var(--sidebar-visibility, visible);
}

/* Chapter filter dropdown */
.chapter-filter-container {
    margin: 8px;
    padding: 10px 12px;
    background: var(--sidebar-bg);
    border-radius: 4px;
    border: 1px solid var(--sidebar-non-existant);
}

.chapter-filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: var(--sidebar-fg);
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 4px;
    width: 100%;
}

.chapter-filter-header.active {
    color: var(--sidebar-active);
    font-weight: 600;
}
.filter-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.filter-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
    font-size: 0.8em;
}

.filter-arrow.expanded {
    transform: rotate(180deg);
}

.chapter-filter-options {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sidebar-non-existant);
}

.chapter-filter-options.expanded {
    display: block;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85em;
    color: var(--sidebar-fg);
    cursor: pointer;
}

.filter-option:hover {
    color: var(--sidebar-active);
}

.filter-option input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
}

.filter-option label {
    cursor: pointer;
    flex: 1;
}

/* Testing build banner styles (inserted via head.hbs when on testing branch) */
.sidebar .testing-banner {
    margin: 8px;
    padding: 10px 12px;
    border-left: 4px solid #ffa500;
    background: rgba(255, 165, 0, 0.08);
    color: #ffd18a;
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.3;
}

/* Optional: slightly adjust color in light themes if used */
.light .sidebar .testing-banner,
.rust .sidebar .testing-banner,
.coal .sidebar .testing-banner {
    background: rgba(255, 165, 0, 0.12);
    color: #6b3f00;
}

/* Scale up content for HiDPI screens */
@media (min-width: 1921px) {
    main {
        font-size: 18px;
    }

    .sidebar {
        font-size: 18px;
    }

    :root {
        --content-max-width: 40vw;
    }
}

/* Hide individual combos behind a dropdown, 
for opening hands with more than one combo. */
.inv {
    display: none;
}

#comboDropdown {
    width: 100%;
    height: 4rem;
    background-color: hsl(210, 25%, 8%);
}

option {
    width: 100%;
    height: 4rem;
}

/* Increase line height for lists. */
.content ol {
    line-height: 1.75em;
}

.content ul {
    line-height: 1.60em;
}


/* Make Karin look special */
.scroll-container {
    width: 100%;
    height: 1.45em;
    overflow: hidden;
    /* This is crucial! It hides the list items outside the container. */
    position: relative;
}

.scrolling-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    position: absolute;
    width: 100%;

    /* The animation magic! */
    animation: scroll 30s linear infinite;
    animation-play-state: paused;
    /* Start paused; JS will start it 2s after page load */
}

/* 3. The Animation Keyframes */
@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        /* Move the list up by half its total height (the height of the original items) */
        transform: translateY(-50%);
    }
}

/* Selects the table with the class "credits-list" */
.credits-list {
    border-collapse: collapse;
    /* Ensures there are no gaps between cells */
    width: 100%;
    /* Makes the table take up the full width of its container */
    max-width: 500px;
    /* Optional: sets a maximum width */
}

/* Styles the cells inside the table */
.credits-list td {
    border: none;
    /* This makes the borders invisible */
    padding: 5px;
    /* Adds some space around the text */
}

/* Optional: Style the first column (names) to be bold */
.credits-list td:first-child {
    font-weight: bold;
    padding-right: 20px;
    /* Adds extra space between the name and role */
}

/* Full <li> background dual flag */
.dual-flag-bg {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

/* Diagonal split triangles */
.dual-flag-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/genderfluid.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.dual-flag-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/femboy.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(100% 100%, 100% 0, 0 100%);
    clip-path: polygon(100% 100%, 100% 0, 0 100%);
}

/* Contrast text plate to ensure readability */
.li-contrast {
    position: relative;
    /* above bg triangles */
    z-index: 1;
    background: rgba(0, 0, 0, 0.30);
    color: #fff;
    padding: 0 0.35em;
}