/* =====================================================================
   VERSUS — Design System
   Signature accent: "Versus Violet" — the colour of Ember (P1) meeting Tide (P2).
   Display: Unbounded (wide, chunky, characterful)  ·  UI: Plus Jakarta Sans
   ===================================================================== */

@font-face{font-family:"Unbounded";font-weight:500;font-display:swap;src:url(fonts/unbounded-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:700;font-display:swap;src:url(fonts/unbounded-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:800;font-display:swap;src:url(fonts/unbounded-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:400;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:500;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:600;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  /* type */
  --f-display:"Unbounded",ui-rounded,system-ui,sans-serif;
  --f-ui:"Jakarta",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --t-hero:clamp(34px,10vw,44px); --t-xl:28px; --t-l:22px; --t-m:18px;
  --t-title:17px; --t-body:15px; --t-small:13px; --t-micro:11px;
  /* spacing (4pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  /* radii */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --tabbar-h:72px;
}

/* ---------- DARK (designed first, the hero mode) ---------- */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0913; --bg-2:#110F1F;
  --surface:rgba(30,26,54,.52); --surface-strong:rgba(38,33,68,.78); --surface-solid:#1A1730;
  --stroke:rgba(255,255,255,.09); --stroke-strong:rgba(255,255,255,.16); --highlight:rgba(255,255,255,.07);
  --ink:#F5F3FF; --ink-2:#C9C4E6; --ink-3:#8E88B0; --ink-inverse:#0A0913;
  --accent:#8B6CFF; --accent-hi:#A993FF; --accent-ink:#FFFFFF; --accent-soft:rgba(139,108,255,.16);
  --p1:#FF5476; --p1-soft:rgba(255,84,118,.16); --p1-deep:#C72A52;
  --p2:#2EBBFF; --p2-soft:rgba(46,187,255,.16); --p2-deep:#0F7FC7;
  --gold:#FFC651; --gold-2:#FF9F3D; --gold-soft:rgba(255,198,81,.14);
  --success:#2DDBA0; --warning:#FFB547; --danger:#FF5C5C;
  --blob1:#5B3CF0; --blob2:#E8346A; --blob3:#0E9BE6; --blob-op:.42;
  --sh-1:0 1px 0 rgba(255,255,255,.05) inset,0 6px 18px -8px rgba(0,0,0,.6);
  --sh-2:0 1px 0 rgba(255,255,255,.07) inset,0 18px 40px -16px rgba(0,0,0,.75);
  --sh-3:0 1px 0 rgba(255,255,255,.08) inset,0 30px 80px -24px rgba(0,0,0,.85);
  --glow:0 12px 36px -10px rgba(139,108,255,.65);
  /* game tables */
  --table:#100E1E; --table-2:#17142B; --table-line:rgba(167,150,255,.22); --table-glow:.9;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F1FF; --bg-2:#ECE7FF;
  --surface:rgba(255,255,255,.62); --surface-strong:rgba(255,255,255,.86); --surface-solid:#FFFFFF;
  --stroke:rgba(40,24,110,.08); --stroke-strong:rgba(40,24,110,.14); --highlight:rgba(255,255,255,.9);
  --ink:#17112E; --ink-2:#4A4270; --ink-3:#7F78A3; --ink-inverse:#FFFFFF;
  --accent:#5E3BF0; --accent-hi:#7656FF; --accent-ink:#FFFFFF; --accent-soft:rgba(94,59,240,.10);
  --p1:#EC3A61; --p1-soft:rgba(236,58,97,.11); --p1-deep:#B8213F;
  --p2:#0C95E0; --p2-soft:rgba(12,149,224,.11); --p2-deep:#086BA3;
  --gold:#F2A516; --gold-2:#F07A1A; --gold-soft:rgba(242,165,22,.13);
  --success:#0FB27A; --warning:#E08A00; --danger:#E5383B;
  --blob1:#B9A6FF; --blob2:#FFB3C6; --blob3:#9FDCFF; --blob-op:.7;
  --sh-1:0 1px 0 rgba(255,255,255,.9) inset,0 6px 16px -8px rgba(48,26,140,.18);
  --sh-2:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -18px rgba(48,26,140,.28);
  --sh-3:0 1px 0 rgba(255,255,255,1) inset,0 30px 70px -26px rgba(48,26,140,.38);
  --glow:0 12px 30px -10px rgba(94,59,240,.55);
  --table:#FBFAFF; --table-2:#EFEBFF; --table-line:rgba(94,59,240,.2); --table-glow:.35;
}

/* ---------- TOUCH-NATIVE RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--f-ui);font-size:var(--t-body);line-height:1.45;color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  position:fixed;inset:0;
}
button,input,select,textarea{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{background:none;border:0;cursor:pointer;touch-action:manipulation}
input,textarea{-webkit-user-select:text;user-select:text;font-size:16px} /* ≥16px: iOS never zooms on focus */
img,svg{display:block;-webkit-user-drag:none}
::selection{background:var(--accent-soft)}

/* ---------- AMBIENT BACKGROUND (slow drifting gradients) ---------- */
#bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:
  radial-gradient(120% 80% at 50% -10%,var(--bg-2),var(--bg) 60%)}
.blob{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(70px);opacity:var(--blob-op);will-change:transform;mix-blend-mode:normal}
.b1{background:radial-gradient(circle at 30% 30%,var(--blob1),transparent 62%);top:-30vmax;left:-25vmax;animation:drift1 26s ease-in-out infinite alternate}
.b2{background:radial-gradient(circle at 60% 40%,var(--blob2),transparent 60%);bottom:-35vmax;right:-30vmax;animation:drift2 32s ease-in-out infinite alternate}
.b3{background:radial-gradient(circle at 50% 50%,var(--blob3),transparent 60%);top:30%;left:40%;width:55vmax;height:55vmax;opacity:calc(var(--blob-op)*.7);animation:drift3 38s ease-in-out infinite alternate}
.grain{position:absolute;inset:-50%;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
[data-theme="light"] .grain{opacity:.035}
@keyframes drift1{to{transform:translate(18vmax,22vmax) rotate(40deg) scale(1.1)}}
@keyframes drift2{to{transform:translate(-22vmax,-16vmax) rotate(-30deg) scale(1.15)}}
@keyframes drift3{0%{transform:translate(-30vmax,-10vmax)}50%{transform:translate(-50vmax,20vmax) scale(.9)}100%{transform:translate(-10vmax,10vmax) scale(1.1)}}
body.in-game .blob{animation-play-state:paused}

/* ---------- APP FRAME (mobile-first; centred column on big screens) ---------- */
#app{position:fixed;inset:0;z-index:1;margin:0 auto;max-width:520px;overflow:hidden;isolation:isolate}
@media (min-width:560px){#app{box-shadow:0 0 0 1px var(--stroke),0 40px 120px -30px rgba(0,0,0,.5)}}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none}

.screen{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  touch-action:pan-y;scrollbar-width:none;will-change:transform;
  padding:calc(var(--safe-t) + var(--s4)) calc(var(--s5) + var(--safe-r)) calc(var(--tabbar-h) + var(--safe-b) + var(--s8)) calc(var(--s5) + var(--safe-l))}
.screen::-webkit-scrollbar{display:none}
.screen.no-tabs{padding-bottom:calc(var(--safe-b) + var(--s7))}
.screen.fixed{overflow:hidden;touch-action:none;padding:0}

/* ---------- TYPE ---------- */
.display{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.h-hero{font-family:var(--f-display);font-weight:800;font-size:var(--t-hero);letter-spacing:-.035em;line-height:.98}
.h-xl{font-family:var(--f-display);font-weight:800;font-size:var(--t-xl);letter-spacing:-.03em;line-height:1.05}
.h-l{font-family:var(--f-display);font-weight:700;font-size:var(--t-l);letter-spacing:-.02em;line-height:1.1}
.h-m{font-family:var(--f-display);font-weight:700;font-size:var(--t-m);letter-spacing:-.015em;line-height:1.15}
.title{font-weight:700;font-size:var(--t-title);letter-spacing:-.01em}
.body{font-size:var(--t-body);color:var(--ink-2)}
.small{font-size:var(--t-small);color:var(--ink-3)}
.micro{font-size:var(--t-micro);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.grad-text{background:linear-gradient(100deg,var(--p1),var(--accent-hi) 50%,var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- GLASS ---------- */
.glass{background:var(--surface);border:1px solid var(--stroke);box-shadow:var(--sh-1);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
.glass-strong{background:var(--surface-strong);border:1px solid var(--stroke-strong);box-shadow:var(--sh-2);
  -webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%)}
.card{border-radius:var(--r-lg);padding:var(--s4)}

/* ---------- PRESSABLES ---------- */
.press{transition:transform .5s var(--ease-spring),filter .2s,opacity .2s;transform:translateZ(0)}
.press:active,.press.is-down{transform:scale(.955);transition:transform .12s var(--ease-out)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:56px;padding:0 var(--s6);border-radius:var(--r-pill);
  font-weight:800;font-size:16px;letter-spacing:-.005em;white-space:nowrap;position:relative;overflow:hidden}
.btn svg{width:20px;height:20px}
.btn-primary{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-hi),var(--accent));box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 3.6s ease-in-out infinite 1.2s}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-gold{color:#2B1600;background:linear-gradient(180deg,#FFD978,var(--gold) 55%,var(--gold-2));box-shadow:0 14px 34px -12px rgba(255,170,40,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-ghost{background:var(--surface);border:1px solid var(--stroke-strong);color:var(--ink);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn-block{width:100%}
.btn-sm{height:40px;padding:0 var(--s4);font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.icon-btn svg{width:22px;height:22px}
.link{color:var(--accent-hi);font-weight:700}
[data-theme="light"] .link{color:var(--accent)}

/* ---------- ICONS ---------- */
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}

/* ---------- CHIPS / BADGES ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r-pill);font-weight:700;font-size:13px;color:var(--ink-2);white-space:nowrap}
.chip .ic{width:16px;height:16px}
.chip.on{color:var(--accent-ink);background:var(--ink);color:var(--ink-inverse);border-color:transparent}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.badge .ic{width:12px;height:12px;stroke-width:2.4}
.badge-gold{background:linear-gradient(180deg,#FFE08A,var(--gold));color:#3A2000}
.badge-accent{background:var(--accent);color:#fff}
.badge-free{background:var(--success);color:#04261A}
.badge-glass{background:rgba(10,9,19,.45);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- TOP BAR ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;margin-bottom:var(--s5)}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;position:relative}
.brand-mark i{position:absolute;width:22px;height:22px;border-radius:7px;top:6px}
.brand-mark i:first-child{left:0;background:var(--p1);transform:rotate(-12deg)}
.brand-mark i:last-child{right:0;background:var(--p2);mix-blend-mode:screen;transform:rotate(12deg)}
[data-theme="light"] .brand-mark i:last-child{mix-blend-mode:multiply}
.brand-word{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.streak-pill{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 10px;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:700;font-size:14px}
.streak-pill .ic{color:var(--gold-2);width:20px;height:20px}
.streak-pill.cold .ic{color:var(--ink-3)}
.pro-pill{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:var(--r-pill);font-weight:800;font-size:13px;color:#2B1600;background:linear-gradient(180deg,#FFD978,var(--gold));box-shadow:0 8px 20px -10px rgba(255,170,40,.8)}
.pro-pill .ic{width:16px;height:16px}

/* ---------- TAB BAR ---------- */
.tabbar{position:absolute;z-index:20;left:calc(var(--s4) + var(--safe-l));right:calc(var(--s4) + var(--safe-r));bottom:calc(var(--safe-b) + 12px);
  height:var(--tabbar-h);border-radius:26px;display:grid;grid-template-columns:repeat(4,1fr);padding:8px;transition:transform .6s var(--ease-spring),opacity .3s}
.tabbar.hidden{transform:translateY(140%);opacity:0;pointer-events:none}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:18px;color:var(--ink-3);font-size:11px;font-weight:700;z-index:1;transition:color .25s}
.tab .ic{width:24px;height:24px;transition:transform .5s var(--ease-spring)}
.tab.on{color:var(--ink)}
.tab.on .ic{transform:translateY(-1px) scale(1.06)}
.tab-ind{position:absolute;top:8px;bottom:8px;left:8px;width:calc((100% - 16px)/4);border-radius:18px;background:var(--accent-soft);border:1px solid var(--stroke);transition:transform .55s var(--ease-spring);z-index:0}
.tab-ind::after{content:"";position:absolute;left:50%;bottom:-1px;width:18px;height:3px;border-radius:3px;background:var(--accent);transform:translateX(-50%)}

/* ---------- SECTION ---------- */
.section{margin-top:var(--s7)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--s3)}
.hscroll{display:flex;gap:var(--s2);overflow-x:auto;margin:0 calc(-1*var(--s5));padding:2px var(--s5) 6px;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.hscroll::-webkit-scrollbar{display:none}

/* ---------- SEGMENTED ---------- */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:var(--r-pill);height:52px}
.seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14px;color:var(--ink-3);border-radius:var(--r-pill);transition:color .25s}
.seg button .ic{width:18px;height:18px}
.seg button.on{color:var(--ink)}
.seg-ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:var(--r-pill);background:var(--surface-strong);box-shadow:var(--sh-1);border:1px solid var(--stroke-strong);transition:transform .55s var(--ease-spring),width .3s}

/* ---------- HERO CARD ---------- */
.hero{position:relative;width:100%;text-align:left;border-radius:var(--r-xl);overflow:hidden;min-height:250px;padding:var(--s5);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--sh-3)}
.hero-art{position:absolute;inset:0}
.hero-art svg{width:100%;height:100%}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,20,0) 20%,rgba(8,6,20,.55) 55%,rgba(8,6,20,.9));z-index:1}
.hero .hero-cta{position:absolute}
.hero>*:not(.hero-art){position:relative;z-index:2}
.hero .badge{align-self:flex-start;margin-bottom:auto}
.hero-title{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1;margin-top:var(--s6)}
.hero-sub{opacity:.85;font-size:14px;margin-top:6px;max-width:72%;font-weight:600}
.hero-cta{position:absolute;right:var(--s4);bottom:var(--s4);width:56px;height:56px;border-radius:50%;background:#fff;color:#16112E;display:grid;place-items:center;z-index:3;box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
.hero-cta .ic{width:24px;height:24px}

/* ---------- GAME GRID ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.gcard{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1.12;display:flex;flex-direction:column;box-shadow:var(--sh-2);background:var(--surface-solid);border:1px solid var(--stroke)}
.gcard-art{position:relative;flex:1;overflow:hidden}
.gcard-art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .8s var(--ease-out)}
.gcard:active .gcard-art svg{transform:scale(1.05)}
.gcard-meta{padding:10px 12px 12px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.gcard-name{font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:-.01em;line-height:1.15}
.gcard-tag{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.gcard-badges{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;z-index:2}
.gcard.locked .gcard-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,25,.0),rgba(10,8,25,.28))}
.lock-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(10,9,19,.5);color:#FFD978;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lock-dot .ic{width:15px;height:15px;stroke-width:2.3}
.bot-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-hi);flex:none}
[data-theme="light"] .bot-dot{color:var(--accent)}
.bot-dot .ic{width:16px;height:16px}

/* ---------- LIST ROWS ---------- */
.list{border-radius:var(--r-lg);overflow:hidden}
.row{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:10px var(--s4);position:relative}
.row+.row::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:var(--stroke)}
.row-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff}
.row-ic .ic{width:19px;height:19px}
.row-main{flex:1;min-width:0}
.row-title{font-weight:700;font-size:15px}
.row-sub{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.row-end{color:var(--ink-3);display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px}

/* ---------- SWITCH ---------- */
.switch{width:52px;height:32px;border-radius:var(--r-pill);background:var(--stroke-strong);position:relative;flex:none;transition:background .3s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25);transition:transform .5s var(--ease-spring)}
.switch.on{background:var(--success)}
.switch.on::after{transform:translateX(20px)}

/* ---------- SHEET / MODAL ---------- */
.scrim{position:absolute;inset:0;z-index:40;background:rgba(6,4,16,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet{position:absolute;z-index:41;left:0;right:0;bottom:0;max-height:94%;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:var(--s3) var(--s5) calc(var(--safe-b) + var(--s5));scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.grabber{width:40px;height:5px;border-radius:5px;background:var(--stroke-strong);margin:0 auto var(--s3)}
.modal-full{position:absolute;inset:0;z-index:45;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none}
.modal-full::-webkit-scrollbar{display:none}

/* ---------- TOAST ---------- */
.toast-wrap{position:absolute;z-index:9999;top:calc(var(--safe-t) + 10px);left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:var(--r-pill);font-weight:700;font-size:14px;max-width:calc(100% - 32px)}
.toast .ic{width:20px;height:20px}

/* ---------- ENTER ANIMS (first render) ---------- */
.rise{opacity:0;transform:translateY(16px);animation:rise .7s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*45ms + 40ms)}
@keyframes rise{to{opacity:1;transform:none}}
.pop{animation:pop .6s var(--ease-spring) both}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation-duration:.01s}.blob{animation:none}}

/* ---------- EMPTY / ERROR / LOADING ---------- */
.empty{text-align:center;padding:var(--s8) var(--s5);border-radius:var(--r-xl)}
.empty-art{width:132px;height:132px;margin:0 auto var(--s5)}
.empty h3{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.empty p{color:var(--ink-3);max-width:280px;margin:0 auto var(--s5);font-size:14px}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-strong) 50%,var(--surface) 75%);background-size:300% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-md)}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- SPLASH ---------- */
.splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:60}
.splash-mark{width:84px;height:84px;position:relative}
.splash-mark span{position:absolute;width:54px;height:54px;border-radius:17px;top:15px}
.splash-mark .m1{left:0;background:var(--p1);animation:sm1 1.2s var(--ease-spring) infinite alternate}
.splash-mark .m2{right:0;background:var(--p2);mix-blend-mode:screen;animation:sm2 1.2s var(--ease-spring) infinite alternate}
@keyframes sm1{from{transform:rotate(-14deg) translateX(-8px)}to{transform:rotate(-4deg) translateX(4px)}}
@keyframes sm2{from{transform:rotate(14deg) translateX(8px)}to{transform:rotate(4deg) translateX(-4px)}}
.splash-word{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:.18em;color:var(--ink)}
.splash-bar{width:120px;height:4px;border-radius:4px;background:var(--stroke-strong);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;border-radius:4px;background:var(--accent);animation:load 1s ease-in-out infinite}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.noscript{position:fixed;inset:0;display:grid;place-items:center;color:#fff;font-family:system-ui}

/* ---------- ONBOARDING ---------- */
.ob{display:flex;flex-direction:column;height:100%;padding:calc(var(--safe-t) + var(--s4)) var(--s5) calc(var(--safe-b) + var(--s5))}
.ob-top{display:flex;justify-content:space-between;align-items:center;height:44px}
.ob-dots{display:flex;gap:6px}
.ob-dots i{width:8px;height:8px;border-radius:8px;background:var(--stroke-strong);transition:width .5s var(--ease-spring),background .3s}
.ob-dots i.on{width:26px;background:var(--accent)}
.ob-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.ob-art{width:min(86vw,360px);aspect-ratio:1;position:relative}
.ob-copy{text-align:left;margin-bottom:var(--s6)}
.ob-copy .h-hero{margin-bottom:var(--s3)}
.ob-copy p{color:var(--ink-2);font-size:16px;max-width:340px}

/* ---------- PAYWALL ---------- */
.pw{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--safe-t) + var(--s3)) var(--s5) calc(var(--safe-b) + var(--s4));position:relative}
.pw-close{position:absolute;top:calc(var(--safe-t) + 10px);right:14px;z-index:3}
.pw-hero{position:relative;height:250px;margin:0 calc(-1*var(--s5));display:grid;place-items:center}
.pw-crown{width:96px;height:96px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(160deg,#FFE08A,var(--gold) 50%,var(--gold-2));box-shadow:0 24px 60px -16px rgba(255,160,40,.75),inset 0 2px 0 rgba(255,255,255,.6);color:#3A2000;position:relative;z-index:2}
.pw-crown .ic{width:52px;height:52px;stroke-width:1.6}
.pw-orbit{position:absolute;inset:0;display:grid;place-items:center}
.pw-orbit .tile{position:absolute;width:62px;height:62px;border-radius:18px;overflow:hidden;box-shadow:var(--sh-2);border:1px solid var(--stroke-strong)}
.pw-orbit .tile svg{width:100%;height:100%}
.plan{position:relative;display:flex;align-items:center;gap:var(--s3);padding:16px 16px;border-radius:var(--r-lg);border:2px solid var(--stroke-strong);background:var(--surface);text-align:left;width:100%;transition:border-color .25s,background .25s,transform .5s var(--ease-spring)}
.plan.on{border-color:var(--accent);background:var(--accent-soft)}
.plan-radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--stroke-strong);display:grid;place-items:center;flex:none;transition:all .3s}
.plan.on .plan-radio{border-color:var(--accent);background:var(--accent)}
.plan.on .plan-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.plan-main{flex:1}
.plan-name{font-weight:800;font-size:16px}
.plan-sub{font-size:13px;color:var(--ink-3);margin-top:1px}
.plan-price{text-align:right}
.plan-price b{font-family:var(--f-display);font-weight:700;font-size:17px;display:block}
.plan-price span{font-size:12px;color:var(--ink-3)}
.plan .badge{position:absolute;top:-11px;right:16px}
.perk{display:flex;align-items:center;gap:12px;padding:7px 0;font-weight:600;font-size:15px}
.perk-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-hi);flex:none}
[data-theme="light"] .perk-ic{color:var(--accent)}
.perk-ic .ic{width:18px;height:18px}
.pw-legal{font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.5;margin-top:var(--s3)}
.pw-links{display:flex;justify-content:center;gap:var(--s5);margin-top:var(--s3);font-size:13px;font-weight:700;color:var(--ink-2)}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- DETAIL SHEET ---------- */
.detail-art{height:190px;border-radius:var(--r-lg);overflow:hidden;position:relative;margin-bottom:var(--s4)}
.detail-art svg{width:100%;height:100%}
.howto{display:grid;gap:var(--s2)}
.howto-step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md)}
.howto-num{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:12px;background:var(--accent-soft);color:var(--accent-hi);flex:none}
[data-theme="light"] .howto-num{color:var(--accent)}
.zones{display:grid;grid-template-rows:1fr 1fr;height:150px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--stroke-strong)}
.zone{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:13px;padding:0 12px;text-align:center}
.zone.top{background:var(--p2-soft);color:var(--p2);transform:none}
.zone.top span{transform:rotate(180deg)}
.zone.bot{background:var(--p1-soft);color:var(--p1)}
.zone .ic{width:20px;height:20px;flex:none}
.diff{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.diff button{padding:12px 8px;border-radius:var(--r-md);border:2px solid var(--stroke-strong);text-align:center;background:var(--surface);transition:border-color .25s,background .25s}
.diff button.on{border-color:var(--accent);background:var(--accent-soft)}
.diff b{display:block;font-weight:800;font-size:14px}
.diff span{font-size:11.5px;color:var(--ink-3)}

/* ---------- PLAY / GAME SHELL ---------- */
.play{position:absolute;inset:0;background:linear-gradient(180deg,var(--p2-soft),transparent 32%,transparent 68%,var(--p1-soft)),var(--table);overflow:hidden;touch-action:none;z-index:30}
.play canvas.gc{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.play .dom-stage{position:absolute;inset:0;display:flex;flex-direction:column;touch-action:none}
.hud{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:56px;pointer-events:none}
.hud.p1{bottom:var(--safe-b)}
.hud.p2{top:var(--safe-t);transform:rotate(180deg)}
.hud.p2.upright{transform:none}
.hud-name{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.02em;padding:6px 12px 6px 6px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hud-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.hud-av .ic{width:14px;height:14px;stroke-width:2.4}
.hud-score{font-family:var(--f-display);font-weight:800;font-size:26px;font-variant-numeric:tabular-nums;min-width:40px;text-align:center}
.hud-score small{font-size:12px;color:var(--ink-3);font-weight:600;margin-left:2px}
.pause-btn{position:absolute;z-index:6;left:calc(var(--safe-l) + 10px);top:50%;translate:0 -50%}
.pause-btn.at-bottom{top:auto;left:50%;bottom:calc(var(--safe-b) + 6px);translate:-50% 0}
.pause-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.pause-btn .ic{width:20px;height:20px}
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--s5)}
.overlay.dim{background:rgba(6,4,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
[data-theme="light"] .overlay.dim{background:rgba(244,241,255,.6)}
.count{font-family:var(--f-display);font-weight:800;font-size:120px;letter-spacing:-.05em;color:var(--ink);text-shadow:0 10px 40px rgba(0,0,0,.25)}
.count.go{background:linear-gradient(100deg,var(--p1),var(--accent-hi),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.banner{position:absolute;left:50%;top:50%;z-index:15;pointer-events:none;font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.02em;padding:12px 22px;border-radius:var(--r-pill);white-space:nowrap}
.pause-card{width:100%;max-width:340px;border-radius:var(--r-xl);padding:var(--s6);display:grid;gap:var(--s3);text-align:center}
.result{width:100%;max-width:380px;text-align:center;display:grid;gap:var(--s3);justify-items:center}
.result-trophy{width:110px;height:110px;border-radius:36px;display:grid;place-items:center;color:#fff;box-shadow:var(--sh-3)}
.result-trophy .ic{width:56px;height:56px;stroke-width:1.6}
.result-score{display:flex;align-items:center;gap:var(--s5);font-family:var(--f-display);font-weight:800;font-size:44px}
.result-score .vs{font-size:13px;color:var(--ink-3);letter-spacing:.2em}
.ghost-hint{position:absolute;z-index:4;pointer-events:none;display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;padding:8px 14px;border-radius:var(--r-pill);background:var(--surface-strong);border:1px solid var(--stroke-strong);color:var(--ink);animation:hintfade 3.6s ease forwards;white-space:nowrap}
.ghost-hint .ic{width:18px;height:18px}
@keyframes hintfade{0%{opacity:0}10%,75%{opacity:1}100%{opacity:0}}

/* DOM game pieces */
.half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:60px 18px}
.half.top{transform:rotate(180deg)}
.half.top.upright{transform:none}
.half.p1{background:linear-gradient(0deg,var(--p1-soft),transparent 70%)}
.half.p2{background:linear-gradient(0deg,var(--p2-soft),transparent 70%)}
.midline{height:2px;background:linear-gradient(90deg,transparent,var(--table-line),transparent);flex:none}
.gbtn{border-radius:var(--r-md);font-weight:800;display:grid;place-items:center;transition:transform .4s var(--ease-spring),background .2s,opacity .2s;background:var(--surface-strong);border:1px solid var(--stroke-strong);box-shadow:var(--sh-1);color:var(--ink)}
.gbtn:active{transform:scale(.93);transition-duration:.08s}
.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:70px 16px}
.turn-tag{font-family:var(--f-display);font-weight:700;font-size:15px;padding:8px 16px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:8px}

/* misc */
.stack>*+*{margin-top:var(--s3)}
.row-flex{display:flex;align-items:center;gap:var(--s3)}
.spacer{flex:1}
.center{text-align:center}
.mt1{margin-top:var(--s1)}.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)}.mt7{margin-top:var(--s7)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.stat{border-radius:var(--r-md);padding:14px 12px}
.stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.03em}
.stat span{font-size:11.5px;color:var(--ink-3);font-weight:700}
.bar{height:10px;border-radius:10px;background:var(--stroke);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink-3);background:var(--stroke)}
.day.on{background:linear-gradient(160deg,var(--gold),var(--gold-2));color:#3A2000}
.day.today{outline:2px solid var(--accent);outline-offset:2px}
.field{width:100%;height:50px;border-radius:var(--r-md);padding:0 14px;background:var(--surface-strong);border:1px solid var(--stroke-strong);outline:none;font-weight:700}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.swatches{display:flex;gap:10px}
.sw{width:34px;height:34px;border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.sw.on{border-color:var(--ink)}
.time-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:700;font-size:14px}
.time-pill input{width:96px;height:34px;border:0;background:transparent;font-family:var(--f-display);font-weight:700;outline:none;font-size:16px;color:var(--ink)}
.time-pill button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.time-pill .ic{width:16px;height:16px}
.cup-track{display:flex;gap:8px;flex-wrap:wrap}
.cup-slot{width:52px;height:52px;border-radius:16px;overflow:hidden;position:relative;border:2px solid var(--stroke-strong)}
.cup-slot svg{width:100%;height:100%}
.cup-slot.done::after{content:"";position:absolute;inset:0;background:rgba(10,8,25,.55)}
.cup-slot .win{position:absolute;inset:0;display:grid;place-items:center;z-index:2;color:#fff}
.cup-slot.now{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.vs-board{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);text-align:center}
.vs-board .num{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;margin:0 auto 6px;font-family:var(--f-display);font-weight:800}
/* late overrides */
.hero>.hero-cta{position:absolute;right:var(--s4);bottom:var(--s4)}
.hero-title,.hero-sub{text-shadow:0 2px 16px rgba(8,6,20,.55)}
.hero-title{max-width:calc(100% - 70px)}
.hero-sub{max-width:calc(100% - 80px)}
input[type=time]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.hero-art svg{transform:scale(1.22) translate(10%,-9%);transform-origin:center}
.hero>.hero-tiles{position:absolute;right:-6px;top:50%;translate:0 -50%;width:150px;height:130px;z-index:1;pointer-events:none}
.hero-tiles>div{position:absolute;width:74px;height:74px;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2)}
.hero-tiles svg{width:100%;height:100%}