#intro-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease-out;
}

.intro-logo {
    color: var(--brand-red);
    font-size: 8rem;
    letter-spacing: 6px;
    transform: scale(1);
    animation: heartbeat 2.5s ease-in-out forwards;
}

@keyframes heartbeat {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    15% {
        opacity: 1;
        transform: scale(1.1);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.hidden-initially {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.fade-in {
    opacity: 1;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    backdrop-filter: blur(0px);
    transition: all 0.4s;
}

.navbar.scrolled {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    color: var(--brand-red);
    font-family: var(--font-heading);
    font-size: 2.2rem;
}

.logo a {
    color: var(--brand-red);
    text-decoration: none;
}

/* The logo IS the anchor now — the shared navbar (site-chrome.js, 2026-08-16)
   renders <a href="/" class="logo">, so the wordmark is a route home on every
   public page. It replaces two spellings that had drifted: a non-clickable
   <div> on the lander, and on the four other pages an <a> carrying an inline
   `style="text-decoration:none;color:inherit;"` — whose `color:inherit` beat
   the rule above and rendered the blog wordmark WHITE while the lander's was
   brand red. One element, one colour, and the underline handled in CSS rather
   than in five copies of a style attribute. */
a.logo {
    text-decoration: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-link:hover {
    text-decoration: underline;
}

.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 5%;
    z-index: 1;
}

.hero-bg-anim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* The front door's hero. It was hot-linked from images.unsplash.com, which
       is why it could not be found anywhere in the project: it was never in it.
       The same file is vendored here now (2079 x 1372, 149 KB) so the landing
       page does not depend on a third-party CDN to paint its first screen. */
    background: url('/assets/images/landing/hero-theater.jpg') center/cover;
    z-index: -2;
    transform-origin: center;
    animation: kenBurns 20s infinite alternate;
}

@keyframes kenBurns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.2);
    }
}

.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(5, 5, 5, 1) 90%);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin-top: 60px;
}

.hero-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.dot {
    color: var(--brand-red);
}

.hero h1 {
    font-size: 5rem;
    line-height: 0.95;
    margin-bottom: 20px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.text-highlight {
    color: var(--brand-red);
}

.hero-sub {
    font-size: 1.25rem;
    color: #d1d1d1;
    margin-bottom: 35px;
    max-width: 600px;
    font-weight: 300;
}

.cta-group {
    display: flex;
    gap: 12px;
}

/* BETA MOBILE FIX 3 (owner, 2026-08-19): "the buttons below sign up and how it
   works are too big and rounded. They need to be clean and professional looking
   not so childish and facebook like."

   Three things made them read that way and all three are undone here:

     1. SIZE. `.btn-lg` is 15px/40px padding at --font-size-md. The lander's own
        pair drops to 13px/26px with small, letter-spaced caps — the ink is the
        words, not a slab around them.
     2. THE RADIUS. 4px on a 54px-tall pill still reads round because the fill is
        so large. 2px, and the shape stops being the loudest thing about it.
     3. THE HOVER. The global `button:hover` in quizflix.styles.css adds
        translateY(2px) + a white box-shadow + a text-shadow. That is the "glowing
        effect" the owner named. Reset to a flat colour change.

   Scoped to the lander's two CTA sites — the hero pair and the outro — because
   `.btn` is the whole product's button and this is a front-door ruling. Same
   treatment reaches the navbar link via .nav-auth below. */
.cta-group .btn,
.cta-group .btn-lg,
.outro-container .btn,
.outro-container .btn-lg {
    padding: 13px 26px;
    border-radius: 2px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cta-group .btn:hover,
.cta-group .btn-lg:hover,
.outro-container .btn:hover,
.outro-container .btn-lg:hover {
    transform: none;
    box-shadow: none;
    text-shadow: none;
}

/* ── BETA ROUND 6 — WHO IS READING ─────────────────────────────────────────
   Owner, 2026-08-19: "There should be logout not sign in and the alpha / sign
   up now crap shouldnt show anywhere."

   `data-user-only` marks the half of a swap that belongs to a signed-in reader
   — the hero's "Go to Quizflix" where a signed-out one gets "Start Free". It is
   hidden until site-chrome.js has read the token and dropped the attribute,
   because the alternative is a portal link painting for one frame on a page
   that is about to decide nobody is signed in. Its opposite, `data-anon-only`,
   needs no rule here: signed out is the state the markup is written in, and
   what changes for a signed-in reader is that the node is REMOVED.

   ⚠️ `display: none` and not `visibility`/opacity — this must take no space and
   must not be tabbable in the frame before the script runs. */
[data-user-only] {
    display: none !important;
}

/* ── BETA ROUND 5 — THE BUTTON TREATMENT, EVERY PUBLIC BUTTON ───────────────
   Owner, 2026-08-19: "I really dont like the buttons at all anywhere the red
   rounded facebook childish same as every template god awful over sized
   buttons… you can see in the screen shot you have used buttons like they are
   content written massive text blocks in them huge text just god awful design
   there."

   BETA FIX 3 (round 1, above) fixed two sites — the hero pair and the outro.
   This is the same treatment applied to EVERY button on the public site, which
   is what "anywhere" asks for.

   🛑 IT LIVES IN landing.css ON PURPOSE. Exactly five pages load this file — the
   lander, the blog index, the feature article, the activities page and the terms
   page. That is the whole public front end and nothing else: the portals are not
   restyled by a front-door ruling, the way `.btn` in quizflix.styles.css would
   have been.

   What changes, and each is one of the words the owner used:

     "over sized"    13px/22px at 0.78rem, down from .btn-lg's 15px/40px at
                     --font-size-md. A button is a control; the copy above it is
                     the content.
     "massive text"  one line, `white-space: nowrap`, and the button shrink-wraps
                     its words rather than filling its column. "Get Free
                     Access..." was wrapping onto two lines inside a red slab —
                     a control that wraps has stopped being a control.
     "rounded"       2px, not 4. Not 0 either: a hairline corner still reads as a
                     button; a pill reads as a toy.
     "facebook"      no backdrop-filter, no box-shadow, no text-shadow, no
                     translateY on hover. The global `button:hover` in
                     quizflix.styles.css supplies all four, and that is the
                     "glowing effects" the owner ruled out in round 1.

   .btn-lg and .btn-sm are folded in rather than left to fight this. The public
   site has no use for three button sizes — the only difference between them was
   how much red surrounded the same words.

   ⚠️ `.submit-btn` is NOT in this list. That is the auth modal's form submit, it
   is meant to be the full width of the field stack above it, and no ruling has
   touched it. */
.btn.btn-lg,
.btn.btn-sm,
.btn-quiet,
.sidebar-card .btn,
.content-details .btn,
.blog-shell .btn,
.main-footer .btn {
    padding: 13px 22px;
    border-radius: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    /* Shrink-wrap. In a flex or grid column an inline-flex button still
       stretches to the cross size, which is how a 2-word label ended up on a
       358px bar. */
    align-self: flex-start;
    width: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn.btn-lg:hover,
.btn.btn-sm:hover,
.btn-quiet:hover,
.sidebar-card .btn:hover,
.content-details .btn:hover,
.blog-shell .btn:hover,
.main-footer .btn:hover {
    transform: none;
    box-shadow: none;
    text-shadow: none;
}

/* The content modal's action button — the one in the owner's screenshot, where
   "Get Free Access..." was set two lines deep in a red block that read as a
   paragraph. It is built by getContentModalButton() (landing/script.js), which
   used to hand it `.btn-lg`; the class is gone from there and the size is here,
   so there is one place to change it.

   `margin-top` and not a gap: it is the last child of a details pane whose other
   children are a heading, a paragraph and sometimes a list. */
#content-modal-button {
    align-self: flex-start;
    margin-top: 4px;
    padding: 12px 20px;
    font-size: 0.75rem;
    max-width: 100%;
}

/* "How It Works" is secondary and it should look secondary: a hairline outline,
   no fill, no frost. .btn-glass's translucent white panel over a photograph is
   the same transparency complaint the navbar had. */
.cta-group .btn-glass {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.cta-group .btn-glass:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* The one navbar control (FIX 1). A link, and nothing else: the base `.btn`
   rules never reach it now, but the global `a:hover`/underline still would, so
   the hover is stated. */
.nav-right .nav-auth {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.nav-right .nav-auth:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    background: none;
    box-shadow: none;
    text-shadow: none;
}

/* W1.2 (WDF1-6.2) — the gap above the strip's contents and the gap below them
   were 0 and 70px. Both now come from one value.

   The subtraction is .strip-container's own padding-bottom, which is clearance
   for the 5px horizontal scrollbar (quizflix.styles.css:285) and sits inside
   the card row rather than around it. Without taking it back out here the
   measured gap below the cards is that much larger than the gap above, which is
   half of what was wrong in the first place. Change --strip-gap alone to retune
   the section; the two rules stay in step. */
.content-strip {
    --strip-gap: 60px;
    --strip-scroll-allowance: 10px;
    position: relative;
    z-index: 10;
    padding: var(--strip-gap) 5% calc(var(--strip-gap) - var(--strip-scroll-allowance));
    background-color: var(--bg-black);
    margin-top: 50px;
}

.content-strip::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent, var(--bg-black));
    pointer-events: none;
}

/* W1.1 — `.strip-header` is retired with the paragraph it styled. The strip's
   title is an <h2.section-header> now (landing.logic.js), so this rule had no
   element left and the 1.1rem/600 it declared is exactly what made the old line
   read as copy rather than as a heading. Nothing else in the tree used it. */

.strip-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    /* Scrollbar clearance, not spacing — W1.2's calc() takes this back out of
       the section's bottom padding so the gaps above and below stay equal. */
    padding-bottom: var(--strip-scroll-allowance, 10px);
    justify-content: space-between;
    align-items: center;
}



/* L4 (1.0.6) — square at 200px; was 200x110 landscape. Five cards plus four
   15px gaps is 1060px, and .strip-container is space-between inside 5% side
   padding, so above ~1180px the row spreads and below it scrolls — the same
   behaviour it had, at a taller card. Every card image is re-cropped to 1:1 to
   suit (L5, L12, L13, L14); the caption bar below is unaffected. */
.strip-card {
    min-width: 200px;
    height: 200px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.3s;
    overflow: hidden;
    flex-shrink: 0;
}

.strip-card:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.strip-card span {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.8rem;
    padding: 5px;
    text-align: center;
}

.section-dark {
    padding: 80px 0;
    background: var(--bg-row-dark-gradient);
    border-top: 1px solid #222;
    position: relative;
    z-index: 10;
}

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

.section-header {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 60px;
}

/* W1.1 — 🟩 owner ruling 2026-08-13: same size, left aligned.

   Only the alignment is overridden. The size, the weight and the caps face stay
   .section-header's, which is the whole point of the ruling — this heading and
   "The Immersion Method" are still one heading style, and a later change to that
   style still reaches both.

   It needs no offset to line up with the cards: the heading and .strip-container
   are siblings inside .content-strip and share its 5% side padding, so "left"
   already means flush with the first card.

   Must stay after .section-header — same specificity, so source order is what
   makes this win. */
.strip-title {
    text-align: left;
}

.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 100px;
}

.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1;
    position: relative;
}

.step-badge {
    font-size: 4rem;
    font-weight: 900;
    color: #222;
    position: absolute;
    top: -40px;
    left: -10px;
    z-index: 0;
    font-family: var(--font-heading);
}

.feature-text h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.feature-text p {
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

.feature-list {
    list-style: none;
}

.feature-list li {
    margin-bottom: 10px;
    color: #dcdcdc;
}

.feature-list i {
    color: var(--brand-red);
    margin-right: 10px;
}

.feature-visual {
    flex: 1;
    height: 350px;
    background: #1a1a1a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.feature-visual.visual-3 {
    margin-top: 8px;
    background-color: transparent;
    height: fit-content;
    max-height: 350px;
}

.feature-visual.visual-2 img,
.feature-visual.visual-3 img {
    width: 100%;
    object-fit: cover;
    padding: var(--gap-size), 0;
}

.visual-1 {
    background: url('https://images.unsplash.com/photo-1522869635100-1f4906a1759d?w=800&q=80') center/cover;
}

.mock-ui-player {
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    backdrop-filter: blur(5px);
}

.play-btn {
    font-size: 2rem;
    margin-bottom: 10px;
    color: white;
}

.subs {
    font-family: 'Courier New', monospace;
    background: black;
    color: yellow;
    padding: 5px;
}

.ui-quiz {
    width: 80%;
    background: #222;
    padding: 20px;
    border-radius: 8px;
}

.question {
    font-weight: bold;
    margin-bottom: 15px;
}

.option {
    padding: 10px;
    background: #333;
    margin-bottom: 5px;
    border-radius: 4px;
    
}

.option.selected {
    background: var(--brand-red);
    border-left: 4px solid white;
}

.ui-doc {
    font-size: 1.5rem;
    color: #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.stats-section {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 60px 0;
    background: linear-gradient(to top, #000, #111);
    border-top: 1px solid #222;
    position: relative;
    z-index: 10;
}

.stat-box {
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.stat-box:hover {
    opacity: 1;
}

.stat-box i {
    font-size: 2rem;
    color: var(--brand-red);
    margin-bottom: 10px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-main);
}

#outro {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    text-align: center;
    position: relative;
    z-index: 10;
}

.outro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#outro h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

#outro p {
    max-width: 800px;
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.main-footer {
    padding: 60px 5% 20px;
    background: #000;
    border-top: 1px solid #222;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 10;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.logo-small {
    color: var(--brand-red);
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.footer-col h4 {
    color: white;
    margin-bottom: 20px;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.footer-col a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.footer-col a:hover {
    text-decoration: underline;
    color: white;
}

.footer-bottom {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #1a1a1a;
    color: #555;
    font-size: 0.8rem;
    /* The copyright and the new "Back to top" share this row. Centred as one
       group, so a page with either one alone still looks deliberate — which is
       the state the phone footer is in (quizflix.mobile.css). */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
}

.footer-bottom .footer-top {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-bottom .footer-top:hover,
.footer-bottom .footer-top:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-backdrop.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.modal-window {
    background: rgba(0, 0, 0, 0.85);
    width: 100%;
    max-width: 450px;
    padding: 50px;
    border-radius: 8px;
    border: 1px solid #333;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
}

.content-window {
    max-width: 800px;
    padding: 0;
    overflow: hidden;
    display: flex;
}

.content-body {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.content-preview {
    flex: 1;
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.content-details {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- L9 / L15 (1.0.6) — the stacked modal -----------------------------------
   Image on TOP at 2:1 instead of beside the text at flex:1. Three of the five
   modals wear it: Coming Attractions (3), Terms (4) and Library Listing (5) —
   the three whose details pane carries a list. Owner ruling 2026-08-16: cards 1
   and 2 keep the side-by-side layout, so this is a MODIFIER and never the
   default.

   Driven from data — `layout: "stacked"` on the modal entry in landing.logic.js,
   read in openContentModal().

   ⚠️ The class is added on open and must be REMOVED on every open, in the same
   block that clears #cm-listing. A modifier that is only ever added is exactly
   the bug #cm-listing was given its reset for: open Coming Attractions, then
   Family Fun, and Family Fun renders stacked. */

.content-body.stacked {
    flex-direction: column;
}

.content-body.stacked .content-preview {
    /* min-height: 400px is a portrait-panel number and it fights the aspect
       ratio — a 2:1 box 800px wide is 400px tall only by coincidence, and the
       modal is narrower than that at every breakpoint below 800px. Cleared. */
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 2 / 1;
}

.content-window.stacked {
    /* The image no longer shares the height with the text, so a long list can
       run the window off the bottom of a short laptop screen. */
    max-height: 90vh;
    overflow-y: auto;
}

.content-body.stacked .content-details {
    padding: 30px 40px 40px;
    /* Stacked, there is no second column to centre against. */
    justify-content: flex-start;
}

/* 1.0.6 follow-up — `.meta-tags` is deleted with the markup it styled (owner
   ruling 2026-08-16, "bullets can be removed they arent needed all over"). It
   was only ever used by the content modal's three-word row, in index.html and
   in the terms page's copy of that modal; both are gone. */

#cm-desc {
    margin-bottom: 30px;
    color: #ddd;
}

/* --- W5.2 (WDF1-6.5) — the Library Listing card's lists --------------------
   Owner ruling 2026-08-13 (Q7): every title, in full, three lists, nothing
   clickable. "In full" is what makes this a scrolling block rather than a
   paragraph — the library is 38 titles today and grows every month, and the
   details pane of an 800px modal is ~320px wide.

   Two columns, because a single column of 38 names is a very long scroll and
   the names are short. `break-inside: avoid` keeps a title from being split
   across the column break. Only this card fills the element; it is `hidden` in
   the markup and every other card leaves it that way. */

.content-listing {
    /* Tall enough that the Games list is reachable without much scrolling, and
       bounded by the viewport rather than by a flat number: at 240px the whole
       block was Series and Games sat below the fold of its own scroller, and a
       flat 320px would push the modal off the bottom of a 768px-tall laptop. */
    max-height: min(320px, 34vh);
    overflow-y: auto;
    margin-bottom: 28px;
    /* Room for the scrollbar so it never sits on the last letter of a title. */
    padding-right: 10px;
}

.listing-group+.listing-group {
    margin-top: 20px;
}

.listing-group h3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.listing-count {
    color: var(--brand-red);
    font-size: 0.75rem;
}

.listing-titles {
    columns: 2;
    column-gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.listing-titles li {
    break-inside: avoid;
    margin-bottom: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ddd;
}

/* L8 (1.0.6) — the Coming Attractions feed carries an optional note per item
   (the release year today). The Library Listing's items are bare strings and
   never produce one, so this styles a Coming Attractions row only. */
.listing-item-note {
    margin-left: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Only ever seen when /Public/Listing is unreachable. The games list is still
   above it — it needs no server — which is why this is a note and not the whole
   contents of the card. */
.listing-note {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    z-index: 5;
}

/* S3.1 — The content modal has no padding of its own, so its X sits directly on
   the artwork or on the first line of the copy and gets in the way. Give it a
   backing chip so it reads as a control against anything underneath, and start
   the details below it. Scoped to .content-window deliberately: the auth
   modal's close button has 50px of padding around it and no overlap. */
.content-window .modal-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: background 0.2s ease;
}

.content-window .modal-close:hover,
.content-window .modal-close:focus-visible {
    background: rgba(0, 0, 0, 0.85);
}

/* Clears the chip: 12px top + 36px + a little air. */
.content-window .content-details {
    padding-top: 60px;
}

.modal-body h2 {
    margin-bottom: 30px;
    font-size: 2rem;
}

.custom-input {
    width: 100%;
    background: #333;
    border: none;
    border-radius: 4px;
    height: 50px;
    color: white;
    padding: 18px 15px 5px;
    font-size: 1rem;
    outline: none;
    transition: background 0.2s;
}

.custom-input:focus {
    background: #454545;
}

.input-wrap {
    position: relative;
    margin-bottom: 15px;
}

.input-wrap label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c8c8c;
    pointer-events: none;
    transition: all 0.2s;
    font-size: 1rem;
}

.custom-input:focus~label,
.custom-input:not(:placeholder-shown)~label {
    top: 12px;
    font-size: 11px;
}

.static-label {
    top: 12px !important;
    font-size: 11px !important;
}

.form-row {
    display: flex;
    gap: 10px;
}

.half {
    flex: 1;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--brand-red);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1rem;
    margin-top: 20px;
    transition: background 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.submit-btn:hover {
    background: var(--brand-red-hover);
}

.loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    display: none;
    animation: spin 1s linear infinite;
}

.modal-footer {
    margin-top: 30px;
    color: #737373;
    font-size: 1rem;
}

.modal-footer a {
    color: white;
    margin-left: 5px;
}

.alert-box {
    background: #e87c03;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.success-screen {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 4rem;
    color: #46d369;
    margin-bottom: 20px;
}

.success-screen h3 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.success-screen p {
    color: #ccc;
    margin-bottom: 30px;
}

.hidden {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}




/* Override Updates For Version 1*/

.row-light {
    background: var(--bg-row-light-gradient);
    border-top: 1px solid #222;
}

.row-dark {
    background: var(--bg-row-dark-gradient);
    color: var(--text-main);
}

.row-black {
    background-color: var(--bg-black);
    color: var(--text-main);
}


/* --- The alpha access gate (PUB S2) -------------------------------------- */

/* The checkbox rules are scoped to the gate on purpose. .check-container and
   .checkmark carry no rules anywhere in the tree, so the auth modal's
   "Remember me" is a bare native checkbox and an empty <span> today. Styling
   them globally would restyle that too, which this stage was not asked to do. */

#alpha-gate-modal .modal-window {
    max-width: 520px;
}

.gate-copy p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 15px;
}

.gate-terms-link {
    margin: 20px 0 18px;
}

.gate-terms-link a {
    color: var(--text-main);
    text-decoration: underline;
    font-weight: 600;
}

.gate-terms-link a:hover {
    color: var(--brand-red);
}

.gate-terms-link i {
    font-size: 0.75em;
    margin-left: 6px;
}

#alpha-gate-modal .check-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: #ddd;
    cursor: pointer;
    user-select: none;
}

#alpha-gate-modal .check-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--brand-red);
    cursor: pointer;
}

.gate-question {
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: var(--font-size-md);
}

.gate-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.gate-actions .btn {
    justify-content: center;
}

.btn-quiet {
    background: none;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-quiet:hover {
    background: var(--hover-overlay);
    color: var(--text-main);
}