/* Fantastic Chess — marketing site styles
   Reuses the game's palette + type (Lilita One display, Fredoka UI/body). */

:root{
  --grape:#3C2A6E;
  --grape-deep:#251A4A;
  --grape-soft:#5B4498;
  --cream:#FFF3DF;
  --parchment:#FAEED1;
  --parchment-deep:#F2DBA0;
  --coral:#FF6B4A;
  --coral-deep:#E04A2A;
  --sun:#FFC93C;
  --sun-deep:#E8A91A;
  --mint:#4ED5A5;
  --mint-deep:#2EA67D;
  --berry:#E8538F;
  --royal:#5B7FE8;
  --ink:#221638;
  --ink-soft:#5E5475;
  --ink-faint:#9A8FB0;
  --gold:#C5910F;
  --gold-light:#FFD773;
  --cream-text:#FFF6E6;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--grape-deep); color:var(--ink);
  font-family:'Fredoka', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.display{ font-family:'Lilita One','Fredoka',system-ui; font-weight:400; letter-spacing:.4px; }

/* ── layout ─────────────────────────────────────────── */
.container{ width:min(1200px, 92vw); margin:0 auto; }
.section{ position:relative; padding:120px 0; overflow:hidden; }
.section.tight{ padding:88px 0; }
.bg-grape{ background:radial-gradient(120% 90% at 50% -10%, var(--grape-soft) 0%, var(--grape) 42%, var(--grape-deep) 100%); color:var(--cream-text); }
.bg-grape-flat{ background:var(--grape); color:var(--cream-text); }
.bg-cream{ background:var(--cream); color:var(--ink); }
.bg-parchment{ background:var(--parchment); color:var(--ink); }

/* soft top/bottom scallop dividers between bands.
   width:100% is load-bearing: these are <svg> (a replaced element), so with
   width:auto an absolutely-positioned one takes its INTRINSIC width from the
   viewBox — 1440px at height:60px — and left:0 wins over right:0. Past 1440px
   the scallop simply stopped, leaving a hard purple rectangle at the right. */
.edge-top{ position:absolute; top:-1px; left:0; right:0; width:100%; height:60px; pointer-events:none; }
.edge-bot{ position:absolute; bottom:-1px; left:0; right:0; width:100%; height:60px; pointer-events:none; }

/* ── typography ─────────────────────────────────────── */
.eyebrow{
  font-family:'Lilita One',system-ui; font-size:14px; letter-spacing:3px;
  text-transform:uppercase; color:var(--coral-deep);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
}
.eyebrow.on-dark{ color:var(--sun); }
.eyebrow::before, .eyebrow::after{ content:''; width:26px; height:3px; border-radius:2px; background:currentColor; opacity:.55; }
.eyebrow.solo::after{ display:none; }

h1,h2,h3{ margin:0; }
.h1{
  font-family:'Lilita One',system-ui; font-weight:400; line-height:.98;
  font-size:clamp(46px, 7.2vw, 92px); letter-spacing:.5px;
}
.h2{
  font-family:'Lilita One',system-ui; font-weight:400; line-height:1.0;
  font-size:clamp(34px, 5vw, 62px); letter-spacing:.5px;
}
.h3{ font-family:'Lilita One',system-ui; font-size:clamp(22px,2.4vw,30px); line-height:1.05; }
.lead{ font-size:clamp(17px,1.5vw,21px); line-height:1.55; font-weight:500; }
.muted{ color:var(--ink-soft); }
.muted-d{ color:rgba(255,246,230,.72); }
.pop-coral{ color:var(--coral-deep); }
.pop-sun{ color:var(--sun); }
.pop-mint{ color:var(--mint-deep); }
.maxw-60{ max-width:60ch; }
.maxw-46{ max-width:46ch; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }

/* title drop-shadow flourish */
.tsh-sun{ text-shadow:0 4px 0 var(--sun-deep); }
.tsh-grape{ text-shadow:0 4px 0 rgba(37,26,74,.35); }
.tsh-dark{ text-shadow:0 4px 0 rgba(20,10,40,.45); }

/* ── buttons ────────────────────────────────────────── */
.btn{
  font-family:'Lilita One',system-ui; letter-spacing:.6px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer; white-space:nowrap; text-shadow:0 2px 0 rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{ transform:translateY(3px); }
.btn-lg{ height:62px; padding:0 30px; font-size:22px; border-radius:20px; }
.btn-md{ height:50px; padding:0 22px; font-size:17px; border-radius:16px; }
.btn-coral{
  color:#fff; border:2px solid var(--coral-deep);
  background:linear-gradient(180deg,#FF8163 0%, var(--coral) 55%, var(--coral-deep) 100%);
  box-shadow:0 5px 0 var(--coral-deep), 0 10px 18px rgba(224,74,42,.34), inset 0 2px 0 rgba(255,255,255,.4);
}
.btn-coral:active{ box-shadow:0 2px 0 var(--coral-deep), 0 4px 10px rgba(224,74,42,.3), inset 0 2px 0 rgba(255,255,255,.4); }
.btn-sun{
  color:#5B3D00; border:2px solid var(--sun-deep); text-shadow:0 1px 0 rgba(255,255,255,.4);
  background:linear-gradient(180deg,#FFE08A 0%, var(--sun) 55%, var(--sun-deep) 100%);
  box-shadow:0 5px 0 var(--sun-deep), 0 10px 18px rgba(232,169,26,.3), inset 0 2px 0 rgba(255,255,255,.5);
}
.btn-sun:active{ box-shadow:0 2px 0 var(--sun-deep), inset 0 2px 0 rgba(255,255,255,.5); }
.btn-ghost-d{
  color:var(--cream-text); background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.25);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12);
}
.btn-ghost-d:hover{ background:rgba(255,255,255,.13); }

/* app store pill button */
.store-btn{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  padding:12px 22px 12px 18px; border-radius:18px;
  background:#15101F; border:2px solid rgba(255,255,255,.16);
  box-shadow:0 6px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .12s ease, box-shadow .12s ease;
}
.store-btn:hover{ transform:translateY(-2px); }
.store-btn:active{ transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.35); }
.store-btn .glyph{ font-size:30px; line-height:1; color:#fff; }
.store-btn .st-txt{ display:flex; flex-direction:column; gap:3px; }
.store-btn .st-sub{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:700; line-height:1; white-space:nowrap; }
.store-btn .st-main{ font-family:'Lilita One',system-ui; font-size:20px; color:#fff; line-height:1; white-space:nowrap; }
.store-btn .st-soon{ font-size:9px; letter-spacing:2px; color:var(--sun); font-weight:800; line-height:1; white-space:nowrap; }

.btn-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* ── nav ────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(37,26,74,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav-links{ display:flex; gap:34px; }
.nav-links a{ font-weight:600; font-size:15px; color:rgba(255,246,230,.82); transition:color .15s; }
.nav-links a:hover{ color:var(--sun); }
.nav-cta-wrap{ display:flex; align-items:center; gap:14px; }

/* logo wordmark */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo .mark{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(160deg,#FFE08A,var(--gold) 60%,#7A4A07);
  box-shadow:0 3px 0 #7A4A07, inset 0 1px 0 rgba(255,255,255,.5); flex:none;
}
.logo .mark span{ font-family:'Lilita One',system-ui; font-size:22px; color:var(--grape-deep); }
.logo .wm{ font-family:'Lilita One',system-ui; font-size:20px; line-height:.92; color:var(--cream-text); letter-spacing:.5px; }
.logo .wm small{ display:block; font-size:10px; letter-spacing:3px; color:var(--sun); }

/* ── starfield ──────────────────────────────────────── */
.starfield{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.starfield .st{ position:absolute; border-radius:50%; background:#fff; }

/* ── chips / pills ──────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  font-weight:600; font-size:14px; line-height:1;
}
.chip-cream{ background:#fff; color:var(--grape); border:2px solid var(--grape); box-shadow:0 3px 0 rgba(60,42,110,.25); }
.chip-glass{ background:rgba(255,255,255,.08); color:var(--cream-text); border:1.5px solid rgba(255,255,255,.22); }
.chip .ic{ font-size:15px; }

/* ── hero ───────────────────────────────────────────── */
.hero{ padding:64px 0 110px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero-phone-stage{ position:relative; display:flex; justify-content:center; align-items:center; min-height:560px; }
.phone{ filter:drop-shadow(0 30px 50px rgba(10,5,25,.55)); border-radius:30px; }
.hero-phone{ width:300px; transform:rotate(-4deg); position:relative; z-index:3; }

/* CSS phone frame around a bare screenshot */
.device{
  padding:13px; border-radius:46px; position:relative;
  background:linear-gradient(150deg,#2b2242 0%,#171021 55%,#0c0813 100%);
  box-shadow:0 34px 60px rgba(10,5,25,.6), inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 3px 6px rgba(255,255,255,.16), inset 0 -7px 16px rgba(0,0,0,.55);
}
.device-screen{ display:block; width:100%; border-radius:34px; box-shadow:0 0 0 1px rgba(0,0,0,.55); }
.device-slit{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:46px; height:5px; border-radius:3px; background:rgba(255,255,255,.16); z-index:4;
}
/* subtle side buttons */
.device::before{ content:''; position:absolute; left:-2px; top:96px; width:3px; height:52px; border-radius:3px;
  background:linear-gradient(90deg,#0c0813,#2b2242); box-shadow:0 66px 0 #0c0813, 0 66px 0 2px transparent; }
.device::after{ content:''; position:absolute; right:-2px; top:120px; width:3px; height:74px; border-radius:3px;
  background:linear-gradient(270deg,#0c0813,#2b2242); }

.float-card{ position:absolute; z-index:4; filter:drop-shadow(0 14px 22px rgba(10,5,25,.5)); }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--rot,0deg)); } }
.floaty{ animation:floaty 5s ease-in-out infinite; }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

/* ── feature stat row ───────────────────────────────── */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.stat{ text-align:center; }
.stat .n{ font-family:'Lilita One',system-ui; font-size:clamp(34px,4vw,52px); line-height:1; color:var(--coral-deep); text-shadow:0 3px 0 rgba(224,74,42,.25); }
.stat.on-dark .n{ color:var(--sun); text-shadow:0 3px 0 var(--sun-deep); }
.stat .l{ font-weight:600; font-size:14px; letter-spacing:.5px; margin-top:8px; color:var(--ink-soft); }
.stat.on-dark .l{ color:rgba(255,246,230,.7); }

/* ── how to play steps ──────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:18px; }
.step{
  background:#fff; border:2.5px solid var(--grape); border-radius:24px; padding:26px 24px 28px;
  box-shadow:0 6px 0 rgba(60,42,110,.22); position:relative;
}
.step .num{
  position:absolute; top:-20px; left:24px; width:42px; height:42px; border-radius:13px;
  display:grid; place-items:center; font-family:'Lilita One',system-ui; font-size:22px; color:#fff;
  background:linear-gradient(180deg,#FF8163,var(--coral) 60%,var(--coral-deep));
  border:2px solid var(--coral-deep); box-shadow:0 4px 0 var(--coral-deep);
}
.step .ic-big{ font-size:38px; margin:8px 0 12px; }
.step h3{ margin-bottom:8px; color:var(--grape); }
.step p{ margin:0; color:var(--ink-soft); font-size:16px; line-height:1.5; }

/* trigger chips strip */
.trigger-wrap{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

/* ── split panel (phone + copy) ─────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.rev .copy{ order:2; }
.feature-list{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:16px; }
.feature-list li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; line-height:1.5; }
.feature-list .fi{
  flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:17px;
  background:var(--sun); border:2px solid var(--sun-deep); box-shadow:0 3px 0 var(--sun-deep); color:#5B3D00;
}
.split .phone{ width:300px; margin:0 auto; }

/* ── puzzle modes ───────────────────────────────────── */
.puzzle-modes{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.puzzle-mode{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px;
  background:#fff; border:2px solid rgba(90,55,34,.12); box-shadow:0 4px 0 rgba(90,55,34,.08); }
.puzzle-mode .pm-ic{ font-size:26px; line-height:1; flex:none; width:34px; text-align:center; }
.puzzle-mode .pm-t{ font-family:'Lilita One',system-ui; font-size:18px; color:var(--grape); letter-spacing:.3px; }
.puzzle-mode .pm-d{ font-size:14px; color:var(--ink-soft,#6a5a4a); margin-top:2px; }

/* ── card marquee ───────────────────────────────────── */
.marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-track{ display:flex; gap:22px; width:max-content; animation:scroll-x 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* rarity legend */
.rarity-legend{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.rar{ border-radius:20px; padding:20px 18px; text-align:center; border:2.5px solid; position:relative; }
.rar .dot{ width:18px; height:18px; border-radius:50%; margin:0 auto 12px; box-shadow:0 0 12px; }
.rar .lab{ font-family:'Lilita One',system-ui; font-size:18px; letter-spacing:1px; }
.rar .d{ font-size:13px; margin-top:6px; line-height:1.4; opacity:.85; }

/* ── fantasy pieces grid ────────────────────────────── */
.pieces-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:10px; }
.piece-card{
  background:linear-gradient(180deg,#fff, #FFF7E6); border:2.5px solid var(--grape);
  border-radius:24px; padding:22px; text-align:center; box-shadow:0 6px 0 rgba(60,42,110,.2);
  display:flex; flex-direction:column; align-items:center;
}
.piece-card .disc{
  width:128px; height:128px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px;
  background:radial-gradient(circle at 50% 35%, #FFF8E1, var(--parchment-deep));
  box-shadow:inset 0 0 0 4px var(--gold-light), inset 0 0 0 7px var(--gold);
}
.piece-card .pname{ font-family:'Lilita One',system-ui; font-size:22px; color:var(--grape); margin-top:10px; }
.piece-card .ptag{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--coral-deep); font-weight:700; margin-top:2px; }
.piece-card .pdesc{ font-size:14.5px; color:var(--ink-soft); line-height:1.45; margin-top:10px; }

/* ── cards-that-change-the-rules grid ───────────────── */
.rules-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 28px; margin-top:52px; align-items:start; }
.rule-card{ display:flex; flex-direction:column; align-items:center; text-align:center; }
/* Card art fills its grid column instead of sitting at a fixed 196px with a
   moat of whitespace around it on wide screens; the max-width keeps it from
   ballooning past the art's native resolution. */
.rule-art{ width:100%; max-width:300px; filter:drop-shadow(0 16px 26px rgba(60,42,110,.32)); transition:transform .18s ease; }
.rule-art > div{ width:100% !important; }
.rule-card:hover .rule-art{ transform:translateY(-7px) rotate(-1.5deg); }
.rule-head{ font-family:'Lilita One',system-ui; font-size:21px; color:var(--grape); margin-top:20px; letter-spacing:.3px; }
.rule-desc{ font-size:15px; line-height:1.5; color:var(--ink-soft); margin:9px 0 0; max-width:30ch; }
.rule-more{
  grid-column:1/-1; text-align:center; margin-top:8px;
  font-family:'Lilita One',system-ui; font-size:17px; color:var(--grape); opacity:.75;
}

/* ── champions grid ─────────────────────────────────── */
.champ-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:16px; }
.avatar{ position:relative; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  border:3px solid rgba(255,255,255,.85); box-shadow:0 6px 14px rgba(10,5,25,.4), inset 0 2px 6px rgba(255,255,255,.3); }

/* ── faq ────────────────────────────────────────────── */
.faq{ max-width:820px; margin:0 auto; display:grid; gap:14px; }
.faq-item{ background:#fff; border:2.5px solid var(--grape); border-radius:18px; box-shadow:0 5px 0 rgba(60,42,110,.18); overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:20px 22px;
  font-family:'Fredoka'; font-weight:700; font-size:18px; color:var(--grape); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q .tw{ flex:none; width:30px; height:30px; border-radius:9px; background:var(--parchment-deep); display:grid; place-items:center; font-family:'Lilita One'; color:var(--grape); transition:transform .2s; }
.faq-item.open .faq-q .tw{ transform:rotate(45deg); background:var(--sun); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a .inner{ padding:0 22px 20px; color:var(--ink-soft); font-size:16px; line-height:1.6; }

/* ── final CTA ──────────────────────────────────────── */
.cta-card{
  position:relative; border-radius:36px; padding:72px 40px; text-align:center; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, var(--coral) 0%, var(--coral-deep) 75%);
  border:3px solid var(--coral-deep); box-shadow:0 18px 0 rgba(150,40,20,.5), 0 30px 50px rgba(20,10,40,.4);
}

/* ── footer ─────────────────────────────────────────── */
.footer{ background:var(--grape-deep); color:rgba(255,246,230,.7); padding:64px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.footer h4{ font-family:'Lilita One'; color:var(--cream-text); font-size:15px; letter-spacing:1px; margin:0 0 16px; }
.footer a{ display:block; padding:6px 0; font-size:15px; transition:color .15s; }
.footer a:hover{ color:var(--sun); }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13px; color:rgba(255,246,230,.5); }
.soc{ display:flex; gap:12px; }
.soc a{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.16); display:grid; place-items:center; padding:0; }
.soc a:hover{ background:rgba(255,255,255,.14); }

/* ── card codex ─────────────────────────────────────── */
.codex-group{ margin-top:42px; }
.codex-rk{ display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.cx-dot{ width:14px; height:14px; border-radius:50%; flex:none; }
.cx-rk-lab{ font-family:'Lilita One',system-ui; font-size:16px; letter-spacing:2px; }
.cx-rk-rule{ flex:1; height:2px; border-radius:2px; opacity:.55; }
.codex-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.codex-card{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 18px 20px;
  border-radius:20px; border:2px solid; background:rgba(255,255,255,.05); text-align:center;
  transition:transform .16s ease, background .16s ease; }
.codex-card:hover{ transform:translateY(-5px); background:rgba(255,255,255,.09); }
.cx-art{ width:100%; max-width:240px; filter:drop-shadow(0 10px 18px rgba(10,5,25,.5)); }
.cx-art > div{ width:100% !important; }
.cx-body{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.cx-name{ font-family:'Lilita One',system-ui; font-size:19px; color:#fff; letter-spacing:.4px; }
.cx-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.cx-trig{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.5px;
  padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); color:rgba(255,246,230,.85); }
.cx-ic{ font-size:13px; }
.cx-cost{ display:inline-flex; align-items:center; gap:3px; font-family:'Lilita One',system-ui; font-size:15px; color:var(--sun); }
.cx-gem{ font-size:11px; }
.cx-effect{ margin:0; font-size:13.5px; line-height:1.5; color:rgba(255,246,230,.74); }

/* ── play modes ─────────────────────────────────────── */
.mode-shot{ width:290px; max-width:100%; height:auto; display:block; filter:drop-shadow(0 22px 40px rgba(20,10,40,.4)); }
.modes-online{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
.modes-solo{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px; }
.mode-card{
  position:relative; background:linear-gradient(180deg,#fff,#FFF7E6);
  border:2.5px solid var(--grape); border-radius:24px; padding:26px 24px 24px;
  box-shadow:0 6px 0 rgba(60,42,110,.2); text-align:left; display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
.mode-card:hover{ transform:translateY(-5px); box-shadow:0 11px 0 rgba(60,42,110,.2); }
.mode-card .mode-ic{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center; font-size:30px;
  background:#fff; border:2.5px solid var(--accent); box-shadow:0 4px 0 var(--accent-deep);
}
.mode-card .mode-title{ font-family:'Lilita One',system-ui; font-size:23px; color:var(--grape); margin-top:16px; }
.mode-card .mode-desc{ font-size:15px; line-height:1.5; color:var(--ink-soft); margin-top:8px; flex:1; }
.mode-card .mode-sizes{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.mode-card .mode-sizes span{ font-family:'Lilita One',system-ui; font-size:12px; letter-spacing:.5px; color:var(--grape); background:#fff; border:2px solid var(--accent); border-radius:9px; padding:4px 9px; box-shadow:0 2px 0 var(--accent-deep); }
.mode-card .mode-tag{
  align-self:flex-start; margin-top:18px; font-family:'Lilita One',system-ui;
  font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#fff;
  background:var(--accent-deep); padding:5px 13px; border-radius:999px;
}

/* ── boss gauntlet ──────────────────────────────────── */
.bg-void{ background:radial-gradient(120% 90% at 50% -10%, #241a3f 0%, #140d28 55%, #0a0616 100%); color:var(--cream-text); }
.boss-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:56px; }
.boss-card{ display:grid; grid-template-columns:180px 1fr; gap:22px; align-items:stretch; position:relative; overflow:hidden;
  border-radius:24px; padding:18px; border:2px solid var(--accent);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow:0 14px 30px rgba(0,0,0,.4), 0 0 44px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s ease, box-shadow .18s ease; }
.boss-card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,.45), 0 0 60px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.1); }
.boss-portrait{ position:relative; border-radius:16px; overflow:hidden; align-self:stretch; min-height:230px;
  background:radial-gradient(circle at 50% 32%, var(--glow), rgba(0,0,0,.55) 78%); }
.boss-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.boss-week{ position:absolute; top:10px; left:10px; font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:var(--accent); color:#0a0616; }
.boss-elo{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-family:'Lilita One',system-ui; font-size:13px; letter-spacing:1px;
  padding:4px 13px; border-radius:999px; background:rgba(0,0,0,.62); border:1px solid var(--accent); color:#fff; white-space:nowrap; }
.boss-info{ display:flex; flex-direction:column; padding:6px 6px 6px 0; }
.boss-name{ font-family:'Lilita One',system-ui; font-size:31px; line-height:1; color:#fff; letter-spacing:.5px; }
.boss-title{ font-family:'Lilita One',system-ui; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-top:5px; }
.boss-chiprow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:13px 0 11px; }
.boss-el{ font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--accent); color:var(--accent); }
.boss-deck{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:rgba(255,246,230,.75); }
.boss-rating{ font-family:'Lilita One',system-ui; font-size:12px; letter-spacing:1.2px; color:rgba(255,246,230,.8); padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.boss-hand{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.boss-hand span{ font-size:11px; font-weight:700; letter-spacing:.4px; padding:4px 9px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,246,230,.72); }
.boss-hand .bh-focus{ background:var(--accent); border-color:var(--accent); color:#0a0616; }
.boss-pips{ display:inline-flex; gap:3px; }
.boss-pips .pip{ width:7px; height:7px; border-radius:50%; }
.boss-desc{ margin:0; font-size:14.5px; line-height:1.5; color:rgba(255,246,230,.84); }
.boss-threat{ margin-top:auto; padding-top:13px; font-size:13px; font-weight:600; color:var(--accent); display:flex; gap:9px; align-items:flex-start; }
.boss-threat .warn{ flex:none; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#0a0616;
  display:grid; place-items:center; font-weight:900; font-size:12px; line-height:1; }
.gauntlet-rule{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
.gr-item{ display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:18px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12); font-size:14px; line-height:1.5; color:rgba(255,246,230,.8); }
.gr-item strong{ color:#fff; }
.gr-ic{ font-size:24px; flex:none; line-height:1; }

/* ── responsive ─────────────────────────────────────── */
.nav-burger{ display:none; }
.nav-drawer{ display:none; }
.get-bar{ display:none; }
@media (max-width:980px){
  .section{ padding:84px 0; }
  .hero-grid{ grid-template-columns:1fr; gap:20px; }
  .hero-phone-stage{ min-height:520px; order:-1; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split.rev .copy{ order:0; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .modes-online, .modes-solo{ grid-template-columns:1fr; }
  .pieces-grid{ grid-template-columns:repeat(2,1fr); }
  .rarity-legend{ grid-template-columns:repeat(2,1fr); }
  .champ-grid{ grid-template-columns:repeat(6,1fr); }
  .rules-grid{ grid-template-columns:repeat(2,1fr); }
  .codex-grid{ grid-template-columns:repeat(3,1fr); }
  .boss-grid{ grid-template-columns:1fr; }
  .gauntlet-rule{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .nav-links{ display:none; }

  /* mobile nav: burger + full-width drawer */
  .nav-inner{ height:64px; }
  .nav-cta-wrap{ gap:10px; }
  .nav-cta{ height:42px; padding:0 15px; font-size:15px; border-radius:13px; }
  .nav-burger{ display:grid; gap:5px; place-content:center; width:46px; height:46px; padding:0;
    border-radius:14px; cursor:pointer; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.22); }
  .nav-burger span{ display:block; width:20px; height:2.5px; border-radius:2px; background:var(--cream-text); transition:transform .22s ease, opacity .16s ease; }
  .nav.menu-open .nav-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav.menu-open .nav-burger span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .nav-drawer{ display:block; position:absolute; top:100%; left:0; right:0; height:calc(100dvh - 64px); z-index:99;
    background:rgba(26,17,52,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:18px 0 34px; overflow-y:auto; animation:drawer-in .2s ease; }
  .nav-drawer[hidden]{ display:none; }
  .nav-drawer .container{ display:flex; flex-direction:column; }
  .nav-drawer a{ font-family:'Lilita One',system-ui; font-size:24px; letter-spacing:.5px; color:var(--cream-text);
    padding:15px 2px; border-bottom:1px solid rgba(255,255,255,.09); }
  .nav-drawer a:active{ color:var(--sun); }
  .nav-drawer .drawer-cta{ margin-top:26px; border-bottom:none; width:100%; color:#fff; }
  @keyframes drawer-in{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

  /* sticky store bar */
  .get-bar{ display:flex; align-items:center; gap:14px; position:fixed; left:12px; right:12px; bottom:12px; z-index:98;
    padding:10px 12px 10px 16px; border-radius:20px; background:rgba(26,17,52,.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1.5px solid rgba(255,255,255,.16);
    box-shadow:0 14px 34px rgba(5,2,15,.5);
    transform:translateY(140%); opacity:0; transition:transform .3s cubic-bezier(.3,1.2,.5,1), opacity .25s ease; pointer-events:none; }
  .get-bar.on{ transform:none; opacity:1; pointer-events:auto; }
  .nav.menu-open ~ * .get-bar, .nav.menu-open + .get-bar{ opacity:0; }
  .gb-copy{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
  .gb-copy strong{ font-family:'Lilita One',system-ui; font-weight:400; font-size:17px; color:var(--cream-text); letter-spacing:.4px; }
  .gb-copy span{ font-size:12px; color:rgba(255,246,230,.6); }
}
@media (max-width:560px){
  .container{ width:min(1200px, 100vw - 32px); }
  .section{ padding:58px 0; }
  .section.tight{ padding:48px 0; }
  .stat-row{ grid-template-columns:1fr 1fr; gap:22px 12px; }
  .pieces-grid{ grid-template-columns:1fr; }
  .rarity-legend{ grid-template-columns:1fr 1fr; gap:12px; }
  .champ-grid{ grid-template-columns:repeat(4,1fr); }
  .rules-grid{ grid-template-columns:1fr; gap:34px; margin-top:38px; }
  .codex-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .codex-card{ padding:14px 10px 16px; gap:10px; border-radius:16px; }
  .cx-name{ font-size:15px; }
  .cx-effect{ font-size:12px; line-height:1.45; }
  .cx-trig{ font-size:10px; padding:4px 8px; }
  .codex-group{ margin-top:32px; }
  .boss-card{ grid-template-columns:1fr; gap:16px; padding:14px; }
  .boss-portrait{ min-height:0; width:190px; margin:0 auto; aspect-ratio:3/4; background:none; }
  .boss-portrait img{ object-fit:cover; object-position:center; }
  .boss-info{ padding:0 2px 4px; }
  .boss-name{ font-size:26px; }
  .footer-grid{ grid-template-columns:1fr; }
  .btn-lg{ height:56px; font-size:19px; }

  /* hero */
  .hero{ padding:34px 0 84px; }
  .hero-grid{ gap:8px; }
  .hero .badge-row{ gap:8px; }
  .chip{ padding:8px 13px; font-size:13px; }
  .hero-phone-stage{ min-height:400px; }
  .hero-phone{ width:212px; }
  .float-card{ width:82px !important; }
  .float-card > div{ width:100% !important; }
  .btn-row{ gap:12px; }
  .store-btn{ flex:1 1 auto; justify-content:center; padding:11px 16px; }

  /* type + rhythm */
  .h1{ font-size:44px; }
  .lead{ font-size:16.5px; }
  .eyebrow{ font-size:12px; letter-spacing:2.4px; margin-bottom:14px; }
  .step{ padding:24px 20px 24px; }
  .mode-card{ padding:22px 20px 20px; }
  .cta-card{ padding:48px 22px; border-radius:28px; }
  .faq-q{ padding:17px 16px; font-size:16.5px; }
  .faq-a .inner{ padding:0 16px 18px; font-size:15px; }
  .gr-item{ padding:16px; }
  .marquee-track{ gap:14px; animation-duration:60s; }
  .footer{ padding:52px 0 108px; }
  .footer-bottom{ margin-top:34px; }
}

/* touch devices: no hover lifts, bigger tap targets */
@media (hover:none){
  .mode-card:hover, .boss-card:hover, .codex-card:hover, .store-btn:hover{ transform:none; }
  .rule-card:hover .rule-art{ transform:none; }
  .marquee:hover .marquee-track{ animation-play-state:running; }
  .footer a{ padding:9px 0; }
}

/* respect reduced-motion: the marquee and floats are decoration only */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .marquee-track, .floaty{ animation:none; }
  .get-bar, .btn, .store-btn, .mode-card, .boss-card, .codex-card, .rule-art, .faq-a{ transition:none; }
}