@charset "utf-8";
/* ============================================================================
   GENOME 2018 — media viewer · standalone recreation  (layout-template engine)
   ----------------------------------------------------------------------------
   Chrome (Dash / Nav / Stage shell / type / tiles) is faithful to the 2018
   theme (basicStyle.css + GS_Style.css + GS_SliderStyle.css). The stage content
   is now driven by swappable LAYOUT TEMPLATES (see js): Section Browser + Comic
   Reader, both built from the same tile + translucent-panel vocabulary.
   ========================================================================== */


/* ============================================================================
   1 · PAGE SHELL
   ========================================================================== */
html, body { width: 100%; height: 100%; margin: 0; }
body {
    background-image: url(../assets/light_exa.png);   /* shown where the splash fades out */
    background-color: #111;
    overflow: hidden;
    font-family: 'edmondsans_regularregular', 'Helvetica', 'Arial';
    letter-spacing: 1px;
    font-size: 16px;
    color: #d5d5d5;
}

/* (1a TIME COLOUR moved to css/gs-phase.css -- the UNIVERSAL phase layer,
   served to every Infinite-enabled property; enqueued before this file.) */

/* ---- scale-to-screen: a fixed-WIDTH 2443 canvas, scaled to fill the window width
   (always spans horizontally). Its HEIGHT is set in js to the viewport height, so
   content fills vertically and the category rows overflow/scroll below the fold. ---- */
#screen {
    position: absolute;
    width: 2443px;                      /* base width; height set by js */
    left: 0; top: 0;
    z-index: 1;
    transform-origin: top left;         /* js sets scale() to fill the window width */
    overflow: hidden;                   /* clip the parked dash */
    text-align: center;
}


/* ============================================================================
   2 · GS_DASH   slide-down dashboard
   ========================================================================== */
#GS_Dash {
    position: absolute;
    width: 100%;
    height: 765px;                      /* pane 700 + nav 65 */
    top: -700px;
    z-index: 1000;
    background-image: url(../assets/DBG.png);
    background-size: cover;
    color: #FFF;
    font-family: 'edmondsans_regularregular', Arial, Helvetica, sans-serif;
    text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.9);
    transition: top 0.3s ease;
}
    #GS_Dash a { text-decoration: none; }
    #GS_Dash a:hover { font-weight: 700; }

    #GS_Pane {
        position: relative;
        width: 100%;
        height: 700px;
        /* sky-splash overlay (replaces PaneFade.png): clear at the TOP so the GS logo + navigator
           show the DBG sky, fading to the pane-fade's own bottom alpha (225/255 black) down the body. */
        background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.882) 100%);
        background-size: cover;
        overflow: hidden;
    }
        #Dash_Logo {
            position: absolute;
            width: 71px; height: 125px;
            top: 37.5px; left: 40px;
            background-image: url(../assets/Dash_Gelix.png);
            background-size: contain; background-repeat: no-repeat;
        }
        #Dash_Body { position: relative; width: 100%; height: 200px; }
        /* the active section name, bannered dead-center between company + account */
        #Dash_Banner {
            position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
            color: #fff; font-family: 'edmondsans_boldregular', Arial, sans-serif;
            font-size: 46px; letter-spacing: 3px;
            text-shadow: 2px 3px 6px rgba(0,0,0,0.85);
            pointer-events: none; white-space: nowrap;
        }
            #Dash_Home { position: relative; float: left; margin-top: 80px; margin-left: 120px; text-align: left; }
                #Dash_Home h1 { font-family: 'edmondsans_regularregular', Arial, sans-serif; font-size: 50px; margin: 0; color: #FFF; }
                #Dash_Home a  { font-family: 'edmondsans_regularregular', Arial, sans-serif; font-size: 20px; color: #FFF; margin: 5px 10px; }
            #Dash_Login { position: relative; float: right; text-align: center; width: 300px; height: 160px; margin-right: 40px; margin-top: 30px; }
                #Dash_Login a { color: #FFF; }
                #Dash_Login input[type=text],
                #Dash_Login input[type=password] {
                    display: block; width: 220px; margin: 6px auto; padding: 6px 8px;
                    background: rgba(0,0,0,0.5); border: 1px solid #777; color: #FFF;
                    font-family: 'edmondsans_regularregular', Arial, sans-serif;
                }
                #Dash_Login button {
                    margin-top: 6px; padding: 6px 22px; background: var(--gs-accent-deep); border: none;
                    color: #FFF; letter-spacing: 2px; cursor: pointer;
                    font-family: 'edmondsans_mediumregular', Arial, sans-serif;
                }

        /* player-hub: scrollable section content below the header (Resume / Items / Achievements) */
        #Dash_Content {
            position: absolute; left: 0; right: 0; top: 190px; bottom: 0;
            overflow-y: auto; overflow-x: hidden;
            padding: 6px 40px 40px; text-align: left;
            scrollbar-width: none;
        }
        #Dash_Content::-webkit-scrollbar { display: none; }
        .dash-section-title {
            color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
            font-size: 28px; letter-spacing: 2px; margin: 8px 0 18px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.85);
        }
        /* Resume Series — horizontal row of big thumbs */
        .dash-resume-row {
            display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden;
            padding: 4px 0 20px; scrollbar-width: none;
        }
        .dash-resume-row::-webkit-scrollbar { display: none; }
        .dash-resume-card {
            width: 100%; aspect-ratio: 16 / 9;                    /* fills its grid cell (2×N) */
            background-size: cover; background-position: center; background-color: #1a1a1a;
            position: relative; cursor: pointer;
            box-shadow: 0 8px 28px rgba(0,0,0,0.5);
            transition: transform 0.15s ease;
        }
        .dash-resume-card:hover { transform: scale(1.03); }
        .dash-resume-head {                               /* top-left: eyebrow + title over a top gradient */
            position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px; text-align: left;
            background: linear-gradient(to bottom, rgba(0,0,0,0.88), rgba(0,0,0,0));
        }
        .dash-resume-eyebrow {
            color: var(--gs-accent); font-family: 'edmondsans_mediumregular', Arial, sans-serif;
            font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 3px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .dash-resume-title {
            color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
            font-size: 22px; letter-spacing: 1px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .dash-resume-pos {                                /* "Page N of M" — bottom-left */
            position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px;
            background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
            color: #e6e6e6; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
            font-size: 18px; letter-spacing: 1px; text-align: left;
        }
        .dash-empty { color: #cfcfcf; font-size: 18px; padding: 8px 0; }

        /* Dashboard home: Resume (2×N grid) on the left, News on the right */
        .dash-home { display: flex; gap: 40px; align-items: flex-start; }
        .dash-home-col { flex: 1 1 0; min-width: 0; }
        .dash-resume-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-bottom: 24px; }   /* fill the half evenly */
        .dash-news { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
        .dash-news-item {
            display: flex; gap: 16px; padding: 14px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
        }
        .dash-news-thumb {
            flex: 0 0 auto; width: 192px; height: 108px;       /* 16:9 news thumbnail */
            background-size: cover; background-position: center; background-color: #1a1a1a;
        }
        .dash-news-body { flex: 1 1 auto; min-width: 0; }
        .dash-news-meta { display: flex; align-items: center; gap: 10px; }
        .dash-news-source {
            font-family: 'edmondsans_mediumregular', Arial, sans-serif;
            font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 2px 8px; color: #fff;
        }
        .dash-news-source.inf { background: var(--gs-accent); }             /* Infinite */
        .dash-news-source.gs  { background: rgba(255,255,255,0.18); }       /* Genome Studios */
        .dash-news-date { color: #9a9a9a; font-size: 13px; letter-spacing: 1px; }
        .dash-news-title { color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif; font-size: 22px; letter-spacing: 1px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dash-news-blurb { color: #b8b8b8; font-size: 16px; line-height: 1.4; margin-top: 4px; }

        /* Items / Achievements — category grid → detail list */
        .dash-cat-grid { display: flex; flex-wrap: wrap; gap: 20px; padding: 4px 0 26px; }
        .dash-cat-card {
            flex: 0 0 auto; width: 300px; height: 169px;
            background-size: cover; background-position: center; background-color: #1a1a1a;
            position: relative; cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,0.5);
            transition: transform 0.15s ease;
        }
        .dash-cat-card:hover { transform: scale(1.03); }
        .dash-cat-label {
            position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
            background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
            color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
            font-size: 22px; letter-spacing: 1px; text-align: left;
        }
        .dash-back {
            display: inline-block; cursor: pointer; margin: 2px 0 12px;
            color: #e0e0e0; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
            font-size: 20px; letter-spacing: 1px;
        }
        .dash-back:hover { color: #fff; }
.dash-cat-eyebrow {
    position: absolute; top: 10px; left: 14px;
    color: var(--gs-accent); font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
        .dash-list { display: flex; flex-direction: column; gap: 14px; padding-bottom: 36px; max-width: 1220px; }   /* ~half the 2443 base */
        .dash-row {
            display: flex; align-items: center; gap: 22px; padding: 18px 24px;          /* ~25% roomier */
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
        }
        .dash-row.locked { opacity: 0.5; }
        .dash-row-icon {
            flex: 0 0 auto; width: 70px; height: 70px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 40px; background: rgba(0,0,0,0.35);
        }
        .dash-row-mid { flex: 1 1 auto; min-width: 0; }
        .dash-row-name { color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif; font-size: 28px; letter-spacing: 1px; }
        .dash-row-desc { color: #b8b8b8; font-size: 20px; margin-top: 4px; }
        .dash-row-count { flex: 0 0 auto; color: #fff; font-family: 'edmondsans_boldregular', Arial, sans-serif; font-size: 32px; letter-spacing: 1px; }
        .dash-row-status { flex: 0 0 auto; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: #27ae60; }
        .dash-row.locked .dash-row-status { color: #9a9a9a; }

    #GS_Nav {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 65px;
        background-color: rgba(0,0,0,0.9);
        display: flex;
        justify-content: space-between;
        font-family: 'edmondsans_mediumregular', Arial, Helvetica, sans-serif;
        font-size: 23px;                              /* BACK + Login text — sized for the 65px bar */
        color: #FFF;
    }
        #Nav_Back {
            height: 25px; width: 300px; display: flex; align-items: center;
            cursor: pointer; padding: 20px 15px; text-align: left;
            opacity: 0.4; transition: opacity 0.2s;       /* disabled at root */
        }
        #Nav_Back.enabled { opacity: 1; }
            #Nav_Back_Arrow { width: 24px; height: 24px; margin-right: 8px; background: url(../assets/Arrow_Left.png) center/contain no-repeat; }
        #Nav_Links { height: 65px; display: flex; justify-content: center; align-items: center; }
            #Nav_Links a { display: block; padding: 12px 18px; color: #FFF; letter-spacing: 2px; font-size: 20px; cursor: pointer; }
            #Nav_Links a.active { color: var(--gs-accent); }
        #Nav_User { height: 25px; width: 300px; display: flex; align-items: center; justify-content: flex-end; padding: 20px 15px; cursor: pointer; }
            #User_Arrow { width: 23px; height: 23px; margin-right: 8px; background: url(../assets/Arrow_Right.png) center/contain no-repeat; transition: transform 0.3s; }
            #Nav_User_Avatar { width: 36px; height: 36px; margin-left: 10px; background: url(../assets/GSIcon.png) center/contain no-repeat; }


/* ============================================================================
   3 · GS_STAGE   shell + swappable background
   ========================================================================== */
#GS_Stage {
    position: absolute;
    width: 100%;
    top: 65px;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    transition: top 0.3s ease;
}

/* full-viewport splash backdrop — fills the screen vertically (beyond the scaled
   content), sitting behind everything. Two layers crossfade; the mask alpha-fades
   the "splash of colour" (full to ~35%) into the site texture below. */
#splashBG {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}
#splashBG.blurred {                      /* cinematic backdrop for the Comic Reader */
    filter: blur(16px) brightness(0.42);
    transform: scale(1.08);
}
/* two stacked layers crossfade on image change, so the splash actually animates */
.bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;     /* anchor the vivid top of the image */
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.bg-layer.show { opacity: 1; }

/* the active layout template renders its whole structure in here */
#stageContent { position: absolute; inset: 0; z-index: 1; }


/* ============================================================================
   4 · SHARED VOCABULARY   translucent panel · type · tiles · edge bars · lightbox
   ========================================================================== */

/* --- translucent black panel (the signature 2018 look) --- */
.manual-pane {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.82);
    background-clip: padding-box;
    padding: 40px;
    max-width: 620px;
    text-align: left;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.manual-pane .eyebrow {
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial';
    color: var(--gs-accent); letter-spacing: 4px; font-size: 13px;
    text-transform: uppercase; margin-bottom: 8px;
}
.viewBtn {
    display: inline-block; margin-top: 16px; padding: 9px 24px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.5);
    color: #ededed; letter-spacing: 3px;
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial'; font-size: 15px;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.viewBtn:hover { background: var(--gs-accent-deep); border-color: var(--gs-accent-deep); }
.viewBtn.soon { opacity: 0.55; border-style: dashed; cursor: default; }
.viewBtn.soon:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.viewBtn.primary { background: var(--gs-accent-deep); border-color: var(--gs-accent-deep); color: #fff; }
.viewBtn.primary:hover { background: var(--gs-accent); border-color: var(--gs-accent); }
/* series-view hero: a row of two CTAs (pinned to the panel bottom) + page meta */
.cta-row { display: flex; gap: 12px; margin-top: auto; flex-wrap: wrap; }
.cta-row .viewBtn { margin-top: 0; align-self: auto; }
/* series-view hero: season synopsis, bold secondary header, per-page synopsis
   (now over the splash + vignette, no box — drop-shadow keeps them legible) */
#GS_Stage .sb-hero .manual-pane .season-synopsis { color: #e3e3e3; font-size: 21px; line-height: 1.45; margin-top: 14px; max-width: 1100px; text-shadow: 0 2px 15px rgba(0,0,0,0.7); }
.page-header { color: #fff; font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial'; font-size: 26px; letter-spacing: 2px; margin-top: 22px; text-shadow: 0 2px 15px rgba(0,0,0,0.72); }
#GS_Stage .sb-hero .manual-pane .page-synopsis { color: #c4c4c4; font-size: 19px; line-height: 1.4; margin-top: 8px; max-width: 1000px; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.newText { color: var(--gs-accent); }

/* --- Edmondsans type scale (from GS_Style.css) --- */
#GS_Stage h1 { font-family:'edmondsans_mediumregular','Helvetica','Arial'; color:#ededed; font-size:38px; letter-spacing:4px; margin:0; }
#GS_Stage h2 { font-family:'edmondsans_regularregular','Helvetica','Arial'; color:#ededed; font-size:42px; letter-spacing:4px; margin:0; }
#GS_Stage h3 { font-family:'edmondsans_mediumregular','Helvetica','Arial'; color:#ededed; font-size:30px; letter-spacing:3px; margin:0; }
#GS_Stage h4 { font-family:'edmondsans_mediumregular','Helvetica','Arial'; color:#ededed; font-size:28px; letter-spacing:4px; margin:0; }
#GS_Stage p  { font-family:'edmondsans_regularregular','Helvetica','Arial'; color:#d5d5d5; font-size:18px; line-height:1.5; margin:10px 0 0 0; }

/* --- 240×135 tile (the 2018 GS_Slider thumb), reused by rows + reader strip --- */
.row-scroller {
    white-space: nowrap;
    overflow-x: auto; overflow-y: hidden;
    font-size: 0;                       /* kill inline-block whitespace */
    text-align: left;                   /* rows start at the left, not centred */
    padding: 6px 40px;
    scrollbar-width: none;
}
.row-scroller::-webkit-scrollbar { display: none; }

/* Drag-to-scrub affordance: the row background shows a grab hand (tiles keep their own
   pointer -- still clickable). While a scrub is in progress every cursor becomes
   'grabbing' and text/image selection is frozen so the drag doesn't paint a selection. */
.row-scroller, .sv-strip { cursor: grab; }
.row-scroller.grabbing, .row-scroller.grabbing *,
.sv-strip.grabbing, .sv-strip.grabbing * {
    cursor: grabbing;
    user-select: none; -webkit-user-select: none;
}

.sliderThumb {
    display: inline-block;
    vertical-align: top;                /* keep the row from baseline-dropping */
    width: 240px; height: 135px;
    margin: 8px 10px;
    background-size: cover; background-position: center top; background-color: #1a1a1a;
    cursor: pointer; position: relative;
    transition: transform 0.15s ease;
}
.sliderThumb:hover { transform: scale(1.04); }
.highlightThumb { outline: 4px solid #FFF; outline-offset: -2px; }
.thumbLabel {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 4px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    color: #fff; font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 12px; letter-spacing: 1px; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "NEW" / unread marker on series tiles */
.newTag {
    position: absolute; top: 8px; right: 8px;
    background: var(--gs-accent); color: #fff;
    font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 11px; letter-spacing: 1px; padding: 2px 7px;
}
/* "Recently Updated" badge — top-left, distinct green so it never clashes with the red NEW */
.updateTag {
    position: absolute; top: 8px; left: 8px;
    background: #27ae60; color: #fff;
    font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    font-size: 11px; letter-spacing: 1px; padding: 3px 8px;
}
.updateTag.inline { position: static; display: inline-block; margin-left: 12px; vertical-align: middle; padding: 2px 8px; }

/* --- edge "side bars" (page nav in the reader) --- */
#prevBtn, #nextBtn {
    position: absolute; top: 0; height: 100%; width: 140px; z-index: 2;
    display: flex; align-items: center; cursor: pointer;
}
#nextBtn { right: 0; justify-content: flex-end; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); }
#nextBtn:hover { background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); }
#prevBtn { left: 0; justify-content: flex-start; background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); }
#prevBtn:hover { background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); }
#prevBtnArrow, #nextBtnArrow { position: fixed; top: 50%; width: 60px; height: 60px; background-size: contain; background-repeat: no-repeat; }
#prevBtnArrow { left: 0;  background-image: url(../assets/PrevArrow.png); }
#nextBtnArrow { right: 0; background-image: url(../assets/NextArrow.png); }

/* --- lightbox (leaf art / covers) --- */
#lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); }
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 90vh; box-shadow: 0 0 60px rgba(0,0,0,0.8); }
#lightboxClose { position: absolute; top: 24px; right: 32px; color: #fff; font-size: 40px; cursor: pointer; font-family: 'edmondsans_regularregular', Arial, sans-serif; }


/* ============================================================================
   5 · LAYOUT — SECTION BROWSER   (reactive splash + stacked rows)
   ========================================================================== */
.sb { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------------
   HERO = a centered COMPOSITION floating in the band with lots of breathing room:
   right-aligned copy on the LEFT, flush against a framed PREVIEW image/trailer on
   the RIGHT. Both the focused-tile hero (renderHero) and the series season hero
   (renderSeasonHero) render `.hero-row` (`.manual-pane` + `.hero-preview`) in here;
   a soft dark vignette + drop-shadowed type keep the copy legible over any splash.
   (The welcome screen — see §WELCOME below — keeps its own centered logo treatment.)
   --------------------------------------------------------------------------- */
.sb-hero {
    flex: 0 0 auto;                     /* fixed base-px height per node (heroH) */
    display: flex;
    flex-direction: column;
    align-items: center;                /* centre the composition in the band */
    justify-content: center;
    box-sizing: border-box;
    padding: 40px 60px;
    transition: opacity 0.2s ease;
    /* soft dark glow pooled at the centre so light copy reads over any splash */
    background: radial-gradient(ellipse 78% 132% at 50% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 46%, rgba(0,0,0,0) 80%);
}
/* copy (left) + preview (right) as one centered group, with generous side space */
.sb-hero .hero-row {
    display: flex;
    align-items: center;               /* copy block vertically centred against the preview */
    justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 1640px;
}
/* the copy: right-aligned text, flush to the gap before the preview (no box) */
.sb-hero .manual-pane {
    flex: 0 1 760px;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;             /* right-aligned against the preview frame */
    text-align: right;
    box-sizing: border-box;
    background: none;                  /* drop the old left black box */
    box-shadow: none;
    padding: 0;
    overflow: visible;
}
/* the framed preview image/trailer on the right */
.sb-hero .hero-preview {
    flex: 0 0 auto;
    width: 720px;
    aspect-ratio: 16 / 9;
    background-color: rgba(0,0,0,0.45);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 18px 55px rgba(0,0,0,0.6);
}
.sb-hero .manual-pane .eyebrow { font-size: 16px; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
#GS_Stage .sb-hero .manual-pane h1 { font-size: 54px; text-shadow: 0 3px 22px rgba(0,0,0,0.72); }
#GS_Stage .sb-hero .manual-pane p { margin-top: 22px; font-size: 23px; text-shadow: 0 2px 16px rgba(0,0,0,0.7); }   /* space + enlarge the hero blurb */
.sb-hero .manual-pane .viewBtn { margin-top: 26px; align-self: flex-end; }    /* CTA flush right under the copy */
.sb-hero .cta-row { margin-top: 26px; justify-content: flex-end; }            /* series CTAs flush right as a pair */

/* ---------------------------------------------------------------------------
   WELCOME billboard — the "unselected" root entry point: full-width, centered
   Infinite logo + grounding copy over the dawn splash. Shares the .sb-hero
   centering + vignette above; only the welcome-specific content is styled here.
   Replaced by the normal reactive hero on the first tile pick.
   --------------------------------------------------------------------------- */
.welcome-inner {
    display: flex; flex-direction: column; align-items: center;
    max-width: 1500px;
}
.welcome-logo {
    width: 230px; height: 150px;
    background: url('../assets/Infinite_Logo_White.png') center/contain no-repeat;
    filter: drop-shadow(0 6px 22px rgba(0,0,0,0.65));
    margin-bottom: 14px;
}
#GS_Stage .sb-welcome .welcome-title {
    font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial';
    font-size: 62px; letter-spacing: 8px; color: #fff;
    text-shadow: 0 3px 24px rgba(0,0,0,0.7);
}
#GS_Stage .sb-welcome .welcome-tag {
    margin-top: 20px; max-width: 1180px;
    font-size: 28px; line-height: 1.4; color: #f0f0f0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
#GS_Stage .sb-welcome .welcome-sub {
    margin-top: 14px; max-width: 1040px;
    font-size: 21px; line-height: 1.5; color: #cfcfcf;
    text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.welcome-hint {
    margin-top: 30px;
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial';
    font-size: 17px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--gs-accent); text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

/* INTRO ESCAPE (root): no pinned hero — the welcome billboard is the FIRST block in the scroller
   and the Featured row peeks below it. The first downward gesture ESCAPES it: JS sets a negative
   margin-top (collapsing its height so the rows rise to fill) and adds .sb-intro-exit (lift+fade).
   It's a one-way dismiss — scroll-up never brings it back; re-navigating to root re-lands on it. */
.sb-intro {
    min-height: 600px;                  /* landing-band height in base px (scales with the canvas) */
    display: flex;
    flex-direction: column;
    align-items: center;                /* centre the welcome composition */
    justify-content: center;
    box-sizing: border-box;
    padding: 40px 60px;
    /* same soft centre vignette as the hero so the white logo + light copy read over the dawn splash */
    background: radial-gradient(ellipse 78% 132% at 50% 45%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 46%, rgba(0,0,0,0) 80%);
    transition: margin-top 0.45s ease, transform 0.45s ease, opacity 0.4s ease;
}
.sb-intro-exit {                        /* the escape: slides up out of frame and fades (margin-top set inline in JS) */
    transform: translateY(-30px);
    opacity: 0;
    pointer-events: none;
}
.sb-intro .welcome-hint { cursor: pointer; }   /* "Start browsing" is the click-to-escape affordance */

/* Breathing room above the FIRST row on any hero+rows page (Unanimated, Animated, The Cast, ...)
   so its row-title isn't jammed against the details hero. On root the intro is the scroller's first
   child, so its Featured row is the one right AFTER the intro instead -- targeting that keeps the
   welcome hero FLUSH at the top (padding the scroller left an ugly band above it) and the `+ .row`
   still matches after the intro is display:none'd on escape. */
.sb-rows > .row:first-child,                /* pinned-hero pages: first row under the hero */
.sb-introscroll .sb-intro + .row {          /* root grid: first row after the escaped intro */
    margin-top: 30px;
}

.sb-rows {
    flex: 1 1 auto;
    overflow-y: auto; overflow-x: hidden;
    padding-bottom: 18px;
    /* legibility scrim so titles/tiles read over the splash */
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%);
    scrollbar-width: none;
}
.sb-rows::-webkit-scrollbar { display: none; }

.row { margin-bottom: 48px; }                 /* generous gap between section rows — less visual overwhelm */
.row-title {
    text-align: left;
    padding: 0 0 10px 40px;
    color: #ededed;
    font-family: 'edmondsans_mediumregular', Arial, sans-serif;
    letter-spacing: 2px; font-size: 26px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.85);
}

/* root: double-size tiles (few entries, but still fill the screen) */
.row.lg .sliderThumb { width: 480px; height: 270px; }
.row.lg .row-title   { font-size: 30px; }
.row.lg .thumbLabel  { font-size: 28px; padding: 8px 14px; }   /* 2x — legible when scaled down */

.row.md .sliderThumb { width: 380px; height: 214px; }          /* medium: between nav-strip 300 and feature 480 */
.row.md .row-title   { font-size: 27px; }
.row.md .thumbLabel  { font-size: 20px; padding: 6px 12px; }


/* ============================================================================
   6 · LAYOUT — SINGLE VERTICAL   (full vertical-scroll single-media viewer)
   ----------------------------------------------------------------------------
   TITLE → full-width MEDIA (tall) → DETAIL box → centered NAV strip. The whole
   thing scrolls vertically; edge side-bars (#prevBtn/#nextBtn) stay fixed.
   ========================================================================== */
.sv { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; text-align: center; }

.sv-title { padding: 36px 80px 6px; }
    /* single-media title — bold + large so it anchors the page */
    #GS_Stage .sv-title h2 { font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial'; font-size: 56px; letter-spacing: 3px; }
    .sv-title .sv-sub {
        color: #cfcfcf; margin-top: 14px;
        font-family: 'edmondsans_mediumregular', Arial, sans-serif;
        letter-spacing: 3px; font-size: 28px;
    }

/* full width save the 40px side margins; stretches as tall as the page needs */
.sv-media { padding: 24px 80px; }   /* full width save 80px margins */
    .sv-media img {
        display: block; width: 100%; height: auto;
        background: #fff;
        box-shadow: 0 14px 55px rgba(0,0,0,0.6);
    }
    /* a video page (e.g. Animated) — a 16:9 embed shown the same full width as a comic */
    .sv-media .sv-video {
        position: relative; width: 100%; aspect-ratio: 16 / 9;
        background: #000;
        box-shadow: 0 14px 55px rgba(0,0,0,0.6);
    }
    .sv-media .sv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sv-detail { padding: 6px 80px 44px; display: flex; justify-content: center; }
    /* big-footprint detail pane: wide, generously padded, large copy */
    .sv-detail .manual-pane { max-width: 1800px; width: 100%; box-sizing: border-box; padding: 54px 64px; text-align: left; }
    .sv-detail .manual-pane .eyebrow { font-size: 22px; letter-spacing: 5px; margin-bottom: 16px; }
    #GS_Stage .sv-detail .manual-pane p { font-size: 34px; line-height: 1.6; margin-top: 18px; }
    /* per-page detail: thumbnail LEFT + page details left-aligned beside it */
    .sv-detail .manual-pane.sv-detail-row { display: flex; gap: 48px; align-items: flex-start; }
    .sv-detail-thumb { flex: 0 0 auto; width: 340px; height: auto; background: #111;
        border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 14px 44px rgba(0,0,0,0.55); }
    .sv-detail-body { flex: 1 1 auto; min-width: 0; text-align: left; }

/* centered nav bar: scrub arrows flank a horizontally-scrollable thumb strip */
.sv-nav { padding: 10px 0 48px; }                         /* full-bleed: the strip spans off both ends, like the browse rows */
    .sv-strip {
        white-space: nowrap; overflow-x: auto; overflow-y: hidden;
        font-size: 0; scrollbar-width: none;
        padding: 0 40px;                                  /* thumbs start inset and scroll off the edges (matches .row-scroller) */
    }
    .sv-strip::-webkit-scrollbar { display: none; }
    .sv-strip .sliderThumb { width: 350px; height: 197px; }   /* larger nav-strip thumb; 16:9 kept (350×197) */
    .sv-strip .thumbLabel { font-size: 18px; }                /* slightly larger label text on the bottom strip */


/* ============================================================================
   7 · LAYOUT — CUSTOM PANE   (project / funnel / "bootstrap" page)
   A centered, scrollable frame holding stacked, data-driven content blocks.
   (Heading rules are #GS_Stage-prefixed to beat the chrome's #GS_Stage h1/h2/h3.)
   ========================================================================== */
.cp { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
.cp-inner {
    max-width: 1800px; margin: 40px auto 28px; text-align: left;
    background: rgba(10,10,12,0.82);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
/* SETS below the pane — selectable medium rows (tutorials, maps, minigames…) */
.cp-rows { max-width: 1800px; margin: 8px auto 80px; padding: 0 20px; text-align: left; }
.cp-rows .row { margin-bottom: 48px; }

/* hero — full-bleed banner with overlaid title + CTAs */
.cp-hero { position: relative; min-height: 600px; display: flex; align-items: flex-end;
           background-size: cover; background-position: center; }
.cp-hero::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,10,12,0.96) 0%, rgba(10,10,12,0.25) 55%, transparent 100%); }
.cp-hero-text { position: relative; z-index: 1; padding: 56px 60px; max-width: 1300px; }
#GS_Stage .cp-hero-text h1 { font-family: 'edmondsans_boldregular','Helvetica','Arial';
    font-size: 72px; letter-spacing: 3px; color: #fff; }
.cp-hero-text p { font-size: 23px; line-height: 1.5; color: #d6d6d6; margin: 16px 0 4px; }

/* generic content section */
.cp-section { padding: 38px 60px; }
#GS_Stage .cp-section h2 { margin-bottom: 16px; }
.cp-section > p { font-size: 19px; line-height: 1.6; color: #cfcfcf; max-width: 1200px; }

/* feature columns */
.cp-features { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.cp-feature { flex: 1 1 0; min-width: 300px; padding: 26px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
#GS_Stage .cp-feature h3 { font-size: 24px; margin-bottom: 10px; }
.cp-feature p { font-size: 16px; line-height: 1.5; color: #bdbdbd; }

/* video embed (16:9, full frame width) */
.cp-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; margin-top: 6px; }
.cp-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* gallery row (click → lightbox) */
.cp-gallery { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.cp-gallery img { width: 380px; height: 214px; object-fit: cover; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12); transition: transform 0.15s; }
.cp-gallery img:hover { transform: scale(1.03); }

/* buy widget */
.cp-buy { margin: 14px 60px 56px; padding: 38px 60px; text-align: center;
    background: linear-gradient(135deg, rgba(192,57,43,0.20), rgba(255,255,255,0.04));
    border: 1px solid rgba(192,57,43,0.55); }
.cp-price { font-family: 'edmondsans_boldregular','Helvetica','Arial'; font-size: 48px; color: #fff; margin: 6px 0; }
.cp-note { font-size: 15px; color: #bdbdbd; margin-bottom: 18px; }

/* button rows (anchors styled like .viewBtn) — also used in the reader detail box */
.cp-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.cp-buy .cp-btns { justify-content: center; }
.cp-btns .viewBtn { margin-top: 0; text-decoration: none; }
.sv-detail .cp-btns { margin-top: 16px; }


/* ===== ALERT CARDS (ported from viewer-mock/css/alerts.css) ===== */
/* =================================================================
   Infinite Hub -- Queued Alert Cards  (styling)
   Top-right stack: one dominant card, one peek below, "+N more" chip.
   Matches the viewer-mock language: Edmondsans, dark translucent
   panels, GS red accent.
   ================================================================= */

/* =============================================================
   1. CONTAINER
   ============================================================= */
/* Anchor wrapper INSIDE #GS_Stage: sits below the nav + slides with the stage when the dash opens.
   Holds persistent page PROMPTS on top and the auto-dismissing unlock CARDS below them. */
#aq-anchor {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 400px;
    z-index: 9000;
    pointer-events: none;      /* children re-enable it individually */
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial', sans-serif;
}
#aq-prompts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
#aq-prompts:empty { margin-bottom: 0; }
#aq-root {
    position: relative;
    width: 100%;
    height: 0;                 /* unlock cards are absolutely positioned within, below the prompts */
    pointer-events: none;
}

/* ---- persistent page prompt (bonus blurb + funnel link + close) ---- */
.aq-prompt {
    position: relative;
    pointer-events: auto;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30,30,34,0.97), rgba(18,18,20,0.97));
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 4px solid #3498db;    /* accent (distinct from achievement amber / item red) */
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    transform-origin: top right;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aq-prompt-enter { transform: translateX(120%); opacity: 0; }   /* slides in from the right, like the cards */
.aq-prompt-x {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: none; color: #8a8a8a; cursor: pointer;
    font-size: 22px; line-height: 1; padding: 2px 6px;
}
.aq-prompt-x:hover { color: #fff; }
.aq-prompt-eyebrow { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #3498db; }
.aq-prompt-title {
    font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 20px; color: #fff; margin-top: 3px; padding-right: 20px;
}
.aq-prompt-blurb { font-size: 14px; line-height: 1.4; color: #c4c4c4; margin-top: 6px; }
.aq-prompt-link {
    display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 6px;
    background: #3498db; color: #fff; text-decoration: none; font-size: 14px; letter-spacing: 1px;
}
.aq-prompt-link:hover { background: #2c80c0; }

/* =============================================================
   2. CARD SHELL
   ============================================================= */
.aq-card {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    overflow: hidden;

    background:
        linear-gradient(135deg, rgba(30,30,34,0.96), rgba(18,18,20,0.96));
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 4px solid rgba(255,255,255,0.5);   /* accent, overridden per type */
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);

    transform-origin: top right;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity   460ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}

/* Type accents ------------------------------------------------ */
.aq-card.aq-achievement { border-left-color: #e0a83e; }   /* amber / gold */
.aq-card.aq-item        { border-left-color: var(--gs-accent); }   /* phase accent */

/* Peek + hidden slots ----------------------------------------- */
.aq-card.aq-peek   { filter: brightness(0.78) saturate(0.85); }
.aq-card.aq-hidden { pointer-events: none; }

/* =============================================================
   3. ICON
   ============================================================= */
.aq-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}
.aq-achievement .aq-icon { background: rgba(224,168,62,0.14); border-color: rgba(224,168,62,0.45); }
.aq-item        .aq-icon { background: rgba(231,76,60,0.14);  border-color: rgba(231,76,60,0.45);  }

/* =============================================================
   4. BODY TEXT
   ============================================================= */
.aq-body { flex: 1 1 auto; min-width: 0; }

.aq-eyebrow {
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gs-accent);
}
.aq-achievement .aq-eyebrow { color: #e0a83e; }

.aq-title {
    font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 21px;
    letter-spacing: 0.5px;
    color: #fff;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aq-desc {
    font-size: 14px;
    line-height: 1.35;
    color: #bdbdbd;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================
   5. COUNT BADGE (x2, x3, ...)
   ============================================================= */
.aq-count {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: 'edmondsans_boldregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #fff;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);

    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms ease, transform 160ms ease;
}
.aq-count.aq-visible { opacity: 1; transform: scale(1); }
.aq-achievement .aq-count.aq-visible { background: rgba(224,168,62,0.22); border-color: rgba(224,168,62,0.5); }
.aq-item        .aq-count.aq-visible { background: rgba(231,76,60,0.22);  border-color: rgba(231,76,60,0.5);  }

.aq-count.aq-pop { animation: aq-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes aq-pop {
    0%   { transform: scale(1);   }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1);   }
}

/* =============================================================
   6. TIMER BAR (dominant only)
   ============================================================= */
.aq-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--gs-accent);
    opacity: 0;
}
.aq-achievement .aq-bar { background: #e0a83e; }
.aq-card.aq-dominant .aq-bar { opacity: 0.9; }

/* =============================================================
   7. "+N MORE" CHIP
   ============================================================= */
.aq-more {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 5;
    padding: 5px 14px;
    white-space: nowrap;
    border-radius: 20px;
    font-family: 'edmondsans_mediumregular', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #cfcfcf;
    background: rgba(20,20,22,0.9);
    border: 1px solid rgba(255,255,255,0.12);
    opacity: 0;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
    pointer-events: none;
}

/* card art: a Featured Image fills the icon circle (overrides the emoji glyph) */
.aq-icon .aq-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ===== Dashboard: Items / Achievements panels (catalogue + ledger overlay) ===== */
.dash-unlock-head { display:flex; align-items:center; justify-content:flex-end; }
.dash-reset-btn { background:color-mix(in srgb, var(--gs-accent) 15%, transparent); border:1px solid color-mix(in srgb, var(--gs-accent) 50%, transparent); color:var(--gs-accent);
    border-radius:6px; padding:6px 14px; cursor:pointer; letter-spacing:1px; font-size:13px;
    font-family:'edmondsans_mediumregular','Helvetica','Arial',sans-serif; }
.dash-reset-btn:hover { background:var(--gs-accent-deep); border-color:var(--gs-accent-deep); color:#fff; }
.dash-unlock-group { color:var(--gs-accent); letter-spacing:2px; text-transform:uppercase; font-size:14px; margin:18px 0 10px;
    font-family:'edmondsans_mediumregular','Helvetica','Arial',sans-serif; }
.dash-unlock-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.dash-unlock-card { display:flex; align-items:center; gap:14px; padding:14px 16px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:10px; }
.dash-unlock-card.locked { opacity:0.6; }
.dash-unlock-ic { flex:0 0 auto; width:48px; height:48px; border-radius:50%; font-size:26px;
    background:rgba(255,255,255,0.06) center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.dash-unlock-ic.obscured { filter:brightness(0.3) grayscale(1); color:#777; }
.dash-unlock-body { flex:1 1 auto; min-width:0; }
.dash-unlock-name { color:#fff; font-size:18px; font-family:'edmondsans_boldregular','Helvetica','Arial',sans-serif; }
.dash-unlock-desc { color:#bdbdbd; font-size:13px; margin-top:2px; }
.dash-unlock-count { margin-left:auto; color:#fff; font-size:18px; font-family:'edmondsans_boldregular','Helvetica','Arial',sans-serif; }
.dash-unlock-status { margin-left:auto; font-size:12px; letter-spacing:1px; color:#9a9a9a; }

/* Consolidated Unlockables page: destination sections, 50/50 achievements | items */
.dash-unlock-resets { display:flex; gap:8px; }
.dash-unlock-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:8px; }
/* each type column flows its cards 2-up, capped so they never sprawl */
.dash-unlock-col { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:12px; min-width:0; align-content:start; }
.dash-unlock-col .dash-unlock-coltitle { grid-column: 1 / -1; }
.dash-unlock-card { max-width: 560px; }
/* the category we're standing in -- the big in-panel title */
.dash-unlock-heading {
    color:var(--gs-accent); font-family:'edmondsans_boldregular','Helvetica','Arial',sans-serif;
    font-size:28px; letter-spacing:2px; margin:2px 0 10px;
    text-shadow:1px 2px 4px rgba(0,0,0,0.85);
}
.dash-unlock-coltitle { color:#c9c9c9; letter-spacing:2px; text-transform:uppercase; font-size:17px; margin-bottom:4px;
    font-family:'edmondsans_mediumregular','Helvetica','Arial',sans-serif; }
.dash-unlock-none { color:#6f6f6f; font-size:13px; font-style:italic; }

/* ===== Settings section (dash): universal Clear Progression + property toggles ===== */
.dash-setting-row {
    display: flex; align-items: center; gap: 24px; max-width: 1100px;
    padding: 18px 24px; margin-bottom: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
}
.dash-setting-body { flex: 1 1 auto; min-width: 0; }
.dash-setting-label { color: #fff; font-family: 'edmondsans_mediumregular','Helvetica','Arial',sans-serif; font-size: 22px; letter-spacing: 1px; }
.dash-setting-desc { color: #b8b8b8; font-size: 15px; margin-top: 4px; line-height: 1.4; }
/* transparent framed cube; the checkmark lands centered when checked */
.dash-setting-toggle {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; width: 26px; height: 26px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.45);
    border-radius: 6px;
    cursor: pointer; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.dash-setting-toggle:hover { border-color: rgba(255,255,255,0.8); }
.dash-setting-toggle:checked { border-color: var(--gs-accent); }
.dash-setting-toggle:checked::after {
    content: "\2713";
    color: var(--gs-accent);
    font-size: 18px; line-height: 1;
    font-family: Arial, sans-serif;
}

/* dash news: the read-more link into the /news/ feed */
.dash-news-more {
    display: inline-block; margin-top: 2px; color: #e0e0e0; text-decoration: none;
    font-family: 'edmondsans_mediumregular', Arial, sans-serif; font-size: 18px; letter-spacing: 1px;
}
.dash-news-more:hover { color: var(--gs-accent); }

/* News section (dash): category filter pills */
.dash-news-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dash-news-filter {
    padding: 6px 16px; border-radius: 20px; cursor: pointer; font-size: 14px;
    letter-spacing: 1.5px; text-transform: uppercase; color: #cfcfcf;
    border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05);
    font-family: 'edmondsans_mediumregular', Arial, sans-serif;
}
.dash-news-filter:hover { border-color: rgba(255,255,255,0.6); color: #fff; }
.dash-news-filter.active { border-color: var(--gs-accent); color: var(--gs-accent); }