/* ==========================================================================
   Midnight Arcade — Full Service
   Two-section cinematic landing page with snap-scroll
   ========================================================================== */

/* Reset + base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0a0a0c;
    --bg-glow: #14141a;
    --fg: #f5f5f5;
    --fg-dim: rgba(245, 245, 245, 0.55);
    --fg-faint: rgba(245, 245, 245, 0.25);
    /* Shared accent tints used across both sections so they feel like
       one continuous atmosphere */
    --tint-cool: 70, 60, 95;   /* dusty purple */
    --tint-warm: 95, 55, 75;   /* dusty magenta */
}

html {
    /* Snap-scroll between full-height sections for a cinematic feel */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

html, body {
    background-color: var(--bg);
}

/* Continuous page-wide atmosphere: one drifting gradient layer that flows
   under both sections so there's no visible boundary between them. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--fg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse at 25% 20%, rgba(var(--tint-cool), 0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 80%, rgba(var(--tint-warm), 0.16) 0%, transparent 50%);
    background-size: 200% 200%;
    background-attachment: fixed;
    animation: drift 30s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* better behavior on mobile browsers */
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 2rem clamp(1.5rem, 5vw, 4rem);
    /* Backgrounds are now transparent — body provides the continuous atmosphere */
    background-color: transparent;
}

/* Section 1: studio — adds a soft center vignette over the page atmosphere */
.section--studio {
    align-items: center;
    justify-content: center;
}

.section--studio::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(20, 20, 30, 0.55) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.section--studio > * {
    position: relative;
    z-index: 1;
}

/* Version badge — pill button pinned to the top-left of the game section.
   Pink to echo the Full Service logo's heart/title palette. */
.version-badge {
    position: absolute;
    top: clamp(1rem, 2.5vh, 1.75rem);
    left: clamp(1rem, 3vw, 2rem);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.15rem;
    background-color: #B74450;
    color: #fff;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(183, 68, 80, 0.35);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease;
}

.version-badge:hover {
    transform: translateY(-1px) scale(1.04);
    background-color: #cd5260;
    box-shadow: 0 6px 18px rgba(183, 68, 80, 0.5);
}

.version-badge:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Corner character art — pixel-art figures sitting at the bottom corners
   of section 2, slightly pushed past the section edges for an "out of
   frame" framing. Pointer-events: none so they don't block clicks. */
.corner-character {
    position: absolute;
    bottom: 0;
    width: clamp(18rem, 28vw, 28rem);
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.corner-character--left {
    left: -5rem;
}

.corner-character--right {
    right: -2.5rem;
}

/* Hide as soon as the viewport gets narrow enough that the characters would
   start crowding the feature gallery in the middle of the section */
@media (max-width: 1600px) {
    .corner-character {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   UPDATE REVEAL — a right-edge arrow slides the game content out and brings
   in the 0.2 Construction Update board. The panel itself is a fixed drawer
   (so it always centers in the viewport regardless of how tall the game
   content is), while the game content slides left underneath it for the
   "page slides to a new panel" feel.
   -------------------------------------------------------------------------- */

/* Game content slides left + fades as the update panel takes over */
.game-content {
    transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1),
                opacity 0.45s ease;
}
.section--game.is-showing-update .game-content {
    transform: translateX(-7%);
    opacity: 0;
    pointer-events: none;
}
.section--game.is-showing-roadmap .game-content {
    transform: translateX(7%);
    opacity: 0;
    pointer-events: none;
}

/* The cue: echoes the studio scroll-indicator — a quiet uppercase label with
   a bouncing chevron — so it reads as part of the site rather than bolted on.
   Pinned to the right edge, vertically centered; fades away once open. */
.update-cue {
    position: absolute;
    top: 50%;
    right: clamp(1rem, 3vw, 2.75rem);
    transform: translateY(-50%);
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-dim);
    transition: color 0.3s ease, opacity 0.4s ease, transform 0.4s ease;
}
.update-cue:hover,
.update-cue:focus-visible {
    color: var(--fg);
    outline: none;
}
.section--game.is-showing-update .update-cue,
.section--game.is-showing-roadmap .update-cue {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(1.5rem);
}
.section--game.is-showing-update .roadmap-cue,
.section--game.is-showing-roadmap .roadmap-cue {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-1.5rem);
}

.update-cue__label,
.roadmap-cue__label {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Right-pointing chevron from two borders, bouncing horizontally — same
   construction as .scroll-indicator__chevron, rotated to point right.
   Order matters: translateX is written before rotate so it moves on-screen. */
.update-cue__chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    animation: cue-bounce-x 2s ease-in-out infinite;
}
.update-cue:hover .update-cue__chevron,
.update-cue:focus-visible .update-cue__chevron {
    animation-play-state: paused;
}
@keyframes cue-bounce-x {
    0%, 100% { transform: translateX(0) rotate(45deg); opacity: 0.6; }
    50%      { transform: translateX(4px) rotate(45deg); opacity: 1; }
}

/* Ambient corner art + badge fade out so the board reads cleanly */
.section--game.is-showing-update .corner-character,
.section--game.is-showing-update .version-badge,
.section--game.is-showing-roadmap .corner-character,
.section--game.is-showing-roadmap .version-badge {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* The drawer — fixed, covers the viewport, slides in from the right. It is a
   scroll container with the board centred via auto margins, so a tall board on
   a short screen scrolls instead of clipping. */
.update-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(2rem, 5vh, 4rem) clamp(2rem, 6vw, 5rem);
    opacity: 0;
    visibility: hidden;
    transform: translateX(5%);
    transition: opacity 0.5s ease,
                transform 0.55s cubic-bezier(0.7, 0, 0.2, 1),
                visibility 0s linear 0.55s;
}
.section--game.is-showing-update #updatePanel,
.section--game.is-showing-roadmap #roadmapPanel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.5s ease,
                transform 0.55s cubic-bezier(0.7, 0, 0.2, 1),
                visibility 0s;
}
/* Transparent click-to-close layer — leaves the page's own starfield +
   atmosphere visible behind, so this panel shares the previous page's look. */
.update-panel__backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
}

/* Panel's own sparkle field, matching the sections — keeps the stars present
   and crisp on top of the (now-faded) page behind. */
.update-panel .sparkle-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Back control — mirrors the cue arrow exactly (quiet uppercase label +
   bouncing chevron) but points left and sits on the left edge, vertically
   centered, so it reads as the return path for the "What's New" cue. */
.update-back {
    position: fixed;
    z-index: 2;
    top: 50%;
    left: clamp(1rem, 3vw, 2.75rem);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-dim);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.update-back:hover,
.update-back:focus-visible {
    color: var(--fg);
    outline: none;
}
.update-back__chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    animation: back-bounce-x 2s ease-in-out infinite;
}
.update-back:hover .update-back__chevron,
.update-back:focus-visible .update-back__chevron {
    animation-play-state: paused;
}
@keyframes back-bounce-x {
    0%, 100% { transform: translateX(0) rotate(45deg); opacity: 0.6; }
    50%      { transform: translateX(-4px) rotate(45deg); opacity: 1; }
}

/* ----- The board: banner artwork on top, art + flavour text, footer below --- */
.update-board {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 82rem;
    flex: 1 0 auto;          /* fill the panel height so the footer can sit low */
    display: flex;
    flex-direction: column;
    animation: fade-in 0.8s ease-out 0.15s both;
}

/* Top banner artwork — the wide 0.2 key art (with the "0.2 Out Now" badge) */
.update-board__hero {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto clamp(2rem, 4.5vh, 3.25rem);
    border: 1px solid rgba(245, 245, 245, 0.08);
    border-radius: 0.7rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5),
                0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.update-board__main {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    width: 100%;
}

/* Flavour text — a touch larger than the main page so it fills the column
   beside the promo art a little better, but still quiet. */
.update-board .update-board__text {
    font-size: clamp(0.9rem, 1vw, 1.05rem);
}
.update-board .update-board__text .game-description__lead {
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    line-height: 1.65;
}

/* Centre the hero + flavour block in the space above the links, while the
   links + footer stay pinned to the bottom. Equal auto top-margins on the
   hero and the links split the free space evenly (above the hero and above
   the links), so the content reads as vertically centred and the footer
   still sits as low as the main page's footer. */
.update-board__hero {
    margin-top: auto;
}
.update-board .links {
    margin-top: auto;
}

/* Art card — same tactile treatment as the trailer / gallery cards */
.update-board__art {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(245, 245, 245, 0.08);
    border-radius: 0.6rem;
    overflow: hidden;
    background-color: #000;
    cursor: zoom-in;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5),
                0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}
.update-board__art:hover,
.update-board__art:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(245, 245, 245, 0.22);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(var(--tint-cool), 0.12),
                0 1px 0 rgba(255, 255, 255, 0.06) inset;
    outline: none;
}
.update-board__art img {
    display: block;
    width: 100%;
    height: auto;
}

/* Stack the art over the text on narrow viewports */
@media (max-width: 768px) {
    .update-board__main {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   ROADMAP REVEAL — mirror of the What's New reveal on the LEFT edge. The cue
   points left; the panel (reusing .update-panel / .update-board) slides in
   from the left, sharing the same starfield and header banner, with a
   COMING SOON placeholder centered in the middle.
   -------------------------------------------------------------------------- */

/* Cue: left edge, vertically centered; chevron points left and bounces left */
.roadmap-cue {
    position: absolute;
    top: 50%;
    left: clamp(1rem, 3vw, 2.75rem);
    transform: translateY(-50%);
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-dim);
    transition: color 0.3s ease, opacity 0.4s ease, transform 0.4s ease;
}
.roadmap-cue:hover,
.roadmap-cue:focus-visible {
    color: var(--fg);
    outline: none;
}
.roadmap-cue__chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    animation: back-bounce-x 2s ease-in-out infinite;
}
.roadmap-cue:hover .roadmap-cue__chevron,
.roadmap-cue:focus-visible .roadmap-cue__chevron {
    animation-play-state: paused;
}

/* Back control: mirror of .update-back on the RIGHT edge, chevron points right */
.roadmap-back {
    position: fixed;
    z-index: 2;
    top: 50%;
    right: clamp(1rem, 3vw, 2.75rem);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-dim);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease;
}
.roadmap-back:hover,
.roadmap-back:focus-visible {
    color: var(--fg);
    outline: none;
}
.roadmap-back__chevron {
    display: block;
    width: 9px;
    height: 9px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    animation: cue-bounce-x 2s ease-in-out infinite;
}
.roadmap-back:hover .roadmap-back__chevron,
.roadmap-back:focus-visible .roadmap-back__chevron {
    animation-play-state: paused;
}

/* Hidden state slides the roadmap panel in from the LEFT (negative offset) */
#roadmapPanel {
    transform: translateX(-5%);
}

/* COMING SOON — quiet, wide-tracked uppercase Inter matching the scroll
   indicator / link row, centered in the panel. text-indent offsets the
   trailing letter-spacing so it stays optically centered. */
.coming-soon {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(1.25rem, 3vw, 2rem);
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    text-transform: uppercase;
    text-align: center;
    color: var(--fg-dim);
}

/* Lock scroll while the update panel or its zoom view is open */
html.update-locked,
html.update-locked body {
    overflow: hidden;
}

/* Full-size zoom view of the board */
.update-zoom {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 4vh, 3rem);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.update-zoom.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s;
}
.update-zoom__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 9, 16, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.update-zoom__img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    cursor: zoom-out;
}
.update-zoom__close {
    position: fixed;
    z-index: 2;
    top: clamp(0.75rem, 2vh, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.update-zoom__close:hover,
.update-zoom__close:focus-visible {
    background-color: rgba(183, 68, 80, 0.9);
    transform: scale(1.08);
    outline: none;
}

/* On mobile the game section is taller than the viewport, so an edge-pinned
   cue is easy to miss. Float it to a centered indicator near the top of the
   section instead — same quiet styling, just repositioned. */
@media (max-width: 768px) {
    .update-cue,
    .roadmap-cue {
        position: static;
        transform: none;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }
    .section--game.is-showing-update .update-cue,
    .section--game.is-showing-roadmap .update-cue,
    .section--game.is-showing-update .roadmap-cue,
    .section--game.is-showing-roadmap .roadmap-cue {
        transform: none;
    }
}

/* Section 2: game — logo, feature gallery, link row, footer */
.section--game {
    color: var(--fg);
}

/* --------------------------------------------------------------------------
   Hero (title + tagline)
   -------------------------------------------------------------------------- */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 auto;
    animation: fade-in 1.6s ease-out 0.3s both;
}

.title {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-weight: 400;
    font-size: clamp(4rem, 14vw, 12rem);
    line-height: 0.9;
    letter-spacing: 0.05em;
    color: var(--fg);
    text-transform: uppercase;
    text-shadow: 0 0 60px rgba(255, 255, 255, 0.08);
}

/* Midnight Arcade logo (PNG with white background).
   filter: invert(1) flips black logo → white, white BG → black.
   mix-blend-mode: screen makes the now-black BG transparent on the dark page. */
.studio-logo-wrap {
    position: relative;
    display: inline-block;
    cursor: default;
    /* The artwork inside the PNG sits ~4.6% right of the image's geometric
       center (the solid moon crescent weighs to the right; thin sparkle
       bursts pad the bbox on the left). Flex-centering aligns the image
       box, so the visible artwork ends up offset from the tagline and
       scroll indicator. This nudges it back onto the page centerline. */
    transform: translateX(calc(-2.3% + 15px));
}

.studio-logo {
    display: block;
    width: clamp(28rem, 80vw, 70rem);
    height: auto;
    filter: invert(1);
    mix-blend-mode: screen;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.5s ease;
    position: relative;
    z-index: 2;
}

.studio-logo-wrap:hover .studio-logo {
    transform: scale(1.04);
    filter: invert(1) brightness(1.15)
            drop-shadow(0 0 35px rgba(255, 255, 255, 0.35));
}

/* Studio tagline — hidden by default, fades smoothly in/out on logo hover.
   Longer ease-in-out for a gentler swell on both directions. */
.studio-tagline {
    margin-top: clamp(0.75rem, 1.5vh, 1.25rem);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(0.78rem, 0.95vw, 1rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(245, 245, 245, 0.7);
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    pointer-events: none;
}

.section--studio.is-hovering-logo .studio-tagline {
    opacity: 1;
}

/* Invisible hit zone over the visible logo art — the actual <img> bounding
   box is much larger than the moon + wordmark, so this overlay constrains
   hover detection to the artwork itself. JS attaches the hover handler here. */
.studio-logo-hit {
    position: absolute;
    top: 6%;
    left: 30%;
    width: 40%;
    height: 82%;
    z-index: 3;
    cursor: default;
}

/* Sparkle field — sparse twinkling points across the studio section.
   Each sparkle has its own position (--x, --y), animation delay (--d),
   and size multiplier (--s) set inline on the element. */
.section--studio .sparkle-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Base sparkle. Cascade opacity/scale match the twinkle's resting (dim)
   state — so during the animation's --d delay, the sparkle sits at dim
   instead of snapping to full opacity. */
.sparkle {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: calc(2.5px * var(--s, 1));
    height: calc(2.5px * var(--s, 1));
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.55);
    opacity: 0.25;
    transform: scale(0.5);
    animation: sparkle-twinkle 3s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.5); }
    50%      { opacity: 1;    transform: scale(1); }
}

/* Section 1's sparkle field — same sparkles as section 2 but only visible
   when the logo is hovered. Field-level opacity transition is the ONLY
   thing that changes between states; sparkles inside are identical to
   section 2 (no wrap, no animation reset, no extra layer). */
.section--studio .sparkle-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1s ease;  /* fade-out timing */
}

.section--studio.is-hovering-logo .sparkle-field {
    opacity: 1;
    transition: opacity 0.5s ease;  /* fade-in timing */
}

/* Section 2's sparkle field — always visible, identical sparkles */
.section--game .sparkle-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Full Service hero — the animated logo (chroma-keyed WebM with alpha).
   Sized to feel substantial but not dominate; the description below carries
   weight and the gallery anchors the bottom. */
.game-logo {
    display: block;
    width: clamp(20rem, 55vw, 48rem);
    height: auto;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.5));
}

.tagline {
    margin-top: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fg-dim);
    max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Scroll indicator (bottom of section 1)
   -------------------------------------------------------------------------- */

.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--fg-dim);
    text-decoration: none;
    transition: color 0.3s ease;
    animation: fade-in-centered 1.6s ease-out 1.4s both;
}

.scroll-indicator:hover,
.scroll-indicator:focus-visible {
    color: var(--fg);
    outline: none;
}

.scroll-indicator__label {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

/* Chevron — drawn with a rotated bottom+right border */
.scroll-indicator__chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
    50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Section 2 layout — vertical stack: logo / gallery / links / footer
   -------------------------------------------------------------------------- */

@keyframes drift {
    0%   { background-position: 0% 0%, 100% 100%, 0% 0%; }
    100% { background-position: 100% 100%, 0% 0%, 100% 100%; }
}

.game-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    padding-top: clamp(2rem, 4.5vh, 3.5rem);
}

/* Hero in section 2 sits at its natural size with a moderate gap below */
.section--game .hero {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: clamp(2rem, 4vh, 3rem);
}

/* Game description: cascading editorial layout — lead block sits at the
   left of the column, body block cascades to the right. Text inside each
   block is centered. */
/* Feature row: smaller trailer card on the LEFT, description fills the rest */
.game-feature-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    max-width: 84rem;
    margin: 0 auto clamp(3.75rem, 7vh, 5.5rem);
    align-items: center;
    padding: 0 clamp(0.5rem, 2vw, 1.5rem);
}

@media (max-width: 768px) {
    .game-feature-row {
        grid-template-columns: 1fr;
    }
}

/* Trailer card: same visual treatment as gallery items, plus a play indicator.
   Click opens the trailer in the existing lightbox. */
.trailer-card {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.6rem;
    cursor: pointer;
    border: 1px solid rgba(245, 245, 245, 0.08);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    filter: saturate(0.92);
    background-color: #000;
}

.trailer-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 245, 245, 0.22);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(var(--tint-cool), 0.12),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    filter: saturate(1);
}

.trailer-card:focus-visible {
    outline: 1px solid rgba(245, 245, 245, 0.4);
    outline-offset: 4px;
}

.trailer-card__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play indicator — circular pill with a triangle, blurs the frame behind it
   for a tactile glass feel. Subtle scale on hover. */
.trailer-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(3rem, 5vw, 4.25rem);
    height: clamp(3rem, 5vw, 4.25rem);
    border-radius: 50%;
    background-color: rgba(20, 20, 26, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.3s ease;
}

.trailer-card__play::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.95em solid #fff;
    border-top: 0.6em solid transparent;
    border-bottom: 0.6em solid transparent;
    margin-left: 0.25em;
}

.trailer-card:hover .trailer-card__play {
    transform: translate(-50%, -50%) scale(1.08);
    background-color: rgba(20, 20, 26, 0.7);
}

/* Description sits in the right grid column. Sizes scaled down to feel
   balanced beside the smaller trailer card. */
.game-description {
    flex: 0 0 auto;
    width: 100%;
    color: rgba(245, 245, 245, 0.7);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(0.82rem, 0.85vw, 0.92rem);
    line-height: 1.65;
    text-wrap: pretty;
    animation: fade-in 1.6s ease-out 0.6s both;
}

/* Heading above the lead — italic Inter, slightly larger for presence */
.game-description__heading {
    width: 100%;
    margin: 0 0 clamp(0.65rem, 1.5vh, 1rem);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.2rem, 1.85vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-align: center;
    color: rgba(245, 245, 245, 0.95);
}

/* Lead paragraph: full column width, left-aligned text */
.game-description__lead {
    width: 100%;
    margin: 0;
    font-size: clamp(0.88rem, 0.95vw, 1rem);
    line-height: 1.6;
    color: rgba(245, 245, 245, 0.85);
    text-align: left;
}

/* CTA paragraph: full column width, left-aligned, italicized */
.game-description p + p {
    width: 100%;
    margin: 1.1rem 0 0;
    font-style: italic;
    text-align: left;
}

/* On narrow viewports the cascade collapses (paragraphs full-width) so the
   text stays comfortable to read instead of squeezing into narrow columns */
@media (max-width: 600px) {
    .game-description__lead,
    .game-description p + p {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.game-description em {
    font-style: normal;
    color: var(--fg);
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* Push the link row toward the bottom of the section so the bottom
   feels intentional and clean rather than cramped against the gallery */
.section--game .links {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   Feature gallery
   -------------------------------------------------------------------------- */

/* Curated gallery — pixel art panels framed to harmonize with the dark page.
   Slight desaturation + a soft inner vignette pull each card into the same
   palette as the surrounding atmosphere, so they read as windows into the
   game rather than raw screenshots. */
.gallery {
    flex: 0 0 auto;
    width: 100%;
    max-width: 76rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 1rem);
    margin: 0 auto;
    padding: 0 0.5rem;
    animation: fade-in 1.6s ease-out 1s both;
}

/* On tablet, drop to 3 across (3 + 2 layout) */
@media (max-width: 900px) {
    .gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* On phones, drop to 2 across */
@media (max-width: 540px) {
    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gallery-item {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.4rem;
    cursor: pointer;
    border: 1px solid rgba(245, 245, 245, 0.06);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.03) inset;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                filter 0.4s ease;
    /* Slight desaturation harmonizes pixel art colors with the dark palette */
    filter: saturate(0.88);
}

.gallery-item:focus-visible {
    outline: 1px solid rgba(245, 245, 245, 0.4);
    outline-offset: 4px;
}

/* Soft inner vignette frames each card so its edges recede slightly into
   the page atmosphere — pseudo-element sits above the video. */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 30px rgba(10, 10, 12, 0.55);
    border-radius: inherit;
    transition: box-shadow 0.4s ease, opacity 0.4s ease;
}

.gallery-item:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 245, 245, 0.18);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(var(--tint-cool), 0.10),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    filter: saturate(1);
}

.gallery-item:hover::after {
    box-shadow: inset 0 0 16px rgba(10, 10, 12, 0.3);
}

.gallery-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Link row (bottom of section 2)
   -------------------------------------------------------------------------- */

.links {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: 2rem 0 1rem;
    animation: fade-in 1.6s ease-out 0.8s both;
}

.link {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fg-dim);
    text-decoration: none;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
}

/* Disabled link state — Steam (no destination yet) */
.link--disabled,
.link--disabled:hover,
.link--disabled:focus-visible {
    color: rgba(245, 245, 245, 0.25);
    cursor: not-allowed;
}

.link--disabled::after {
    display: none;
}

/* "Early Access Now!" badge — sits above the Patreon link, wiggles to
   draw the eye. Speech-bubble style with a downward arrow. */
.link-badge {
    position: absolute;
    bottom: calc(100% + 0.55rem);
    left: 50%;
    transform-origin: center 110%;
    transform: translateX(-50%) rotate(-3deg);
    background-color: #B74450;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(183, 68, 80, 0.4);
    pointer-events: none;
    animation: badge-wiggle 1.4s ease-in-out infinite;
}

/* Small downward arrow — speech-bubble tail pointing at "Patreon" */
.link-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #B74450;
}

@keyframes badge-wiggle {
    0%, 100% { transform: translateX(-50%) rotate(-3deg); }
    50%      { transform: translateX(-50%) rotate(3deg); }
}

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

.link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--fg);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.link:hover,
.link:focus-visible {
    color: var(--fg);
    outline: none;
}

.link:hover::after,
.link:focus-visible::after {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    flex: 0 0 auto;
    text-align: center;
    padding-top: 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-faint);
    animation: fade-in 1.6s ease-out 1.2s both;
}

/* --------------------------------------------------------------------------
   Age gate — overlay with blurred backdrop
   -------------------------------------------------------------------------- */

.age-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    transition: opacity 0.5s ease;
}

.age-gate.is-dismissed {
    opacity: 0;
    pointer-events: none;
}

/* Backdrop layer: blurs whatever is behind it */
.age-gate__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 10, 12, 0.55);
    backdrop-filter: blur(20px) saturate(110%);
    -webkit-backdrop-filter: blur(20px) saturate(110%);
}

/* Card matches the contact modal style: dark rounded panel with a subtle
   pink-tinted border and outer glow */
.age-gate__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    background-color: #14141a;
    border: 1px solid rgba(183, 68, 80, 0.4);
    border-radius: 1.25rem;
    padding: clamp(2rem, 5vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.65),
        0 0 30px rgba(183, 68, 80, 0.18);
    text-align: center;
    animation: fade-in 0.8s ease-out 0.15s both;
}

/* Title in italic Inter to match the contact modal & FS heading */
.age-gate__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    line-height: 1.15;
    color: var(--fg);
}

.age-gate__copy {
    margin: 0.75rem 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(245, 245, 245, 0.7);
}

.age-gate__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.age-gate__btn {
    flex: 1 1 auto;
    min-width: 10rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85rem 1.25rem;
    border-radius: 9999px;
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s ease;
}

/* Primary: pink pill — matches V0.1 badge, "Send Message", and the
   Patreon "Early Access Now!" sticker */
.age-gate__btn[data-age-action="confirm"] {
    background-color: #B74450;
    color: #fff;
    border: 1px solid #B74450;
    box-shadow: 0 4px 14px rgba(183, 68, 80, 0.35);
}

.age-gate__btn[data-age-action="confirm"]:hover {
    background-color: #cd5260;
    border-color: #cd5260;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(183, 68, 80, 0.5);
}

/* Secondary: outlined pill — clearly a "no" without competing visually */
.age-gate__btn[data-age-action="deny"] {
    background-color: transparent;
    color: rgba(245, 245, 245, 0.6);
    border: 1px solid rgba(245, 245, 245, 0.15);
}

.age-gate__btn[data-age-action="deny"]:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(245, 245, 245, 0.3);
    color: var(--fg);
}

.age-gate__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.age-gate__denied {
    margin: 1.75rem 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(245, 245, 245, 0.7);
}

/* Lock scroll while gate is up (snap-scroll lives on <html>) */
html.age-locked,
html.age-locked body {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Lightbox — gallery item enlarged on click, with blurred backdrop
   -------------------------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    /* No visibility toggle — element stays rendered so the backdrop-filter
       is permanently "warm" and doesn't snap-activate on open */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s linear;
    will-change: opacity;
}

.lightbox.is-open {
    pointer-events: auto;
    opacity: 1;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 10, 12, 0.88);
    backdrop-filter: blur(0) saturate(100%);
    -webkit-backdrop-filter: blur(0) saturate(100%);
    transition: backdrop-filter 0.9s linear,
                -webkit-backdrop-filter 0.9s linear;
    will-change: backdrop-filter;
}

/* Blur amount itself grows over 0.9s, in lockstep with the parent's opacity fade */
.lightbox.is-open .lightbox__backdrop {
    backdrop-filter: blur(20px) saturate(110%);
    -webkit-backdrop-filter: blur(20px) saturate(110%);
}

.lightbox__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(60rem, 65vw);
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lightbox.is-open .lightbox__content {
    transform: scale(1);
}

.lightbox__video {
    display: block;
    width: 100%;
    max-height: 58vh;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #000;
    border-radius: 0.5rem;
    border: 1px solid rgba(245, 245, 245, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    /* Pixel art rendering: keep source pixels crisp instead of smoothing them */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Close button — minimal X, top-right of the content */
.lightbox__close {
    position: absolute;
    top: -3rem;
    right: -0.25rem;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-dim);
    font-size: 2rem;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    padding: 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
    color: var(--fg);
    transform: scale(1.1);
    outline: none;
}

/* Lock scroll while lightbox is open */
html.lightbox-locked,
html.lightbox-locked body {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Contact modal — opens from the "Contact" link, composes a mailto: on submit.
   Rounded window, pink accents matching the V0.1 / "Early Access" badges.
   -------------------------------------------------------------------------- */

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    /* No visibility toggle — element stays rendered so the backdrop-filter
       is permanently "warm" and doesn't snap-activate on open */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s linear;
    will-change: opacity;
}

.contact-modal.is-open {
    pointer-events: auto;
    opacity: 1;
}

.contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(0) saturate(100%);
    -webkit-backdrop-filter: blur(0) saturate(100%);
    transition: backdrop-filter 0.9s linear,
                -webkit-backdrop-filter 0.9s linear;
    will-change: backdrop-filter;
}

/* Blur amount itself grows over 0.9s, in lockstep with the parent's opacity fade */
.contact-modal.is-open .contact-modal__backdrop {
    backdrop-filter: blur(18px) saturate(110%);
    -webkit-backdrop-filter: blur(18px) saturate(110%);
}

.contact-modal__form {
    position: relative;
    width: 100%;
    max-width: 32rem;
    background-color: #14141a;
    border: 1px solid rgba(245, 245, 245, 0.08);
    border-radius: 1.25rem;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(183, 68, 80, 0.08);
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-modal.is-open .contact-modal__form {
    transform: scale(1);
}

.contact-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-dim);
    font-size: 1.75rem;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.contact-modal__close:hover,
.contact-modal__close:focus-visible {
    color: var(--fg);
    background-color: rgba(255, 255, 255, 0.05);
    outline: none;
}

.contact-modal__title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 2.5vw, 1.75rem);
    color: var(--fg);
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.4rem;
}

.contact-modal__subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--fg-dim);
    text-align: center;
    margin-bottom: 1.75rem;
}

.contact-field {
    display: block;
    margin-bottom: 1.1rem;
}

.contact-field__label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 0.4rem;
}

.contact-field__input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(245, 245, 245, 0.1);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    color: var(--fg);
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.5;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
}

.contact-field__input::placeholder {
    color: rgba(245, 245, 245, 0.3);
}

.contact-field__input:focus {
    outline: none;
    border-color: #B74450;
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(183, 68, 80, 0.15);
}

textarea.contact-field__input {
    min-height: 6rem;
    font-family: inherit;
    line-height: 1.6;
}

.contact-modal__submit {
    display: block;
    width: 100%;
    background-color: #B74450;
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(183, 68, 80, 0.35);
    transition: background-color 0.3s ease,
                transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s ease;
}

.contact-modal__submit:hover {
    background-color: #cd5260;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(183, 68, 80, 0.5);
}

.contact-modal__submit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.contact-modal__submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Inline error message when the submission fails */
.contact-modal__error {
    margin: 0 0 1rem;
    padding: 0.65rem 0.9rem;
    background-color: rgba(183, 68, 80, 0.12);
    border: 1px solid rgba(183, 68, 80, 0.4);
    border-radius: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(245, 245, 245, 0.85);
}

/* Success message — same typographic family as the form, centered */
.contact-modal__success {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

.contact-modal__success .contact-modal__title {
    margin-bottom: 0.5rem;
}

.contact-modal__success .contact-modal__subtitle {
    margin-bottom: 0;
}

/* Lock scroll while contact modal is open */
html.contact-locked,
html.contact-locked body {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Animations + accessibility
   -------------------------------------------------------------------------- */

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Same fade-in motion as above, but preserves an existing translateX(-50%)
   on elements that rely on it for horizontal centering. */
@keyframes fade-in-centered {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 480px) {
    .section { padding: 1.5rem 1rem; }
    .links { gap: 1rem; }
}

/* ==========================================================================
   MOBILE-SPECIFIC REDESIGN (≤ 768px)
   ---------------------------------------------------------------------------
   Card-based scroll layout. Everything below this point only applies on
   small viewports — desktop above 768px is unchanged. Key changes:
     • Snap-scroll relaxed to natural scrolling
     • Studio tagline + sparkles always visible (no hover on touch)
     • Section 2 becomes a vertical stack of discrete cards
     • Gallery becomes a horizontal swipe strip with scroll-snap
   ========================================================================== */
@media (max-width: 768px) {

    /* Free-scroll on mobile — mandatory snap fights natural touch scrolling
       and can trap users mid-content. */
    html {
        scroll-snap-type: none;
    }

    .section {
        scroll-snap-stop: normal;
        scroll-snap-align: none;
        min-height: auto;
        padding: 1.75rem 1rem;
    }

    /* Studio section keeps its hero feel: full viewport height */
    .section--studio {
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* On touch devices there's no hover, so reveal the studio atmosphere
       (sparkles + tagline) by default instead of hiding it behind hover. */
    .section--studio .sparkle-field {
        opacity: 1;
    }

    .studio-tagline {
        opacity: 1;
    }

    .studio-logo {
        width: 88vw;
    }

    /* ----------------------------------------------------------------------
       Section 2 — card-based scroll
       ---------------------------------------------------------------------- */

    .section--game {
        padding: 1.5rem 1rem 1.75rem;
    }

    .game-content {
        padding-top: 0;
        gap: 1rem;
    }

    /* Version badge + Patreon "Early Access Now!" badge: hidden on mobile
       per design — the corresponding links remain accessible in the links
       row, so no information is lost. */
    .version-badge,
    .link-badge {
        display: none;
    }

    /* FS logo as a discrete card */
    .section--game .hero {
        margin-bottom: 1rem;
        padding: 1.25rem 1rem;
        background-color: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(245, 245, 245, 0.06);
        border-radius: 0.85rem;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.4),
            0 1px 0 rgba(255, 255, 255, 0.04) inset;
        width: 100%;
        flex: 0 0 auto;
    }

    .game-logo {
        width: 100%;
        max-width: 22rem;
    }

    /* Feature row: trailer card on top, description card below */
    .game-feature-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 0 auto 1.25rem;
        padding: 0;
        max-width: 100%;
    }

    .trailer-card {
        border-radius: 0.85rem;
    }

    /* Description as a card (matches FS logo card treatment) */
    .game-description {
        background-color: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(245, 245, 245, 0.06);
        border-radius: 0.85rem;
        padding: 1.25rem 1.15rem 1.35rem;
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.4),
            0 1px 0 rgba(255, 255, 255, 0.04) inset;
    }

    .game-description__heading {
        font-size: 1.2rem;
        text-align: left;
        margin-bottom: 0.6rem;
    }

    .game-description__lead,
    .game-description p {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    /* ----------------------------------------------------------------------
       Gallery — horizontal swipe strip with scroll-snap
       Items bleed past the section padding to the screen edges so the
       strip reads as a row to swipe through rather than a cramped grid.
       ---------------------------------------------------------------------- */
    .gallery {
        display: flex;
        grid-template-columns: none;
        max-width: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding: 1rem;
        gap: 0.65rem;
        padding: 0.25rem 1rem 0.75rem;
        margin: 0 -1rem; /* bleed to viewport edges */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery::-webkit-scrollbar {
        display: none;
    }

    .gallery-item {
        flex: 0 0 78%;
        scroll-snap-align: center;
        border-radius: 0.6rem;
    }

    /* ----------------------------------------------------------------------
       Links + footer
       ---------------------------------------------------------------------- */
    .links {
        gap: 1rem 1.4rem;
        padding: 1.5rem 0 0.75rem;
    }

    .link {
        font-size: 0.78rem;
        letter-spacing: 0.2em;
    }

    /* Scroll indicator: sits a bit higher to clear mobile browser UI bars,
       and uses the centered fade-in keyframe so the post-animation transform
       preserves translateX(-50%) — without it the indicator drifts to the
       right because plain fade-in's `to` state clobbers the X translation. */
    .scroll-indicator {
        bottom: 1.75rem;
        animation-name: fade-in-centered;
    }

    /* ----------------------------------------------------------------------
       Modals — tighter padding on small screens
       ---------------------------------------------------------------------- */
    .contact-modal__form {
        max-width: 100%;
        padding: 1.5rem 1.25rem;
    }

    .lightbox__close {
        top: -2.5rem;
    }
}