/* ============================================================
   ROOT CELLAR GAMES
   Design tokens + component system
   One warm light in a dark room.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* --- palette (locked to the Root Cellar logo) --- */
  --bg:        #14110D;   /* packed earth, page ground */
  --bg-well:   #0C0A07;   /* deeper wells */
  --surface:   #1E1913;   /* raised cards */
  --surface-2: #272018;   /* hover / nested */
  --surface-3: #302719;   /* deepest nested / active */
  --line:      #362D22;   /* hairline borders */
  --line-2:    #4E4234;   /* stronger borders */

  --accent:    #F7A724;   /* bulb amber, THE brand color */
  --accent-2:  #FFC65A;   /* filament highlight, gradients */
  --accent-dim:#B87D1C;   /* pressed / muted amber */
  --accent-glow: rgba(247,167,36,0.20);

  /* cool token kept for compatibility, unused in the studio chrome */
  --cool:      #5BC8C4;
  --cool-dim:  #2f6a68;
  --cool-glow: rgba(91,200,196,0.16);

  --text:      #F4EEE4;   /* lit off-white */
  --text-2:    #B6A895;   /* secondary */
  --text-3:    #7B6E5F;   /* faint / captions */

  --ok:        #8DBE72;   /* released / success */
  --ok-dim:    #44603A;

  /* --- gradients + elevation --- */
  --grad-amber:  linear-gradient(135deg, #FFCE68 0%, #F7A724 55%, #DE8A10 100%);
  --grad-surface:linear-gradient(180deg, #241D16 0%, #191410 100%);
  --grad-well:   linear-gradient(180deg, #130F0B 0%, #0A0806 100%);
  --hairline:    inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-sm:   0 4px 14px rgba(0,0,0,.38);
  --shadow-card: 0 12px 34px rgba(0,0,0,.5);
  --shadow-lift: 0 22px 60px rgba(0,0,0,.6);

  /* --- type --- */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- layout --- */
  --wrap: 1180px;
  --gap: 24px;
  --radius: 12px;
  --radius-lg: 18px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--accent); color:#171104; }

/* the room: one warm pool of light from above, dark at the edges */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 460px at 50% -6%, rgba(247,167,36,.11), transparent 62%),
    radial-gradient(160% 130% at 50% 0%, transparent 52%, rgba(0,0,0,.55) 100%);
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* small caps label: STATUS, GAMES, CONTACT */
.label{
  font-family:var(--display); font-weight:700;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3);
}

/* status tag: RELEASED / IN DEV / OCT 30 */
.tag{
  font-family:var(--display);
  font-size:.71rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line-2);
  color:var(--text-2); background:var(--bg-well);
  white-space:nowrap;
}
.tag.is-released{ color:var(--ok); border-color:var(--ok-dim); background:rgba(141,190,114,.08); }
.tag.is-soon{ color:var(--accent); border-color:var(--accent-dim); background:rgba(247,167,36,.09); }
.tag.is-dev{ color:var(--accent); border-color:var(--accent-dim); background:rgba(247,167,36,.07); }
.tag .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:currentColor; margin-right:7px; vertical-align:1px;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6ch;
  font-family:var(--display); font-weight:700; font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:13px 24px; border-radius:999px;
  border:1px solid transparent; transition:.16s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--grad-amber); color:#1a1206;
  box-shadow:0 6px 18px rgba(247,167,36,.22), var(--hairline);
}
.btn-primary:hover{
  color:#1a1206; transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(247,167,36,.36), inset 0 1px 0 rgba(255,255,255,.25);
  filter:saturate(1.05) brightness(1.04);
}
.btn-ghost{ background:rgba(255,255,255,.015); color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); background:var(--accent-glow); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.btn .arw{ transition:transform .16s ease; }
.btn:hover .arw{ transform:translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(18,15,11,.76);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(247,167,36,.05), 0 10px 30px -18px rgba(0,0,0,.8);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.nav-logo{ display:flex; align-items:center; gap:10px; }

/* --- the lockup --- */
.brand{ width:auto; height:auto; }
.brand-nav{ height:46px; }
.brand-foot{ height:52px; margin-bottom:18px; }
.nav-logo:hover .brand-nav{ filter:brightness(1.08); }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-family:var(--display); font-size:.82rem; font-weight:700;
  color:var(--text-2); letter-spacing:.12em; text-transform:uppercase;
  transition:.15s;
}
.nav-links a:hover{ color:var(--accent); }
.nav-links a.nav-cta{ color:var(--text); letter-spacing:.06em; }
.nav-links a.nav-cta:hover{ color:var(--accent); }
.nav-burger{ display:none; background:none; border:none; color:var(--text); }

/* ============================================================
   HERO, the hanging bulb
   ============================================================ */
.hero{
  position:relative; z-index:2;
  padding:clamp(30px,5vw,52px) 0 0;
  overflow:hidden; text-align:center;
}
.hero-glow{
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:1000px; height:760px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 44% 46% at 50% 40%, var(--accent-glow), transparent 66%);
  filter:blur(6px);
}

/* the fixture: a cord, a cap, a bulb, and the cone of light under it */
.fixture{ position:relative; width:96px; margin:0 auto; z-index:70; }
.bulb{
  position:relative; display:block; width:100%;
  z-index:70; padding:0; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bulb:focus-visible{ outline:2px solid var(--accent); outline-offset:14px; border-radius:8px; }
.bulb .cord, .bulb .glass, .bulb .cap, .bulb .fil{ transition:stroke .5s ease, fill .5s ease; }
.bulb:hover .glass, .bulb:hover .fil, .bulb:hover .cap, .bulb:hover .cord{ stroke:var(--accent-2); }
.bulb svg{
  display:block; width:100%; height:auto; overflow:visible;
  fill:none; stroke-width:29; stroke-linecap:round; stroke-linejoin:round;
}
.bulb .cord, .bulb .cap, .bulb .fil{ stroke:var(--accent); }
.bulb .glass{ stroke:var(--accent); fill:rgba(247,167,36,.05); }
.bulb::after{
  content:""; position:absolute; left:50%; top:71%;
  width:640px; height:520px; transform:translateX(-50%);
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(ellipse 26% 34% at 50% 6%, rgba(247,167,36,.26), transparent 72%),
    radial-gradient(ellipse 48% 64% at 50% 2%, rgba(247,167,36,.11), transparent 74%);
  filter:blur(18px);
}
/* the pendulum. --sway is the swing in each direction, change it alone. */
.bulb.sway{
  --sway:3.2deg;
  transform-origin:50% 0%;
  animation:sway 5.6s ease-in-out infinite;
}
/* settle it so it is an easy target under the cursor */
.bulb.sway:hover, .bulb.sway:focus-visible{ animation-play-state:paused; }
@keyframes sway{
  0%,100%{ transform:rotate(calc(var(--sway) * -1)); }
  50%    { transform:rotate(var(--sway)); }
}

.hero-copy{ max-width:720px; margin:34px auto 0; }
.hero-copy h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.03;
  letter-spacing:-.02em; text-transform:uppercase;
}
.hero-copy h1 .amber{ color:var(--accent); }
.hero-copy .lede{
  font-size:1.1rem; color:var(--text-2); max-width:44ch;
  margin:18px auto 0;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px; }

/* the shelf: a thin lit ledge that closes the hero */
.shelf{
  position:relative; height:1px; margin-top:clamp(40px,6vw,62px);
  background:linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}
.shelf::after{
  content:""; position:absolute; left:50%; top:-1px; transform:translateX(-50%);
  width:340px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.55; filter:blur(.5px);
}

/* ============================================================
   VIDEO, trailer
   ============================================================ */
.video-hero{ position:relative; z-index:2; padding:clamp(26px,4vw,44px) 0 0; }
.video-wrap{ max-width:1000px; margin:0 auto; }
.vid{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-well); cursor:pointer;
  box-shadow:var(--shadow-lift), 0 0 0 1px rgba(247,167,36,.06);
}
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid .vid-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.vid .vid-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid .vid-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.5)); }
.vid .vid-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:82px; height:82px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad-amber); color:#1a1206; font-size:1.9rem; line-height:1;
  display:flex; align-items:center; justify-content:center; padding-left:6px;
  box-shadow:0 12px 32px rgba(247,167,36,.42); transition:transform .16s ease;
}
.vid:hover .vid-play{ transform:translate(-50%,-50%) scale(1.08); }
.vid .vid-cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 20px;
  font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--text);
  letter-spacing:.02em;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.66));
}
.vid.playing .vid-poster,
.vid.playing .vid-scrim,
.vid.playing .vid-play,
.vid.playing .vid-cap{ display:none; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ position:relative; z-index:2; padding:clamp(56px,8vw,96px) 0; }
.section-well{ background:var(--grad-well); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.02); }
.section-head{ margin-bottom:44px; }
.section-head h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.2rem); letter-spacing:.01em;
  text-transform:uppercase;
  position:relative; display:inline-block;
}
.section-head h2::after{
  content:""; position:absolute; left:0; bottom:-10px;
  width:42px; height:3px; border-radius:2px;
  background:var(--grad-amber); box-shadow:0 0 12px var(--accent-glow);
}
.section-head p{ color:var(--text-2); margin-top:22px; max-width:56ch; }

/* ============================================================
   GAME CARDS
   ============================================================ */
.games-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);
}
.gcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--grad-surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow:var(--shadow-sm), var(--hairline);
}
.gcard:hover{ border-color:var(--accent-dim); transform:translateY(-5px); box-shadow:var(--shadow-lift), 0 0 0 1px rgba(247,167,36,.14), var(--hairline); }
.gcard-media{ position:relative; aspect-ratio:616/353; overflow:hidden; background:var(--bg-well); }
.gcard-media img{ width:100%; height:100%; object-fit:cover; transition:.4s ease; }
.gcard:hover .gcard-media img{ transform:scale(1.04); }
.gcard-tag{ position:absolute; top:12px; left:12px; z-index:2; }
.gcard-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.gcard-title{ font-family:var(--display); font-weight:800; font-size:1.32rem; letter-spacing:.01em; text-transform:uppercase; margin-bottom:8px; }
.gcard-desc{ color:var(--text-2); font-size:.98rem; margin-bottom:18px; flex:1; }
.gcard-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gcard-meta{ font-family:var(--display); font-weight:600; font-size:.74rem; color:var(--text-3); letter-spacing:.1em; text-transform:uppercase; }

/* full-bleed feature card */
.gcard.is-feature{ grid-column:1 / -1; }
.gcard.is-feature .gcard-inner{ display:grid; grid-template-columns:1.15fr 1fr; }
.gcard.is-feature .gcard-media{ aspect-ratio:auto; height:100%; min-height:280px; }
.gcard.is-feature .gcard-body{ padding:32px 34px; justify-content:center; }
.gcard.is-feature .gcard-title{ font-size:1.85rem; }
.gcard.is-feature .gcard-desc{ font-size:1.04rem; flex:none; margin-bottom:22px; }

/* ============================================================
   ABOUT / STUDIO FACTS
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:52px; align-items:center; }
.about-portrait{
  max-width:520px; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--grad-surface); overflow:hidden; padding:0;
  box-shadow:var(--shadow-card), var(--hairline);
}
.about-portrait .pbody{ padding:12px 22px; }
.about-portrait .prow{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:15px 0;
}
.about-portrait .prow + .prow{ border-top:1px solid var(--line); }
.about-portrait .plabel{
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
}
.about-portrait .pval{ color:var(--text); font-weight:600; text-align:right; }
.about-portrait .pval.accent{ color:var(--accent); }
.about-copy h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3.2vw,2.2rem); text-transform:uppercase; letter-spacing:.01em; margin-bottom:18px; }
.about-copy p{ color:var(--text-2); margin-bottom:16px; }
.about-copy p.big{ color:var(--text); font-size:1.14rem; }
.about-copy strong{ color:var(--text); font-weight:600; }

/* ============================================================
   DEVLOG (kept for the devlog feed)
   ============================================================ */
.devlog-wrap{ max-width:760px; margin:0 auto; }
.devlog-feed{ display:flex; flex-direction:column; gap:18px; }
.devpost{
  background:var(--grad-surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  border-left:2px solid var(--accent);
  box-shadow:var(--shadow-sm), var(--hairline);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.devpost:hover{ box-shadow:var(--shadow-card), var(--hairline); border-color:var(--line-2); }
.devpost-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.04em;
}
.devpost-head .chan{ color:var(--text); font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.devpost-head .date{ color:var(--text-3); margin-left:auto; }
.devpost-body{ padding:16px 18px; }
.devpost-body p{ font-size:.98rem; color:var(--text); margin-bottom:10px; }
.devpost-body p:last-child{ margin-bottom:0; }
.devpost-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.devpost-tags span{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.devlog-empty{ text-align:center; color:var(--text-3); padding:40px; font-size:.92rem; }
.devlog-note{ text-align:center; margin-top:28px; font-size:.86rem; color:var(--text-3); }
.devlog-note a{ color:var(--accent); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-cta{ text-align:center; max-width:620px; margin:0 auto; }
.contact-cta h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.3rem); text-transform:uppercase; letter-spacing:.01em; margin-bottom:14px; }
.contact-cta p{ color:var(--text-2); font-size:1.04rem; margin-bottom:26px; }
.contact-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; z-index:2; border-top:1px solid var(--line); background:var(--grad-well); padding:56px 0 40px; box-shadow:inset 0 1px 0 rgba(247,167,36,.05); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.footer-brand p{ color:var(--text-2); font-size:.94rem; max-width:34ch; }
.footer-col h4{ font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; }
.footer-col a{ display:block; color:var(--text-2); font-size:.94rem; padding:5px 0; transition:.14s; }
.footer-col a:hover{ color:var(--accent); }
.footer-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:26px; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--text-3); flex-wrap:wrap; gap:12px;
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }


/* ============================================================
   LIGHTS OUT, the bulb is a switch
   ============================================================ */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:0; transition:opacity .55s ease;
  background:radial-gradient(620px 440px at 50% 20%, rgba(0,0,0,.52), rgba(0,0,0,.9) 72%);
}
body.lights-out::before{ opacity:1; }
body.lights-out .hero-glow{ opacity:0; transition:opacity .55s ease; }
body.lights-out .bulb::after{ opacity:0; }
body.lights-out .bulb .glass{ stroke:#544636; fill:transparent; }
body.lights-out .bulb .cord,
body.lights-out .bulb .cap,
body.lights-out .bulb .fil{ stroke:#544636; }
body.lights-out .bulb:hover .glass,
body.lights-out .bulb:hover .cord,
body.lights-out .bulb:hover .cap,
body.lights-out .bulb:hover .fil{ stroke:#7A6852; }
body.lights-out .shelf::after{ opacity:0; }
.hero-glow, .bulb::after{ transition:opacity .55s ease; }


/* ============================================================
   ARRIVAL, the room starts dark
   ============================================================ */

/* nothing moves until the light is on */
html.intro-lock{ overflow:hidden; }
body.intro{ overflow:hidden; }

/* the instruction, hung under the bulb so it never shifts layout */
.bulb-hint{
  position:absolute; top:calc(100% + 30px); left:50%; transform:translateX(-50%);
  white-space:nowrap; pointer-events:none; z-index:70;
  font-family:var(--display); font-weight:700; font-size:.78rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--text-2);
  opacity:0; transition:opacity .45s ease;
}
.bulb-hint span{ display:inline-block; }
body.intro .bulb-hint{ opacity:1; }
body.intro .bulb-hint span{ animation:hintBreath 3s ease-in-out infinite; }
@keyframes hintBreath{
  0%,100%{ opacity:.58; transform:translateY(0); }
  50%    { opacity:1;   transform:translateY(-2px); }
}

/* A colder, deeper dark than the ordinary lights-out state, but with a
   clear core around the fixture. The blackout layer sits above the hero,
   so the bulb is read THROUGH it: leave that patch mostly clear or the
   only thing on screen is invisible. */
body.intro::before{
  background:radial-gradient(380px 330px at 50% 34%, rgba(6,8,12,.28), rgba(3,4,7,.99) 74%);
}
/* an unlit filament is cold, not dim amber */
body.intro .bulb .cord, body.intro .bulb .cap,
body.intro .bulb .glass, body.intro .bulb .fil{ stroke:#949AA6; }
body.intro .bulb:hover .cord, body.intro .bulb:hover .cap,
body.intro .bulb:hover .glass, body.intro .bulb:hover .fil{ stroke:#C8CEDA; }
body.intro .bulb svg{ filter:drop-shadow(0 0 22px rgba(190,205,235,.13)); }
body.intro .bulb-hint{ color:#A7ADB8; }
body.intro .hero-copy{ opacity:0; transform:translateY(18px); }
body.intro .video-hero,
body.intro .scroll-line{ opacity:0; }
.hero-copy{ transition:opacity .75s ease .3s, transform .75s ease .3s; }
.video-hero{ transition:opacity .8s ease .45s; }

/* the cold filament breathes, so it reads as the thing to press */
body.intro .bulb svg{ animation:coldBreath 3.4s ease-in-out infinite; }
@keyframes coldBreath{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }

/* an occasional warm twitch if the hint goes unanswered */
body.intro .bulb.nudge .cord, body.intro .bulb.nudge .cap,
body.intro .bulb.nudge .glass, body.intro .bulb.nudge .fil{ stroke:#D6A257; }

/* the strike: one soft stutter, then the room fills */
.flare{
  position:absolute; left:50%; top:71%; z-index:-1; pointer-events:none;
  width:560px; height:560px; border-radius:50%; opacity:0;
  transform:translate(-50%,-50%) scale(.15);
  background:radial-gradient(circle, rgba(255,214,130,.55), rgba(247,167,36,.18) 42%, transparent 70%);
}
.bulb.striking .flare{ animation:flare 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes flare{
  0%  { opacity:0;   transform:translate(-50%,-50%) scale(.12); }
  16% { opacity:.95; transform:translate(-50%,-50%) scale(.55); }
  100%{ opacity:0;   transform:translate(-50%,-50%) scale(2); }
}
/* the single pre-flash, kept to one cycle */
body.flicker::before{ opacity:.42 !important; transition-duration:70ms !important; }
body.flicker .bulb .cord, body.flicker .bulb .cap,
body.flicker .bulb .glass, body.flicker .bulb .fil{
  stroke:var(--accent-2) !important; transition-duration:70ms !important;
}

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.filters{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.chip{
  font-family:var(--display); font-weight:700; font-size:.74rem;
  letter-spacing:.13em; text-transform:uppercase;
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--text-3);
  transition:.16s ease;
}
.chip:hover{ color:var(--text); border-color:var(--line-2); }
.chip.active{
  color:#1a1206; background:var(--grad-amber); border-color:transparent;
  box-shadow:0 6px 18px rgba(247,167,36,.22), var(--hairline);
}

/* ============================================================
   THE SLATE, one row per game
   ============================================================ */
.slate{ display:flex; flex-direction:column; gap:14px; max-width:1000px; margin:0 auto; min-height:250px; }
.slate h3{ margin:0; font-size:inherit; font-weight:inherit; }
.grow{
  position:relative;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--grad-surface); overflow:hidden;
  box-shadow:var(--shadow-sm), var(--hairline);
  transition:border-color .2s ease, box-shadow .2s ease, opacity .28s ease, transform .28s ease;
}
/* work-light: a soft amber pool that tracks the pointer over the row */
.grow::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .28s ease;
  background:radial-gradient(340px 200px at var(--mx,50%) var(--my,50%), rgba(247,167,36,.11), transparent 70%);
}
.grow:hover::before{ opacity:1; }
.grow.is-open{
  border-color:var(--accent-dim);
  box-shadow:var(--shadow-card), 0 0 0 1px rgba(247,167,36,.13), var(--hairline);
}
.grow.is-hidden{ opacity:0; transform:translateY(-6px); pointer-events:none; }
.grow[hidden]{ display:none; }

.grow-head{
  position:relative; z-index:1;
  width:100%; display:flex; align-items:center; gap:18px;
  padding:16px 22px; background:none; border:0; color:inherit;
  text-align:left; cursor:pointer; transition:background .18s ease;
}
.grow-head:hover{ background:rgba(255,255,255,.018); }

/* the little preview tile, cycles screenshots on hover */
.grow-thumb{
  position:relative; flex:none; width:96px; height:56px; border-radius:9px;
  overflow:hidden; border:1px solid var(--line); background:var(--bg-well);
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.grow-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .3s ease, transform .5s ease;
}
.grow-head:hover .grow-thumb{
  border-color:var(--accent-dim); transform:scale(1.04);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.grow-head:hover .grow-thumb img{ transform:scale(1.06); }
.grow-thumb.swapping img{ opacity:.25; }
.grow.is-open .grow-thumb{ border-color:var(--accent-dim); }

.grow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.grow-line1{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* the small details on a closed row */
.grow-bits{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bit{
  font-family:var(--display); font-weight:600; font-size:.71rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
  border:1px solid var(--line); border-radius:6px; padding:3px 9px;
  transition:color .2s ease, border-color .2s ease;
}
.grow-head:hover .bit, .grow.is-open .bit{ color:var(--text-2); border-color:var(--line-2); }
.grow-head:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
.grow-idx{
  font-family:var(--display); font-weight:800; font-size:.78rem;
  letter-spacing:.12em; color:var(--text-3); flex:none;
  transition:color .18s ease;
}
.grow.is-open .grow-idx{ color:var(--accent); }
.grow-name{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.1rem,2.3vw,1.55rem); text-transform:uppercase;
  letter-spacing:.01em; line-height:1.1; flex:1;
}
.grow-head .tag{ flex:none; }
.grow-chev{
  position:relative; width:22px; height:22px; flex:none; color:var(--text-3);
  transition:color .18s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.grow-chev::before, .grow-chev::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  border-radius:2px; transform:translate(-50%,-50%);
}
.grow-chev::before{ width:16px; height:2px; }
.grow-chev::after{ width:2px; height:16px; }
.grow-head:hover .grow-chev{ color:var(--text); }
.grow.is-open .grow-chev{ color:var(--accent); transform:rotate(135deg); }

.grow-panel{ position:relative; z-index:1; display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1); }
.grow.is-open .grow-panel{ grid-template-rows:1fr; }
.grow-inner{ overflow:hidden; min-height:0; }
.grow-body{
  padding:2px 24px 26px; display:grid;
  grid-template-columns:1.35fr .65fr; gap:24px; align-items:start;
}
.grow-line{ color:var(--text); font-size:1.02rem; margin-bottom:18px; }

.facts{ margin-bottom:20px; }
.facts > div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:9px 0; }
.facts > div + div{ border-top:1px solid var(--line); }
.facts dt{
  font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
}
.facts dd{ font-weight:600; color:var(--text); font-size:.94rem; }
.grow-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.grow-actions .btn{ padding:11px 20px; font-size:.8rem; }


/* count bubble inside a filter chip */
.chip-n{
  display:inline-block; margin-left:7px; min-width:1.6em;
  font-size:.66rem; letter-spacing:.06em; color:var(--text-3);
  border-left:1px solid var(--line-2); padding-left:7px;
}
.chip.active .chip-n{ color:rgba(26,18,6,.62); border-left-color:rgba(26,18,6,.28); }

/* reading progress, a filament under the nav */
.scroll-line{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--grad-amber); transform:scaleX(0); transform-origin:0 50%;
  box-shadow:0 0 10px rgba(247,167,36,.5);
}

/* keyboard focus ring for the rows */
.grow-head:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }

/* ============================================================
   CAROUSEL
   ============================================================ */
.car{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--bg-well); touch-action:pan-y;
}
.car-track{ display:flex; height:100%; transition:transform .42s cubic-bezier(.4,0,.2,1); }
.car-track img{ min-width:100%; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; padding:0;
  border:1px solid var(--line-2); background:rgba(12,10,7,.7); color:var(--text);
  display:grid; place-items:center; font-size:1.4rem; line-height:1;
  opacity:0; transition:opacity .18s ease, border-color .16s ease, color .16s ease;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.car:hover .car-btn, .car-btn:focus-visible{ opacity:1; }
.car-btn.prev{ left:12px; }
.car-btn.next{ right:12px; }
.car-btn:hover{ border-color:var(--accent); color:var(--accent); }
.car-btn[disabled]{ opacity:0 !important; }
.car-dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; gap:7px; justify-content:center;
}
.car-dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:99px;
  background:rgba(255,255,255,.32); transition:.2s ease;
}
.car-dots button.on{ background:var(--accent); width:22px; }
.car-count{
  position:absolute; top:12px; left:12px;
  font-family:var(--display); font-weight:700; font-size:.68rem;
  letter-spacing:.1em; color:var(--text-2);
  background:rgba(12,10,7,.66); border:1px solid var(--line);
  padding:4px 9px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:32px; }
  .grow-body{ grid-template-columns:1fr; }
  .gcard.is-feature .gcard-inner{ grid-template-columns:1fr; }
  .gcard.is-feature .gcard-media{ min-height:220px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .games-grid{ grid-template-columns:1fr; }
  .grow-head{ padding:14px; gap:12px; align-items:flex-start; }
  .grow-thumb{ width:64px; height:48px; }
  .grow-line1{ gap:10px; }
  .grow-name{ font-size:1.02rem; }
  .grow-chev{ margin-top:14px; }
  .bit{ font-size:.65rem; padding:2px 7px; }
  .grow-body{ padding:2px 18px 22px; }
  .car-btn{ opacity:1; }
  .fixture{ width:74px; }
  .bulb::after{ width:420px; }
  .brand-nav{ height:32px; }
  .nav-links{
    position:fixed; inset:76px 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 24px 20px; transform:translateY(-130%); transition:.28s ease; z-index:40;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding:14px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-links .nav-cta{ margin-top:14px; }
  .nav-burger{ display:block; }
  .footer-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}