/* 3Sigma Studios - Main Stylesheet */

/* ========================================
   Reset & Base
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    /* .s2-main-mega / .s2-header-mega nudge content right with
       position:relative + left to clear the fixed alt-nav — that offset
       still counts toward the page's scrollable width even though it
       doesn't push any sibling, so on narrower viewports it was tipping
       the page into a horizontal scrollbar site-wide. Nothing is
       actually cut off by hiding overflow-x here, just the stray
       scrollbar UI. */
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: #0f0f0f;
    color: #e0e0e0;
    line-height: 1.5;
    /* Hide the native scrollbar track/thumb site-wide — cosmetic only, the
       page still scrolls normally by wheel/touch/keyboard/drag. Same idea as
       overflow-x above: nothing is cut off, just the visible chrome. */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* old Edge/IE */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, new Edge */
}

/* The browser's own rule for the hidden attribute is just `display: none`, so
   ANY author display declaration outranks it — `.aff-cs-option { display: flex }`
   silently defeated it, and the country search filtered nothing because the
   options it "hid" kept rendering. Same trap had the creatives search's clear
   button always visible and left the copy toast as an invisible click target.
   Restating it here with !important makes `el.hidden = true` mean what it says,
   here and in whatever gets written next. */
[hidden] {
    display: none !important;
}

a {
    color: #7b2ff7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ========================================
   Age Verification Overlay
   ======================================== */
.age-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
}

.main-content-hidden {
    display: none;
}

/* 18+ badge — centred horizontally, above the buttons */
.age-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
}

/* LHR (thumbs down) — x: 764.5/1920 = 39.84%, y: 755/1080 = 69.91%, size: 89/1920 = 4.635vw */
.age-exit-btn {
    position: absolute;
    left: 39.84%;
    top: 69.91%;
    transform: translate(-50%, -50%);
    display: block;
    text-decoration: none;
}

.age-exit-btn img {
    width: 4.635vw;
    height: auto;
    transition: opacity 0.2s, transform 0.2s;
}

.age-exit-btn:hover img {
    opacity: 0.8;
    transform: scale(1.08);
}

.age-exit-btn:hover {
    text-decoration: none;
}

/* RHG (thumbs up) — x: 1159.5/1920 = 60.39%, y: 729.5/1080 = 69.91%, size: 89/1920 = 4.635vw */
.age-confirm-btn {
    position: absolute;
    left: 60.39%;
    top: 67.55%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.age-confirm-btn img {
    width: 4.635vw;
    height: auto;
    transition: opacity 0.2s, transform 0.2s;
}

.age-confirm-btn:hover img {
    opacity: 0.8;
    transform: scale(1.08);
}

/* ========================================
   Admin body — same dark red -> black brand background as the rest of
   the site (no purple/navy, matches .s2-overlay's palette).
   ======================================== */
.admin-body {
    min-height: 100vh;
    /* Flat and solid (not a gradient) so it's always reliably darker than
       the cards sitting on top of it, at every scroll position. */
    background: #0d0002;
}

/* ========================================
   Header
   ======================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13, 0, 2, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(194, 0, 28, 0.35);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 32px;
    width: auto;
    display: block;
}

.logo:hover {
    opacity: 0.85;
    text-decoration: none;
}

.header-nav {
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    color: #a0a0a0;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #ff5a67;
    text-decoration: none;
}

/* ========================================
   Flash Messages
   ======================================== */
.flash {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    z-index: 200;
    animation: slideIn 0.3s ease-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash.is-dismissing {
    opacity: 0;
    transform: translateX(100%);
}

.flash-notice {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

.flash-alert {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid rgba(248, 81, 73, 0.4);
    color: #f85149;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========================================
   Game Showcase
   ======================================== */
.showcase-body {
    margin: 0;
    padding: 0;
    /* overflow:hidden on body interferes with position:fixed children in some browsers;
       showcase-container handles its own overflow */
}

.showcase-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.showcase-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.showcase-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.showcase-video.showcase-panel-visible {
    opacity: 1;
}

.showcase-video.showcase-panel-transitioning {
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}


/* Title Carousel */
.title-carousel {
    position: fixed;
    left: var(--title-left, 5.21%);
    bottom: var(--title-bottom, 9.26%);
    z-index: 10;
    width: 100%;
    height: 300px;
    pointer-events: none;
}

.title-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.title-carousel-item {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: none;
    font-family: 'Sora', sans-serif;
    font-size: 2.63vh;
    font-weight: 700;
    text-transform: uppercase;
    color: #9a0014;
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    user-select: none;
}

/* Visible items are clickable — jump to that game, or (Support) navigate away */
.title-carousel-item[data-position] {
    pointer-events: auto;
    cursor: pointer;
}

.title-carousel-item[data-position]:hover {
    color: #c2001c;
}

/* Position classes for visible items */
.title-carousel-item[data-position="prev"] {
    transform: translateY(-16vh);
    opacity: calc(var(--title-opacity, 0.7) * 0.714);
    font-size: calc(2.63vh * var(--title-scale, 1));
}

.title-carousel-item[data-position="current"] {
    transform: translateY(-8vh);
    opacity: var(--title-opacity, 0.7);
    font-size: calc(5.4vh * var(--title-scale, 1));
}

.title-carousel-item[data-position="next"] {
    transform: translateY(-4.3vh);
    opacity: calc(var(--title-opacity, 0.7) * 0.714);
    font-size: calc(2.63vh * var(--title-scale, 1));
}

.title-carousel-item[data-position="far-next"] {
    transform: none;
    opacity: calc(var(--title-opacity, 0.7) * 0.714);
    font-size: calc(2.63vh * var(--title-scale, 1));
    line-height: 1;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}


.showcase-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.showcase-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #7b2ff7;
}

/* Site Logo (showcase page, fixed in root stacking context) */
.site-logo {
    position: fixed;
    left: var(--logo-left, 5.21%);
    top: var(--logo-top, 9.26%);
    width: calc(6.8vw * var(--logo-scale, 1));
    height: auto;
    opacity: var(--logo-opacity, 0.8);
    z-index: 10001;
    pointer-events: none;
}

/* Homepage: the logo is now a plain link to the studio's own game page
   (see views/games/_images.php) — no more hover-open mega menu. .site-logo
   itself stays pointer-events:none by default (it used to just be
   decorative chrome inside the old mega-nav dropdown trigger); this
   override switches only the click target back on, without touching its
   position/size above. */
.site-logo-link .site-logo {
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Same idea as the game titles' hover brightening (#9a0014 -> #c2001c) —
   since this is an image rather than text, brighten + add a soft red glow
   instead of swapping a color. */
.site-logo-link:hover .site-logo {
    opacity: 1;
    filter: brightness(1.12) drop-shadow(0 0 5px rgba(194, 0, 28, 0.4));
}

/* Multiply Overlay (vignette effect over video) */
.showcase-multiply-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    opacity: 0.85;
    z-index: 5;
    pointer-events: none;
}


/* Media Controls — semantic wrapper only, layout handled per-element */
.media-controls {
    pointer-events: none;
}

/* Fullscreen Buttons */
.exit-fullscreen-btn,
.enter-fullscreen-btn {
    position: fixed;
    left: 89.84vw;
    top: 88.61vh;
    z-index: 10;
    display: none;
    align-items: center;
    background: none;
    border: none;
    color: rgb(154, 0, 21);
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-size: 10pt;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    transition: color 0.2s;
}

.exit-fullscreen-btn:hover,
.enter-fullscreen-btn:hover {
    color: #9a0014;
}

.exit-fullscreen-btn img,
.enter-fullscreen-btn img {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}

/* Fullscreen label — fades in to the right of the icon */
.exit-fullscreen-btn .fs-label,
.enter-fullscreen-btn .fs-label {
    position: absolute;
    left: calc(100% + 0.4em);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.exit-fullscreen-btn:hover .fs-label,
.enter-fullscreen-btn:hover .fs-label {
    opacity: 1;
    pointer-events: auto;
}

/* Volume Control */
.volume-control {
    position: fixed;
    left: 89.84vw;
    top: 86.39vh;
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.volume-btn img {
    width: 16px;
    height: 16px;
    display: block;
}

.volume-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: rgb(154, 0, 21);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

/* Volume slider — in flow so hover zone covers icon + bar */
.volume-slider {
    margin-left: 0.5em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.volume-control:hover .volume-slider {
    opacity: 1;
    pointer-events: auto;
}

/* Buffer / freeze timer */
.buffer-timer {
    position: fixed;
    top: 1.8vh;
    right: 1.5vw;
    z-index: 20;
    background: rgba(0, 0, 0, 0.72);
    color: #ff4444;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3em 0.65em;
    border-radius: 4px;
    border: 1px solid rgba(255, 68, 68, 0.35);
    letter-spacing: 0.06em;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.bt-row {
    display: flex;
    justify-content: space-between;
    gap: 0.8em;
}

.bt-label {
    opacity: 0.6;
    font-size: 0.85em;
}

.bt-val {
    text-align: right;
    min-width: 7ch;
}

.bt-sep {
    border-top: 1px solid rgba(255, 68, 68, 0.25);
    padding-top: 0.2em;
    margin-top: 0.05em;
}

.volume-btn:hover {
    color: #9a0014;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 3.75vw;
    height: 4px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    /* opacity transition already set on the first .volume-slider rule above
       (line ~514) — same property, same value, restated here for no reason */
    /* JS paints the fill gradient over this, from the same two variables */
    background: var(--vol-track, rgba(128, 128, 128, 0.4));
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vol-fill, #9a0014);
    cursor: pointer;
}

.volume-slider::-moz-range-track {
    height: 4px;
    background: var(--vol-track, rgba(128, 128, 128, 0.4));
    border-radius: 2px;
}

.volume-slider::-moz-range-progress {
    height: 4px;
    background: var(--vol-fill, #9a0014);
    border-radius: 2px;
}

.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vol-fill, #9a0014);
    border: none;
    cursor: pointer;
}

/* CTA Button (image-based, center-right, fixed in root stacking context).
   The `right` offset is measured from the containing block's right edge,
   which a vertical scrollbar pushes ~15px inward on scrolling pages while
   the (fullscreen, scrollbar-less) homepage keeps the true window edge —
   so the button used to sit further left everywhere except the homepage.
   `100vw - 100%` equals exactly the scrollbar width (0 with no scrollbar),
   and subtracting it cancels that inward shift, pinning the button to the
   same spot as the homepage on every page. */
.cta-btn {
    position: fixed;
    right: calc(var(--cta-right, 5.21) * 1vw - 100vw + 100%);
    top: var(--cta-top, 50%);
    width: calc(9.9vw * var(--cta-scale, 1));
    transform: translateY(-50%);
    z-index: 10001;
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cta-btn:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.03);
    filter: brightness(1.1);
}

.cta-btn:active {
    transform: translateY(calc(-50% + 1px)) scale(0.98);
}

.cta-btn img {
    display: block;
    width: 100%;
    height: auto;
    opacity: var(--cta-opacity, 0.8);
}

/* ============================================================
   BETA DOWNLOAD BUTTON (Premium dark-red pill CTA - Refined)
   ============================================================ */
.beta-download-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 290px;
    max-width: 100%;
    min-height: 82px;
    padding: 10px 14px 10px 10px;
    gap: 14px;
    border-radius: 999px;
    box-sizing: border-box;
    background: linear-gradient(180deg,
            #c8102e 0%,
            #9f001b 45%,
            #68000f 100%);
    border: 2px solid #ff2948;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 4px 8px rgba(0, 0, 0, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.18),
        inset 0 -4px 8px rgba(45, 0, 6, 0.45);
    filter: drop-shadow(0 0 14px rgba(255, 20, 55, 0.25));
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
    user-select: none;
}

.beta-download-button::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.beta-download-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.08) drop-shadow(0 0 18px rgba(255, 35, 70, 0.35));
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 35, 70, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -4px 8px rgba(45, 0, 6, 0.45);
    color: #ffffff;
    text-decoration: none;
}

.beta-download-button:hover .beta-download-button__icon svg {
    transform: translateY(2px);
}

.beta-download-button:active {
    transform: translateY(1px) scale(0.99);
}

.beta-download-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 5px;
}

/* Icon */
.beta-download-button__icon {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: rgba(70, 0, 10, 0.55);
    border: 2px solid rgba(255, 45, 75, 0.55);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    flex-shrink: 0;
}

.beta-download-button__icon svg {
    width: 28px;
    height: 28px;
    display: block;
    transition: transform 180ms ease;
    stroke: currentColor;
}

/* Content & Centering */
.beta-download-button__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.beta-download-button__title {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.4px;
    color: #ffffff;
    white-space: nowrap;
    text-align: center;
}

.beta-download-button__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #ef5268;
    white-space: nowrap;
}

.beta-download-button__line {
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: rgba(239, 82, 104, 0.45);
    flex-shrink: 0;
}

/* Floating fixed CTA variant */
.cta-btn.beta-download-button {
    position: fixed;
    right: calc(var(--cta-right, 5.21) * 1vw - 100vw + 100%);
    top: var(--cta-top, 50%);
    width: 290px;
    height: 82px;
    transform-origin: right center;
    --btn-scale: calc(0.80 * var(--cta-scale, 1));
    transform: translateY(-50%) scale(var(--btn-scale));
    z-index: 10001;
}

.cta-btn.beta-download-button:hover {
    transform: translateY(-50%) scale(calc(var(--btn-scale) * 1.03));
    filter: brightness(1.08) drop-shadow(0 0 18px rgba(255, 35, 70, 0.35));
}

.cta-btn.beta-download-button:active {
    transform: translateY(-50%) scale(calc(var(--btn-scale) * 0.98));
}

/* In-page CTA variant */
.beta-download-button:not(.cta-btn) {
    transform-origin: center center;
    zoom: 0.78;
}

/* Tablets */
@media (max-width: 768px) {
    .cta-btn.beta-download-button {
        --btn-scale: calc(0.78 * var(--cta-scale, 1));
    }

    .beta-download-button:not(.cta-btn) {
        zoom: 0.72;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .beta-download-button {
        width: 215px;
        min-height: 76px;
        padding: 6px 12px 6px 5px;
        gap: 6px;
    }

    .beta-download-button__icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .beta-download-button__icon svg {
        width: 26px;
        height: 26px;
    }

    .beta-download-button__title {
        font-size: 21px;
    }

    .beta-download-button__subtitle {
        gap: 5px;
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .beta-download-button__line {
        width: 15px;
    }

    .cta-btn.beta-download-button {
        --btn-scale: calc(0.72 * var(--cta-scale, 1));
    }

    .beta-download-button:not(.cta-btn) {
        zoom: 0.68;
    }
}

@media (max-width: 340px) {
    .beta-download-button__line {
        display: none;
    }
}

/* ========================================
   Downloading Page
   ======================================== */
.downloading-body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: url('../images/2026-02-23_3SIGMA-WEBSITE_4_DownloadingBackground.png') center / cover no-repeat;
    position: relative;
}

/* Logo and panel used to be absolutely positioned at fixed offsets, so the
   title landed on top of the logo and the panel had to scroll. One centred
   column instead: everything stacks in order, and the column scrolls
   vertically when the three-step walk-through is taller than the window.
   The TITLE lands at the middle of the page on load, with the logo just above
   it and the steps flowing below into a scroll. padding-top backs 50vh off by
   the logo + gap above the title so the title itself, not the logo, hits 50vh. */
.downloading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.9rem, 2.2vh, 1.9rem);
    /* ⬆ RAISE / LOWER the logo + title block: change the "7rem" below.
       Bigger number = higher up the page, smaller = lower. */
    padding: calc(50vh - 7rem) 3vw clamp(1.5rem, 4vh, 3rem);
    box-sizing: border-box;
    min-height: 100vh;
    overflow-y: auto;
    /* Still scrolls — just without the visible track, which looked out of
       place against the red backdrop. */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* old Edge */
    text-align: center;
    color: #fff;
    font-family: 'Sora', system-ui, sans-serif;
}

.downloading-screen::-webkit-scrollbar {
    /* Chrome, Edge, Safari */
    display: none;
}

.download-page-logo {
    flex: 0 0 auto;
    z-index: 10;
}

/* The download screen used to be a single baked-in picture ("THE 3SIGMA APP
   IS DOWNLOADING..."), which left nowhere to explain the Windows SmartScreen
   prompt that follows. It's real text now, with the step-by-step walk-through
   underneath. */
.downloading-panel {
    width: min(94vw, 680px);
    z-index: 10;
}

.downloading-title {
    margin: 0;
    font-family: 'Poppins', 'Sora', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.3rem, 2.5vw, 2.3rem);
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.downloading-subtitle {
    margin: 0.5rem 0 clamp(0.9rem, 1.8vh, 1.5rem);
    font-size: clamp(0.85rem, 1.1vw, 1.05rem);
    color: rgba(255, 255, 255, 0.85);
}

.dl-notice {
    /* ⬇ LOWER / RAISE the whole dark box: change this margin-top. Bigger =
       box further down (more gap under the title), smaller = box higher up. */
    margin-top: clamp(5rem, 13vh, 9.5rem);
    background: rgba(0, 0, 0, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    padding: clamp(0.9rem, 1.8vh, 1.4rem) clamp(1rem, 1.6vw, 1.6rem);
    text-align: left;
}

.dl-notice__badge {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.15em 0.6em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* One reassuring sentence above the steps, justified. */
.dl-notice__lead {
    max-width: 60ch;
    margin: 0 auto clamp(1.1rem, 2.4vh, 1.8rem);
    font-size: clamp(0.85rem, 1vw, 1.05rem);
    line-height: 1.55;
    text-align: justify;
    color: rgba(255, 255, 255, 0.9);
}

.dl-notice__lead strong {
    color: #fff;
}

/* Steps stacked one under another — the screen scrolls vertically rather than
   cramming the screenshots side by side. */
.dl-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.3rem, 3vh, 2.2rem);
    margin: 0;
}

.dl-step {
    width: 100%;
    max-width: 540px;
    margin: 0;
}

.dl-step img {
    display: block;
    /* Render at the screenshot's own size (they're small on purpose), never
       stretched up to the step width — max-width just keeps them inside it on
       a narrow screen. Centred by the auto margins. */
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Caption sits above its screenshot: read the instruction, then see it. */
.dl-step figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: 0 0 0.7rem;
    font-size: clamp(0.88rem, 1.05vw, 1.05rem);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.dl-step__n {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #9a0014;
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
}

/* The downloading overlay sits at z-index 9999, which buried the fullscreen
   and volume controls (z-index 10) the moment it opened. Lift them over it so
   the same two buttons stay in the same corner during the download — the
   volume one now also drives the download screen's music track. */
body.downloading-open .exit-fullscreen-btn,
body.downloading-open .enter-fullscreen-btn,
body.downloading-open .volume-control {
    z-index: 10000;
}

/* Those controls are the site red (#9a0014) on video, which works — but the
   download screen's background is red too, and they all but disappeared into
   it. There only, flip the icons to white (brightness(0) crushes the artwork
   to black, invert(1) lifts it to white) and give them a soft shadow: still
   small and unobtrusive, just actually visible. The slider takes the same
   treatment through --vol-fill / --vol-track, which game-showcase.js writes
   into the inline gradient it paints on the track. */
body.downloading-open {
    --vol-fill: rgba(255, 255, 255, 0.92);
    --vol-track: rgba(255, 255, 255, 0.3);
}

body.downloading-open .media-controls img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
    opacity: 0.9;
}

body.downloading-open .media-controls img:hover,
body.downloading-open .media-controls button:hover img {
    opacity: 1;
}

body.downloading-open .enter-fullscreen-btn,
body.downloading-open .exit-fullscreen-btn {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}


/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: #9a0014;
    color: #fff;
}

.btn-primary:hover {
    background: #c2001c;
    transform: scale(1.02);
    text-decoration: none;
}

.btn-secondary {
    background: transparent;
    color: #a0a0a0;
    border: 1px solid rgba(160, 160, 160, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.btn-edit {
    background: rgba(194, 0, 28, 0.2);
    color: #ff5a67;
    border: 1px solid rgba(194, 0, 28, 0.35);
}

.btn-edit:hover {
    background: rgba(194, 0, 28, 0.3);
    text-decoration: none;
}

.btn-delete {
    background: rgba(248, 81, 73, 0.2);
    color: #f85149;
    border: 1px solid rgba(248, 81, 73, 0.3);
}

.btn-delete:hover {
    background: rgba(248, 81, 73, 0.3);
}

/* ========================================
   Admin Panel
   ======================================== */
.admin-main {
    padding: 2rem;
}

.admin-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Opt-in for pages whose content genuinely needs more room than a settings
   form or a table does — currently just /admin/tracking's three-chart row. */
.admin-container-wide {
    max-width: 1640px;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.admin-header h1 {
    margin: 0;
    font-size: 1.75rem;
    color: #fff;
}

/* Admin Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #2a0008;
    border-radius: 12px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-table th {
    background: rgba(194, 0, 28, 0.14);
    color: #a0a0a0;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table td {
    color: #e0e0e0;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* This used to be display:flex — but a flex td leaves table-cell layout, so
   it no longer stretches to the row's height and its buttons sat pinned to
   the top of any tall row (obvious next to a 90px portrait thumbnail).
   Keeping it a real table cell restores the default middle alignment every
   other cell gets; the old flex gap becomes a margin between the buttons. */
.admin-table .actions {
    vertical-align: middle;
    white-space: nowrap;
}

.admin-table .actions .btn {
    vertical-align: middle;
}

.admin-table .actions .inline-form {
    margin-left: 0.5rem;
}

.admin-table .url-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8888a0;
    font-size: 0.85rem;
}

.admin-table .empty-state {
    text-align: center;
    color: #8888a0;
    padding: 3rem 1rem;
}

/* Multiple .admin-table instances on one page (Creatives, grouped by
   dimensions) need a heading + gap between groups the single-table admin
   pages never needed. */
.admin-subheading {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
}

.admin-subheading small {
    color: #8888a0;
    font-weight: 400;
    font-size: 0.85rem;
}

/* Each format group (heading + its table) on /admin/creatives — spacing goes
   on the wrapper, not the heading, so the very first group sits flush under
   the page header and every one after it gets a gap. */
.admin-creative-group+.admin-creative-group {
    margin-top: 2rem;
}

/* Live search box above the grouped tables (/admin/creatives). */
.admin-search {
    margin-bottom: 1.5rem;
}

.admin-search input[type="search"] {
    width: 100%;
    max-width: 420px;
    padding: 0.65rem 1rem;
    background: #1a0006;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.9rem;
}

.admin-search input[type="search"]:focus {
    outline: none;
    border-color: #c2001c;
}

.admin-search input[type="search"]::placeholder {
    color: #6a6a80;
}

/* This table specifically needs to let its hover-zoomed preview (see below)
   render outside its own box — .admin-table's overflow:hidden (for its
   rounded corners) would otherwise clip it. Scoped to this page only; the
   Games/Categories/Affiliates admin tables keep their clipping. */
.admin-table-creatives,
.admin-table-tracking {
    overflow: visible;
}

.creative-preview-cell {
    width: 90px;
}

.creative-preview-cell img,
.creative-preview-cell video {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    background: #0c0206;
    display: block;
    position: relative;
    transition: transform 0.2s ease;
}

/* Portrait formats (160x600, 1080x1920…). In the shared 80x45 landscape box,
   object-fit: cover reduced a tall skyscraper to a cropped horizontal sliver,
   and the hover zoom just magnified that sliver. Height-driven sizing with
   width:auto lets each one keep its real proportions instead — a 160x600
   lands at 24x90, a 1080x1920 at ~51x90, neither cropped nor letterboxed. */
.creative-preview-cell-tall {
    width: 80px;
}

.creative-preview-cell-tall img,
.creative-preview-cell-tall video {
    width: auto;
    height: 90px;
    max-width: 70px;
    object-fit: contain;
}

/* Scales the thumbnail up 2.5x on hover so a small ad creative is actually
   readable — transform is paint-only, so the table row's own height and
   every other layout dimension stay exactly as they were; nothing reflows. */
.creative-preview-cell:hover img,
.creative-preview-cell:hover video {
    transform: scale(2.5);
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.inline-form {
    display: inline;
}

/* Admin Forms */
.admin-form {
    max-width: 600px;
    background: #2a0008;
    padding: 2rem;
    border-radius: 12px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #a0a0a0;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #c2001c;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-hint {
    display: block;
    margin-top: 0.5rem;
    color: #6a6a80;
    font-size: 0.8rem;
}

.form-group-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #e0e0e0;
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
}

.form-group-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #c2001c;
    cursor: pointer;
}

.form-group-checkbox .form-hint {
    margin-top: 0.35rem;
    margin-left: 1.5rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/* ========================================
   Admin Creatives form (new / edit)
   Scoped: .admin-form is shared with Games and Categories, which keep the
   plain layout. Everything below only applies inside .admin-form-creative.
   ======================================== */
.admin-page-head h1 {
    margin: 0;
    font-size: 1.75rem;
    color: #fff;
}

.admin-page-sub {
    margin: 0.35rem 0 0;
    color: #8a8a9a;
    font-size: 0.88rem;
}

.admin-form-creative {
    max-width: 860px;
    /* The header band runs edge to edge, so the padding moves inside. */
    padding: 0;
    border: 1px solid rgba(194, 0, 28, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.cform-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: rgba(194, 0, 28, 0.09);
    border-bottom: 1px solid rgba(194, 0, 28, 0.28);
    /* Rounded here rather than clipped by an overflow:hidden on the card.
       That overflow existed only to stop this band squaring off the card's
       top corners, and it also cut off anything that left the card — which
       is every drop-down panel, leaving the Destination list showing three
       entries with no way to reach the rest. */
    border-radius: 12px 12px 0 0;
}

.cform-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(194, 0, 28, 0.18);
    border: 1px solid rgba(255, 90, 103, 0.45);
    color: #ff5a67;
}

.cform-head-icon svg {
    width: 22px;
    height: 22px;
}

.cform-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.cform-head p {
    margin: 0.2rem 0 0;
    color: #8a8a9a;
    font-size: 0.82rem;
}

/* Actionable, unlike the plain description text above it — pulls the eye
   toward "pick the file first" before the admin starts typing anything. */
.cform-tip {
    margin: 0.45rem 0 0 !important;
    color: #ff8f9a !important;
    font-weight: 600;
}

.cform-tip code {
    padding: 0.1rem 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    color: #ffb3ba;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 400;
}

.cform-body {
    padding: 1.75rem 2rem 2rem;
}

.admin-form-creative .form-row {
    gap: 1.5rem;
}

.cform-req {
    color: #ff5a67;
}

/* Icon sits inside the field, so the control needs to be the positioning
   context and the input needs room on the left for it. */
.cform-control {
    position: relative;
}

.cform-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #ff5a67;
    pointer-events: none;
}

.cform-icon svg {
    width: 18px;
    height: 18px;
}

.admin-form-creative .cform-control input,
.admin-form-creative .cform-control select {
    padding: 0.85rem 1rem 0.85rem 2.9rem;
    background: #1a0006;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-form-creative .cform-control input:focus,
.admin-form-creative .cform-control select:focus {
    border-color: #c2001c;
    box-shadow: 0 0 0 3px rgba(194, 0, 28, 0.18);
}

.admin-form-creative .cform-control input::placeholder {
    color: #5a5a6a;
}

/* The themed drop-down (.aff-cs) inside this form, dressed to match the text
   inputs beside it — same fill, border, radius and focus ring, so Type and
   Destination don't read as controls borrowed from another page. Its icon
   sits in the flow rather than absolutely positioned, so it needs the gap
   instead of the 2.9rem left padding the inputs use. */
.admin-form-creative .aff-cs-trigger {
    padding: 0.85rem 1rem;
    background: #1a0006;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 0.95rem;
}

.admin-form-creative .aff-cs.is-open .aff-cs-trigger,
.admin-form-creative .aff-cs-trigger:focus-visible {
    border-color: #c2001c;
    box-shadow: 0 0 0 3px rgba(194, 0, 28, 0.18);
    outline: none;
}

.admin-form-creative .aff-cs-trigger-icon {
    color: #ff5a67;
}

.admin-form-creative .aff-cs-panel {
    background: #1a0006;
}

.admin-form-creative .aff-cs-search {
    background: #1a0006;
}

/* Native select arrows don't take a colour, so they're replaced by the
   .cform-chevron span — which must not swallow clicks meant for the select. */
.cform-control-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.75rem !important;
    cursor: pointer;
}

.cform-chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #8a8a9a;
    pointer-events: none;
}

.cform-chevron svg {
    width: 16px;
    height: 16px;
}

.cform-control-select select option {
    background: #1a0006;
    color: #e0e0e0;
}

/* File field: the row itself is the bordered box, and the browser's own
   "Choose File" button is restyled in place rather than hidden behind a
   label — that keeps the native file picker and its validation intact. */
.admin-form-creative .cform-control-file input[type="file"] {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    background: #1a0006;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #8a8a9a;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-form-creative .cform-control-file input[type="file"]:focus {
    outline: none;
    border-color: #c2001c;
    box-shadow: 0 0 0 3px rgba(194, 0, 28, 0.18);
}

.admin-form-creative .cform-control-file input[type="file"]::file-selector-button {
    margin-right: 0.9rem;
    padding: 0.5rem 1rem 0.5rem 2.2rem;
    background: rgba(194, 0, 28, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A5 5 0 0 1 7 6a6 6 0 0 1 11.3 1.6A4.5 4.5 0 0 1 19 16.5'/%3E%3Cpolyline points='9 12 12 9 15 12'/%3E%3Cline x1='12' y1='9' x2='12' y2='19'/%3E%3C/svg%3E") no-repeat 0.7rem center / 16px 16px;
    border: 1px solid rgba(255, 90, 103, 0.4);
    border-radius: 8px;
    color: #ff5a67;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.admin-form-creative .cform-control-file input[type="file"]::file-selector-button:hover {
    background-color: rgba(194, 0, 28, 0.3);
}

.admin-form-creative .form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 640px) {

    .cform-head,
    .cform-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .showcase-title {
        font-size: 1.75rem;
    }


    .form-row {
        grid-template-columns: 1fr;
    }

    .admin-table {
        font-size: 0.9rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.75rem;
    }
}

/* ========================================
   Shared admin table bits
   ========================================
   These outlived the Viewer Logs page they were written for and are still
   used by the affiliates and tracking tables — hence the ss- prefix. */
section>h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

.ss-table-wrap {
    overflow-x: auto;
}

.ss-ts {
    color: #888;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
}

/* Weekday chip shown just before a timestamp in the tables (see $whenCell in
   the tracking view's _helpers.php): "Mon 04 Aug 14:21". Slightly brighter and
   bolder than the greyed date so the day of week reads first. */
.ss-dow {
    display: inline-block;
    min-width: 2.2em;
    color: var(--brand-red, #ff5a67);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.text-muted {
    color: #888;
    font-size: 0.85rem;
}

/* ========================================
   Support / FAQ Page
   ======================================== */
.faq-section {
    margin-bottom: 2.5rem;
}

.faq-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #a86bff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(123, 47, 247, 0.25);
}

.faq-item {
    background: #16162a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}

.faq-item[open] {
    border-color: rgba(123, 47, 247, 0.45);
    background: #1a1a2e;
}

.faq-item>summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #ececf5;
    font-size: 1rem;
    font-weight: 500;
    user-select: none;
}

.faq-item>summary::-webkit-details-marker {
    display: none;
}

.faq-item>summary:hover {
    color: #fff;
}

.faq-tag {
    display: inline-block;
    background: rgba(123, 47, 247, 0.18);
    color: #b98cff;
    border: 1px solid rgba(123, 47, 247, 0.3);
    border-radius: 6px;
    padding: 0.1rem 0.5rem;
    margin-right: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.faq-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #8888a0;
    border-bottom: 2px solid #8888a0;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(-135deg);
    border-color: #b98cff;
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
    color: #c4c4d4;
    font-size: 0.95rem;
    line-height: 1.65;
}

.faq-answer p {
    margin: 0 0 0.75rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ol,
.faq-answer ul {
    margin: 0 0 0.75rem;
    padding-left: 1.3rem;
}

.faq-answer li {
    margin-bottom: 0.35rem;
}

.faq-answer strong {
    color: #e8e8f2;
}

/* Honeypot — hidden from real users */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.field-error {
    display: block;
    margin-top: 0.4rem;
    color: #f85149;
    font-size: 0.8rem;
}

.form-error-banner {
    background: rgba(248, 81, 73, 0.12);
    border: 1px solid rgba(248, 81, 73, 0.4);
    color: #f8a49f;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-align: left;
}

/* Same shape as the error banner, for the good news — a sent reset link, a
   password that just changed. Neutral white rather than green: the red pages
   have no green anywhere else, and the message is confirmation, not an alarm. */
.form-notice-banner {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

/* ========================================
   Support — Red art-direction variant (/support2)
   ======================================== */
.s2-body {
    margin: 0;
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Must stay transparent so the fixed z-index:-2 photo grid shows through */
    background: transparent;
}

/* /support2 uses the scroll-driven background (.s3-*), with a filter matching the
   Download page palette (bright #AB0519 glow -> #3D0005 -> near-black #120002), very dark. */
.s2-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(130% 125% at 70% 58%,
            rgba(171, 5, 25, 0.78) 0%,
            rgba(97, 1, 10, 0.91) 32%,
            rgba(45, 0, 5, 0.965) 64%,
            rgba(14, 0, 2, 0.995) 100%);
}

.s2-header {
    text-align: center;
    padding: 2.25rem 1rem 0.5rem;
}

.s2-logo {
    height: 60px;
    width: auto;
    display: inline-block;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

.s2-main {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    flex: 1 0 auto;
}

/* The plain header above already reserves vertical space, so no extra
   padding-top is needed here — just nudge the centered content right a
   little so it clears the fixed red mega-nav logo pinned at the far left.
   Uses position:relative + left (not transform) — a transform here would
   create a new containing block for any position:fixed descendant (like
   the affiliate login modal), breaking its full-viewport centering. */
.s2-main-mega {
    position: relative;
    left: 2.5rem;
}

/* The white logo header used to stay centered on the full viewport width
   even when the fixed left nav is on, while .s2-main-mega below it was
   nudged 2.5rem right to clear that nav — so the logo no longer lined up
   with the (shifted) center of the actual page content. Same nudge here
   keeps it aligned with everything below it. */
.s2-header-mega {
    position: relative;
    left: 2.5rem;
}

.s2-hero {
    text-align: center;
    margin-bottom: 2.25rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.s2-hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: #fff;
}

.s2-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    font-size: 0.8rem;
}

/* FAQ — white text on red cards */
.s2-faq .faq-section-title {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.28);
}

.s2-faq .faq-item {
    background: #7a0c0c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.s2-faq .faq-item[open] {
    background: #8a0d0d;
    border-color: rgba(255, 255, 255, 0.24);
}

.s2-faq .faq-item>summary {
    color: #fff;
    font-weight: 600;
}

.s2-faq .faq-item>summary:hover {
    color: #ffd6d6;
}

.s2-faq .faq-tag {
    background: #fff;
    color: #8a0d0d;
    border-color: #fff;
}

.s2-faq .faq-chevron {
    border-color: #fff;
}

.s2-faq .faq-item[open] .faq-chevron {
    border-color: #ffd6d6;
}

.s2-faq .faq-answer {
    color: rgba(255, 255, 255, 0.88);
}

.s2-faq .faq-answer strong {
    color: #fff;
}

.s2-faq .faq-answer a {
    color: #ffd6d6;
    text-decoration: underline;
}

/* Still need help — red card, white text */
.s2-help {
    margin-top: 3rem;
    background: #7a0c0c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.4);
}

.s2-help h2 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
    text-transform: none;
    letter-spacing: normal;
}

.s2-help-sub {
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 2rem;
}

.s2-help .form-error-banner {
    text-align: center;
}

.s2-form {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}

.s2-form .form-group label {
    color: rgba(255, 255, 255, 0.85);
}

.s2-form .form-group input,
.s2-form .form-group textarea {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

.s2-form .form-group input::placeholder,
.s2-form .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.s2-form .form-group input:focus,
.s2-form .form-group textarea:focus {
    border-color: #fff;
}

.s2-form .form-actions {
    justify-content: center;
    margin-top: 1.5rem;
}

.s2-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #d81f1f, #a10d0d);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 6px 18px rgba(160, 10, 10, 0.5);
}

.s2-submit:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 9px 26px rgba(160, 10, 10, 0.6);
}

.s2-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 1.5rem 1rem 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.s2-footer a {
    color: #fff;
    text-decoration: underline;
}

/* Icon-only links closing the copyright line (top / mail / LinkedIn).
   inline-flex so each <a> box hugs its glyph exactly while still sitting in the
   paragraph's text flow; a plain inline anchor around an SVG would inherit the
   line-height and leave a stray gap under it. vertical-align centres the 22px
   glyph against the 0.85rem text rather than dropping it onto the baseline. The
   underline the rule above gives every footer link makes no sense on a glyph,
   hence the explicit none. */
.s2-footer .s2-ficon {
    display: inline-flex;
    vertical-align: middle;
    padding: 0.25rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s ease, transform 0.15s ease;
}

/* Hover stays white and gains contrast instead of turning red: the brand
   accent read as a state change on marks that are themselves brand assets. */
.s2-footer .s2-ficon:hover {
    color: #fff;
    transform: translateY(-2px);
}

.s2-footer .s2-ficon:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.s2-footer .s2-ficon svg {
    display: block;
}

/* Lets the footer's "back to top" link glide instead of teleporting. Global
   because it's the only way to reach the browser's own fragment navigation —
   safe here since the one other in-page anchor set (the wiki TOC) calls
   preventDefault and scrolls itself. Gated on the motion preference: an
   unrequested full-page glide is exactly what that setting exists to stop. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (max-width: 768px) {
    .s2-hero h1 {
        font-size: 2rem;
    }

    .s2-help {
        padding: 2rem 1.25rem;
    }
}

/* ========================================
   Support — Fixed full-page background (/support2)
   ======================================== */
.s3-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #2a0505;
    /* fallback behind the photo */
}

.s3-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ========================================
   Mega Nav — logo hover navigation (showcase)
   Progressive disclosure: hover logo -> tabs appear;
   hover a tab -> only that tab's own submenu appears below.
   ======================================== */
.mega-nav {
    position: fixed;
    left: var(--logo-left, 5.21%);
    top: var(--logo-top, 9.26%);
    z-index: 10001;
    width: calc(6.8vw * var(--logo-scale, 1));
    /* matches .site-logo width, so 50% below = logo's midpoint */
    /* Only the logo is interactive until the menu opens (avoids ghost hover zones) */
    pointer-events: none;
    font-family: 'Sora', sans-serif;
}

.mega-nav.open,
.mega-nav.menu-open {
    pointer-events: auto;
}

/* Logo inside the nav keeps its showcase sizing but flows in the bar */
.mega-nav .site-logo {
    position: static;
    display: block;
    width: 100%;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

/* Content pages (redpage.php with $useMegaNav) wrap the logo in a link back
   home — the homepage's own mega-nav has no such wrapper, so this is a no-op there. */
.mega-nav>a {
    display: block;
}

.mega-nav.open .site-logo {
    opacity: 1;
}

/* Everything (tabs + submenu) sits below the logo, starting at its horizontal midpoint.
   Tabs stack vertically (Contact / Legal / About 3Sigma); the submenu flyout opens
   to their right, both rendered as square-edged rectangle blocks. */
.mega-drop {
    position: absolute;
    top: 100%;
    left: 50%;
    padding-top: 14px;
    /* invisible bridge so hover survives the gap under the logo */
    display: flex;
    align-items: flex-start;
}

/* Step 1 — hovering the logo reveals only the three stacked tabs.
   Fixed height + gap give a predictable row pitch (48px) used below to align
   each submenu with the row of the tab that opened it. */
.mega-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}

.mega-nav.open .mega-tabs {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.mega-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 172px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 1rem;
    border-radius: 8px;
    background: rgba(154, 0, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, background 0.2s;
}

.mega-tab:hover {
    color: #fff;
}

.mega-tab.is-active {
    color: #fff;
    border-color: #9a0014;
    background: #9a0014;
}

/* Chevron points right, toward the flyout submenu */
.mega-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.7;
}

/* Step 2 — hovering a tab reveals only its own submenu, to the right of the tabs */
.mega-menu {
    padding-left: 12px;
    /* invisible bridge between the tab column and the flyout */
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.mega-nav.menu-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.mega-menu-inner {
    padding: 0.5rem;
    /* -8px cancels this box's own top padding, so its first link's top edge
       lines up exactly with the "Contact" row (the default active tab). */
    margin-top: -8px;
    background: transparent;
    border-radius: 10px;
    transition: margin-top 0.2s ease;
}

/* Shift the panel down to line up with whichever tab row opened it
   (row pitch = 40px tab height + 8px gap = 48px, minus the 8px top padding
   above so the link's own top edge — not the panel's — matches the tab row) */
.mega-nav[data-active-col="legal"] .mega-menu-inner {
    margin-top: 40px;
}

.mega-nav[data-active-col="sigma"] .mega-menu-inner {
    margin-top: 88px;
}

/* Only the column matching the currently hovered tab is rendered */
.mega-col {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
}

.mega-col.is-active {
    display: flex;
}

/* Sub-categories are rectangle blocks too, matching the tabs' visual weight */
.mega-col a {
    display: block;
    width: 172px;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    background: rgba(154, 0, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.mega-col a:hover {
    color: #fff;
    background: #9a0014;
    border-color: #9a0014;
    text-decoration: none;
}

/* ========================================
   Red cinematic content pages (v1 placeholders)
   Titles echo the homepage carousel (Sora, uppercase, deep red);
   body text white on the dark red -> black backdrop.
   ======================================== */
.rp-hero {
    margin: 1rem 0 3rem;
}

.rp-hero h1 {
    margin: 0 0 0.9rem;
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #9a0014;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.rp-hero p {
    margin: 0;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1.65;
}

.rp-section {
    margin: 2.75rem 0;
}

.rp-section h2 {
    margin: 0 0 1rem;
    font-family: 'Sora', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #9a0014;
    letter-spacing: 0.03em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

.rp-section p {
    margin: 0 0 1rem;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
    font-size: 0.98rem;
}

.rp-section ul,
.rp-section ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.75;
    font-size: 0.98rem;
}

.rp-section li {
    margin-bottom: 0.45rem;
}

.rp-section a {
    color: #ff8a96;
    text-decoration: underline;
}

.rp-section a:hover {
    color: #fff;
}

/* Small meta line under a legal page hero (e.g. "Last updated") */
.rp-updated {
    margin-top: 0.75rem !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rp-section p:last-child {
    margin-bottom: 0;
}

.rp-cta {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.8rem 1.9rem;
    background: #9a0014;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.rp-cta:hover {
    background: #c2001c;
    color: #fff;
    text-decoration: none;
}

/* Hero action row on the affiliate landing page — Become an Affiliate + Log In,
   same dark-red-to-bright-red hover as .rp-cta, just laid out as a pill with
   an icon and a trailing arrow. */
/* Opt-in centred hero (affiliate landing only — .rp-hero itself is shared by
   the legal/marketing pages, which stay left-aligned). The paragraph keeps its
   640px max-width, so auto margins are what actually pull it to the middle;
   text-align alone would only centre the lines inside a still-left block. */
.rp-hero-centered {
    text-align: center;
}

.rp-hero-centered p {
    margin-left: auto;
    margin-right: auto;
}

.rp-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.rp-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.9rem;
    background: #9a0014;
    border: 1px solid rgba(255, 61, 77, 0.5);
    border-radius: 14px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(154, 0, 20, 0.35);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rp-hero-btn:hover {
    background: #c2001c;
    box-shadow: 0 10px 30px rgba(194, 0, 28, 0.5);
    transform: translateY(-2px);
    color: #fff;
}

.rp-hero-btn-icon {
    display: flex;
}

.rp-hero-btn-icon svg {
    width: 18px;
    height: 18px;
}

.rp-hero-btn-arrow {
    display: flex;
    transition: transform 0.2s ease;
}

.rp-hero-btn-arrow svg {
    width: 16px;
    height: 16px;
}

.rp-hero-btn:hover .rp-hero-btn-arrow {
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .rp-hero-actions {
        justify-content: stretch;
    }

    .rp-hero-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Application form card — same red-card language as the mega-menu / support page */
.rp-form-card {
    margin: 3rem 0;
    background: rgba(154, 0, 20, 0.14);
    border: 1px solid rgba(154, 0, 20, 0.4);
    border-radius: 18px;
    padding: 2.25rem 2rem;
}

.rp-form-card h2 {
    margin: 0 0 0.4rem;
    font-family: 'Sora', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.03em;
}

.rp-form-sub {
    margin: 0 0 1.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.rp-form {
    max-width: 640px;
}

.rp-form .form-group label {
    color: rgba(255, 255, 255, 0.85);
}

.rp-form .form-group input,
.rp-form .form-group select,
.rp-form .form-group textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

.rp-form .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.rp-form .form-group input:focus,
.rp-form .form-group select:focus,
.rp-form .form-group textarea:focus {
    border-color: #fff;
}

.rp-form .form-group select option {
    color: #000;
}

.rp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rp-form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {

    .rp-form-row,
    .rp-form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* Custom "Choose File" control — the native button can't be styled directly,
   so the real input is visually hidden and a styled label acts as the button. */
.rp-file {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.rp-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rp-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    background: #9a0014;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.rp-file-btn:hover {
    background: #c2001c;
}

.rp-file-input:focus-visible+.rp-file-btn {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.rp-file-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* "What can you do?" — card grid, dark burgundy container */
.rp-checkbox-group {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background: #2a0510;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.rp-checkbox-group legend {
    padding: 0 0.2rem;
    margin-bottom: 0.9rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Conditional follow-up blocks, revealed by the checkbox group above */
.rp-conditional {
    display: none;
    margin: -0.5rem 0 1.5rem;
    padding: 1rem 1.15rem;
    background: rgba(154, 0, 20, 0.1);
    border: 1px solid rgba(154, 0, 20, 0.3);
    border-radius: 10px;
}

.rp-conditional.is-visible {
    display: block;
}

.rp-or-divider {
    display: block;
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ========================================
   /hiring2 — "What can you do?" card-grid variant
   ======================================== */
.rp-skills2-container {
    margin: 0 0 1.5rem;
    padding: 24px;
    background: linear-gradient(180deg, #32040a, #470810);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 16px;
}

.rp-skills2-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 0.35rem 0.8rem;
    background: #2a0510;
    border: 1px solid rgba(255, 60, 60, 0.45);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.rp-skills2-title {
    margin: 0 0 20px;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    font-family: 'Sora', sans-serif;
}

.rp-skills2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 860px) {
    .rp-skills2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .rp-skills2-grid {
        grid-template-columns: 1fr;
    }
}

.rp-skill2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 95px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.rp-skill2-card input[type="checkbox"],
.rp-skill2-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rp-skill2-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.rp-skill2-icon {
    color: rgba(255, 255, 255, 0.7);
    line-height: 0;
}

.rp-skill2-icon svg {
    width: 22px;
    height: 22px;
}

.rp-skill2-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}

.rp-skill2-radio::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #b41522;
    border-bottom: 2px solid #b41522;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s;
}

.rp-skill2-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 600;
}

.rp-skill2-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

.rp-skill2-card.is-selected {
    background: linear-gradient(180deg, #b41522, #8c0f19);
    border-color: rgba(255, 120, 120, 0.6);
    box-shadow: 0 0 20px rgba(255, 40, 40, 0.25);
}

.rp-skill2-card.is-selected .rp-skill2-icon {
    color: #fff;
}

.rp-skill2-card.is-selected .rp-skill2-label {
    color: #fff;
}

.rp-skill2-card.is-selected .rp-skill2-radio {
    background: #fff;
    border-color: #fff;
}

.rp-skill2-card.is-selected .rp-skill2-radio::after {
    opacity: 1;
}

.rp-skill2-card.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rp-skills2-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.rp-skills2-footer svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ========================================
   Adult content Yes/No — two compact, always-visible option cards
   ======================================== */
.rp-adult-question {
    display: block;
    margin: 0 0 0.6rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

.rp-adult-options {
    display: flex;
    gap: 0.75rem;
}

/* Extra .rp-adult-options qualifier: these labels sit inside a .form-group,
   whose generic `label { display: block }` rule would otherwise win and
   collapse the flex layout (the radio circle then renders as a thin bar). */
.rp-adult-options .rp-adult-card {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 1rem;
    background: #2a0510;
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
}

.rp-adult-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    /* Otherwise the browser's native radio hit-box (still there under the
       clip) can override the label's cursor: pointer with a text caret. */
    pointer-events: none;
}

.rp-adult-radio {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}

.rp-adult-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transition: opacity 0.15s;
}

.rp-adult-title {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    font-weight: 600;
}

.rp-adult-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.rp-adult-card.is-selected {
    background: #9a0014;
    border-color: #9a0014;
}

.rp-adult-card.is-selected .rp-adult-radio {
    border-color: #fff;
}

.rp-adult-card.is-selected .rp-adult-radio::after {
    opacity: 1;
}

.rp-adult-card.is-selected .rp-adult-title {
    color: #fff;
}

/* ========================================
   Affiliate Program — landing + sign up / login
   ======================================== */
.rp-hero-sub {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.rp-hero-sub a {
    color: #ff8a96;
    text-decoration: underline;
}

.rp-hero-sub a:hover {
    color: #fff;
}

.rp-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .rp-benefit-grid {
        grid-template-columns: 1fr;
    }
}

.rp-benefit-card {
    padding: 1.75rem;
    background: rgba(154, 0, 20, 0.12);
    border: 1px solid rgba(154, 0, 20, 0.35);
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rp-benefit-card:hover {
    transform: translateY(-6px);
    background: rgba(154, 0, 20, 0.2);
    border-color: rgba(255, 61, 77, 0.7);
    box-shadow: 0 12px 32px rgba(154, 0, 20, 0.35);
}

.rp-games-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .rp-games-grid {
        grid-template-columns: 1fr;
    }
}

.rp-benefit-card a {
    display: inline-block;
    margin-top: 0.6rem;
    color: #ff8a96;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.rp-benefit-card a:hover {
    color: #fff;
    text-decoration: underline;
}

.rp-benefit-figure {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Sora', sans-serif;
    font-size: 2.75rem;
    font-weight: 800;
    color: #ff3d4d;
    text-shadow: 0 0 24px rgba(255, 40, 40, 0.35);
}

.rp-benefit-card h3 {
    margin: 0 0 0.6rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}

.rp-benefit-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    line-height: 1.6;
}

.rp-form-subhead {
    margin: 0 0 1.1rem;
    padding-top: 0.5rem;
    color: #ff8a96;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rp-form-card h3.rp-form-subhead:first-child {
    padding-top: 0;
}

.rp-form-card-narrow {
    max-width: 420px;
}

/* Forgot-password card only: a hair wider than .rp-form-card-narrow so its
   footer line ("Remembered it? Back to login · Create an account") stays on
   one line instead of wrapping. Height is untouched — the card's height is
   just its content, and this only changes how that content wraps. */
.rp-form-card-forgot {
    max-width: 480px;
}

/* Auth pages (forgot / reset password) get the login pop-up's card instead of
   the flat one — they're the same moment in the same flow, so they should look
   like the same object whether it arrived as a pop-up or as a page. */
.rp-form-card-auth {
    background: linear-gradient(150deg, #4a0713 0%, #2a040c 45%, #1a0206 100%);
    border: 1px solid rgba(255, 90, 103, 0.32);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 70px rgba(194, 0, 28, 0.18);
}

.rp-form-legal {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    text-align: center;
}

.rp-form-legal a {
    color: #ff8a96;
    text-decoration: underline;
}

.rp-form-legal a:hover {
    color: #fff;
}

/* Text-styled trigger button (looks like the .rp-hero-sub link it replaced) */
.rp-link-btn {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    color: #ff8a96;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.rp-link-btn:hover {
    color: #fff;
}

/* ========================================
   Affiliate login pop-up
   ======================================== */
.rp-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.rp-modal.is-open {
    display: flex;
}

.rp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 0, 2, 0.75);
    backdrop-filter: blur(3px);
}

.rp-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.25rem 2rem;
    background: linear-gradient(150deg, #4a0713 0%, #2a040c 45%, #1a0206 100%);
    border: 1px solid rgba(255, 90, 103, 0.32);
    border-radius: 22px;
    /* Drop shadow to lift it off the page, plus a wide red bloom so the card
       reads as lit from within rather than pasted on. */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 70px rgba(194, 0, 28, 0.22);
}

.rp-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    display: flex;
    padding: 0.25rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.rp-modal-close svg {
    width: 20px;
    height: 20px;
}

.rp-modal-close:hover {
    color: #fff;
}

.rp-modal-title {
    margin: 0 0 1.75rem;
    font-family: 'Sora', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.01em;
}

/* "Forgot your password?" under the pop-up's submit button. */
.rp-modal-aside {
    margin: 1.4rem 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.rp-modal-aside a {
    color: #ff8a96;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rp-modal-aside a:hover {
    color: #fff;
}

/* ========================================
   Affiliate auth forms — login pop-up + forgot/reset password
   Scoped to .rp-auth-form so the sign-up and profile forms, which share
   .rp-form and .form-group, keep the plainer look they already have.
   ======================================== */
.rp-auth-form .form-group {
    margin-bottom: 1.35rem;
}

.rp-auth-form .form-group label {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
}

/* The icon sits inside the field, so it needs a positioned wrapper of its
   own — the input can't hold it and .form-group is too tall (it contains
   the label and any error, which would drag a centred icon off-centre). */
.rp-field-input {
    position: relative;
    display: block;
}

.rp-field-icon {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: #e8394f;
    /* Clicks pass through to the input underneath — the icon overlaps its
       first characters' worth of padding. */
    pointer-events: none;
}

.rp-field-icon svg {
    width: 20px;
    height: 20px;
}

.rp-auth-form .rp-field-input input {
    padding: 0.95rem 1.1rem 0.95rem 3.1rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
}

.rp-auth-form .rp-field-input input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.rp-auth-form .rp-field-input input:focus {
    border-color: rgba(255, 90, 103, 0.85);
    box-shadow: 0 0 0 3px rgba(226, 20, 47, 0.16);
}

/* Hint line under a field — icon + text on one baseline. */
.rp-field-hint {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.65rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

.rp-field-hint svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.rp-auth-actions {
    margin-top: 1.75rem;
}

/* Full-width gradient submit — the one action on these pages, so it gets
   the whole width rather than sitting inline like .rp-cta does elsewhere. */
.rp-auth-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.05rem 1.25rem;
    background: linear-gradient(135deg, #e5142f 0%, #b30019 58%, #8d0013 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(140, 0, 18, 0.38);
    transition: filter 0.2s, box-shadow 0.2s, transform 0.05s;
}

.rp-auth-btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 14px 30px rgba(180, 0, 24, 0.45);
    color: #fff;
    text-decoration: none;
}

.rp-auth-btn:active {
    transform: translateY(1px);
}

.rp-auth-btn svg {
    width: 20px;
    height: 20px;
}

/* Footer links, split off by a hairline rule. */
.rp-auth-foot {
    margin: 1.6rem 0 0;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.rp-auth-foot a {
    color: #ff8a96;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rp-auth-foot a:hover {
    color: #fff;
}

.rp-auth-foot-sep {
    padding: 0 0.45rem;
    color: rgba(255, 255, 255, 0.35);
}

/* ========================================
   Affiliate dashboard — sidebar layout
   ======================================== */
.aff-dash-shell {
    min-height: 100vh;
}

/* Hidden by default (a thin edge strip stays visible as a hint) — slides
   in over the content when the mouse hovers it (or it gains focus). */
.aff-dash-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    width: 240px;
    padding: 1.75rem 1.25rem;
    background: rgba(8, 0, 2, 0.96);
    border-right: 1px solid rgba(255, 80, 80, 0.18);
    transform: translateX(-224px);
    transition: transform 0.25s ease;
    outline: none;
}

.aff-dash-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 3px;
    background: rgba(255, 61, 77, 0.45);
}

.aff-dash-sidebar:hover,
.aff-dash-sidebar:focus-within {
    transform: translateX(0);
}

.aff-dash-logo {
    display: block;
    margin-bottom: 2rem;
}

.aff-dash-logo img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

.aff-dash-nav {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.aff-dash-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aff-dash-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.aff-dash-nav-icon {
    display: flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.aff-dash-nav-icon svg {
    width: 20px;
    height: 20px;
}

.aff-dash-nav-label {
    flex: 1;
}

a.aff-dash-nav-link:hover {
    background: rgba(154, 0, 20, 0.25);
    color: #fff;
}

.aff-dash-nav-link.is-active {
    background: rgba(255, 61, 77, 0.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 80, 80, 0.4);
}

.aff-dash-logout {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    color: rgba(255, 138, 150, 0.9);
}

.aff-dash-logout:hover {
    color: #fff;
}

/* padding-left here is purely additive on top of whatever centering
   .aff-dash-main-inner computes — never a hard override — so widening it
   on hover always pushes the content further right, regardless of viewport
   width. (A plain margin-left override on the centered box itself doesn't
   work: on wide screens, margin:auto can already exceed the hover value,
   so overriding it would snap the content backwards toward the sidebar.) */
.aff-dash-main {
    padding-left: 40px;
    transition: padding-left 0.35s ease;
}

.aff-dash-sidebar:hover~.aff-dash-main,
.aff-dash-sidebar:focus-within~.aff-dash-main {
    padding-left: 250px;
}

.aff-dash-main-inner {
    margin: 0 auto;
    padding: 2.5rem 3rem;
    max-width: 1100px;
}

.aff-dash-section h1 {
    margin: 0 0 0.75rem;
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.aff-dash-section p {
    margin: 0 0 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.aff-dash-placeholder-note {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

/* ========================================
   Affiliate profile — Profile Info / Email Preferences / Security tabs
   ======================================== */
.aff-profile-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.aff-profile-tab {
    padding: 0.75rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.aff-profile-tab:hover {
    color: rgba(255, 255, 255, 0.85);
}

.aff-profile-tab.is-active {
    color: #fff;
    border-color: #ff3d4d;
}

.aff-profile-subtitle {
    margin: -0.75rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

/* ========================================
   Creatives gallery (/affiliate-program/creatives)
   Two-step flow: format cards on top, then a stage that is either a single
   asset (preview + details + embed) or a search results grid. Everything here
   is prefixed .aff-cr- and used by that page only.
   ======================================== */
.aff-cr-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.aff-cr-lead {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.aff-cr-codeline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.aff-cr-helpbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.aff-cr-helpbtn svg {
    width: 16px;
    height: 16px;
}

.aff-cr-helpbtn:hover,
.aff-cr-helpbtn.is-on {
    color: #fff;
    border-color: rgba(255, 80, 100, 0.55);
    background: rgba(180, 21, 34, 0.18);
}

.aff-cr-help {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: rgba(180, 21, 34, 0.1);
    border: 1px solid rgba(255, 80, 100, 0.28);
    border-radius: 14px;
}

.aff-cr-help ul {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
    line-height: 1.7;
}

.aff-cr-help strong {
    color: #fff;
}

/* ---- Step headings ---- */
.aff-cr-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 2rem 0 1rem;
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.aff-cr-stepnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 80, 100, 0.6);
    background: rgba(180, 21, 34, 0.2);
    color: #ff8a96;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ---- Format cards ---- */
.aff-cr-formats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .aff-cr-formats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .aff-cr-formats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.aff-cr-fcard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 172px;
    padding: 1.5rem 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.aff-cr-fcard:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
}

.aff-cr-fcard.is-selected {
    background: rgba(180, 21, 34, 0.16);
    border-color: #d81f33;
    box-shadow: 0 0 26px rgba(216, 31, 51, 0.25);
}

.aff-cr-fcard:focus-visible {
    outline: 2px solid #ff5064;
    outline-offset: 2px;
}

/* The tick only exists on the selected card — an empty circle on every other
   one reads as "checkbox you forgot to tick" rather than "not chosen". */
.aff-cr-fcheck {
    position: absolute;
    top: 11px;
    right: 11px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #d81f33;
    color: #fff;
}

.aff-cr-fcheck svg {
    width: 12px;
    height: 12px;
}

.aff-cr-fcard.is-selected .aff-cr-fcheck {
    display: flex;
}

.aff-cr-ficon {
    display: flex;
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.2s;
}

.aff-cr-ficon svg {
    width: 34px;
    height: 34px;
}

.aff-cr-fcard.is-selected .aff-cr-ficon {
    color: #ff5064;
}

.aff-cr-fname {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.aff-cr-fcard.is-selected .aff-cr-fname {
    color: #fff;
}

.aff-cr-fdims {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}

.aff-cr-fcount {
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ---- Toolbar: search + type chips ---- */
.aff-cr-toolbar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.aff-cr-searchbox {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
}

.aff-cr-searchic {
    position: absolute;
    left: 1rem;
    display: flex;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.aff-cr-searchic svg {
    width: 17px;
    height: 17px;
}

.aff-cr-searchbox input[type="search"] {
    width: 100%;
    padding: 0.85rem 2.75rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aff-cr-searchbox input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.aff-cr-searchbox input[type="search"]:focus {
    outline: none;
    border-color: #ff5064;
    box-shadow: 0 0 0 3px rgba(216, 31, 51, 0.16);
}

/* Chrome draws its own clear cross on type=search; ours sits in the same
   place and is the one wired to the state, so hide the native one. */
.aff-cr-searchbox input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.aff-cr-clear {
    position: absolute;
    right: 0.85rem;
    display: flex;
    padding: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.aff-cr-clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.aff-cr-clear svg {
    width: 15px;
    height: 15px;
}

.aff-cr-chips {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.aff-cr-chip {
    padding: 0.5rem 1.15rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.aff-cr-chip:hover {
    color: #fff;
}

.aff-cr-chip.is-active {
    color: #ff5064;
    border-color: rgba(216, 31, 51, 0.75);
    background: rgba(180, 21, 34, 0.16);
}

/* ---- Stage panel ---- */
.aff-cr-panel {
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(216, 31, 51, 0.32);
    border-radius: 18px;
}

/* Only present in the single-asset drill-in, reached via a grid card's Preview. */
.aff-cr-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    padding: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}

.aff-cr-back:hover {
    color: #fff;
}

.aff-cr-back svg {
    width: 15px;
    height: 15px;
}

.aff-cr-panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.aff-cr-panelhead-l {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.aff-cr-panellbl {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 600;
}

.aff-cr-panelic {
    display: flex;
    color: rgba(255, 255, 255, 0.75);
}

.aff-cr-panelic svg {
    width: 24px;
    height: 24px;
}

.aff-cr-panelname {
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.aff-cr-dimpill {
    padding: 0.22rem 0.6rem;
    background: rgba(180, 21, 34, 0.25);
    border: 1px solid rgba(255, 80, 100, 0.35);
    border-radius: 7px;
    color: #ff8a96;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
}

.aff-cr-availpill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    font-weight: 600;
}

.aff-cr-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc84;
}

/* ---- Body: preview | details ---- */
.aff-cr-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1080px) {
    .aff-cr-body {
        grid-template-columns: 1fr;
    }
}

.aff-cr-stageview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aff-cr-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    padding: 1.25rem;
    background: #0c0206;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

/* Ad creatives are fixed IAB sizes, not free-crop photos — a 160x600
   skyscraper and a 1920x1080 hero both have to fit whole, so contain, never
   cover, and never upscale past their natural size. */
.aff-cr-previewmedia {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.aff-cr-typebadge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 700;
}

.aff-cr-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.aff-cr-arrow:hover {
    background: rgba(180, 21, 34, 0.8);
    border-color: rgba(255, 120, 120, 0.6);
}

.aff-cr-arrow svg {
    width: 18px;
    height: 18px;
}

.aff-cr-prev {
    left: 12px;
}

.aff-cr-next {
    right: 12px;
}

.aff-cr-counter {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    text-align: center;
}

.aff-cr-thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.aff-cr-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: 62px;
    padding: 0;
    background: #0c0206;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.aff-cr-thumb:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.aff-cr-thumb.is-active {
    border-color: #d81f33;
}

.aff-cr-thumbmedia {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aff-cr-thumbcheck {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #d81f33;
    color: #fff;
}

.aff-cr-thumbcheck svg {
    width: 10px;
    height: 10px;
}

.aff-cr-thumb.is-active .aff-cr-thumbcheck {
    display: flex;
}

/* ---- Details column ---- */
.aff-cr-details {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.aff-cr-dtitle {
    margin: 0 0 0.75rem;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
}

.aff-cr-details .aff-cr-dtitle:not(:first-child) {
    margin-top: 1.25rem;
}

.aff-cr-file {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.aff-cr-fileic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.7);
}

.aff-cr-fileic svg {
    width: 19px;
    height: 19px;
}

.aff-cr-filename {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    word-break: break-all;
}

.aff-cr-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.4rem;
    background: rgba(180, 21, 34, 0.3);
    border-radius: 5px;
    color: #ff8a96;
    font-size: 0.66rem;
    font-weight: 700;
    vertical-align: middle;
}

.aff-cr-filemeta {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

.aff-cr-tech {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 560px) {
    .aff-cr-tech {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.aff-cr-tech>div {
    padding: 0.7rem 0.85rem;
    background: rgba(12, 2, 6, 0.9);
}

.aff-cr-tech span {
    display: block;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
}

.aff-cr-tech strong {
    display: block;
    margin-top: 0.15rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    word-break: break-all;
}

.aff-cr-tech a {
    color: #ff8a96;
    text-decoration: none;
}

.aff-cr-tech a:hover {
    text-decoration: underline;
}

.aff-cr-embedhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    /* The heading inside is :first-child of this wrapper, so it never picks up
       the between-sections margin — the wrapper carries it instead. */
    margin-top: 1.25rem;
}

.aff-cr-embednote {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

.aff-cr-code {
    position: relative;
    /* The download button below uses margin-top:auto to sit at the bottom of
       the column, which collapses to nothing on tall content — this keeps a
       gap either way. */
    margin-bottom: 1.25rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

/* No max-height/overflow here on purpose: production URLs carry an extra
   /public segment local URLs don't, so a fixed cap that looked fine locally
   clipped the snippet behind an internal scrollbar in prod. The block just
   grows to fit whatever the embed code actually is. */
.aff-cr-code pre {
    margin: 0;
    padding: 0.9rem 1rem;
}

.aff-cr-code code {
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Courier New', monospace;
    font-size: 0.76rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
}

.cr-tok-tag {
    color: #ff8a96;
}

.cr-tok-attr {
    color: #6fd3ff;
}

.cr-tok-str {
    color: #8ce99a;
}

.aff-cr-copybtn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: rgba(180, 21, 34, 0.85);
    border: 1px solid rgba(255, 120, 120, 0.5);
    border-radius: 7px;
    color: #fff;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.aff-cr-copybtn:hover {
    background: #d81f33;
}

.aff-cr-copybtn svg {
    width: 13px;
    height: 13px;
}

.aff-cr-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Pins the download to the bottom of the column so it lines up with the
       thumbnail strip opposite, whatever the filename wraps to. */
    margin-top: auto;
    padding: 0.95rem 1rem;
    background: linear-gradient(180deg, #d81f33, #a0111f);
    border: 1px solid rgba(255, 120, 120, 0.45);
    border-radius: 11px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.2s;
}

.aff-cr-dl:hover {
    filter: brightness(1.15);
    color: #fff;
    text-decoration: none;
}

.aff-cr-dl svg {
    width: 17px;
    height: 17px;
}

/* ---- Results grid ---- */
.aff-cr-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1080px) {
    .aff-cr-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .aff-cr-results {
        grid-template-columns: 1fr;
    }
}

.aff-cr-rcard {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.aff-cr-rcard:hover {
    border-color: rgba(216, 31, 51, 0.6);
}

.aff-cr-rmedia {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    padding: 0.75rem;
    background: #0c0206;
    cursor: pointer;
}

.aff-cr-rmediaimg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.aff-cr-rdims {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.aff-cr-rpreview {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.aff-cr-rpreview svg {
    width: 14px;
    height: 14px;
}

.aff-cr-rmedia:hover .aff-cr-rpreview,
.aff-cr-rmedia:focus-visible .aff-cr-rpreview {
    opacity: 1;
}

.aff-cr-rinfo {
    padding: 0.85rem 0.9rem 0.7rem;
}

.aff-cr-rname {
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    word-break: break-all;
}

.aff-cr-rmeta {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

.aff-cr-ractions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.aff-cr-ractions button,
.aff-cr-ractions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 0.5rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.aff-cr-ractions button {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.aff-cr-ractions button:hover,
.aff-cr-ractions a:hover {
    background: rgba(180, 21, 34, 0.22);
    color: #fff;
    text-decoration: none;
}

.aff-cr-ractions svg {
    width: 14px;
    height: 14px;
}

.aff-cr-showing {
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.82rem;
    text-align: center;
}

/* ---- Copy confirmation toast ---- */
.aff-cr-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.35rem;
    background: rgba(10, 30, 18, 0.96);
    border: 1px solid rgba(61, 220, 132, 0.5);
    border-radius: 12px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, 12px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.aff-cr-toast.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
}

.aff-cr-nojs {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.9;
}

.aff-profile-layout {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
}

.aff-profile-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.aff-profile-panel {
    display: none;
}

.aff-profile-panel.is-active {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* A card dropped straight into a section had nothing above it: the profile
   page's 1.5rem gaps come from .aff-profile-panel's flex, and Tracking Links /
   Statistics / Payments / Creatives have no such wrapper — so their cards sat
   flush against each other and against the subtitle (which zeroes its own
   bottom margin). The child combinator keeps this off the profile page, where
   cards are nested deeper; against .aff-tiles' existing 2rem the margins just
   collapse, so spacing there is unchanged. */
.aff-dash-section>*+.aff-profile-card {
    margin-top: 1.5rem;
}

.aff-profile-card {
    padding: 1.75rem;
    background: rgba(154, 0, 20, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 16px;
}

.aff-profile-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.aff-profile-card-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(154, 0, 20, 0.25);
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-radius: 50%;
    color: #ff8a96;
}

.aff-profile-card-icon svg {
    width: 20px;
    height: 20px;
}

.aff-profile-card-header h2 {
    margin: 0 0 0.25rem;
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.aff-profile-card-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.aff-select-icon {
    position: relative;
}

.aff-select-icon svg {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.aff-select-icon input {
    padding-left: 2.5rem;
}

/* ---- Custom dropdown (Messenger Type, Preferred Language) ----
   A native <select>'s open option list can't be fully themed in every
   browser, so this is built from scratch: a hidden input holds the real
   form value, a styled button shows the current choice, and a styled
   panel replaces the native option list. */
.aff-cs {
    position: relative;
}

.aff-cs-trigger {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #0f0f0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s;
}

.aff-cs.is-open .aff-cs-trigger {
    border-color: #ff3d4d;
    box-shadow: 0 0 0 1px rgba(255, 61, 77, 0.4);
}

.aff-cs-trigger-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.aff-cs-trigger-icon svg {
    width: 18px;
    height: 18px;
}

.aff-cs-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aff-cs-chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #ff8a96;
    transition: transform 0.2s ease;
}

.aff-cs.is-open .aff-cs-chevron {
    transform: rotate(180deg);
}

.aff-cs-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.5rem;
    background: #150307;
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.aff-cs.is-open .aff-cs-panel {
    display: block;
}

.aff-cs-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    color: #e0e0e0;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.aff-cs-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Keyboard cursor. Same weight as :hover so arrowing through the list feels
   like moving the mouse down it — the pointer and the keyboard shouldn't
   disagree about which row is "next". */
.aff-cs-option.is-active {
    background: rgba(255, 255, 255, 0.1);
}

/* Search box, added by custom-select.js once a list passes 10 options —
   without it, picking a country means scrolling 160 rows. Sticky so it stays
   reachable while the list scrolls under it. */
.aff-cs-search {
    position: sticky;
    top: -0.5rem;
    z-index: 1;
    margin: -0.5rem -0.5rem 0.4rem;
    padding: 0.5rem;
    background: #150307;
}

.aff-cs-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.aff-cs-search input:focus {
    border-color: rgba(255, 90, 103, 0.6);
}

.aff-cs-search input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.aff-cs-empty {
    padding: 0.7rem 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    text-align: center;
}

.aff-cs-option.is-selected {
    background: rgba(154, 0, 20, 0.35);
    color: #ff8a96;
}

.aff-cs-option-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.6);
}

.aff-cs-option-icon svg {
    width: 20px;
    height: 20px;
}

.aff-cs-flag {
    font-size: 1.15rem;
    line-height: 1;
}

.aff-cs-option-label {
    flex: 1;
}

.aff-cs-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #ff8a96;
    opacity: 0;
}

.aff-cs-option.is-selected .aff-cs-check {
    opacity: 1;
}

.aff-accent-text {
    color: #ff8a96;
}

.aff-hint-icon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.aff-hint-icon svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

/* ---- Right-hand account-summary card ---- */
.aff-profile-sidebar {
    flex: 0 0 280px;
}

.aff-profile-summary-card {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    background: rgba(154, 0, 20, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 16px;
    text-align: center;
}

.aff-profile-summary-top {
    flex: 0 0 auto;
}

.aff-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem;
    background: linear-gradient(180deg, #b41522, #8c0f19);
    border-radius: 50%;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.aff-profile-summary-card h3 {
    margin: 0 0 0.75rem;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.aff-profile-badge {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border: 1px solid rgba(255, 80, 80, 0.5);
    border-radius: 999px;
    color: #ff8a96;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Fills whatever vertical space the stretched card has beyond its natural
   content height, spreading the 3 rows out instead of leaving one big gap
   below the last row. */
.aff-profile-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 1.5rem;
}

.aff-profile-stat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.aff-profile-stat-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
}

.aff-profile-stat-icon svg {
    width: 19px;
    height: 19px;
}

.aff-profile-stat-icon.is-good {
    background: #1a8a4a;
}

.aff-profile-stat-icon.is-warn {
    background: #b4740f;
}

.aff-profile-stat-icon.is-neutral {
    background: rgba(255, 255, 255, 0.15);
}

.aff-profile-stat-label {
    flex: 1;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    line-height: 1.3;
}

.aff-profile-stat-value {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
}

.aff-profile-stat-value.is-good {
    color: #3ddc84;
}

.aff-profile-stat-value.is-warn {
    color: #f5a623;
}

.aff-cta-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.aff-cta-icon svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 900px) {
    .aff-profile-layout {
        flex-direction: column;
    }

    .aff-profile-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

.aff-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.aff-check-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    font-weight: 500;
}

.aff-check-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.aff-check-icon svg {
    width: 18px;
    height: 18px;
}

.aff-check-label {
    flex: 1;
}

/* iOS-style toggle switch — the real checkbox sits transparent on top,
   .aff-toggle-track is the painted pill + knob driven by :checked. */
.aff-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
}

.aff-toggle input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.aff-toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.aff-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

.aff-toggle input:checked+.aff-toggle-track {
    background: linear-gradient(180deg, #ff5064, #9a0014);
}

.aff-toggle input:checked+.aff-toggle-track::after {
    transform: translateX(18px);
}

/* Account Updates — mandatory, always on: greyed out and not clickable. */
.aff-check-row.is-locked {
    color: rgba(255, 255, 255, 0.4);
}

.aff-check-row.is-locked .aff-check-icon {
    color: rgba(255, 255, 255, 0.3);
}

.aff-check-row.is-locked .aff-toggle input {
    cursor: not-allowed;
}

.aff-check-row.is-locked .aff-toggle input:checked+.aff-toggle-track {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 780px) {
    .aff-dash-main {
        padding-left: 18px;
    }

    .aff-dash-sidebar:hover~.aff-dash-main,
    .aff-dash-sidebar:focus-within~.aff-dash-main {
        padding-left: 228px;
    }

    .aff-dash-main-inner {
        padding: 1.75rem 1.25rem 1.75rem 1.5rem;
    }
}

/* ========================================
   Alternate left nav — minimalist, vertical, always-expanded menu tried
   out on content pages instead of the homepage's hover fly-out mega-nav.
   No JS, no accordion: every section heading and its links are visible
   at once. The outer box is pinned to the exact same left/top/width as
   .mega-nav / .site-logo, so the logo is pixel-identical to the homepage;
   the link list lives in a separate, wider inner wrapper centered under
   that box (left:50% + translateX(-50%), same trick .mega-drop uses)
   so the logo's own size never has to stretch to fit the text.
   ======================================== */
.alt-nav {
    position: fixed;
    left: var(--logo-left, 5.21%);
    top: var(--logo-top, 9.26%);
    z-index: 10001;
    width: calc(6.8vw * var(--logo-scale, 1));
    font-family: 'Sora', sans-serif;
}

.alt-nav-logo {
    display: block;
    width: 100%;
}

.alt-nav-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.alt-nav-menu {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    max-width: 90vw;
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.alt-nav-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 0;
    /* Thin, dark-red hairline — kept low-opacity so it stays discreet
       rather than reading as a boxed card border. */
    border-top: 1px solid rgba(120, 4, 16, 0.4);
    width: 100%;
}

.alt-nav-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.alt-nav-heading {
    color: #9a0014;
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.alt-nav-link {
    color: rgba(245, 240, 238, 0.6);
    font-family: 'Poppins', sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.15s ease;
}

.alt-nav-link:hover {
    color: rgba(245, 240, 238, 0.95);
}

/* Active-page indicator: brighter white text is enough on its own, no
   filled button / background block / dot needed. */
.alt-nav-link.is-active {
    color: #fff;
}

@media (max-width: 900px) {
    .alt-nav {
        position: static;
        left: auto;
        top: auto;
        width: 130px;
        margin: 0 auto;
        padding: 1.5rem 0 0;
    }

    .alt-nav-menu {
        width: 240px;
    }

    /* The 2.5rem nudge on these exists only to clear the fixed left nav on
       desktop. Below this breakpoint the nav is static (in flow, above the
       header), so the nudge just shifted the whole page right and clipped
       its right edge (body hides overflow-x). */
    .s2-header-mega,
    .s2-main-mega {
        left: 0;
    }
}

/* ---- Two-panel alt-nav: the normal site menu + the wiki menu ----
   Only the panel matching the nav's data-panel shows; the "Wiki" and "Back
   to site menu" switches flip between them (see redpage.php). */
.alt-nav-panel {
    display: none;
}

.alt-nav[data-panel="site"] .alt-nav-panel[data-panel="site"],
.alt-nav[data-panel="wiki"] .alt-nav-panel[data-panel="wiki"] {
    display: block;
}

/* Compact "Back to menu" button at the top of the wiki panel — returns the
   nav to the normal site menu. Deliberately a discreet link, not a framed
   pill, so it doesn't crowd or distort the menu. */
.alt-nav-back {
    display: block;
    width: 100%;
    margin: 0 0 0.3rem;
    padding: 0.3rem 0;
    border: 0;
    background: none;
    color: rgba(245, 240, 238, 0.55);
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.2s ease;
}

.alt-nav-back:hover {
    color: #ff8a96;
}

/* Phones/tablets can't run the launcher (the floating Download pill only
   leads them to the desktop-only notice) and at phone widths it shrinks to
   a broken-looking chip floating over the text — same decision as the
   homepage: no download UI on mobile. */
@media (max-width: 768px) {
    .s2-body .cta-btn {
        display: none !important;
    }
}

/* ========================================
   Studio landing page (/games/3sigma_studios)
   The visitor's first screen — glass cards, a teaser-video grid, red-glow
   accents. Self-contained .sg-* block; lives inside .s2-main's centered
   column, so nothing here has to fight the fixed alt-nav on the left.
   ======================================== */
.sg-landing {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

.sg-landing p {
    max-width: 680px;
    margin: 0 auto 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
}

.sg-h2 {
    margin: 0 0 1.2rem;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}

/* thin red hairline under each section heading */
.sg-h2::after {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 3px;
    background: linear-gradient(90deg, #c2001c, rgba(154, 0, 20, 0));
}

/* ---- Hero ---- */
.sg-hero {
    text-align: center;
    margin: 0.5rem 0 3.75rem;
}

.sg-eyebrow {
    display: inline-block;
    margin-bottom: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #ff8a96;
}

.sg-hero-title {
    margin: 0 0 1.2rem;
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.2rem, 6.2vw, 3.7rem);
    font-weight: 800;
    line-height: 1.04;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 6px 34px rgba(0, 0, 0, 0.55);
}

.sg-accent {
    background: linear-gradient(90deg, #ff5a67, #c2001c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sg-hero-lead {
    max-width: 640px !important;
    font-size: 1.12rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.sg-hero-video {
    position: relative;
    max-width: 720px;
    margin: 2.4rem auto 2.6rem;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 80, 80, 0.28);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(154, 0, 20, 0.25);
}

.sg-hero-video video {
    display: block;
    width: 100%;
    height: auto;
}

/* soft red vignette hugging the video frame */
.sg-hero-video-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 60px rgba(120, 0, 12, 0.45);
    border-radius: 16px;
}

.sg-hero-copy p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.98rem;
}

/* ---- Generic section ---- */
.sg-section {
    margin: 3.25rem 0;
    text-align: center;
}

/* a highlighted line that carries the manifesto beats */
.sg-pull {
    max-width: 620px !important;
    margin: 1.4rem auto 0 !important;
    font-family: 'Sora', sans-serif;
    font-size: 1.16rem !important;
    font-weight: 600;
    line-height: 1.5 !important;
    color: #fff !important;
}

/* ---- Feature chips ---- */
.sg-chips {
    list-style: none;
    margin: 1.4rem auto 1.6rem;
    padding: 0;
    max-width: 640px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.sg-chips li {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(154, 0, 20, 0.14);
    border: 1px solid rgba(255, 80, 80, 0.28);
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.sg-chips li:hover {
    transform: translateY(-2px);
    background: rgba(154, 0, 20, 0.32);
    border-color: #c2001c;
}

/* ---- Teaser video grid ---- */
.sg-video-grid {
    margin: 2rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.sg-video-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 80, 80, 0.2);
    background: #0c0206;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sg-video-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity 0.25s ease, transform 0.4s ease;
}

.sg-video-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem 0.9rem 0.75rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.sg-video-card:hover {
    transform: translateY(-4px);
    border-color: #c2001c;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 26px rgba(154, 0, 20, 0.4);
}

.sg-video-card:hover video {
    opacity: 1;
    transform: scale(1.05);
}

/* ---- "Pas de …" negative badges ---- */
.sg-nolist {
    margin: 1.6rem auto;
    max-width: 640px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.sg-no {
    position: relative;
    padding: 0.55rem 1rem 0.55rem 2.1rem;
    border-radius: 10px;
    background: rgba(20, 3, 7, 0.6);
    border: 1px solid rgba(255, 80, 80, 0.22);
    color: rgba(255, 255, 255, 0.86);
    font-family: 'Poppins', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
}

.sg-no::before {
    content: '\00d7';
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ff3d4d;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

/* ---- Decision cards ---- */
.sg-decisions {
    margin: 1.8rem auto;
    max-width: 640px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.sg-decision {
    padding: 1.2rem 0.5rem;
    border-radius: 12px;
    background: rgba(20, 3, 7, 0.55);
    border: 1px solid rgba(255, 80, 80, 0.2);
    font-family: 'Sora', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sg-decision span {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #ff8a96;
}

.sg-decision:hover {
    transform: translateY(-3px);
    border-color: #c2001c;
    background: rgba(154, 0, 20, 0.28);
}

/* ---- Vision / closing card ---- */
.sg-vision {
    margin: 3.5rem 0 1rem;
    padding: 2.6rem 2rem;
    text-align: center;
    border-radius: 18px;
    background: radial-gradient(120% 140% at 50% 0%, rgba(154, 0, 20, 0.28), rgba(20, 3, 7, 0.55) 60%);
    border: 1px solid rgba(255, 80, 80, 0.3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 50px rgba(120, 0, 12, 0.2);
}

.sg-cta {
    display: inline-block;
    margin-top: 1.6rem;
    padding: 0.95rem 2.4rem;
    background: #9a0014;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sg-cta:hover {
    background: #c2001c;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(154, 0, 20, 0.5);
}

/* one-time entrance for the hero (ends visible even if animations are off) */
@keyframes sgRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sg-rise {
    animation: sgRise 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .sg-rise {
        animation: none;
    }
}

@media (max-width: 640px) {
    .sg-video-grid {
        grid-template-columns: 1fr;
    }

    .sg-decisions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Jomere game landing (/games/jomere) — views/games/_jomere.php
   Same red/dark charte as .sg-*, its own component set. Lives inside
   .s2-main (max 860px).
   ============================================================ */
.jo-page {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

/* ---- Shared headings ---- */
.jo-h2 {
    margin: 0 0 0.9rem;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}

.jo-h2::after {
    content: '';
    display: block;
    width: 58px;
    height: 3px;
    margin: 0.7rem auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(154, 0, 20, 0), #c2001c, rgba(154, 0, 20, 0));
}

.jo-sub {
    max-width: 620px;
    margin: 0 auto 1.8rem;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.98rem;
}

.jo-lead {
    max-width: 640px;
    margin: 0 auto 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.04rem;
}

.jo-lead strong {
    color: #ff8a96;
    font-weight: 700;
}

/* ---- Hero ---- */
.jo-hero {
    position: relative;
    margin: 0.5rem 0 3.5rem;
    padding: 4.5rem 1.5rem;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(255, 80, 80, 0.28);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(120, 0, 12, 0.35);
}

.jo-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    filter: brightness(0.42) saturate(1.1);
    z-index: 0;
}

/* when the hero background is a looping trailer <video> instead of a still
   (Body Count, Murder & Mystery): fills the same box, object-fit stands in
   for background-size, and pointer-events:none keeps the cursor out so it
   can never be paused/scrubbed — it just plays on its own. */
.jo-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.jo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(120% 120% at 50% 15%, rgba(154, 0, 20, 0.55), rgba(8, 0, 2, 0.82) 70%);
}

.jo-hero-inner {
    position: relative;
    z-index: 2;
}

.jo-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #ff8a96;
}

.jo-title {
    margin: 0 0 0.9rem;
    font-family: 'Sora', sans-serif;
    font-size: clamp(3rem, 11vw, 6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(194, 0, 28, 0.4);
}

.jo-tagline {
    margin: 0 auto 1.8rem;
    max-width: 460px;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1rem, 2.6vw, 1.25rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

/* pulsing "police arrive in 60:00" badge */
.jo-countdown {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 2rem;
    padding: 0.85rem 1.9rem;
    border-radius: 14px;
    background: rgba(12, 2, 6, 0.55);
    border: 1px solid rgba(255, 61, 77, 0.45);
    box-shadow: 0 0 24px rgba(194, 0, 28, 0.35);
    animation: joPulse 2.4s ease-in-out infinite;
}

.jo-countdown-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 138, 150, 0.9);
}

.jo-countdown-time {
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ff3d4d;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(255, 61, 77, 0.6);
}

@keyframes joPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(194, 0, 28, 0.28);
    }

    50% {
        box-shadow: 0 0 34px rgba(194, 0, 28, 0.6);
    }
}

/* ---- Generic section ---- */
.jo-section {
    margin: 3.5rem 0;
    text-align: center;
}

/* ---- Character cards ---- */
/* Jomere gets a slightly larger lead card; everyone else is a compact
   horizontal row (portrait thumbnail + text) stacked in a list next to it.
   A literal 2x2 grid of tall portrait cards was tried first but at this
   column width each card came out ~150px wide — too narrow for the
   description text, which wrapped to 6-7 lines and made every card look
   broken and disproportionate. Wide, short rows fix both the "too
   vertical" and "not equitable" issues at once. */
.jo-cast {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    /* right column now matches the lead card's full height */
    gap: 1.2rem;
    text-align: left;
}

.jo-cast-grid {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
    /* fills remaining height when wrapped in .jo-cast-side alongside a toggle row */
}

.jo-char {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(20, 3, 7, 0.55);
    border: 1px solid rgba(255, 80, 80, 0.2);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.jo-char-media {
    position: relative;
    /* shoot photos are portrait (934x1400) — keep a portrait crop so faces
       aren't cut by a landscape window */
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.jo-char-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jo-char-tag {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(154, 0, 20, 0.85);
    border: 1px solid rgba(255, 138, 150, 0.5);
    font-family: 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(4px);
}

.jo-char-body {
    padding: 1.1rem 1.2rem 1.4rem;
}

.jo-char-name {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}

.jo-char-role {
    display: inline-block;
    margin-bottom: 0.7rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ff8a96;
}

.jo-char-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.92rem;
    line-height: 1.6;
}

.jo-char:hover {
    transform: translateY(-4px);
    border-color: #c2001c;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 26px rgba(154, 0, 20, 0.35);
}

.jo-char:hover .jo-char-media img {
    transform: scale(1.06);
}

/* -- Lead card (Jomere): wider, landscape crop instead of tall portrait,
      everything scaled up. object-position is pulled up from dead-center
      since these are portrait shoot photos with the face near the top —
      a centered crop on a 4:3 window cut heads off. -- */
.jo-char-lead .jo-char-media {
    aspect-ratio: 4 / 3;
}

.jo-char-lead .jo-char-media img {
    object-position: 50% 12%;
}

.jo-char-lead.is-swapping .jo-char-media img,
.jo-char-lead.is-swapping .jo-char-name,
.jo-char-lead.is-swapping .jo-char-role,
.jo-char-lead.is-swapping .jo-char-desc,
.jo-char-lead.is-swapping .jo-char-tag {
    animation: joSwapIn 0.35s ease-out;
}

@keyframes joSwapIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jo-char-lead .jo-char-tag {
    top: 1.1rem;
    left: 1.1rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.7rem;
}

.jo-char-lead .jo-char-body {
    padding: 1.6rem 1.8rem 2rem;
}

.jo-char-lead .jo-char-name {
    font-size: clamp(2rem, 4.2vw, 2.8rem);
}

.jo-char-lead .jo-char-role {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.jo-char-lead .jo-char-desc {
    font-size: 1rem;
    line-height: 1.65;
}

/* -- Supporting cast rows: compact, horizontal (thumbnail + text side by
      side) instead of tall stacked portrait cards -- */
.jo-cast-grid .jo-char {
    flex: 1 1 0;
    /* grow evenly to fill the column's full height — no dead gaps */
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem 0.7rem 0.7rem;
}

.jo-cast-grid .jo-char-media {
    /* natural row content is ~91px tall but flex:1 stretches the row to
       ~126px (537px lead / 4 rows) — sized up to use that slack instead
       of leaving dead padding above/below a small thumbnail */
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    aspect-ratio: auto;
    border-radius: 10px;
}

.jo-cast-grid .jo-char-tag {
    top: 0.3rem;
    left: 0.3rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.48rem;
    letter-spacing: 0.06em;
}

.jo-cast-grid .jo-char-body {
    padding: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.jo-cast-grid .jo-char-name {
    font-size: 1.05rem;
}

.jo-cast-grid .jo-char-role {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.68rem;
}

.jo-cast-grid .jo-char-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Clicking a row swaps it into the lead card above — make that obvious:
   pointer cursor, a lift on hover, and a small "feature" arrow that fades
   in so it doesn't just look like a static bio card. */
.jo-char-swappable {
    cursor: pointer;
    outline-offset: 3px;
}

.jo-char-swappable:hover {
    transform: translateY(-2px);
    border-color: #c2001c;
    background: rgba(154, 0, 20, 0.16);
}

.jo-char-swappable::after {
    content: '↑ Feature';
    align-self: center;
    flex: 0 0 auto;
    margin-left: 0.4rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(194, 0, 28, 0.85);
    font-family: 'Poppins', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.jo-char-swappable:hover::after,
.jo-char-swappable:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Mechanics ---- */
.jo-mechanics {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.jo-mech {
    padding: 1.5rem 1rem;
    border-radius: 14px;
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.2);
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.jo-mech:hover {
    transform: translateY(-3px);
    border-color: #c2001c;
    background: rgba(154, 0, 20, 0.18);
}

.jo-mech-icon {
    display: block;
    font-size: 1.9rem;
    margin-bottom: 0.6rem;
}

.jo-mech-title {
    margin: 0 0 0.4rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
}

.jo-mech-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
}

/* ---- Animated move demo ---- */
.jo-demo {
    margin: 2rem auto 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 80, 80, 0.28);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(154, 0, 20, 0.22);
}

.jo-demo img,
.jo-demo video {
    display: block;
    width: 100%;
    height: auto;
}

.jo-demo figcaption,
.jo-shot figcaption {
    padding: 0.7rem 1rem;
    background: rgba(12, 2, 6, 0.7);
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Screenshots (stacked, full width) ---- */
.jo-shots {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.jo-shot {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 80, 80, 0.2);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    transition: transform 0.28s ease, border-color 0.28s ease;
}

.jo-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.jo-shot:hover {
    transform: translateY(-3px);
    border-color: #c2001c;
}

/* ---- Character photo lightbox (in-page fullscreen viewer, prev/next) ---- */
.jo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10010;
    /* above the fixed alt-nav (10001) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(5, 0, 1, 0.93);
    backdrop-filter: blur(6px);
    cursor: zoom-out;
}

.jo-lightbox.is-open {
    display: flex;
}

.jo-lightbox img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 10px;
    border: 1px solid rgba(255, 80, 80, 0.25);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.8), 0 0 50px rgba(154, 0, 20, 0.25);
    animation: joLbIn 0.22s ease-out;
}

@keyframes joLbIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.jo-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 80, 80, 0.4);
    border-radius: 50%;
    background: rgba(20, 3, 7, 0.7);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.jo-lightbox-close:hover {
    background: #9a0014;
    border-color: #c2001c;
}

.jo-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 80, 80, 0.4);
    background: rgba(20, 3, 7, 0.7);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.jo-lightbox-prev {
    left: 1rem;
}

.jo-lightbox-next {
    right: 1rem;
}

.jo-lightbox-nav:hover {
    background: #9a0014;
    border-color: #c2001c;
}

/* -- Lead card is clickable to open its photo viewer -- */
.jo-char-viewable {
    cursor: pointer;
}

.jo-char-view-hint {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(12, 2, 6, 0.75);
    border: 1px solid rgba(255, 138, 150, 0.4);
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.jo-char-viewable:hover .jo-char-view-hint,
.jo-char-viewable:focus-visible .jo-char-view-hint {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Final CTA ---- */
.jo-cta-final {
    margin: 4rem 0 1rem;
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 20px;
    background: radial-gradient(120% 140% at 50% 0%, rgba(154, 0, 20, 0.32), rgba(20, 3, 7, 0.55) 60%);
    border: 1px solid rgba(255, 80, 80, 0.3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 50px rgba(120, 0, 12, 0.2);
}

@media (max-width: 860px) {
    .jo-cast {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .jo-hero {
        padding: 3.25rem 1.1rem;
    }

    .jo-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Body Count (/games/the_body_count) — reuses the .jo-* landing
   system; only the bits below are Body-Count specific.
   ============================================================ */

/* hero deadline pill: static "1 HOUR" (no live countdown), so it should
   read as a label, not a ticking timer — a touch smaller than jo's clock */
.bc-deadline {
    font-size: 1.5rem;
    letter-spacing: 0.08em;
}

/* Scenes grid — clickable stills that open the shared photo lightbox */
.bc-scenes-grid {
    margin-top: 1.4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.bc-scene {
    display: block;
    padding: 0;
    border: 1px solid rgba(255, 80, 80, 0.18);
    border-radius: 12px;
    overflow: hidden;
    background: #0c0206;
    cursor: zoom-in;
    aspect-ratio: 16 / 9;
    transition: transform 0.28s ease, border-color 0.28s ease;
}

.bc-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.bc-scene:hover {
    transform: translateY(-3px);
    border-color: #c2001c;
}

.bc-scene:hover img {
    opacity: 1;
    transform: scale(1.06);
}

@media (max-width: 640px) {
    .bc-scenes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phones only (tablets/desktop keep the 16:9 landscape thumbnail) — the
   closed thumbnail crops to a vertical/portrait frame; the full horizontal
   photo only shows once tapped, inside the existing .jo-lightbox (which
   already renders the untouched image at its natural ratio — nothing to
   change there). */
@media (max-width: 480px) {
    .bc-scene {
        aspect-ratio: 3 / 4;
    }

    /* scene_4.jpg (data-index="3", 0-based — 4th scene in the $scenes
       array): its subject sits far left, so the default centered crop of
       the new portrait frame above cut it off. Left-biased crop keeps it
       in frame. Desktop/tablet's 16:9 thumbnail and the full-size lightbox
       photo are untouched — this only affects the mobile portrait crop. */
    .bc-scene[data-index="3"] img {
        object-position: left;
    }
}

/* Faction toggle (Brunettes / Blondes) — a single segmented control, not
   two separate pill buttons: one dark track with a border, the two
   segments share it edge-to-edge, and the active segment fills with a
   glowing red background while the other stays dark/transparent. */
.jo-cast-side {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.jo-faction-toggle {
    position: relative;
    display: flex;
    padding: 0.22rem;
    gap: 0.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 80, 80, 0.25);
    background: rgba(12, 2, 6, 0.55);
}

/* The active fill is a separate element that slides between segments
   (transform) instead of each button's own background switching between
   "transparent" and a gradient — CSS can't tween across background types,
   so that swap always snapped instantly no matter the transition
   duration. Sliding a single element is what actually reads as smooth. */
.jo-faction-toggle-indicator {
    position: absolute;
    top: 0.22rem;
    bottom: 0.22rem;
    left: 0.22rem;
    width: calc(50% - 0.32rem);
    border-radius: 999px;
    background: linear-gradient(135deg, #c2001c, #7a0012);
    box-shadow: 0 0 16px rgba(194, 0, 28, 0.8), 0 0 3px rgba(255, 100, 110, 0.9);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}

.jo-faction-toggle[data-active="blondes"] .jo-faction-toggle-indicator {
    transform: translateX(calc(100% + 0.2rem));
}

.jo-faction-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s ease;
}

.jo-faction-btn:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.85);
}

.jo-faction-btn.is-active {
    color: #fff;
}

/* ============================================================
   Catholic School Girls — cast section layout, scoped under
   .jo-cast-compact so Jomere/Body Count/Murder Mystery (which
   share .jo-cast/.jo-cast-grid/.jo-char) are untouched.
   Left card ~45% / right column ~55%; right column = toggle
   (natural height, one line) + a 3-up grid of vertical cards
   (image top, text below) that stretches to fill the rest, so
   its bottom lines up exactly with the lead card's bottom.
   ============================================================ */
.jo-cast-compact {
    grid-template-columns: 45fr 55fr;
    align-items: stretch;
}

/* The lead card's own height used to depend on how long the current
   character's description happened to be (unclamped text = variable
   height) — since the whole right column stretches to match the lead,
   every swap made both the lead AND the 3 secondary cards resize.
   Clamping the lead's description to a fixed 3 lines makes its height
   constant no matter who's featured, which is what actually keeps
   everything the same size across swaps — the grid math alone can't. */
.jo-cast-compact .jo-char-lead .jo-char-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255, 205, 210, 0.8);
    /* pale pink secondary text */
}

.jo-cast-compact .jo-faction-toggle {
    flex: 0 0 auto;
    /* stays a single natural-height line, cards fill the rest */
    /* stop at the middle of the 2nd of 3 cards: with 3 equal columns and
       2 gaps, (card + gap + card/2) works out to exactly 50% of the
       grid's total width, independent of the gap size */
    width: 50%;
    align-self: flex-start;
}

/* On phones the 55%-column math above no longer applies (.jo-cast-compact
   itself stacks to 1 column at <=860px — see the 860px block further down),
   but 50% survived at the page's own full width, leaving each segment too
   narrow for "BLONDES" at ~375-390px wide (worked fine again from ~430px
   up, which is what made it look like a one-device bug). Full width fixes
   it at every phone size. */
@media (max-width: 480px) {
    .jo-cast-compact .jo-faction-toggle {
        width: 100%;
    }
}

.jo-cast-compact .jo-cast-grid {
    flex: 1;
    /* grows to fill leftover height so its bottom hits the lead's bottom */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    /* the one row stretches to the grid's full height */
    gap: 0.8rem;
}

.jo-cast-compact .jo-cast-grid .jo-char {
    position: relative;
    flex-direction: column;
    /* vertical card: image on top, text below */
    align-items: stretch;
    gap: 0;
    padding: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    /* Grid/flex items default to min-width:auto, which lets a card's own
       content refuse to shrink below its "natural" size — safety net so
       no card can ever force itself wider than its 1fr column. */
    min-width: 0;
}

.jo-cast-compact .jo-cast-grid .jo-char-media {
    flex: 1 1 auto;
    /* image soaks up whatever height the text block doesn't need */
    width: 100%;
    height: auto;
    min-height: 80px;
    aspect-ratio: auto;
    border-radius: 0;
}

.jo-cast-compact .jo-cast-grid .jo-char-media img {
    /* these are portrait shoot photos framed very differently per person
       (some full-body, some close-up) — biasing the crop toward the top
       at least keeps faces in frame consistently instead of a dead-center
       crop that can land anywhere depending on each photo's framing */
    object-position: 50% 12%;
}

.jo-cast-compact .jo-cast-grid .jo-char-body {
    flex: 0 0 auto;
    padding: 0.85rem 0.9rem 1rem;
}

.jo-cast-compact .jo-cast-grid .jo-char-name {
    font-size: 0.92rem;
}

.jo-cast-compact .jo-cast-grid .jo-char-role {
    display: block;
    font-size: 0.6rem;
    line-height: 1.3;
    /* Reserve 2 lines' worth of height always, whether the role needs it
       or not ("Brunette #1" fits on one; "Boss of the Brunettes' Gang"
       wraps to two). Without this, cards with a longer role pushed their
       text block taller — and since the card's total height is fixed,
       that shrank the image underneath it, changing its crop/zoom versus
       its siblings. That's what made Candy's and Juliet's cards (the two
       "Boss of..." roles) read as a different size from the rest. */
    min-height: calc(0.6rem * 1.3 * 2);
    margin-bottom: 0.4rem;
    color: #ff8a96;
    /* pale pink secondary text */
}

.jo-cast-compact .jo-cast-grid .jo-char-desc {
    font-size: 0.74rem;
    line-height: 1.42;
    color: rgba(255, 205, 210, 0.75);
    /* pale pink secondary text */
    -webkit-line-clamp: 3;
}

/* the "↑ Feature" hover hint was built for a horizontal row (flex sibling
   after the text); here it becomes a small corner badge over the photo */
.jo-cast-compact .jo-char-swappable::after {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    left: auto;
    margin: 0;
}

/* .jo-cast-compact's own unconditional 45fr/55fr rule (above) sits later in
   the file than .jo-cast's 860px 1fr override and ties it on specificity, so
   it was silently winning at every width, including mobile — Catholic School
   Girls' cast section never actually stacked like Jomere/Body Count/Murder
   Mystery do. Repeating the same 860px breakpoint here (but after the
   45fr/55fr rule) is what makes it win instead. */
@media (max-width: 860px) {
    .jo-cast-compact {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Game-page WIKI blocks — story, tables, guide, facts, FAQ.
   Shares the red .jo-* look (deep #c2001c accent, #ff8a96 pink
   highlight, dark rgba(20,3,7,.5) cards) so the added SEO/wiki
   content reads as one page with the hero and cast above it.
   ============================================================ */

/* Left-aligned prose — the .jo-section default is centered, which
   reads well for one-liners but not for multi-paragraph lore. */
.jo-wiki-body,
.jo-guide,
.jo-faq,
.jo-facts,
.jo-table-wrap {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.jo-wiki-body {
    max-width: 760px;
}

.jo-wiki-h3 {
    margin: 1.7rem 0 0.5rem;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    font-weight: 700;
    color: #ff8a96;
}

.jo-wiki-body p {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.jo-wiki-body strong,
.jo-guide strong,
.jo-table-note strong {
    color: #ff8a96;
    font-weight: 700;
}

/* ---- Tables (relationship map, endings) ---- */
.jo-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 14px;
    background: rgba(20, 3, 7, 0.5);
}

.jo-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.95rem;
    text-align: left;
}

.jo-table thead th {
    padding: 0.8rem 1rem;
    background: rgba(154, 0, 20, 0.35);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(255, 80, 80, 0.25);
    white-space: nowrap;
}

.jo-table tbody th,
.jo-table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 80, 80, 0.12);
    color: rgba(255, 255, 255, 0.82);
    vertical-align: top;
}

.jo-table tbody th {
    color: #ff8a96;
    font-weight: 700;
    white-space: nowrap;
}

.jo-table tbody tr:last-child th,
.jo-table tbody tr:last-child td {
    border-bottom: 0;
}

.jo-table tbody tr:hover th,
.jo-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.25);
}

/* Ending-type badges */
.jo-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.jo-pill-best {
    background: rgba(0, 150, 80, 0.25);
    border-color: rgba(0, 220, 120, 0.5);
    color: #7dffb0;
}

.jo-pill-good {
    background: rgba(0, 120, 150, 0.22);
    border-color: rgba(0, 180, 220, 0.45);
    color: #8fe0ff;
}

.jo-pill-branch {
    background: rgba(120, 80, 200, 0.22);
    border-color: rgba(160, 120, 255, 0.45);
    color: #c9b3ff;
}

.jo-pill-bad {
    background: rgba(180, 60, 0, 0.25);
    border-color: rgba(255, 120, 40, 0.45);
    color: #ffb587;
}

.jo-pill-fail {
    background: rgba(154, 0, 20, 0.4);
    border-color: rgba(255, 80, 80, 0.5);
    color: #ff9aa4;
}

.jo-pill-secret {
    background: rgba(200, 160, 0, 0.2);
    border-color: rgba(255, 210, 60, 0.45);
    color: #ffe08a;
}

.jo-table-note {
    max-width: 760px;
    margin: 1rem auto 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* ---- At-a-glance facts ---- */
.jo-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.7rem;
}

.jo-fact {
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.2);
}

.jo-fact dt {
    margin: 0 0 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
}

.jo-fact dd {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

/* ---- Spoiler-light guide (numbered steps) ---- */
.jo-guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: jo-step;
    display: grid;
    gap: 0.8rem;
}

.jo-guide-list li {
    position: relative;
    padding: 1rem 1.1rem 1rem 3.2rem;
    border-radius: 12px;
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.2);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    counter-increment: jo-step;
}

.jo-guide-list li::before {
    content: counter(jo-step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #c2001c;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---- Red-themed FAQ accordion (the .faq-* set is purple, for the
   support page; this matches the game pages instead) ---- */
.jo-faq-item {
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 12px;
    margin-bottom: 0.7rem;
    overflow: hidden;
}

.jo-faq-item[open] {
    border-color: #c2001c;
    background: rgba(30, 4, 9, 0.6);
}

.jo-faq-item>summary {
    list-style: none;
    cursor: pointer;
    padding: 1.05rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: #fff;
}

.jo-faq-item>summary::-webkit-details-marker {
    display: none;
}

.jo-faq-item>summary:hover {
    color: #ff8a96;
}

.jo-faq-q {
    font-size: 1rem;
}

.jo-faq-chevron {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid #ff8a96;
    border-bottom: 2px solid #ff8a96;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.jo-faq-item[open] .jo-faq-chevron {
    transform: rotate(-135deg);
}

.jo-faq-a {
    padding: 0 1.2rem 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

.jo-faq-a p {
    margin: 0;
}

@media (max-width: 480px) {
    .jo-cast-compact .jo-cast-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Admin — Active nav link highlight
   ============================================================ */
.nav-link-active {
    color: #ff5a67 !important;
    position: relative;
}

.nav-link-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 1px;
    background: #c2001c;
}

/* ============================================================
   Admin — Affiliate dashboard (/admin/affiliates)
   ============================================================ */
.aff-commission-val {
    color: #ff8a96;
    font-weight: 600;
}

.aff-code {
    background: rgba(194, 0, 28, 0.15);
    color: #ff8a96;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Search bar */
.aff-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #2a0008;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

.aff-search-wrap:focus-within {
    border-color: rgba(194, 0, 28, 0.5);
}

.aff-search-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #e3b8bc;
    opacity: 0.7;
}

.aff-search-icon svg {
    width: 100%;
    height: 100%;
}

.aff-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e0e0e0;
    font-size: 0.9rem;
    min-width: 0;
}

.aff-search-input::placeholder {
    color: #9a7a80;
}

.aff-search-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: #e3b8bc;
    white-space: nowrap;
}

/* Per-row copy link button */
.aff-copy-link {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
}

.aff-copy-link svg {
    width: 15px;
    height: 15px;
}

/* ============================================================
   Admin — Campaign Tracking dashboard (/admin/tracking)
   Reuses .admin-table / .btn; the tiles, funnel, insights,
   badges and setup block are specific to this page.
   ============================================================ */
.trk-topbar {
    align-items: flex-start;
}

.trk-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: #e3b8bc;
}

/* The "what this timestamp covers" aside next to it — quieter than the time
   itself, which is what the eye is looking for. */
.trk-subtitle-note {
    font-size: 0.78rem;
    color: rgba(227, 184, 188, 0.55);
}

.trk-daterange {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #2a0008;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
    color: #f0d8da;
    font-size: 0.85rem;
    white-space: nowrap;
}

.trk-daterange-ic {
    opacity: 0.8;
}

/* Refresh button — big, fixed to the viewport so it stays reachable
   while scrolling a long dashboard, matching the site's .cta-btn pattern. */
.trk-refresh-btn {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    background: #9a0014;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: background 0.2s, transform 0.2s;
}

.trk-refresh-btn:hover {
    background: #c2001c;
    transform: scale(1.03);
    text-decoration: none;
}

.trk-refresh-btn svg {
    width: 19px;
    height: 19px;
}


.trk-h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    color: #fff;
    margin: 2rem 0 1rem;
}

.trk-h2-bar {
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
    background: #c2001c;
    flex: 0 0 auto;
}

.trk-h2-note {
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* stat tiles with icon */
.trk-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.trk-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #2a0008;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
}

.trk-tile-accent {
    border-color: rgba(194, 0, 28, 0.5);
    background: linear-gradient(160deg, #3a0009 0%, #2a0008 100%);
}

.trk-tile-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(194, 0, 28, 0.18);
    color: #ff5a67;
}

.trk-tile-icon svg {
    width: 22px;
    height: 22px;
}

.trk-tile-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.trk-tile-label {
    margin-top: 0.3rem;
    font-size: 0.76rem;
    letter-spacing: 0.3px;
    color: #e3b8bc;
}

.trk-panel {
    background: #2a0008;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.25rem 1.4rem 1.5rem;
    min-width: 0;
}

.trk-panel .trk-h2 {
    margin-top: 0.25rem;
}

/* recent-activity toggle */
.trk-recent-toggle {
    margin-bottom: 1.25rem;
}

.trk-recent-panel {
    margin-bottom: 0.5rem;
}

/* insights — horizontal row of cards, same rhythm as .trk-tiles */
.trk-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.trk-insight-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #2a0008;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    min-width: 0;
}

.trk-insight-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.trk-insight-ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(194, 0, 28, 0.18);
    color: #ff5a67;
}

.trk-insight-ic svg {
    width: 17px;
    height: 17px;
}

.trk-insight-lbl {
    font-size: 0.76rem;
    color: #e3b8bc;
}

.trk-insight-val {
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
    overflow-wrap: break-word;
}

/* event badges */
.trk-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.trk-badge-ac {
    background: #7a0012;
    color: #fff;
}

.trk-badge-pv {
    background: #9a0014;
    color: #fff;
}

.trk-badge-dl {
    background: #c2001c;
    color: #fff;
}

.trk-details {
    color: #e3b8bc;
    font-size: 0.85rem;
}

/* setup URLs with copy button */
.trk-setup-intro {
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.trk-setup {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.trk-setup-row {
    background: #2a0008;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.trk-setup-net {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e3b8bc;
    margin-bottom: 0.4rem;
}

.trk-setup-url {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.trk-setup-url code {
    flex: 1;
    min-width: 0;
}

.trk-copy {
    flex: 0 0 auto;
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #2a0008;
    color: #e3b8bc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
}

.trk-copy svg {
    width: 16px;
    height: 16px;
}

.trk-copy:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.trk-copy.is-copied {
    color: #ff8a96;
    border-color: rgba(194, 0, 28, 0.5);
}

.trk-copy.is-copied::after {
    content: 'Copié !';
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: #0d0002;
    color: #ff8a96;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid rgba(194, 0, 28, 0.45);
}

/* ============================================================
   Admin — login popup (/{secret}/login)
   ============================================================ */
.admin-login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.admin-login-card {
    width: 100%;
    max-width: 340px;
    background: #2a0008;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.admin-login-card h1 {
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
}

.admin-login-card form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* type="email" since sign-in went passwordless — the panel takes an address
   and mails a link back. The password selector stays for the moment one is
   ever needed again. */
.admin-login-card input[type="password"],
.admin-login-card input[type="email"] {
    background: #180005;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.admin-login-card input[type="email"]:focus {
    outline: none;
    border-color: rgba(255, 90, 103, 0.7);
}

.admin-login-card .btn {
    width: 100%;
}

.admin-login-error {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    background: rgba(220, 50, 50, 0.15);
    border: 1px solid rgba(220, 50, 50, 0.4);
    border-radius: 8px;
    color: #ff9a9a;
    font-size: 0.85rem;
    text-align: center;
}

/* The neutral "if this address is authorized…" confirmation. Deliberately
   not green: it reports nothing about whether anything was actually sent. */
.admin-login-notice {
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}

.admin-login-hint {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
}

.admin-login-hint a {
    color: #ff8a96;
    text-decoration: underline;
}

.trk-setup-row code {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    color: #d8d8e8;
    font-size: 0.82rem;
}

/* ============================================================
   MOBILE / RESPONSIVE — HOMEPAGE (showcase) ONLY
   Every rule is scoped under .showcase-body (the homepage body class;
   other pages use .s2-body) AND gated at <=768px, so the desktop view
   and every other page stay pixel-identical. Mobile reuses the exact
   same fixed video + title carousel as desktop (same engine, same
   font/color) — just resized/repositioned for portrait. Only the
   download CTA, fullscreen/volume controls and the debug buffer timer
   stay hidden (no purchase/parasite UI on the phone hero).
   ============================================================ */
@media (max-width: 768px) {

    /* Age gate — same popup principle as desktop (dark overlay, 18+ badge
       + yes/no thumbs), rearranged for portrait instead of desktop's
       landscape composition: big 18+ badge on top (spanning both grid
       columns), red "no" thumb bottom-left, green "yes" thumb bottom-right.
       DOM order stays badge, exit-link, confirm-button — explicit grid
       placement below puts each one where it needs to go without touching
       the markup. */
    .showcase-body .age-overlay {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        /* Without this, grid's default align-content (stretch) inflates the
           two auto rows to fill the overlay's full screen height, so the
           thumbs ended up centered in a giant second row far below the
           badge — row-gap only matters once the rows hug their content. */
        align-content: start;
        align-items: center;
        justify-items: center;
        /* svh (stable small-viewport unit) where supported: on phones the
           address bar shows/hides while scrolling and vh/dvh recompute,
           which made the badge and thumbs jump around mid-gesture. */
        padding-top: 10vh;
        padding-top: 10svh;
        row-gap: 1.5vh;
        row-gap: 1.5svh;
        column-gap: 8vw;
        overflow-y: auto;
        /* A scroll gesture on the overlay must not chain to (and rubber-
           band) the page behind it. */
        overscroll-behavior: contain;
    }

    /* The source PNG is a 1920x1080 canvas where the actual "18+ AGE
       VERIFICATION" artwork only occupies a small centered region (roughly
       x:769-1180, y:283-770 — ~21% of the canvas width). Scaling the whole
       image made the visible badge much smaller than the box implied, so
       instead this crops+zooms into just that region: the wrapper is sized
       to the crop's own aspect ratio (480x565, with a small margin around
       the measured content) and the image is enlarged/shifted inside it
       (percentages below are relative to the wrapper, so they stay correct
       at any width) — 4x the width of the thumbs below. Top edge starts at
       the vertical middle of the screen (padding-top: 50vh above), still
       centered horizontally. */
    .showcase-body .age-badge-crop {
        position: relative;
        overflow: hidden;
        width: 64vw;
        max-width: 272px;
        /* The 34svh term caps the badge by screen HEIGHT too — in landscape
           (e.g. 934x415) a width-only size made it taller than the whole
           viewport, so the overlay had to scroll and everything bounced. */
        width: min(64vw, 272px, 34svh);
        aspect-ratio: 480 / 565;
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .showcase-body .age-badge {
        position: absolute;
        transform: none;
        left: -153.125%;
        top: -43.36%;
        width: 400%;
        height: 191.15%;
        max-width: none;
    }

    /* Red "no" thumb — bottom-left */
    .showcase-body .age-exit-btn {
        position: static;
        transform: none;
        grid-column: 1;
        grid-row: 2;
        touch-action: manipulation;
    }

    /* Green "yes" thumb — bottom-right */
    .showcase-body .age-confirm-btn {
        position: static;
        transform: none;
        grid-column: 2;
        grid-row: 2;
        touch-action: manipulation;
    }

    .showcase-body .age-confirm-btn img,
    .showcase-body .age-exit-btn img {
        display: block;
        width: 16vw;
        max-width: 68px;
        /* same height cap as the badge (see .age-badge-crop) */
        width: min(16vw, 68px, 9svh);
        height: auto;
    }

    /* Studio logo — centered at the top instead of desktop's left-aligned
       spot, and enlarged (6.8vw is nearly invisible on a phone). */
    .showcase-body .site-logo {
        width: 32vw;
        max-width: 130px;
        left: 50%;
        top: 4%;
        transform: translateX(-50%);
    }

    /* Background video — same fixed single-video engine as desktop
       (game-showcase.js), just sized for a phone. `100dvh` (falls back
       to 100vh where unsupported) avoids the classic mobile-Safari bug
       where 100vh is measured including the address bar and the video
       ends up cropped/oversized as it hides/shows on scroll. */
    .showcase-body .showcase-container {
        height: 100vh;
        height: 100dvh;
    }

    /* Download CTA, fullscreen/volume controls, debug buffer timer —
       no purchase/parasite UI on the phone hero. */
    .showcase-body .cta-btn,
    .showcase-body .media-controls,
    .showcase-body .buffer-timer {
        display: none !important;
    }

    /* Shortened game titles — the full name (used for slugs/links/admin/
       desktop) is left untouched in the HTML; on narrow screens only, the
       real text is hidden (font-size: 0) and swapped for the short label
       via ::after so long titles don't overflow a portrait screen. */
    .showcase-body .title-carousel-item[data-mobile-label] {
        font-size: 0;
    }

    .showcase-body .title-carousel-item[data-mobile-label]::after {
        content: attr(data-mobile-label);
    }

    .showcase-body .title-carousel-item[data-position="current"][data-mobile-label]::after {
        font-size: calc(5.4vh * var(--title-scale, 1));
    }

    .showcase-body .title-carousel-item[data-position="prev"][data-mobile-label]::after,
    .showcase-body .title-carousel-item[data-position="next"][data-mobile-label]::after,
    .showcase-body .title-carousel-item[data-position="far-next"][data-mobile-label]::after {
        font-size: calc(2.63vh * var(--title-scale, 1));
    }
}

/* ============================================================
   Mobile sticky burger header — every alt-nav page (redpage.php layout +
   the support page) carries .sg-burger-body, and every rule below lives
   inside @media (max-width: 1024px), so the desktop view is untouched.
   The stacked alt-nav is replaced by a fixed top bar (burger + red logo)
   that hides on scroll-down / reveals on scroll-up; the burger slides the
   .alt-nav in from the left as a full-screen drawer. 1024px is wide enough
   to also catch tablets and landscape phones (e.g. 934x415), which are
   still too narrow for the fixed desktop left-rail nav.
   ============================================================ */

/* The bar + backdrop are new elements in the page (not pre-existing ones
   being restyled), so without an explicit default they render as plain,
   unstyled, un-positioned blocks above the real header — a second, full-size
   red logo plus the bare native <button> sitting in normal document flow,
   scrolling away/back with the page like ordinary content (looked like it
   was "appearing and disappearing" while scrolling near the top). Hidden
   here by default; the media query below is what turns them on for mobile. */
.sg-burger-body .sg-mbar,
.sg-burger-body .sg-drawer-backdrop {
    display: none;
}

@media (max-width: 1024px) {

    /* --- Fixed top bar --- */
    .sg-burger-body .sg-mbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10007;
        /* above the drawer (10006) so the burger/X stays tappable */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        /* burger far left, then logo next to it */
        gap: 0.5rem;
        height: 54px;
        padding: 0 1rem;
        background: rgba(58, 8, 16, 0.96);
        /* dark red, matches the drawer */
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 80, 80, 0.18);
        transition: transform 0.3s ease;
    }

    /* Menu open: the burger (now an X) stays put at the left as the close
       button, but the logo re-centers in the bar instead of sitting next
       to it. Kept position:absolute in BOTH states (not just toggled on
       open) so `left` is animatable — switching position modes on toggle
       can't transition, it just snaps. */
    .sg-burger-body .sg-mbar:has(.sg-mbar-burger.is-open) .sg-mbar-logo {
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }

    /* hidden = slid up out of view (scroll-down) */
    .sg-burger-body .sg-mbar.is-hidden {
        transform: translateY(-100%);
    }

    .sg-burger-body .sg-mbar-logo {
        display: block;
        line-height: 0;
        /* Absolute + centered-on-Y so it can slide left<->center smoothly;
           closed-state left clears the 1rem padding + 42px burger + 0.5rem gap
           it used to sit after in normal flow. */
        position: absolute;
        top: 50%;
        left: calc(1rem + 42px + 0.5rem);
        transform: translateY(-50%);
        transition: left 0.3s ease, transform 0.3s ease;
    }

    .sg-burger-body .sg-mbar-logo img {
        height: 30px;
        width: auto;
        display: block;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    }

    /* --- Burger button (animates to an X when open) --- */
    .sg-burger-body .sg-mbar-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
    }

    .sg-burger-body .sg-mbar-burger span {
        display: block;
        width: 24px;
        height: 2px;
        margin: 0 auto;
        border-radius: 2px;
        background: #fff;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .sg-burger-body .sg-mbar-burger.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .sg-burger-body .sg-mbar-burger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .sg-burger-body .sg-mbar-burger.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* --- White logo stays in its original header spot; just push it clear
           of the fixed bar (the bar now carries the RED logo instead). --- */
    .sg-burger-body .s2-header {
        padding-top: calc(54px + 1.5rem);
    }

    /* The 2.5rem rightward nudge on these only exists to clear the fixed
       desktop left-rail nav. With the burger active that rail is gone, so
       the nudge just pushes content right and clips its edge. (The general
       ≤900px rule elsewhere already does this below 900; this repeats it for
       the whole ≤1024 burger range and for the support page's own layout.) */
    .sg-burger-body .s2-header-mega,
    .sg-burger-body .s2-main-mega {
        left: 0;
    }

    /* --- Download pill: no launcher on mobile (see the homepage decision) --- */
    .sg-burger-body .cta-btn {
        display: none !important;
    }

    /* --- alt-nav becomes a FULL-SCREEN drawer (dark red, not black) --- */
    .sg-burger-body .alt-nav {
        position: fixed;
        inset: 0;
        /* cover the whole screen */
        left: auto;
        z-index: 10006;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: calc(54px + 1.5rem) 1.5rem 2rem;
        /* clears the 54px bar on top */
        /* dark red — clearly not black, but deep enough to keep the mood */
        background: linear-gradient(180deg, #4a0912, #2c0409);
        border-left: none;
        box-shadow: none;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        /* `safe`: centered when it fits, but falls back to top-aligned +
           scrollable instead of clipping the top on short screens. */
        justify-content: safe center;
        align-items: center;
    }

    .sg-burger-body .alt-nav.is-open {
        transform: translateX(0);
    }

    /* Red logo must NOT appear inside the menu — it lives in the bar now. */
    .sg-burger-body .alt-nav-logo {
        display: none;
    }

    /* Centered link list (its desktop centering trick — left:50% +
       translateX(-50%) — makes no sense in a full-screen panel). */
    .sg-burger-body .alt-nav-menu {
        position: static;
        left: auto;
        transform: none;
        width: auto;
        max-width: none;
        margin-top: 0;
        align-items: center;
        text-align: center;
    }

    .sg-burger-body .alt-nav-section {
        align-items: center;
        width: 100%;
        gap: 0.7rem;
        padding: 1.4rem 0;
    }

    /* Bigger type + spacing so the full-screen menu actually fills the screen
       (the desktop 0.76rem links looked tiny in a full viewport). */
    .sg-burger-body .alt-nav-heading {
        font-size: 1rem;
        letter-spacing: 0.14em;
        margin-bottom: 0.25rem;
    }

    .sg-burger-body .alt-nav-link {
        font-size: 1.3rem;
        line-height: 1.5;
    }

    /* --- Backdrop behind the open drawer --- */
    .sg-burger-body .sg-drawer-backdrop {
        display: block;
        /* overrides the desktop display:none default above */
        position: fixed;
        inset: 0;
        z-index: 10005;
        background: rgba(5, 0, 2, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .sg-burger-body .sg-drawer-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

    /* --- Scroll lock while the full-screen drawer is open (the header above
           already carries the fixed-bar clearance, so main flows normally) --- */
    .sg-burger-body.sg-noscroll {
        overflow: hidden;
    }
}

/* ============================================================
   Game pages (Jomere / Body Count / Murder & Mystery) — mobile cast
   & mechanics. Catholic School Girls' own .jo-cast-compact rules are
   MORE specific (.jo-cast-compact prefix) so they keep winning there;
   everything below only reshapes the three plain .jo-cast pages.
   ============================================================ */

/* Cards the views tag as redundant on small screens (each page's hero
   already carries the same beat: countdown badge, tagline, etc.). */
@media (max-width: 1024px) {
    .jo-mech-hide-m {
        display: none;
    }
}

@media (max-width: 860px) {

    /* Below 860 the cast stacks (lead card first) — the secondary cards
       then go two per row as small VERTICAL cards (photo on top, text
       under) instead of desktop's wide horizontal rows. */
    .jo-cast-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .jo-cast-grid .jo-char {
        position: relative;
        /* anchors the "↑ Feature" badge below */
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        min-width: 0;
    }

    .jo-cast-grid .jo-char-media {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        border-radius: 0;
    }

    .jo-cast-grid .jo-char-body {
        padding: 0.85rem 0.9rem 1rem;
    }

    .jo-cast-grid .jo-char-desc {
        -webkit-line-clamp: 3;
    }

    /* Touch has no hover: the "↑ Feature" hint that desktop reveals on
       mouse-over is always visible here, as a corner badge over the photo,
       so users understand a tap promotes the card to the lead spot. */
    .jo-cast-grid .jo-char-swappable::after {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        left: auto;
        margin: 0;
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Studio page teaser grid — tap-to-play on touch devices.
   Desktop (fine pointer) previews on hover and never shows these
   controls; on touch, the play button is the ONLY thing that starts
   a teaser (no accidental starts while scrolling), tapping it again
   pauses, and tapping anywhere else on the card opens the game page.
   ============================================================ */
.sg-vbtn,
.sg-vbar {
    display: none;
}

@media (pointer: coarse) {
    .sg-vbtn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 50%;
        background: rgba(12, 2, 6, 0.65);
        border: 1px solid rgba(255, 80, 80, 0.55);
        cursor: pointer;
        z-index: 2;
        touch-action: manipulation;
        transition: background 0.2s ease;
    }

    /* play state: white triangle */
    .sg-vbtn-icon {
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 9px 0 9px 15px;
        border-color: transparent transparent transparent #fff;
        margin-left: 3px;
    }

    /* playing: the button shrinks into a corner pause control so it stops
       covering the teaser */
    .sg-video-card.is-playing .sg-vbtn {
        top: auto;
        left: auto;
        right: 0.6rem;
        bottom: 2.4rem;
        /* clears the title gradient + progress bar */
        transform: none;
        width: 40px;
        height: 40px;
        background: rgba(12, 2, 6, 0.55);
    }

    .sg-video-card.is-playing .sg-vbtn-icon {
        width: 12px;
        height: 14px;
        border-top: none;
        border-bottom: none;
        border-left: 4px solid #fff;
        border-right: 4px solid #fff;
        margin: 0;
    }

    /* progress bar along the bottom edge, only while playing */
    .sg-vbar {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.18);
        z-index: 2;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .sg-video-card.is-playing .sg-vbar {
        opacity: 1;
    }

    .sg-vbar-fill {
        display: block;
        width: 0;
        height: 100%;
        background: #c2001c;
    }

    /* teasers sit dimmed for the hover effect — full brightness while playing */
    .sg-video-card.is-playing video {
        opacity: 1;
    }
}

/* ============================================================
   Affiliate dashboard sections (Dashboard / Tracking Links /
   Statistics / Creatives / Payments). Reuses the .aff-profile-card
   shell and .admin-table from the pages that already existed; the
   components below are what those sections add on top.
   ============================================================ */

/* The shared copy button lives on the admin side, which is in French —
   the affiliate dashboard is in English. */
.aff-dash-shell .trk-copy.is-copied::after {
    content: 'Copied!';
}

/* ---- Summary tiles ---- */
.aff-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.aff-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.35rem 1.25rem;
    background: rgba(154, 0, 20, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 16px;
}

/* the money tile — the number that actually matters */
.aff-tile-accent {
    background: linear-gradient(180deg, rgba(180, 21, 34, 0.28), rgba(154, 0, 20, 0.12));
    border-color: rgba(255, 120, 120, 0.45);
}

.aff-tile-icon {
    display: flex;
    align-items: center;
    color: #ff8a96;
}

.aff-tile-icon svg {
    width: 20px;
    height: 20px;
}

.aff-tile-value {
    font-family: 'Sora', sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.aff-tile-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ---- Link builder (Tracking Links) ---- */
/* Wider than the shared .rp-form-row: these two controls are a single
   decision ("send them where, tagged how"), and 1rem read as one crammed
   block rather than two choices. */
.aff-builder-row {
    gap: 1.5rem 2rem;
}

.aff-builder-row .form-group {
    margin-bottom: 0;
}

/* the built URL is the result of the two controls above — give it room to
   read as an output, not a third field */
.aff-builder-row+.aff-copy-row {
    margin-top: 1.75rem;
}

/* ---- Copyable URL / snippet row ---- */
.aff-copy-row {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 0.35rem;
}

.aff-copy-url {
    /* <code> is inline by default. Inside .aff-copy-row it gets blockified by
       the flex parent, but in a plain table cell it stayed inline — and a
       bordered inline box that wraps splits into one rounded fragment per
       line. Blocking it keeps a single box however many lines it takes. */
    display: block;
    flex: 1;
    min-width: 0;
    /* lets the flex item shrink instead of forcing overflow */
    padding: 0.7rem 0.9rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffd6d6;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    /* URLs and HTML snippets have no spaces to break on — without this they
       blow the card's width open instead of wrapping. overflow-wrap (not
       word-break: break-all) breaks at the URL's own natural points first
       (/, ?, &, =, -) and only forces a mid-word split as a last resort, so
       "3sigma_studios" wraps as a whole word instead of "3sigma_s" / "tudios". */
    overflow-wrap: break-word;
    word-break: normal;
}

.aff-copy-url-sm {
    font-size: 0.75rem;
    padding: 0.5rem 0.7rem;
}

/* Ready-made links table: fixed layout so the URL column's width is set once
   from these numbers, not re-guessed from content on every row. Under the
   default auto layout, a column holding wrappable text doesn't reliably claim
   its fair share of the row — different rows disagreed on how wide "the rest"
   was, so the link column visibly stopped short of the copy button on some
   rows and text wrapped earlier than it needed to. Destination and the button
   get a real pixel width instead of the old 1px shrink-to-fit trick (which
   only matters under auto layout); the link column gets whatever's left. */
.aff-links-table {
    table-layout: fixed;
}

.aff-links-table th:first-child,
.aff-links-table td:first-child {
    width: 200px;
}

.aff-links-table th:last-child,
.aff-links-table td:last-child {
    width: 68px;
}

.aff-copy-text {
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    word-break: normal;
}

.aff-copy-btn {
    width: 44px;
}

.aff-hint {
    margin: 0.9rem 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Shown on the Email Preferences tab while a change is awaiting confirmation
   from the new address. */
.aff-pending-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(180, 21, 34, 0.14);
    border: 1px solid rgba(255, 80, 100, 0.4);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    line-height: 1.6;
}

.aff-pending-note svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: #ff5064;
}

.aff-pending-note strong {
    color: #fff;
    word-break: break-all;
}

.aff-hint a,
.aff-empty a {
    color: #ff8a96;
    text-decoration: underline;
}

.aff-hint strong {
    color: #ff8a96;
}

.form-hint-inline {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    font-weight: 400;
}

.aff-empty {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* ---- Date range picker (Statistics) ---- */
.aff-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.9rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.aff-range-presets {
    display: flex;
    gap: 0.35rem;
}

.aff-range-preset {
    padding: 0.45rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.aff-range-preset:hover {
    color: #fff;
    border-color: rgba(255, 120, 120, 0.45);
}

.aff-range-preset.is-active {
    background: rgba(180, 21, 34, 0.35);
    border-color: rgba(255, 120, 120, 0.65);
    color: #fff;
}

.aff-range-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aff-range-custom label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-weight: 600;
}

.aff-range-custom input[type="date"] {
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
}

.aff-range-custom input[type="date"]:focus {
    outline: none;
    border-color: #ff5064;
}

/* the native picker glyph renders near-black on our dark field */
.aff-range-custom input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

.aff-range-note {
    margin: 0.7rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}

.aff-range-note strong {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Breakdown tabs (Statistics) ---- */
.aff-stats-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.aff-stats-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Sora', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.aff-stats-tab:hover {
    color: #fff;
    border-color: rgba(255, 120, 120, 0.45);
}

.aff-stats-tab.is-active {
    background: linear-gradient(180deg, rgba(180, 21, 34, 0.35), rgba(154, 0, 20, 0.15));
    border-color: rgba(255, 120, 120, 0.65);
    color: #fff;
}

.aff-stats-tab-icon {
    display: flex;
}

.aff-stats-tab-icon svg {
    width: 16px;
    height: 16px;
}

/* how many rows sit behind the tab — worth knowing before clicking */
.aff-stats-tab-count {
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.aff-stats-tab.is-active .aff-stats-tab-count {
    background: rgba(255, 255, 255, 0.18);
}

.aff-stats-panel {
    display: none;
}

.aff-stats-panel.is-active {
    display: block;
}

/* ---- Volume bars (Statistics rows, Payments threshold) ---- */
.aff-bar {
    display: block;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.aff-bar-lg {
    height: 10px;
    margin-top: 0.5rem;
}

.aff-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #9a0014, #ff5064);
    border-radius: 999px;
}

/* payout threshold reached */
.aff-bar-fill.is-full {
    background: linear-gradient(90deg, #1a8a4a, #3ddc84);
}

.aff-bar-col {
    width: 120px;
}

.aff-promo {
    padding: 0.9rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.aff-promo:first-of-type {
    border-top: none;
    padding-top: 0;
}

/* ---- Payout method picker (Payments) ---- */
.aff-payout-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.aff-payout-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.aff-payout-method:hover {
    border-color: rgba(255, 120, 120, 0.45);
}

/* The native radio is the state — kept in the DOM (focusable, keyboard
   arrow-selectable, submitted with the form) but not painted, since the whole
   card is the hit target. */
.aff-payout-method input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* :has() reads the radio's live state, so the selected card follows a click
   with no JS. Same mechanism the burger nav already relies on. */
.aff-payout-method:has(input:checked) {
    background: linear-gradient(180deg, rgba(180, 21, 34, 0.28), rgba(154, 0, 20, 0.12));
    border-color: rgba(255, 120, 120, 0.65);
}

/* keyboard focus has to be visible — the radio it belongs to isn't */
.aff-payout-method:has(input:focus-visible) {
    outline: 2px solid #ff8a96;
    outline-offset: 2px;
}

.aff-payout-method-icon {
    display: flex;
    flex: 0 0 auto;
    color: #ff8a96;
}

.aff-payout-method-icon svg {
    width: 20px;
    height: 20px;
}

.aff-payout-method-label {
    flex: 1;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
}

.aff-payout-method-check {
    display: flex;
    flex: 0 0 auto;
    color: #ff5064;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.aff-payout-method-check svg {
    width: 16px;
    height: 16px;
}

.aff-payout-method:has(input:checked) .aff-payout-method-check {
    opacity: 1;
    transform: scale(1);
}

.aff-payout-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.1rem;
}

.aff-payout-actions .aff-payout-current {
    margin: 0;
}

@media (max-width: 520px) {
    .aff-payout-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}

/* ---- Payout status pills ---- */
.aff-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aff-status-paid {
    background: rgba(26, 138, 74, 0.2);
    border: 1px solid rgba(61, 220, 132, 0.45);
    color: #3ddc84;
}

.aff-status-pending {
    background: rgba(180, 116, 15, 0.2);
    border: 1px solid rgba(245, 166, 35, 0.45);
    color: #f5a623;
}

/* an account an admin deleted — greyed out, not alarming red: it's a
   settled end state, not a problem to act on */
.aff-status-deleted {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Responsive: tiles collapse before the sidebar does ---- */
@media (max-width: 900px) {
    .aff-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    /* presets and date fields stop fitting on one line long before this */
    .aff-range {
        flex-direction: column;
        align-items: stretch;
    }

    .aff-range-presets,
    .aff-range-custom {
        flex-wrap: wrap;
    }

    .aff-range-preset {
        flex: 1 1 auto;
    }
}

@media (max-width: 520px) {
    .aff-tiles {
        grid-template-columns: 1fr;
    }

    /* the bar column is decoration — the numbers next to it carry the data */
    .aff-bar-col {
        display: none;
    }

    /* three tabs with labels and counts can't fit a phone — scroll them
       sideways rather than wrap into a ragged two-line block */
    .aff-stats-tabs {
        overflow-x: auto;
        /* the active tab's outline would be clipped by overflow otherwise */
        padding-bottom: 0.25rem;
    }

    .aff-stats-tab {
        flex: 0 0 auto;
    }

    .aff-range-custom input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ============================================================
   Admin — affiliate account detail (/admin/affiliates/{id})
   ============================================================ */
.aff-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    color: #a0a0a0;
    font-size: 0.85rem;
    text-decoration: none;
}

.aff-back-link:hover {
    color: #fff;
    text-decoration: none;
}

.aff-back-link svg {
    width: 14px;
    height: 14px;
}

.aff-view-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.aff-view-link svg {
    width: 15px;
    height: 15px;
}

/* ---- Contact & payout details (what the affiliate filled in themselves) ---- */
.aff-info-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0.85rem 1.5rem;
    margin: 0;
}

.aff-info-grid dt {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
    font-weight: 600;
}

.aff-info-grid dd {
    margin: 0;
    color: #fff;
    font-size: 0.9rem;
    /* handles, emails and wallet-ish strings have no spaces to break on */
    word-break: break-word;
}

.aff-info-blank {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

.aff-info-note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ---- Collapsible activity sections (recent clicks / downloads) ---- */
/* Two 50-row tables stacked back to back pushed the account actions far below
   the fold, for detail that's only wanted on demand. */
.aff-collapse {
    margin: 1.25rem 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    /* keeps the summary's hover fill inside the rounded corners */
    overflow: hidden;
}

.aff-collapse-summary {
    /* .trk-h2 ships 2rem/1rem margins meant for a standalone heading */
    margin: 0;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    user-select: none;
    /* our own chevron replaces the default disclosure triangle */
    list-style: none;
    transition: background 0.15s ease;
}

.aff-collapse-summary::-webkit-details-marker {
    display: none;
}

.aff-collapse-summary:hover {
    background: rgba(255, 255, 255, 0.04);
}

.aff-collapse-summary:focus-visible {
    outline: 2px solid #ff8a96;
    outline-offset: -2px;
}

.aff-collapse[open] .aff-collapse-summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.aff-collapse-chevron {
    display: flex;
    /* pushes it to the far right of the flex row .trk-h2 sets up */
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

.aff-collapse-chevron svg {
    width: 18px;
    height: 18px;
}

.aff-collapse[open] .aff-collapse-chevron {
    transform: rotate(180deg);
}

.aff-collapse .ss-table-wrap {
    padding: 0 1.1rem 1.1rem;
}

.aff-danger-zone {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.aff-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.aff-danger-row strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.aff-danger-row p {
    margin: 0;
    max-width: 480px;
    font-size: 0.82rem;
}

.aff-danger-row-critical {
    border-color: rgba(248, 81, 73, 0.25);
    background: rgba(248, 81, 73, 0.05);
}

@media (max-width: 640px) {
    .aff-danger-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* label above value — two columns leave the value ~100px on a phone */
    .aff-info-grid {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .aff-info-grid dd:not(:last-child) {
        margin-bottom: 0.75rem;
    }
}

/* ============================================================
   WIKI PAGES (/wiki and /wiki/*) — reference section.
   Render inside .s2-main's centered column of the red redpage
   layout, and reuse the .jo-table / .jo-facts / .jo-guide-list /
   .jo-faq / .jo-pill blocks for their tables, stats, guides and
   FAQs. These .wk-* rules cover the wiki's own chrome: the home
   grid, the article head/breadcrumb, prose, character cards, and
   the "Read next" links that make it interconnected.
   ============================================================ */
.wk,
.wk-article {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Shared head (home hero + article head) ---- */
.wk-hero {
    max-width: 780px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.wk-h1 {
    margin: 0.6rem 0 0.8rem;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 5vw, 2.7rem);
    line-height: 1.12;
    color: #fff;
}

.wk-lead {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ---- Home: category groups + cards ---- */
.wk-cat {
    max-width: 940px;
    margin: 2.5rem auto;
}

.wk-cat-title {
    margin: 0 0 1rem;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ff8a96;
    text-align: center;
}

.wk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.wk-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.2rem;
    border-radius: 14px;
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.2);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.wk-card:hover {
    transform: translateY(-3px);
    border-color: #c2001c;
    background: rgba(30, 4, 9, 0.6);
}

.wk-card-icon {
    font-size: 1.6rem;
}

.wk-card-title {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}

.wk-card-excerpt {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ---- Article ---- */
.wk-article {
    max-width: 820px;
    margin: 0 auto;
}

.wk-crumbs {
    margin-bottom: 1.2rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.wk-crumbs a {
    color: #ff8a96;
    text-decoration: none;
}

.wk-crumbs a:hover {
    text-decoration: underline;
}

.wk-crumb-sep {
    margin: 0 0.4rem;
}

.wk-crumb-current {
    color: rgba(255, 255, 255, 0.8);
}

.wk-article-head {
    margin-bottom: 2rem;
    text-align: center;
}

.wk-game-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 80, 80, 0.4);
    background: rgba(154, 0, 20, 0.25);
    color: #fff;
    text-decoration: none;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.wk-game-link:hover {
    background: rgba(154, 0, 20, 0.45);
    border-color: #c2001c;
}

/* ---- Article prose ---- */
.wk-intro {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Inline links anywhere in the wiki. Scoped to the two containers rather than
   listed class by class: the global stylesheet sets a { color: #7b2ff7 }, so
   any wiki link in a context nobody remembered to name — .wk-pillar-intro was
   the one that showed up — rendered purple in the middle of a red page.
   Card/button links (.wk-card, .wk-game-link, .wk-qa-link, .wk-crumbs) style
   themselves and are excluded so this doesn't repaint their text. */
.wk p a,
.wk li a,
.wk dd a,
.wk figcaption a,
.wk-article p a,
.wk-article li a,
.wk-article dd a,
.wk-article figcaption a {
    color: #ff8a96;
    text-decoration: none;
}

.wk p a:hover,
.wk li a:hover,
.wk dd a:hover,
.wk figcaption a:hover,
.wk-article p a:hover,
.wk-article li a:hover,
.wk-article dd a:hover,
.wk-article figcaption a:hover {
    color: #ffb3bb;
    text-decoration: underline;
}

.wk-section {
    margin: 2.5rem 0;
}

/* The .jo-h2 default centers its text and underline; wiki sections read
   better left-aligned. .wk-left flips both. */
.wk-left {
    text-align: left;
}

.jo-h2.wk-left::after {
    margin-left: 0;
    margin-right: auto;
}

.wk-body p {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.wk-wiki-h3 {
    margin: 1.6rem 0 0.5rem;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    color: #ff8a96;
}

.wk-list {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.wk-list li {
    margin-bottom: 0.5rem;
}

.wk-list strong,
.wk-body strong {
    color: #ff8a96;
}

/* ---- Static character reference cards ---- */
.wk-chars {
    display: grid;
    gap: 1rem;
    margin: 1.2rem 0;
}

.wk-char {
    display: grid;
    grid-template-columns: 124px 1fr;
    gap: 1.1rem;
    align-items: start;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.2);
}

/* The source photos are tall 2:3 portraits. A small square crop made them look
   like cramped thumbnails and cut the faces off at the torso; show them as a
   proper portrait card instead, biased to the top so the face reads. */
.wk-char-img {
    width: 124px;
    height: 165px;
    object-fit: cover;
    object-position: center 15%;
    border-radius: 10px;
}

.wk-char-name {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}

.wk-char-role {
    display: block;
    margin: 0.1rem 0 0.4rem;
    color: #ff8a96;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Small faction tag next to a character's name (Catholic School Girls). */
.wk-char-faction {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 80, 80, 0.25);
}

.wk-char-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ---- Read next ---- */
.wk-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 80, 80, 0.2);
}

.wk-related-title {
    margin: 0 0 1.2rem;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    text-align: center;
}

@media (max-width: 560px) {
    .wk-char {
        grid-template-columns: 104px 1fr;
        gap: 0.9rem;
    }

    .wk-char-img {
        width: 104px;
        height: 138px;
    }
}

/* ---- Pillar page (/wiki): grouped question → short answer → deep link ---- */
.wk-pillar-group {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.wk-pillar-intro {
    margin: 0 0 1.4rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.wk-qa {
    margin: 0 0 1.4rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 80, 80, 0.3);
}

.wk-qa-q {
    margin: 0 0 0.4rem;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(1.02rem, 2.4vw, 1.2rem);
    color: #fff;
}

.wk-qa-a {
    margin: 0 0 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.65;
}

.wk-qa-link {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #ff8a96;
    text-decoration: none;
}

.wk-qa-link:hover {
    text-decoration: underline;
}

.wk-card-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    background: rgba(154, 0, 20, 0.4);
    border: 1px solid rgba(255, 80, 80, 0.4);
    color: #ff9aa4;
}

/* ---- On-page table of contents (JS-built, wiki articles only) ----
   Default (phones/tablets, and desktop below the breakpoint): a small
   "On this page" box at the top of the article. Wide screens (>=1440px): it
   floats into the RIGHT gutter beside the centered 860px content column as a
   discreet, scroll-following rail — a timeline of the article's H2s that ends
   with a Download card. */
.wk-toc {
    margin: 0 0 1.6rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 12px;
    background: rgba(20, 3, 7, 0.4);
}

.wk-toc-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
}

.wk-toc-book {
    font-size: 0.9rem;
}

/* Timeline list — a vertical connector with a dot per section. */
.wk-toc ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wk-toc ul::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.85rem;
    bottom: 0.85rem;
    width: 2px;
    background: rgba(255, 80, 80, 0.22);
}

.wk-toc li {
    position: relative;
    margin: 0;
}

.wk-toc a {
    display: block;
    position: relative;
    padding: 0.32rem 0 0.32rem 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.15s ease;
}

/* Dots belong only to the section links in the list — never to the relocated
   download button (which is a bare <a> in the nav, not an <li>). */
.wk-toc li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #1a0509;
    border: 2px solid rgba(255, 90, 90, 0.5);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.wk-toc a:hover {
    color: #fff;
}

.wk-toc li a.is-active {
    color: #ff8a96;
}

.wk-toc li a.is-active::before {
    background: #c2001c;
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(194, 0, 28, 0.25);
}

/* The rail ends with the site's *existing* download button (.cta-btn),
   relocated into .wk-toc by wiki-toc.js on wide screens. These rules only
   match while it's nested here: unfix it and drop it below the section list
   with a clear gap so it never overlaps. No wrapper frame — the beta button
   carries its own pill styling, and boxing it in a second card just read as
   a button inside a button.
   `zoom` (not `transform: scale`) so the shrunk button actually occupies the
   rail's width in layout — the same trick the in-page variant uses. 0.58 of
   the 320px button lands on ~186px inside the 192px rail, which leaves the
   BETA badge's few px of overhang room without tripping the rail's overflow. */
.wk-toc .cta-btn.beta-download-button {
    position: static;
    /* block-level, not the base inline-flex: an atomic inline box would sit on
       a line box and pick up its leading as a gap under the button. */
    display: flex;
    top: auto;
    right: auto;
    margin: 3rem 0 0;
    /* 320 x 96 grown +10% wide / +8% tall. At zoom 0.58 that renders 204px
       wide, which is why the rail above is 215px: 204 + the BETA badge's ~2px
       of overhang, and a little slack so neither trips its overflow. */
    width: 352px;
    height: 104px;
    min-height: 104px;
    zoom: 0.58;
    transform: none;
    z-index: auto;
}

/* "BETA VERSION" is 9px type before the 0.58 zoom — under 6px on screen, i.e.
   noise rather than information. Dropping it leaves "Download" alone in the
   content column, so that column stops being a max-content box hugging the
   icon and instead fills the width left of the badge, centring the word in
   the space beside the icon. */
.wk-toc .cta-btn.beta-download-button .beta-download-button__subtitle {
    display: none;
}

.wk-toc .cta-btn.beta-download-button .beta-download-button__content {
    width: auto;
    flex: 1;
}

/* "Download" centres on the button's own axis, not on the leftovers beside the
   icon. As an in-flow flex item the icon ate a 63px column, so the label's box
   started after it and centred at 61.8% of the button — the visible lean to the
   right. Taking the icon out of flow lets the label span the full width and
   centre at 50%; the icon keeps its place, pinned where the flex column put it. */
.wk-toc .cta-btn.beta-download-button .beta-download-button__title {
    font-size: 36px;
}

.wk-toc .cta-btn.beta-download-button .beta-download-button__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 63px;
    height: 63px;
    flex-basis: 63px;
    /* +5% on 60px */
}

.wk-toc .cta-btn.beta-download-button .beta-download-button__icon svg {
    width: 29.4px;
    height: 29.4px;
}

/* The floating variant's hover/active lift is written around its
   translateY(-50%) centering, which doesn't apply once it sits in the rail. */
.wk-toc .cta-btn.beta-download-button:hover {
    transform: translateY(-3px);
}

.wk-toc .cta-btn.beta-download-button:active {
    transform: translateY(1px) scale(0.99);
}

/* When jumped to, headings clear the mobile sticky header (and leave a little
   breathing room on desktop). */
.wk-body h2 {
    scroll-margin-top: 90px;
}

/* The "On this page" list is a desktop reading aid — a compact box below the
   breakpoint, the right-gutter rail above it. On phones and tablets it just
   became a bulky panel wedged above the article, so hide it there; the article
   reads straight top-to-bottom, and the box/rail returns from laptop width up.
   1024px is the site's phone+tablet cut-off (same as the burger nav). */
@media (max-width: 1024px) {
    .wk-toc {
        display: none;
    }
}

/* On phones a 4-column reference table can't fit at a readable size, and
   sideways scroll just read as a cut-off table. Below 560px, drop the table
   grid and stack each row into its own card: the row's name becomes the card
   title, and every other cell sits on its own line under its column label
   (injected as data-label by wiki-table.js). Nothing is truncated. Scoped to
   .wk-body so the game pages (already signed off) are untouched. */
@media (max-width: 560px) {
    .wk-body .jo-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .wk-body .jo-table.jo-table-stack,
    .wk-body .jo-table.jo-table-stack tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .wk-body .jo-table-stack thead {
        display: none;
    }

    .wk-body .jo-table-stack tr {
        display: block;
        margin-bottom: 0.9rem;
        padding: 0.95rem 1.1rem;
        border: 1px solid rgba(255, 80, 80, 0.22);
        border-radius: 12px;
        background: rgba(20, 3, 7, 0.5);
    }

    .wk-body .jo-table-stack tr:last-child {
        margin-bottom: 0;
    }

    .wk-body .jo-table-stack th,
    .wk-body .jo-table-stack td {
        display: block;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    /* Row name = card title */
    .wk-body .jo-table-stack tbody th {
        margin-bottom: 0.55rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255, 80, 80, 0.15);
        color: #fff;
        font-size: 1.02rem;
    }

    /* Each data cell on its own line, under its column label */
    .wk-body .jo-table-stack td {
        margin-top: 0.6rem;
    }

    .wk-body .jo-table-stack td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.12rem;
        font-family: 'Sora', sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #ff8a96;
    }

    /* The row hover tint makes no sense on stacked cards */
    .wk-body .jo-table-stack tbody tr:hover th,
    .wk-body .jo-table-stack tbody tr:hover td {
        background: none;
    }
}

/* Right-gutter rail. The 860px content column is centered then nudged +40px
   right (redpage's .s2-main-mega), so the article's text ends at ~1170px at
   this breakpoint. The rail is fixed to the viewport's right edge: at 1440px
   its left edge lands at 1185px, 15px clear of that text, and the gap only
   grows wider from there. Below 1440px the compact top box is shown instead.
   The width is what the download button at the foot of the rail needs (see
   .wk-toc .cta-btn.beta-download-button); `right` was pulled in by the same
   amount it grew, so widening it moved the rail away from the text, not into
   it. No horizontal padding — the button uses the full width, and the list
   below keeps its old on-screen position because the rail shifted right by
   about what the padding used to inset it. */
@media (min-width: 1440px) {
    .wk-toc {
        position: fixed;
        top: 50%;
        right: 2.5rem;
        transform: translateY(-50%);
        width: 215px;
        max-height: 88vh;
        overflow-y: auto;
        margin: 0;
        padding: 0.4rem 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
}

/* ============================================================
   Support form — "Where do I find my Player.log?" helper.
   A collapsed <details> under the log upload: the instructions
   are only needed by people who don't know the path, so they
   stay out of the way until asked for.
   ============================================================ */
.s2-loghelp {
    margin-top: 0.7rem;
    border: 1px solid rgba(255, 80, 80, 0.2);
    border-radius: 10px;
    background: rgba(20, 3, 7, 0.4);
    overflow: hidden;
}

.s2-loghelp>summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ff8a96;
    transition: color 0.15s ease;
}

.s2-loghelp>summary::-webkit-details-marker {
    display: none;
}

.s2-loghelp>summary::before {
    content: '?';
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: rgba(194, 0, 28, 0.35);
    border: 1px solid rgba(255, 90, 90, 0.45);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: -0.2em;
}

.s2-loghelp>summary:hover {
    color: #fff;
}

.s2-loghelp[open]>summary {
    border-bottom: 1px solid rgba(255, 80, 80, 0.18);
}

.s2-loghelp-body {
    padding: 0.9rem;
}

.s2-loghelp-body p {
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.s2-loghelp-body p:last-child {
    margin-bottom: 0;
}

.s2-loghelp-body strong {
    color: #fff;
}

.s2-loghelp-body code {
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82em;
    color: #ff9aa4;
}

/* The path is the thing people copy — give it its own full-width row that
   wraps instead of overflowing on a phone. */
.s2-loghelp-path {
    margin: 0 0 0.7rem;
}

.s2-loghelp-path code {
    display: block;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #ffb3bb;
    word-break: break-all;
    user-select: all;
    /* one click selects the whole path */
}

.s2-loghelp-body kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    font-family: inherit;
    font-size: 0.78em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* ============================================================
   CORRECTION DU BOUTON BETA
   Espacement horizontal identique :
   ICÔNE → DOWNLOAD = 20px
   DOWNLOAD → BETA = 20px
   ============================================================ */

.beta-download-button {
    position: relative;

    /* Trois colonnes réelles :
       icône | contenu | badge */
    display: grid;
    grid-template-columns: 72px max-content 72px;
    align-items: center;
    justify-content: center;

    /* Même distance entre les trois éléments */
    column-gap: 20px;

    width: 360px;
    max-width: 100%;
    min-height: 96px;
    padding: 12px 10px;

    box-sizing: border-box;
}


/* ============================================================
   ICÔNE
   ============================================================ */

.beta-download-button__icon {
    position: relative;
    z-index: 2;

    width: 72px;
    height: 72px;
    flex: none;

    justify-self: center;
    align-self: center;
}

.beta-download-button__icon svg {
    width: 34px;
    height: 34px;
}


/* ============================================================
   CONTENU CENTRAL
   ============================================================ */

.beta-download-button__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Annule le flex: 1 actuel */
    flex: none;

    width: max-content;
    min-width: 0;
    gap: 8px;

    justify-self: center;
    text-align: center;
}


/* ============================================================
   TITRE DOWNLOAD
   ============================================================ */

.beta-download-button__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;

    white-space: nowrap;
    text-align: center;
}


/* ============================================================
   SOUS-TITRE BETA VERSION
   ============================================================ */

.beta-download-button__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #f06a7d;
    letter-spacing: 2px;

    white-space: nowrap;
}

.beta-download-button__line {
    width: 20px;
    height: 2px;
    flex: none;
}



/* ============================================================
   BOUTON FLOTTANT
   On conserve les proportions de base et on réduit tout
   uniformément avec scale().
   ============================================================ */

.cta-btn.beta-download-button {
    width: 360px;
    height: 96px;

    /* Empêche max-width: 100% de compresser la grille */
    max-width: none;

    transform-origin: right center;
}


/* Le survol doit conserver le positionnement du bouton */
.cta-btn.beta-download-button:hover {
    transform:
        translateY(-50%) scale(calc(var(--btn-scale) * 1.03));
}

.cta-btn.beta-download-button:active {
    transform:
        translateY(-50%) scale(calc(var(--btn-scale) * 0.98));
}


/* ============================================================
   TABLETTE
   Ne pas modifier les dimensions internes.
   Réduire uniquement le bouton complet.
   ============================================================ */

@media (max-width: 768px) {
    .cta-btn.beta-download-button {
        width: 360px;
        height: 96px;
        max-width: none;

        --btn-scale: calc(0.78 * var(--cta-scale, 1));
    }

    .beta-download-button:not(.cta-btn) {
        zoom: 0.72;
    }
}


/* ============================================================
   MOBILE
   Ne surtout plus utiliser width: 215px ou gap: 6px.
   Cela comprimait le contenu et détruisait les proportions.
   ============================================================ */

@media (max-width: 480px) {
    .beta-download-button {
        width: 360px;
        max-width: none;
        min-height: 96px;

        grid-template-columns: 72px max-content 72px;
        column-gap: 20px;

        padding: 12px 10px;
    }

    .beta-download-button__icon {
        width: 72px;
        height: 72px;
    }

    .beta-download-button__icon svg {
        width: 34px;
        height: 34px;
    }

    .beta-download-button__title {
        font-size: 28px;
    }

    .beta-download-button__subtitle {
        gap: 8px;
        font-size: 10px;
        color: #f06a7d;
        letter-spacing: 2px;
    }

    .beta-download-button__line {
        display: block;
        width: 20px;
    }

    .cta-btn.beta-download-button {
        width: 360px;
        height: 96px;
        max-width: none;

        --btn-scale: calc(0.72 * var(--cta-scale, 1));
    }

    .beta-download-button:not(.cta-btn) {
        zoom: 0.68;
    }
}

/* ============================================================
   CORRECTION : réduire l'espace vide sous le badge BETA
   ============================================================ */

.beta-download-button {
    /* Seulement deux colonnes dans le bouton :
       icône + contenu */
    grid-template-columns: 72px max-content;
    column-gap: 20px;
    justify-content: start;

    /* Bouton moins long horizontalement */
    width: 320px;
    min-height: 96px;
    padding: 12px 10px;
}

/* Le contenu ne doit pas s'étirer */
.beta-download-button__content {
    width: max-content;
    flex: none;
    justify-self: start;
}

/* Même largeur pour le bouton flottant */
.cta-btn.beta-download-button {
    width: 320px;
    height: 96px;
    max-width: none;
}

/* Conserver les proportions sur mobile */
@media (max-width: 480px) {

    .beta-download-button,
    .cta-btn.beta-download-button {
        width: 320px;
        min-height: 96px;
        max-width: none;

        grid-template-columns: 72px max-content;
        column-gap: 20px;
        padding: 12px 10px;
    }
}

/* ============================================================
   CENTRALISATION HORIZONTALE DES BOUTONS IN-PAGE
   (PC, Tablette, Mobile)
   ============================================================ */
.beta-download-button:not(.cta-btn) {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5rem;
    display: grid !important;
    transform-origin: center center;
}

.sg-vision,
.jo-cta-final {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Spend sync control sitting in the "Top campaigns" heading, and the flag on
   rows where most of the clicks billed by the network never reached the site —
   the one number on this page that is costing real money when it's wide. */
.trk-sync {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.admin-table td.trk-loss {
    color: #ff8a96;
}

.trk-loss-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(194, 0, 28, 0.35);
    border: 1px solid rgba(255, 90, 90, 0.5);
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffd6d6;
}

.trk-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.trk-cpm-note {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: help;
}

/* ============================================================
   /admin/reports — reporting-kit snapshots
   ============================================================ */
.rep-block {
    margin-bottom: 2rem;
}

.rep-note {
    margin: 0 0 1rem;
    font-size: 0.85rem;
}

.rep-section-title {
    margin: 1.4rem 0 0.6rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ff8a96;
}

.rep-empty {
    padding: 1.2rem;
    text-align: center;
}

/* Fallback for any block that isn't a psql table — kept monospaced and
   scrollable rather than reflowed, since its alignment is the only structure
   it has left. */
.rep-raw {
    margin: 0;
    padding: 0.9rem 1rem;
    overflow-x: auto;
    border-radius: 10px;
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre;
}

/* ============================================================
   /admin/tracking — four specialised views behind tabs
   ============================================================ */
.trk-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 1.5rem 0 1.6rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: rgba(20, 3, 7, 0.5);
    border: 1px solid rgba(255, 80, 80, 0.18);
    overflow-x: auto;
}

.trk-tab {
    flex: 1;
    min-width: max-content;
    padding: 0.7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    font-family: 'Sora', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.trk-tab:hover {
    color: #fff;
}

.trk-tab.is-active {
    background: radial-gradient(130% 130% at 50% 0%, rgba(154, 0, 20, 0.5), rgba(20, 3, 7, 0.5) 75%);
    border-color: rgba(255, 90, 90, 0.45);
    color: #fff;
}

/* Only the selected view is in flow; the rest stay rendered but hidden, which
   is what makes switching instant and query-free. */
.trk-view {
    display: none;
}

.trk-view.is-active {
    display: block;
}

.trk-tiles-5 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.trk-tile-sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   /admin/tracking — header, tabs, KPI cards, ranked tables
   ============================================================ */
.trk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.trk-title {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.trk-subtitle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.trk-subtitle svg {
    width: 15px;
    height: 15px;
    color: #ff5a67;
    flex-shrink: 0;
}

.trk-head-right {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.trk-period,
.trk-actualiser {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border-radius: 12px;
    font-family: 'Sora', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.trk-period svg,
.trk-actualiser svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.trk-period {
    background: rgba(20, 3, 7, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
}

.trk-period:hover,
.trk-period.is-open {
    border-color: rgba(255, 90, 90, 0.5);
    color: #fff;
}

.trk-period-caret {
    font-size: 0.7rem;
    opacity: 0.6;
}

.trk-actualiser {
    background: linear-gradient(180deg, #c8102e 0%, #9f001b 100%);
    border: 1px solid #ff2948;
    color: #fff;
}

.trk-actualiser:hover {
    filter: brightness(1.1);
    color: #fff;
}

.trk-filterpanel {
    margin-bottom: 1.4rem;
}

/* Shown when the displayed window has no fresh ad-spend cached. Informative,
   not an error: the page deliberately no longer blocks on the networks. */
.trk-syncnotice {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;

    margin-bottom: 1.3rem;
    padding: 0.75rem 1rem;

    border-radius: 12px;
    background: rgba(194, 0, 28, 0.1);
    border: 1px solid rgba(255, 90, 103, 0.28);

    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.trk-syncnotice-icon {
    display: inline-flex;
    color: #ff8a96;
}

.trk-syncnotice-icon svg {
    width: 17px;
    height: 17px;
}

.trk-syncnotice-action {
    margin-left: auto;
    padding: 0.4rem 0.9rem;

    border-radius: 8px;
    background: #c2001c;
    border: 1px solid #ff5a67;

    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}

.trk-syncnotice-action:hover {
    filter: brightness(1.12);
    text-decoration: none;
    color: #fff;
}

/* The same strip while the browser is fetching spend in the background, and
   after that fetch failed. Neutral instead of red for the first — nothing is
   wrong yet, the figures are simply on their way. */
.trk-syncnotice.is-loading {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

.trk-syncnotice.is-loading .trk-syncnotice-icon {
    color: rgba(255, 255, 255, 0.6);
    animation: trk-spin 1.1s linear infinite;
}

@keyframes trk-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trk-syncnotice.is-loading .trk-syncnotice-icon {
        animation: none;
    }
}

/* ---- Tabs ---- */
.trk-tabs {
    display: flex;
    gap: 0.3rem;
    margin: 0 0 1.5rem;
    padding: 0.4rem;
    border-radius: 16px;
    background: rgba(16, 2, 6, 0.7);
    border: 1px solid rgba(255, 80, 80, 0.14);
    overflow-x: auto;
}

.trk-tab {
    flex: 1;
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    font-family: 'Sora', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.trk-tab svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.trk-tab:hover {
    color: rgba(255, 255, 255, 0.85);
}

.trk-tab.is-active {
    background: linear-gradient(180deg, rgba(120, 0, 18, 0.55), rgba(40, 2, 10, 0.5));
    border-color: rgba(255, 60, 80, 0.45);
    color: #fff;
    box-shadow: 0 0 18px rgba(194, 0, 28, 0.25);
}

/* Only the selected view is in flow; the rest stay rendered but hidden, which
   is what makes switching instant and query-free. */
.trk-view {
    display: none;
}

.trk-view.is-active {
    display: block;
}

/* ---- KPI cards ---- */
.trk-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.trk-kpi {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.4rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(60, 2, 12, 0.55), rgba(18, 2, 6, 0.75));
    border: 1px solid rgba(255, 70, 90, 0.22);
}

.trk-kpi-accent {
    border-color: rgba(255, 70, 90, 0.42);
    box-shadow: 0 0 24px rgba(194, 0, 28, 0.16);
}

/* Clickable KPI (opens a modal). Same tile as the others, plus a corner glyph
   and a hover/focus lift that say it's interactive. */
.trk-kpi-clickable {
    position: relative;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.trk-kpi-clickable:hover {
    border-color: rgba(255, 90, 103, 0.5);
    transform: translateY(-2px);
}

.trk-kpi-clickable:focus-visible {
    outline: 2px solid rgba(255, 90, 103, 0.6);
    outline-offset: 2px;
}

.trk-kpi-expand {
    position: absolute;
    top: 0.9rem;
    right: 0.95rem;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.32);
    transition: color 0.15s ease, transform 0.15s ease;
}

.trk-kpi-expand svg {
    width: 15px;
    height: 15px;
}

.trk-kpi-clickable:hover .trk-kpi-expand,
.trk-kpi-clickable:focus-visible .trk-kpi-expand {
    color: #ff8a94;
    transform: scale(1.08);
}

.trk-kpi-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 16px;
    background: rgba(120, 0, 18, 0.3);
    border: 1px solid rgba(255, 70, 90, 0.3);
    color: #ff5a67;
}

.trk-kpi-ic svg {
    width: 26px;
    height: 26px;
}

.trk-kpi-body {
    min-width: 0;
}

.trk-kpi-label {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
}

.trk-kpi-value {
    margin-top: 0.2rem;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

/* ---- Panels & tables ---- */
.trk-panel-card {
    margin-bottom: 1.3rem;
    padding: 0.4rem 0.6rem;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(45, 2, 10, 0.4), rgba(16, 2, 6, 0.7));
    border: 1px solid rgba(255, 70, 90, 0.16);
    overflow-x: auto;
}

.trk-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1rem 0.4rem;
}

.trk-card-head h2 {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.trk-card-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.trk-table {
    width: 100%;
    border-collapse: collapse;
}

.trk-table th {
    padding: 1rem;
    text-align: left;
    font-family: 'Sora', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.trk-table td {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
    vertical-align: middle;
}

.trk-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* One-click jump to a network's own login, in the balances table. */
.trk-account-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.trk-account-link:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    text-decoration: none;
}

/* Total row — set apart from the data above it by a heavier rule and a tint,
   so it never reads as one more country in the list. */
.trk-table tfoot td {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Paid-clicks world map (Google GeoChart). */
.trk-adgeo {
    margin: 0 1rem 1.2rem;
}

.trk-adgeo-map {
    max-width: 820px;
    margin: 0 auto;
    min-height: 220px;
}

/* The map is the panel's whole point, so show it big — full panel width rather
   than the capped default, with a taller floor before the async draw lands. */
.trk-adgeo-big .trk-adgeo-map {
    max-width: none;
    min-height: 340px;
}

/* GeoChart draws its own SVG; keep it from overflowing its container. */
.trk-adgeo-map svg {
    max-width: 100%;
    height: auto;
}

/* "Show country details" button — sits on the right of the panel head where
   the note used to be. */
.trk-adgeo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 90, 103, 0.35);
    background: rgba(255, 41, 72, 0.1);
    font-family: 'Sora', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ff8a94;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.trk-adgeo-toggle:hover {
    background: rgba(255, 41, 72, 0.2);
    border-color: rgba(255, 90, 103, 0.6);
    color: #fff;
}

.trk-adgeo-toggle svg {
    width: 15px;
    height: 15px;
}

/* The caret/tag icon nudges to say the panel is expanded. */
.trk-adgeo-toggle.is-open svg {
    color: #fff;
}

.trk-adgeo-note {
    margin: 0 1rem 0.6rem;
}

.trk-adgeo-details[hidden] {
    display: none;
}

/* Region chips above the map. */
.trk-adgeo-regions {
    margin: 0 1rem 0.8rem;
}

/* Our own colour-scale legend, replacing GeoChart's built-in one: a gradient
   in the map's own two colours, labelled with what it measures and the real
   top value, centred under the map. */
.trk-adgeo-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
}

.trk-adgeo-legend[hidden] {
    display: none;
}

.trk-adgeo-legend-title {
    margin-right: 0.15rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

/* Pale (few clicks) to deep red (many) — same two stops as the map's
   colorAxis, so the bar reads as the map's own scale. */
.trk-adgeo-legend-bar {
    width: clamp(120px, 22vw, 220px);
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb3ba, #8f0018);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.trk-adgeo-caption {
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

/* The unattributed remainder is a real row so the Total reconciles with the
   Paid clicks KPI — muted, because it names a gap rather than a country. */
.trk-geo-unattributed td {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.trk-geo-unattributed .trk-strong {
    color: rgba(255, 255, 255, 0.75);
}

.trk-strong {
    color: #fff;
    font-weight: 600;
}

.trk-sort {
    color: #ff5a67;
    font-size: 0.8rem;
}

.trk-th-rank,
.trk-td-rank {
    width: 44px;
    padding-right: 0;
}

.trk-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(120, 0, 18, 0.3);
    border: 1px solid rgba(255, 70, 90, 0.22);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

/* Small caveat marker next to a figure that needs one (CPM billing, or spend
   reported only per campaign). Cursor is help: the explanation is the title. */
.trk-hint {
    display: inline-block;
    /* Not a plain space: the markup puts this straight after a value with no
       whitespace between, so the gap has to come from the box itself. */
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    cursor: help;
}

/* ---- Signups & spend chart ---- */
.trk-signups-toggle {
    display: inline-flex;
    gap: 0.3rem;
    margin: 0 1rem 1rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.trk-chip {
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.trk-chip:hover {
    color: rgba(255, 255, 255, 0.85);
}

.trk-chip.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.trk-chip:disabled {
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
}

.trk-chip:disabled:hover {
    color: rgba(255, 255, 255, 0.25);
}

/* New-customers modal toggle: sits inside the modal above its table, so it
   drops the section margins the chart-row version carries. */
.trk-cust-toggle {
    margin: 0 0 0.9rem;
}

/* "Paid only" view of the new-customers table: hide every non-payer row. The
   toggle's JS adds this class; the rows carry data-paid="0". */
#trkCustTable.trk-cust-paid-only tbody tr[data-paid="0"] {
    display: none;
}

.trk-chart-wrap {
    position: relative;
    padding-top: 1.6rem;
}

/* Where a chart's numbers come from and when they last moved. Stated per
   chart because the four on this row are fed by three different mechanisms on
   three different clocks. Quiet enough to stay out of the way of the chart
   itself, which is what the eye is here for. */
.trk-chart-fresh {
    margin: -0.15rem 0 0.4rem;
    font-size: 0.68rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.34);
}

.trk-fresh-at {
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

/* The y-axis numbers, held outside the chart's own scrolling box so they stay
   put when a wide chart is scrolled sideways (drawn by pinAxis() in the view).
   The gradient lets the bars slide under the scale and fade out rather than
   meeting a hard edge; it has to be opaque where the digits sit, or they'd be
   read against whatever bar happens to be behind them. */
.trk-axis-pin {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.trk-axis-pin-l {
    left: 0;
    background: linear-gradient(90deg, #140208 72%, rgba(20, 2, 8, 0));
}

.trk-axis-pin-r {
    right: 0;
    background: linear-gradient(270deg, #140208 72%, rgba(20, 2, 8, 0));
}

/* Row of same-shape charts sharing one set of period-bucket chips above them
   (#trkChartsToggle) instead of one each. Equal flex columns, not fixed
   widths: each takes exactly the row's available share, and a chart whose
   data needs more room than that scrolls inside its own .trk-chart (min-width
   0 is what lets a flex child shrink below its content's natural width in the
   first place — without it the row would just overflow instead). */
.trk-charts-row {
    display: flex;
    gap: 1.2rem;
    margin: 0 1rem 1rem;
}

.trk-chart-col {
    flex: 1 1 0;
    min-width: 0;
}

.trk-chart-col-title {
    margin: 0 0 0.9rem;
    font-family: 'Sora', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
}

/* Four charts in the row is too many to keep side by side on anything short of
   a wide desktop — below that they fold to a 2x2 grid, and to one column on
   the narrowest screens (the rule below). */
@media (max-width: 1500px) {
    .trk-charts-row {
        flex-wrap: wrap;
    }

    .trk-charts-row .trk-chart-col {
        flex: 1 1 calc(50% - 0.6rem);
    }
}

@media (max-width: 900px) {
    .trk-charts-row {
        flex-direction: column;
    }
}

.trk-chart-axis {
    position: absolute;
    top: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

.trk-chart-axis-l {
    left: 0;
}

.trk-chart-axis-r {
    right: 0;
    color: rgba(255, 90, 103, 0.6);
}

.trk-chart {
    width: 100%;
    overflow-x: auto;
    /* Left visible on purpose, unlike the page-level scrollbar hidden at the
       top of this file: a chart column's data can be wider than the column
       itself (see .trk-chart-col), and the scrollbar is what tells you
       there's more to see — just themed instead of the bare OS default. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 70, 90, 0.45) rgba(255, 255, 255, 0.06);
}

.trk-chart::-webkit-scrollbar {
    height: 8px;
}

.trk-chart::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.trk-chart::-webkit-scrollbar-thumb {
    background: rgba(255, 70, 90, 0.45);
    border-radius: 999px;
}

.trk-chart::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 70, 90, 0.7);
}

.trk-chart svg {
    display: block;
}

.trk-signups-kpis {
    margin: 0 1rem 1rem;
}

.trk-kpi-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}

/* ---- Teasers view ----
   The four windows (today / 7 / 30 / calendar) are all in the DOM at once and
   only one is shown, so switching period costs no request — display:none is
   what makes the other three inert rather than merely invisible. */
.trk-teaser-period {
    display: none;
}

.trk-teaser-period.is-active {
    display: block;
}

.trk-teaser-range {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 1rem 0.9rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
}

.trk-teaser-range svg {
    width: 15px;
    height: 15px;
    color: #ff5a67;
}

/* ---- KPI cards ----
   Four compact cards in one row, all the same height: three headline answers
   and a one-line summary of the position funnel. No progress bars on the cards
   — a raw duration has no natural 100% to fill against, so each card is just
   its subtitle, its answer, and one muted line of proof. The funnel's full bar
   chart is one click away in a modal, off the main view. */
.trk-answers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin: 0 1rem 1.6rem;
}

.trk-answer {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 16px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 41, 72, 0.10), transparent 60%),
        rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

/* Hairline of brand colour along the top edge — the row reads as one family
   without four heavy borders fighting the card content. */
.trk-answer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #ff2948, rgba(255, 90, 103, 0));
}

.trk-answer:hover {
    border-color: rgba(255, 90, 103, 0.35);
    transform: translateY(-2px);
}

.trk-answer-head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.trk-answer-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 41, 72, 0.14);
    border: 1px solid rgba(255, 41, 72, 0.28);
    color: #ff5a67;
}

.trk-answer-icon svg {
    width: 16px;
    height: 16px;
}

.trk-answer-q {
    margin: 0;
    padding-top: 0.15rem;
    font-size: 0.79rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.58);
}

.trk-answer-v {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.25rem, 1.9vw, 1.65rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
    overflow-wrap: anywhere;
}

.trk-answer-proof {
    margin: 0.5rem 0 0;
    font-size: 0.77rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
}

/* The figures are the proof; the words around them are only there to say what
   they count. */
.trk-answer-proof strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
}

/* ---- Position card (fourth KPI) ----
   Shows position 1 only; the whole card is the trigger for the full-funnel
   modal. A small expand glyph in the corner is the only affordance the click
   needs. */
.trk-answer-pos.is-clickable {
    cursor: pointer;
}

.trk-answer-expand {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.15s ease, transform 0.15s ease;
}

.trk-answer-expand svg {
    width: 15px;
    height: 15px;
}

/* The card's own hover (border + lift, inherited from .trk-answer) already
   signals "interactive"; the glyph brightening confirms the click target. */
.trk-answer-pos.is-clickable:hover .trk-answer-expand,
.trk-answer-pos.is-clickable:focus-visible .trk-answer-expand {
    color: #ff8a94;
    transform: scale(1.08);
}

.trk-answer-pos.is-clickable:focus-visible {
    outline: 2px solid rgba(255, 90, 103, 0.6);
    outline-offset: 2px;
}

/* The subtitle would otherwise run under the corner glyph on a narrow card. */
.trk-answer-pos .trk-answer-q {
    padding-right: 1.4rem;
}

/* ---- "See all positions" modal ---- */
.trk-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.trk-modal[hidden] {
    display: none;
}

/* Stops the page behind the modal from scrolling while it is open. */
body.trk-modal-lock {
    overflow: hidden;
}

.trk-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 1, 3, 0.72);
    backdrop-filter: blur(2px);
}

.trk-modal-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.4rem 1.5rem 1.6rem;
    border-radius: 18px;
    background: #170409;
    border: 1px solid rgba(255, 90, 90, 0.22);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: trk-modal-in 0.16s ease-out;
}

/* Wider box for the modals that hold a table rather than a short list. */
.trk-modal-box-wide {
    max-width: 760px;
}

/* Near-fullscreen box: the charts dialog exists to give the four charts as
   much room as the screen allows, so it takes the viewport bar a small margin
   rather than sitting at a fixed width. */
.trk-modal-box-full {
    max-width: none;
    width: calc(100vw - 2.5rem);
    max-height: calc(100vh - 2.5rem);
    height: calc(100vh - 2.5rem);
    display: flex;
    flex-direction: column;
    /* Overrides .trk-modal-box's own overflow-y: auto — this dialog never
       scrolls, its contents are sized to fit it. */
    overflow: hidden;
}

/* The chart row takes whatever height the head and chips leave over, and
   nothing scrolls anywhere inside this dialog: the whole point of opening it
   is to see all four charts at once. They shrink to fit instead — the view's
   frame() sizes the fullscreen copies from their box rather than from the
   data, and thins the x-axis labels when the bands get tight. */
.trk-modal-box-full .trk-charts-row-big {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin: 0;
}

/* Two across, two down — four charts side by side on one row is exactly the
   cramped layout this dialog exists to escape. */
.trk-charts-row-big {
    flex-wrap: wrap;
    align-content: stretch;
}

.trk-charts-row-big .trk-chart-col {
    flex: 0 0 calc(50% - 0.6rem);
    width: calc(50% - 0.6rem);
    height: calc(50% - 0.6rem);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The wrap, and the box inside it, take the height the column has left after
   its title — that measured height is what the SVG is drawn to. */
.trk-charts-row-big .trk-chart-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.trk-charts-row-big .trk-chart {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.trk-charts-row-big .trk-chart-col-title {
    margin-bottom: 0.3rem;
}

/* "Enlarge" button in the chart card's head — pushed to the right edge. */
.trk-chart-expand {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    font-family: 'Sora', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.trk-chart-expand:hover {
    color: #fff;
    background: rgba(255, 90, 103, 0.16);
    border-color: rgba(255, 90, 103, 0.45);
}

.trk-chart-expand svg {
    width: 15px;
    height: 15px;
}

@keyframes trk-modal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Table inside a modal: tighter than the full-page tables, and its own scroll
   container (.ss-table-wrap) so a long email never widens the modal box. */
.trk-modal-table th,
.trk-modal-table td {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
}

.trk-modal-table th {
    padding-top: 0;
}

.trk-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.trk-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.trk-modal-title svg {
    width: 18px;
    height: 18px;
    color: #ff5a67;
}

.trk-modal-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    font-size: 1.3rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.trk-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.trk-modal-note {
    margin: 0 0 1.2rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.5);
}

/* ---- Position bar chart (inside the modal) ---- */
.trk-posbars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trk-posbars-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.4rem;
}

.trk-posbars-rank {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.72);
}

.trk-posbars-item.is-first .trk-posbars-rank {
    background: rgba(255, 41, 72, 0.18);
    border-color: rgba(255, 41, 72, 0.4);
    color: #ff7c86;
}

.trk-posbars-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.trk-posbars-meta {
    margin-left: auto;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.45);
}

.trk-posbars-pct {
    flex: 0 0 auto;
    min-width: 2.9rem;
    text-align: right;
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.trk-posbars-track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.trk-posbars-fill {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 41, 72, 0.75), #ff5a67);
}

@media (max-width: 1200px) {
    .trk-answers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .trk-answers {
        grid-template-columns: 1fr;
    }

    .trk-posbars-meta {
        margin-left: 0;
        flex: 1 1 100%;
        order: 1;
        padding-left: 1.72rem;
    }

    .trk-posbars-top {
        flex-wrap: wrap;
    }
}

/* ---- View pager ---- */
.trk-viewnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin: 1.6rem 0 2rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.trk-dots {
    display: inline-flex;
    gap: 0.4rem;
}

.trk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.15s ease;
}

.trk-dot.is-active {
    background: #ff2948;
}

@media (max-width: 640px) {
    .trk-head-right {
        width: 100%;
    }

    .trk-kpi {
        padding: 1.1rem;
    }
}

/* ============================================================
   Custom date-range calendar for /admin/tracking
   Palette lifted from the colors already used across this file —
   named here so this one component can read them as variables.
   ============================================================ */
:root {
    --page-bg: #0c0206;
    --panel-bg: #1a0006;
    --panel-bg-strong: #2a0008;

    --brand-red: #c2001c;
    --brand-red-dark: #9a0014;
    --accent-red: #ff5a67;
    --accent-pink: #ff8a96;

    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #9c8b90;

    --border-soft: rgba(255, 90, 103, 0.22);
    --border-strong: rgba(255, 90, 103, 0.65);
}

.tracking-date-filter {
    color: var(--text-primary);
}

.date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.preset-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;

    color: var(--text-secondary);
    background: rgba(12, 2, 6, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    font-family: 'Sora', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.preset-button:hover {
    color: var(--text-primary);
    border-color: rgba(255, 90, 103, 0.45);
    text-decoration: none;
}

.preset-button.active {
    color: var(--text-primary);

    background: linear-gradient(180deg,
            rgba(194, 0, 28, 0.25),
            rgba(42, 0, 8, 0.75));

    border-color: var(--accent-red);

    box-shadow:
        0 0 0 1px rgba(194, 0, 28, 0.2),
        0 0 20px rgba(194, 0, 28, 0.2);
}

/* The row of filters. Every child is sized from its own content rather than
   sharing one flex unit: the period block holds two date fields and is far
   wider than a single select, and giving them all `flex: 1` is what made the
   "Au" field collide with the Réseau dropdown. */
.filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;

    padding: 22px;
    margin-bottom: 1.4rem;

    background: linear-gradient(135deg,
            rgba(42, 0, 8, 0.96),
            rgba(12, 2, 6, 0.96));

    border: 1px solid var(--border-soft);
    border-radius: 16px;
}

/* Anchor for the popup calendar, which is a child of this block. */
.period-group {
    position: relative;
    flex: 0 0 auto;
}

.filter-group {
    flex: 1 1 150px;
    min-width: 130px;
    max-width: 220px;
}

.filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-left: auto;
}

.filter-label-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;

    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filter-label-title svg {
    width: 15px;
    height: 15px;
    color: var(--accent-pink);
}

.filter-group select {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;

    color: var(--text-primary);
    background: rgba(8, 1, 4, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;

    font-size: 14px;
    color-scheme: dark;
    cursor: pointer;
}

.filter-group select:hover,
.filter-group select:focus {
    border-color: var(--accent-red);
    outline: none;
}

.date-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.date-field-label {
    display: block;
    margin-bottom: 6px;

    color: var(--accent-pink);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.date-input-wrapper {
    display: flex;
    align-items: center;
    gap: 9px;

    width: 175px;
    min-height: 50px;
    padding: 0 14px;

    background: rgba(8, 1, 4, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;

    cursor: pointer;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.date-input-wrapper:focus-within,
.date-input-wrapper:hover,
.date-input-wrapper:focus-visible {
    border-color: var(--accent-red);
    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 90, 103, 0.1),
        0 0 18px rgba(194, 0, 28, 0.12);
}

.date-input-wrapper input {
    width: 100%;
    min-width: 0;

    color: var(--text-primary);
    background: transparent;
    border: 0;
    outline: 0;

    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.date-icon,
.date-chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.date-icon svg {
    width: 16px;
    height: 16px;
}

.date-chevron {
    font-size: 0.7rem;
}

.apply-button,
.reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.apply-button {
    color: #fff;

    background: linear-gradient(180deg,
            #d50024,
            var(--brand-red));

    border: 1px solid var(--accent-red);

    box-shadow: 0 10px 28px rgba(194, 0, 28, 0.25);
}

.apply-button:hover {
    filter: brightness(1.12);
}

.reset-button {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.reset-button:hover {
    color: #fff;
    border-color: rgba(255, 138, 150, 0.5);
    text-decoration: none;
}

/* ---- The popup calendar itself ----
   The class names match Flatpickr's so the look is transferable, but nothing
   here depends on that library — the markup and JS are hand-rolled, so the
   structural rules (grid, flex, positioning) are supplied here too, not just
   the palette overrides a real Flatpickr skin would need. */
.flatpickr-calendar {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;

    width: 620px;
    max-width: calc(100vw - 32px);
    padding: 16px;

    background: linear-gradient(145deg,
            rgba(42, 0, 8, 0.98),
            rgba(12, 2, 6, 0.99));

    border: 1px solid rgba(255, 90, 103, 0.32);
    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.58),
        0 0 32px rgba(194, 0, 28, 0.16);
}

.flatpickr-months {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}

.flatpickr-month {
    flex: 1;
    text-align: center;
    color: var(--text-primary);
    background: transparent;
}

.flatpickr-current-month {
    color: var(--text-primary);
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;

    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.flatpickr-prev-month {
    left: 0;
}

/* Sits at the right edge of the FIRST month, not the panel — same place the
   reference design puts it, between the two month titles. */
.flatpickr-next-month {
    left: calc(50% - 26px);
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    border-color: var(--accent-red);
    background: rgba(194, 0, 28, 0.14);
    color: #fff;
}

.flatpickr-two-months {
    display: flex;
    gap: 20px;
}

.flatpickr-innerContainer {
    flex: 1;
    min-width: 0;
}

.flatpickr-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
}

span.flatpickr-weekday {
    color: var(--text-secondary);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}

.flatpickr-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 3px;
}

.flatpickr-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;

    color: var(--text-primary);
    font-size: 0.82rem;

    border: 0;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;

    transition:
        background-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

.flatpickr-day:hover {
    color: #fff;
    background: rgba(255, 90, 103, 0.13);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(224, 224, 224, 0.35);
}

/* Days before the ads started (see TrackingController::MIN_DATE): shown but
   unpickable — dimmed, struck through faintly by the cursor, no hover tint. */
.flatpickr-day.flatpickr-disabled {
    color: rgba(224, 224, 224, 0.18);
    cursor: not-allowed;
    pointer-events: none;
}

/* The in-between days of a range. Their exact tint is set inline by the
   calendar's JS, interpolated across the range so the band fades evenly from
   start to end; a CSS gradient here would restart at every cell and read as
   stripes. This rule only supplies the shape and a fallback tint. */
.flatpickr-day.inRange {
    color: #fff;
    background: rgba(194, 0, 28, 0.3);
    border-radius: 0;
}

/* Square off only the edges that touch a neighbour, so the band reads as one
   continuous shape with rounded ends rather than a row of separate pills. */
.flatpickr-day.inRange+.flatpickr-day.inRange {
    border-radius: 0;
}

.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected {
    color: #fff;
    background: var(--brand-red);

    box-shadow:
        0 0 0 1px rgba(255, 90, 103, 0.65),
        0 0 16px rgba(194, 0, 28, 0.35);
}

.flatpickr-day.startRange {
    border-radius: 10px 0 0 10px;
}

.flatpickr-day.endRange {
    border-radius: 0 10px 10px 0;
}

.flatpickr-day.startRange.endRange {
    border-radius: 10px;
}

.flatpickr-day.today {
    color: var(--accent-pink);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 150, 0.5);
}

/* A selected day already carries its own ring; the today outline on top of it
   reads as a rendering glitch. */
.flatpickr-day.today.selected {
    color: #fff;
}

.calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 14px;
    padding: 12px 14px;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
}

.selected-range-summary {
    display: flex;
    align-items: center;
    gap: 11px;
}

.summary-icon {
    display: inline-flex;
    color: var(--text-muted);
}

.summary-icon svg {
    width: 18px;
    height: 18px;
}

.summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-label {
    color: var(--text-muted);
    font-size: 11px;
}

.summary-value {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.calendar-footer-actions {
    display: flex;
    gap: 10px;
}

.calendar-clear,
.calendar-confirm {
    min-height: 40px;
    padding: 0 16px;

    border-radius: 10px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
}

.calendar-clear {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.calendar-clear:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.calendar-confirm {
    color: #fff;
    background: var(--brand-red);
    border: 1px solid var(--accent-red);
}

.calendar-confirm:hover {
    filter: brightness(1.1);
}

.calendar-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}

@media (max-width: 1100px) {
    .filter-actions {
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .flatpickr-calendar {
        width: calc(100vw - 32px);
    }

    .flatpickr-two-months {
        flex-direction: column;
        gap: 14px;
    }

    /* Stacked months put the second grid below the first, so the "next"
       arrow belongs back at the panel's right edge. */
    .flatpickr-next-month {
        left: auto;
        right: 0;
    }

    .date-fields {
        flex-wrap: wrap;
    }

    .date-input-wrapper {
        width: 150px;
    }
}