/* ==========================================================================
   SLOT GAME — ART DETAILS PAGE  ·  reusable template
   --------------------------------------------------------------------------
   To reskin for a new title you only ever touch:
     1. the GAME THEME block below (3 colours)
     2. the /assets folder (same filenames, same pixel sizes)
     3. the copy in index.html
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Every page here is dark by design. Without this the browser still thinks
     it is painting a light document and hands back light scrollbars and form
     controls on a near-black ground. */
  color-scheme:dark;

  /* neutral shell — shared by every game */
  --bg:        #08080b;
  --bg-2:      #0b0b0f;
  --surface:   #121218;
  --surface-2: #17171f;
  --line:      #26262f;
  --line-soft: #1a1a22;
  --text:      #f3f3f6;
  --muted:     #8d8d9b;   /* 6.1:1 on --bg */
  --muted-2:   #77778a;   /* 4.6:1 on --bg — smallest text still passes AA */
  --ghost:     #4e4e5c;   /* scaffolding only (placeholder specs), never content */

  /* ---- GAME THEME — the only colours you change per title ---- */
  --accent:     #ffb43c;         /* primary highlight */
  --accent-2:   #ff4d3d;         /* secondary / glow  */
  --accent-rgb: 255 180 60;      /* same as --accent, as rgb channels */

  /* type */
  /* Manrope is what every page actually loads. This used to name Inter,
     which nothing fetched — harmless only because each page re-declared it
     inside its own scope, and a trap for any page that forgot to. */
  --font: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* rhythm */
  --pad:     clamp(20px, 4.5vw, 72px);   /* page side gutter   */
  --max:     1560px;                     /* content max width  */
  --gap:     clamp(12px, 1.3vw, 22px);
  --section: clamp(76px, 9vw, 168px);    /* space between sections */
  --r:       14px;                       /* card radius */
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
::selection{ background:var(--accent); color:#000 }

/* fine film grain — stops large flat dark areas from banding */
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. LAYOUT PRIMITIVES ---------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.section{ padding-block:var(--section) }
.section + .section{ padding-top:0 }
[id]{ scroll-margin-top:96px }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ---------- 4. TYPE ------------------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:.85 }

.h2{
  font-size:clamp(30px, 4.4vw, 62px); line-height:1.02;
  letter-spacing:-.03em; font-weight:700; text-wrap:balance;
}
.lede{
  color:var(--muted); font-size:clamp(15px, 1.25vw, 18px);
  line-height:1.65; max-width:60ch;
}
.sec-head{ display:grid; gap:18px; margin-bottom:clamp(32px, 4vw, 64px) }

/* ---------- 5. PLACEHOLDER FRAMES --------------------------------------- */
/* Every image slot prints the exact export size it wants until the real
   file is dropped in. It self-hides the moment the image loads.           */
.frame{
  position:relative; overflow:hidden; background:var(--surface);
  border-radius:var(--r);
}
.frame::after{
  content:attr(data-spec);
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:12px;
  font:500 10px/1.7 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ghost);
  border:1px dashed var(--line); border-radius:inherit;
  background:repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.014) 14px 28px);
  pointer-events:none;
}
.frame:has(img.ok)::after{ display:none }
.frame img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s }
.frame img.ok{ opacity:1 }

/* ---------- 6. TOP BAR --------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  background:linear-gradient(rgba(8,8,11,.9), transparent);
  transition:background .3s, border-color .3s;
}
.topbar.stuck{
  background:rgba(8,8,11,.72); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.topbar .wrap{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand{ display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-.01em }
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 14px rgb(var(--accent-rgb) / .9);
}
.brand small{ color:var(--muted-2); font-weight:500; font-size:13px }
.navlinks{ display:flex; gap:clamp(14px, 2vw, 34px) }
.navlinks a{ font-size:13px; color:var(--muted); padding-block:6px; transition:color .2s }
.navlinks a:hover{ color:var(--text) }
@media (max-width:760px){ .navlinks{ display:none } }

/* ---------- 7. HERO ------------------------------------------------------ */
.hero{ position:relative; isolation:isolate; margin-top:-64px }
.hero__art{
  position:relative; width:100%;
  height:clamp(520px, 82vh, 940px);
  border-radius:0;
}
.hero__art::before{                       /* scrim so type always reads */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(8,8,11,.72) 30%, rgba(8,8,11,.14) 62%, rgba(8,8,11,.6) 100%),
    radial-gradient(120% 80% at 18% 100%, rgba(8,8,11,.78), transparent 62%);
}
.hero__body{ position:absolute; inset:auto 0 0 0; z-index:3; padding-bottom:clamp(36px, 5vw, 76px) }
.hero h1{
  width:clamp(230px, 30vw, 470px); background:none; overflow:visible;
}
.hero h1 img{ object-fit:contain; height:auto }
.hero h1::after{ border-radius:8px; position:relative; aspect-ratio:2/1 }
.hero__tag{
  margin-top:22px; max-width:46ch; text-wrap:balance;
  font-size:clamp(16px, 1.5vw, 21px); line-height:1.5; color:#cfcfd8;
}
.meta{ margin-top:clamp(26px, 3vw, 40px); display:flex; flex-wrap:wrap; gap:10px }
.meta li{
  display:flex; align-items:baseline; gap:8px; padding:9px 15px; border-radius:99px;
  border:1px solid var(--line); background:rgba(18,18,24,.6); backdrop-filter:blur(8px);
}
.meta span{ font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2) }
.meta b{ font-size:14px; font-weight:600; letter-spacing:-.01em }
.meta li:first-child b{ color:var(--accent) }

/* ---------- 8. BRIEF ----------------------------------------------------- */
.brief{ display:grid; gap:clamp(28px, 4vw, 80px); grid-template-columns:minmax(0,1fr) }
@media (min-width:900px){ .brief{ grid-template-columns:200px minmax(0,1fr) } }
.brief__copy{ display:grid; gap:20px; max-width:68ch }
.brief__copy p{ font-size:clamp(16px, 1.4vw, 20px); line-height:1.72; color:#c9c9d3 }
.brief__copy p:first-child{
  font-size:clamp(19px, 1.9vw, 27px); line-height:1.5; color:var(--text);
  letter-spacing:-.015em; text-wrap:pretty;
}
.facts{
  margin-top:clamp(40px, 5vw, 72px); padding-top:34px; border-top:1px solid var(--line-soft);
  display:grid; gap:28px 24px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.facts dt{ font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2) }
.facts dd{ margin-top:9px; font-size:clamp(17px,1.5vw,21px); font-weight:600; letter-spacing:-.02em }

/* ---------- 9. SYMBOLS --------------------------------------------------- */
.symgroup + .symgroup{ margin-top:clamp(34px, 4vw, 62px) }
.symgroup__label{
  display:flex; align-items:center; gap:16px; margin-bottom:20px;
  font:600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.symgroup__label::after{ content:""; flex:1; height:1px; background:var(--line-soft) }
/* Fixed column count, so every full group lands flush with the section edges.
   Change --sym-cols if your set is a different multiple.                     */
.symgrid{
  --sym-cols:5;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(var(--sym-cols), minmax(0,1fr));
}
@media (max-width:1100px){ .symgrid{ --sym-cols:4 } }
@media (max-width:720px) { .symgrid{ --sym-cols:3 } }
@media (max-width:430px) { .symgrid{ --sym-cols:2 } }

/* Specials are the hero symbols — let them stretch to fill their own row so
   they read a step larger than the pays. */
.symgroup--hero .symgrid{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) }
.sym{ display:grid; gap:12px }
.sym .frame{
  width:100%; aspect-ratio:1;
  background:radial-gradient(70% 70% at 50% 40%, var(--surface-2), var(--surface) 72%);
  border:1px solid var(--line-soft);
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.sym .frame img{ object-fit:contain; padding:12% }
.sym:hover .frame{
  transform:translateY(-4px);
  border-color:rgb(var(--accent-rgb) / .45);
  box-shadow:0 18px 40px -22px rgb(var(--accent-rgb) / .55);
}
.sym figcaption{
  font:500 10px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-2); text-align:center;
}
.sym--special .frame{ border-color:rgb(var(--accent-rgb) / .3) }
.sym--special figcaption{ color:var(--accent) }

/* ---------- 10. CHARACTER ------------------------------------------------ */
.char{ display:grid; gap:clamp(32px, 5vw, 80px); align-items:center; grid-template-columns:minmax(0,1fr) }
@media (min-width:960px){ .char{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) } }
.char__art{ position:relative; aspect-ratio:4/5 }
.char__art::before{                        /* pedestal glow behind the cut-out */
  content:""; position:absolute; inset:10% 0 2% 0; z-index:0; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 58%, rgb(var(--accent-rgb) / .22), transparent 70%);
  filter:blur(30px);
}
.char__art .frame{ position:relative; z-index:1; height:100%; background:transparent }
.char__art .frame img{ object-fit:contain }
.char__body{ display:grid; gap:22px; max-width:56ch }
.char__body p{ color:#c9c9d3; font-size:clamp(15px,1.3vw,18px) }
.expr{ margin-top:12px; display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)) }
.expr .frame{ aspect-ratio:1; border:1px solid var(--line-soft); background:var(--surface) }
.expr .frame img{ object-fit:contain; padding:9% }

/* ---------- 11. WINNING SCREENS ----------------------------------------- */
.shots{ display:grid; gap:var(--gap) }
.shots__pair{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) }
@media (min-width:820px){ .shots__pair{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.shot{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-soft) }
.shot .frame{ aspect-ratio:16/9; border-radius:0 }
.shot__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding:clamp(16px,2vw,28px);
  background:linear-gradient(to top, rgba(8,8,11,.92), transparent);
  opacity:0; translate:0 8px; transition:opacity .35s, translate .35s;
}
.shot:hover .shot__cap, .shot:focus-within .shot__cap{ opacity:1; translate:0 0 }
.shot__cap b{ font-size:clamp(15px,1.4vw,19px); font-weight:600; letter-spacing:-.02em }
.shot__cap span{ font:500 10px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--accent) }
@media (hover:none){ .shot__cap{ opacity:1; translate:0 0 } }

/* ---------- 12. PHONE MOCKUPS ------------------------------------------- */
.mobile{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(var(--bg), var(--bg-2) 40%, var(--bg));
  border-block:1px solid var(--line-soft);
}
.mobile::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 50% at 50% 6%, rgb(var(--accent-rgb) / .10), transparent 70%);
}
.phones{
  margin-top:clamp(40px, 5vw, 76px);
  display:grid; gap:clamp(18px, 3.4vw, 60px); align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  max-width:1080px; margin-inline:auto;
}
.phones > *{ margin-bottom:40px }
.phone{
  --pr:clamp(28px, 3.4vw, 50px);   /* outer corner radius */
  --pb:clamp(6px, .8vw, 11px);     /* bezel thickness     */
  position:relative; width:100%; aspect-ratio:393/852;
  padding:var(--pb); border-radius:var(--pr);
  background:linear-gradient(155deg,#4a4a56,#17171d 26%,#0e0e13 68%,#53535f);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px #000,
    0 44px 90px -34px #000;
}
.phone .screen{
  position:relative; height:100%; overflow:hidden;
  border-radius:calc(var(--pr) - var(--pb)); background:var(--surface);
}
.phone .screen .frame{ height:100%; border-radius:inherit }
.phone .island{
  position:absolute; z-index:3; top:clamp(6px,.95vw,14px); left:50%; translate:-50% 0;
  width:31%; height:clamp(13px,1.85vw,27px); border-radius:99px; background:#000;
}
.phone figcaption{
  position:absolute; top:calc(100% + 16px); left:0; right:0; text-align:center;
  font:500 10px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
/* Uses the standalone `translate`/`scale` properties, NOT `transform` — the
   scroll-reveal owns `transform`, and would otherwise cancel this out. */
@media (min-width:760px){ .phone--lift{ translate:0 -7%; scale:1.07; z-index:2 } }

/* ---------- 13. PALETTE STRIP ------------------------------------------- */
.palette{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(104px,1fr)) }
.swatch{ display:grid; gap:10px }
.swatch i{ display:block; height:clamp(72px,8vw,120px); border-radius:var(--r); border:1px solid rgba(255,255,255,.07) }
.swatch code{ font:500 10px/1 var(--mono); letter-spacing:.1em; color:var(--muted-2); text-transform:uppercase }

/* ---------- 14. FOOTER --------------------------------------------------- */
.foot{ margin-top:var(--section); border-top:1px solid var(--line-soft); padding-block:clamp(34px,4vw,56px) }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; justify-content:space-between }
.foot p{ color:var(--muted-2); font-size:13px }
.foot nav{ display:flex; gap:26px; font-size:13px; color:var(--muted) }
.foot nav a:hover{ color:var(--accent) }

/* ---------- 15. SCROLL REVEAL ------------------------------------------- */
.rise{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1);
  transition-delay:var(--d, 0ms);
}
.rise.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .rise{ opacity:1; transform:none; transition:none }
}

/* Both the scroll reveal and the placeholder swap start at opacity:0 and wait
   for script to add a class. With scripting off that is a blank page, so the
   default state has to be the visible one. The dashed spec placeholders go
   too — nothing can know whether an image loaded, and a placeholder painted
   over real artwork is worse than no placeholder. */
@media (scripting: none){
  .rise{ opacity:1; transform:none }
  .frame img{ opacity:1 }
  .frame::after{ display:none }
}