/* ============================================================
   Pantsy — pantsy.app landing
   Screen-led. The app does the talking; text is supplement.
   Lives in Pantsy's dark-plum world (v3 tokens).
   ============================================================ */

:root{
  /* ZUBON (both doors, 2026-10-04): Buksi's sheet unchanged, because Zubon App now
     prints Buksi's palette (zubon-app/VISUAL-SYSTEM.md). Values read from
     app/public/css/tokens.css html[data-variant="wmlt"] (the T9 rider).
     Token NAMES are unchanged from the Pantsy sheet on purpose — this is a fork,
     not a rewrite, so a diff against Pantsy.css reads as colour only. */
  --bg:#05080C;                                   /* --surface-deep */
  --bg-grad:
    radial-gradient(ellipse 100% 45% at 50% 0%, rgba(94,234,250,0.14) 0%, transparent 100%),
    radial-gradient(ellipse 120% 60% at 50% 0%, #1C3A52 0%, #16283A 35%, #0D1620 68%, #05080C 100%);
  --cream:#F7F3E9;
  --cream-dim:#EFE7D3;
  --ink:#14181F;
  --fire:#FF2E88;                                 /* --primary · the CTA */
  --fire-hi:#FF6BA8;                              /* --pantsy-hi */
  --fire-dim:#D8336F;                             /* .pack-peek's label; the parent sheet reads it and never defines it */
  --ember:#FF9E57;                                /* seat orange (GAME pack, B1 Lobby row) */
  --pantsy-red:#FF2E88;
  --pantsy-red-hi:#FF6BA8;
  --smarty-gold:#FFD24A;
  --violet:#B58CFF;                               /* the REAL seat violet (GAME pack, B1 Lobby row) */
  --aqua:#4FD8E8;                                 /* seat cyan (GAME pack, B1 Lobby row) */
  --positive:#B4FA6E;                             /* --role-positive */
  --fg:#F7F3E9;
  --cream-fg:#F7F3E9;                             /* the parent sheet reads this and never defines it */
  --fg-soft:rgba(247,243,233,0.64);
  --fg-faint:rgba(247,243,233,0.52);
  --hair:rgba(247,243,233,0.09);
  --hair-hi:rgba(247,243,233,0.16);
  --display:'Bricolage Grotesque','Archivo Black',system-ui,sans-serif;
  --sans:'Inter Tight','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:18px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

.bg-wash{position:fixed; inset:0; z-index:-2; background:var(--bg-grad);}
.bg-glow{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 36% at 50% 0%, rgba(94,234,250,0.10) 0%, transparent 62%),
    radial-gradient(ellipse 44% 40% at 100% 30%, rgba(255,46,136,0.07) 0%, transparent 56%),
    radial-gradient(ellipse 44% 40% at 0% 78%, rgba(79,216,232,0.055) 0%, transparent 56%);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media(max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- type ---------- */
.hero .eyebrow{white-space:nowrap;}
@media(max-width:760px){ .hero .eyebrow{white-space:normal;} }
.eyebrow{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--pantsy-red); margin:0; display:inline-flex; align-items:center; gap:9px;}
.eyebrow .dot{width:6px; height:6px; border-radius:999px; background:currentColor;}
.eyebrow .sep{opacity:0.5;}
.eyebrow.gold{color:var(--smarty-gold);}
.eyebrow.fire{color:var(--fire);}
.eyebrow.violet{color:var(--violet);}
h1,h2,h3{font-family:var(--display); font-weight:700; margin:0; line-height:0.95; letter-spacing:-0.04em; text-wrap:balance;}
.it{font-style:italic; letter-spacing:-0.03em;}
.lead{color:var(--fg-soft); line-height:1.45; text-wrap:pretty;}

/* ---------- buttons ---------- */
.btn{appearance:none; border:none; cursor:pointer; font-family:var(--sans); font-weight:700; font-size:17px;
  letter-spacing:-0.01em; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 28px; height:58px; border-radius:15px; white-space:nowrap;
  transition:transform 140ms ease, background 140ms ease, box-shadow 140ms ease;}
.btn:active{transform:translateY(1px);}
.btn-fire{background:var(--fire); color:var(--ink); box-shadow:0 10px 28px rgba(255,46,136,0.34);}
.btn-fire:hover{background:var(--fire-hi); box-shadow:0 14px 34px rgba(255,46,136,0.46);}
.btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--hair-hi);}
.btn-ghost:hover{background:rgba(247,243,233,0.06);}
.btn-sm{height:48px; font-size:15px; padding:0 20px;}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(5,8,12,0.5); transition:background 200ms ease, border-color 200ms ease; border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top, 0px);}
header.nav.scrolled{background:rgba(5,8,12,0.9); border-bottom-color:var(--hair);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:11px; position:relative;}
.brand .word{font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-0.03em;}
.brand .word.ablaze{background:linear-gradient(180deg,#FFE19A,#FF2E88 55%,#FF2E88); -webkit-background-clip:text; background-clip:text; color:transparent; animation:ablaze 0.5s ease;}
@keyframes ablaze{0%{filter:brightness(1.6) drop-shadow(0 0 8px rgba(255,46,136,0.8));}100%{filter:none;}}
.brand-toast{position:absolute; top:54px; left:0; white-space:nowrap; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:0.04em; color:var(--ember); background:rgba(5,8,12,0.92); border:1px solid var(--hair-hi);
  padding:8px 12px; border-radius:10px; opacity:0; transform:translateY(-6px); transition:opacity 200ms ease, transform 200ms ease; pointer-events:none; z-index:80;}
.brand-toast.show{opacity:1; transform:translateY(0);}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-size:15px; color:var(--fg-soft); font-weight:500; transition:color 140ms ease; white-space:nowrap;}
.nav-links a:hover{color:var(--fg);}
/* Smoke-2026-07-10 item 9: the lang picker + Create game read as one right-side
   CTA group (tighter gap than the 30px section-link spacing). */
.nav-cta{display:inline-flex; align-items:center; gap:14px;}
@media(max-width:820px){ .nav-links .lk{display:none;} }

/* ---------- phone (clean device) ---------- */
/* Sizes, stagger and rotations are Pantsy's verbatim (marketing/v2-19-src/style.css).
   CORNER RADIUS is the one deliberate divergence: Pantsy's is a flat 44px (34px in the
   quad) at every frame width, so the 96–150px quad frames read at 23–35% corner against
   a real device's ~12.5%. Each context's radius now tracks its own frame width. */
.phone{position:relative; width:320px; border-radius:40px; background:#090D13; padding:6px;
  box-shadow:0 38px 84px rgba(0,0,0,0.6), 0 0 0 2px rgba(247,243,233,0.06), 0 0 0 8px #1A222E;}
.phone .scrn{position:relative; width:100%; aspect-ratio:390/844; border-radius:34px; overflow:hidden; background-color:#10141A;}
/* real app screen, rendered 1:1 in a 390×844 iframe and scaled to fit the frame */
.scrn-embed{position:absolute; top:0; left:0; width:390px; height:844px; border:0; background:#14181F; transform-origin:top left; transform:scale(var(--scr-scale,1)); pointer-events:none; backface-visibility:hidden;}
.scrn-shield{position:absolute; inset:0; z-index:4;}
.scrn-shield--tap{cursor:pointer;}
.scrn-shield-hint{position:absolute; left:50%; bottom:20px; transform:translate(-50%,6px);
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); background:var(--cream); padding:7px 13px; border-radius:999px; white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,0.4); opacity:0; transition:opacity 180ms ease, transform 180ms ease;}
.scrn:hover .scrn-shield--tap .scrn-shield-hint{opacity:0.96; transform:translate(-50%,0);}
.scrn-live .scrn-shield{display:none;}
.scrn-live .scrn-embed{pointer-events:auto;}
.phone .notch{position:absolute; top:1.9%; left:50%; transform:translateX(-50%); width:29%; aspect-ratio:92/25; height:auto; border-radius:999px; background:#000; z-index:3;}
#heroCap{transition:opacity 280ms ease;}
.float{animation:none;}
.float.b{animation-delay:-3s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}
@media (prefers-reduced-motion:reduce){.float{animation:none;}}

/* glow halo behind a phone or media cluster */
.halo{position:relative;}
.halo::before{content:''; position:absolute; inset:-6% -10%; z-index:0; pointer-events:none; filter:blur(18px);
  background:radial-gradient(ellipse at center, var(--halo, rgba(255,46,136,0.28)) 0%, transparent 66%);}
.halo > *{position:relative; z-index:1;}

/* ---------- section scaffold ---------- */
section{position:relative; padding:clamp(64px,9vw,128px) 0;}
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center;}
.showcase.flip .sc-media{order:-1;}
@media(max-width:880px){ .showcase{grid-template-columns:1fr; gap:48px;} .showcase.flip .sc-media{order:0;} .sc-copy{text-align:center;} }
.sc-copy .hero .eyebrow{white-space:nowrap;}
@media(max-width:760px){ .hero .eyebrow{white-space:normal;} }
.eyebrow{margin-bottom:20px;}
.sc-copy h2{font-size:clamp(36px,4.6vw,60px);}
.sc-copy .lead{margin-top:22px; font-size:clamp(18px,1.95vw,22px); max-width:42ch;}
@media(max-width:880px){ .sc-copy .lead{margin-left:auto; margin-right:auto;} }
.sc-cta{display:flex; gap:13px; margin-top:32px; flex-wrap:wrap;}
@media(max-width:880px){ .sc-cta{justify-content:center;} }
.sc-media{display:flex; justify-content:center; align-items:center;}

/* paired phones */
.pair{display:flex; justify-content:center; align-items:flex-start; gap:clamp(14px,2vw,30px);}
.pair .phone{width:clamp(180px,21vw,250px); border-radius:clamp(23px,2.6vw,31px);}
.pair .scrn{border-radius:clamp(17px,2vw,25px);}
.pair .pcol:nth-child(2){margin-top:clamp(28px,4vw,52px);}
/* clubs pair: flip the stagger — clubs (right) higher, round-end (left) lower */
#clubs .pair .pcol:nth-child(1){margin-top:clamp(28px,4vw,52px);}
#clubs .pair .pcol:nth-child(2){margin-top:0;}

/* hero quad — 3 word cards + 1 Pantsy, face-down then reveal */
/* Stagger and overlap are derived from --qw, not hard px: the offsets used to be
   fixed (14 / 0 / -2 / 6) against 96–150px frames, so sizing the frames up turned
   the fan into a tall 2×2 grid. The bottom pair overlaps the top pair by ~0.9×
   frame width and sits in front. */
.quad{display:grid; grid-template-columns:repeat(2,1fr); justify-items:center; align-items:start; column-gap:clamp(8px,1.4vw,24px); row-gap:0; width:100%; max-width:clamp(280px,34vw,480px); margin:0 auto;}
.qphone{width:clamp(96px,12.5vw,150px); position:relative;}
.qphone:nth-child(1){--r:15deg; z-index:2; margin-top:14px;}
.qphone:nth-child(2){--r:-15deg; z-index:3; margin-top:0;}
.qphone:nth-child(3){--r:-32deg; z-index:1; margin-top:-2px;}
.qphone:nth-child(4){--r:32deg; z-index:4; margin-top:6px;}
@media(max-width:600px){
  .quad{max-width:312px; column-gap:6px; margin:0 auto;}
  .qphone{width:clamp(118px,40vw,150px);}
  .qphone:nth-child(1){--r:13deg;} .qphone:nth-child(2){--r:-13deg;}
  .qphone:nth-child(3){--r:-26deg;} .qphone:nth-child(4){--r:26deg;}
}
.quad .phone{width:100%; padding:5px; border-radius:clamp(12px,1.6vw,19px); transform:rotate(var(--r,0deg)); transform-origin:center bottom;
  will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(247,243,233,0.07), 0 0 0 4px #1A222E;}
.qphone:nth-child(2) .phone{animation-delay:-1.4s;}
.qphone:nth-child(3) .phone{animation-delay:-2.8s;}
.qphone:nth-child(4) .phone{animation-delay:-4.2s;}
@keyframes sway{0%,100%{transform:rotate(var(--r,0deg)) translateX(-2px);}50%{transform:rotate(calc(var(--r,0deg) + 1deg)) translateX(2px);}}
@media (prefers-reduced-motion:reduce){ .quad .phone{animation:none;} }
.quad .scrn{border-radius:clamp(7px,calc(1.6vw - 5px),14px);}
.reveal-cover{position:absolute; inset:0; z-index:4; border:0; cursor:pointer; border-radius:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(162deg,#16283A 0%, #0D1620 100%); color:var(--cream-fg);
  transition:opacity 230ms ease, transform 230ms ease; transform-origin:center; backface-visibility:hidden;}
.reveal-cover .rc-flame{width:clamp(26px,3.6vw,36px); height:auto; display:block; filter:drop-shadow(0 2px 7px rgba(255,46,136,0.5));}
.reveal-cover .rc-label{font-family:var(--mono); font-weight:700; font-size:clamp(8px,1vw,10px); letter-spacing:0.14em; text-transform:uppercase; text-align:center; color:var(--fg-faint); line-height:1.3;}
.reveal-cover.off{opacity:0; transform:scale(1.08); pointer-events:none;}
.cap{margin-top:16px; text-align:center; font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-faint);}
.cap b{color:var(--fg-soft); font-weight:700;}
.pcol{display:flex; flex-direction:column; align-items:center;}

/* trio phones — three screens in a row (make-it-personal on pack pages) */
.trio{display:flex; justify-content:center; align-items:flex-start; gap:clamp(16px,2.6vw,44px); flex-wrap:wrap;}
.trio .phone{width:clamp(172px,17.5vw,232px); border-radius:clamp(22px,2.2vw,29px);}
.trio .scrn{border-radius:clamp(16px,1.6vw,23px);}
.trio .pcol:nth-child(1){margin-top:clamp(22px,3vw,44px);}
.trio .pcol:nth-child(3){margin-top:clamp(22px,3vw,44px);}
@media(max-width:760px){ .trio{gap:36px 20px;} .trio .pcol:nth-child(1),.trio .pcol:nth-child(3){margin-top:0;} }

/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,84px) 0 clamp(72px,9vw,124px);}
.hero-grid{display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(28px,4vw,72px); align-items:center;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:52px; text-align:center;} }
.hero .hero .eyebrow{white-space:nowrap;}
@media(max-width:760px){ .hero .eyebrow{white-space:normal;} }
.eyebrow{margin-bottom:26px;}
@media(max-width:900px){ .hero .hero .eyebrow{white-space:nowrap;}
@media(max-width:760px){ .hero .eyebrow{white-space:normal;} }
.eyebrow{justify-content:center;} }
.hero h1{font-size:clamp(50px,8vw,104px); letter-spacing:-0.05em; line-height:0.92;}
.hero h1 .x{color:var(--pantsy-red-hi);}
.hero .lead{margin-top:26px; font-size:clamp(19px,2.05vw,23px); max-width:34ch;}
@media(max-width:900px){ .hero .lead{margin-left:auto; margin-right:auto;} }
.hero-cta{display:flex; gap:13px; margin-top:36px; flex-wrap:wrap; align-items:center;}
@media(max-width:900px){ .hero-cta{justify-content:center;} }
/* mobile: lead the hero with the phones; copy follows (DOM stays copy-first for SEO) */
@media(max-width:900px){ .hero-grid--mediafirst > .sc-media{order:-1; margin-bottom:8px;} }
/* phones: keep both hero CTAs on one line, with a shortened secondary label */
.cta-sm{display:none;}
@media(max-width:600px){
  .hero-cta{flex-wrap:nowrap; gap:10px; width:100%;}
  .hero-cta .btn{flex:1 1 0; min-width:0; padding-left:14px; padding-right:14px; white-space:nowrap; text-align:center;}
  .cta-lg{display:none;}
  .cta-sm{display:inline;}
}

/* ---------- gameplay / live demo (two-column) ---------- */
.phase-rail{display:inline-flex; align-items:center; gap:14px; margin-top:clamp(24px,3vw,32px);
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:0.16em; text-transform:uppercase;}
.phase-rail .ph{color:var(--fg-faint); padding:7px 14px; border-radius:999px; border:1px solid transparent; transition:color 240ms ease, background 240ms ease, border-color 240ms ease;}
.phase-rail .ph[data-ph="clue"].on{color:var(--fire); border-color:rgba(255,46,136,0.5); background:rgba(255,46,136,0.10);}
.phase-rail .ph[data-ph="vote"].on{color:var(--smarty-gold); border-color:rgba(255,210,74,0.5); background:rgba(255,210,74,0.10);}
.phase-rail .ph[data-ph="reveal"].on{color:var(--pantsy-red-hi); border-color:rgba(255,61,107,0.5); background:rgba(255,46,136,0.10);}
.phase-rail .arw{color:var(--fg-faint); opacity:0.5;}
.demo-stage{position:relative; width:100%; max-width:clamp(260px, calc((100svh - 150px) * 390 / 844), 340px); margin:0 auto;}
.demo-stage::before{content:''; position:absolute; width:150%; height:60%; left:-25%; top:18%;
  background:radial-gradient(ellipse at center, rgba(255,46,136,0.24) 0%, transparent 66%); filter:blur(22px);}
.demo-stage .phone{width:100%; border-radius:clamp(31px, calc((100svh - 150px) * 0.0555), 40px);}
/* inner = outer − the 6px bezel, so the bezel stays an even band round the corner */
.demo-stage .scrn{border-radius:clamp(25px, calc((100svh - 150px) * 0.0555 - 6px), 34px);}
.hint{margin-top:18px; font-family:var(--mono); font-size:13px; color:var(--fg-faint); letter-spacing:0.04em;}

/* ---------- #play rules configurator (CC-DEMO-WEBSITE 2026-08-06) ----------
   The app's room-settings sheet, rendered at copy-column width, driving which
   composition loops in the phone beside it. Geometry is c/p from the approved
   build target (handover-website/"Website - Pantsy Home (no).dc.html").

   House rule: orange is CTA/active-nav only — an ACTIVE seg-cell is cream/ink,
   never orange (mirrors the app's .gs-seg-cell, app style.css:2762-2764). The
   card stays DARK: cream is reserved for kept artifacts (the demo title card,
   the final ticket); this panel is live data. Chaos accent is #FF6BA8. */
/* The host's settings panel. It is the app's own `09 Game rules` sheet redrawn in
   page markup, so it takes the SHIPPED sheet's values verbatim (screens/game-rules.html):
   cream-wash panel on the denim ground, label on its own line, hint beneath it.
   It used to carry Pantsy's chaos-panel purple (#1F0E2C / #170922) with the hint
   crammed inline beside a nowrap label — a fork leftover that matched neither the
   app nor this page's palette. Chaos accent is #FF6BA8. */
.cfg-wrap{margin-top:30px;}
.cfg{width:100%; border-radius:22px; background:rgba(247,243,233,0.045); border:1px solid rgba(247,243,233,0.07);
  box-shadow:0 18px 40px rgba(0,0,0,0.5); overflow:hidden; text-align:left;}
/* Chaos overrides the three levers above, so they dim rather than disappear —
   the room still HAS those settings, chaos is just re-rolling them each round. */
.cfg-rows{transition:opacity 200ms ease;}
.cfg.is-chaos .cfg-rows{opacity:0.42;}
.cfg-row{padding:12px 16px;}
.cfg-row + .cfg-row, .cfg-rows .cfg-row + .cfg-row{border-top:1px solid rgba(247,243,233,0.06);}
.cfg-row--chaos{position:relative; padding:7px 14px 9px;
  border-top:1px solid rgba(247,243,233,0.2); background:rgba(255,46,136,0.06);}
.cfg-head{display:flex; flex-direction:column; gap:2px; font-family:var(--sans);}
.cfg-label{font-size:14px; font-weight:700; letter-spacing:-0.01em; color:#F7F3E9;}
/* No separator colon: the hint sits on its own line the way the app's sheet prints
   it, so each label stays byte-identical to the shipped settings string. */
   which is what lets all 19 locales reuse the already-converged value instead of
   paying a translation round for "Svaret" + ":". The chaos row reads "Chaos
   wildcard <hint>", so it takes no colon. */
.cfg-rows .cfg-label::after{content:':';}
.cfg-badge{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:#FF6BA8; white-space:nowrap;}
.cfg-hint{font-size:11.5px; line-height:1.4; color:#93A0B4;}
.cfg-row--chaos.is-on .cfg-hint{color:#FF6BA8;}
.cfg-hint > span[hidden]{display:none;}
.cfg-seg{display:flex; gap:4px; padding:4px; margin-top:8px; background:#10141A;
  border-radius:14px; border:1px solid rgba(247,243,233,0.07);}
.cfg-cell{appearance:none; border:0; cursor:pointer; flex:1; min-width:0; min-height:32px;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:13px; font-weight:600;
  background:transparent; color:#9DA9BC;
  transition:background 160ms ease, color 160ms ease;}
.cfg-cell.on{background:#F7F3E9; color:#14181F;}
.cfg-note{margin:12px 2px 0; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-weight:700; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--smarty-gold);}
.cfg-note-dot{width:7px; height:7px; border-radius:999px; background:var(--smarty-gold);
  animation:vpulse 1.8s ease-in-out infinite;}
/* Acceptance criterion 7: panel transitions drop to instant under reduced motion. */
@media (prefers-reduced-motion:reduce){
  .cfg-note-dot{animation:none;}
  .cfg-rows, .cfg-cell{transition:none;}
}
/* The section is `.showcase flip`, so the copy column is centred on narrow
   viewports; the panel is a control surface and stays left-read. */
@media(max-width:880px){ .cfg-wrap{text-align:left;} }

/* vibe voting — interactive panel under the §4 copy */
.vibe-vote{margin-top:28px;}
.vibe-cta{display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; font-family:var(--mono);
  font-weight:700; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--violet);}
.vibe-cta-dot{width:7px; height:7px; border-radius:999px; background:var(--violet); animation:vpulse 1.8s ease-in-out infinite;}
@keyframes vpulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:0.4; transform:scale(0.7);}}
@media (prefers-reduced-motion:reduce){ .vibe-cta-dot{animation:none;} }
.vibes{display:flex; flex-wrap:wrap; gap:9px;}
@media(max-width:880px){ .vibe-vote{display:flex; flex-direction:column; align-items:center;} .vibes{justify-content:center;} }
.vibe{appearance:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  border:1px solid rgba(247,243,233,0.14); color:var(--cream-fg); background:transparent;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;}
.vibe:hover{border-color:rgba(247,243,233,0.32);}
.vibe:active{transform:translateY(1px);}
.vibe.on{background:rgba(255,46,136,0.13); border-color:var(--fire); color:#fff;}
.vibe-dice{width:40px; height:40px; padding:0; justify-content:center; font-size:17px;
  border-style:dashed; border-color:rgba(255,210,74,0.5); color:var(--smarty-gold);}
.vibe-dice:hover{border-color:var(--smarty-gold); background:rgba(255,210,74,0.08);}
.hero h1 .x{transition:opacity 240ms ease;}

/* ---------- final CTA ---------- */
.final{text-align:center;}
.final .flame{margin:0 auto 22px;}
.final h2{font-size:clamp(44px,7vw,98px);}
.final .lead{margin:24px auto 38px; font-size:clamp(18px,2vw,22px); max-width:40ch;}
.final-cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap;}

/* ---------- final CTA · cream ticket ---------- */
/* Cream stock + 135° diagonal stripes + dashed perforation with punched side
   notches. Ported from the app's shipped end-game ticket (app/public/style.css
   `.save-club-card` / `.scc-perf`) so both surfaces read as the same object. */
.final-wrap{padding:clamp(56px,8vw,112px) 0;}
/* Ticket symmetry (CC-DEMO-WEBSITE, 2026-08-06): the badges + create-link below
   the perforation sat in a well deeper than the gap above the line, so the stub
   read lopsided. Card padding-bottom and .final-perf's margin-bottom both drop to
   the perf's own margin-top — one value, three places, so the block below the
   line is centred between the seam and the ticket edge at both breakpoint ends. */
.final-card{position:relative; overflow:hidden; text-align:center; border-radius:30px;
  padding:clamp(56px,8vw,112px) clamp(24px,5vw,72px) clamp(30px,4vw,44px);
  background:linear-gradient(180deg,var(--cream),var(--cream-dim)); color:var(--ink);
  box-shadow:0 36px 90px rgba(20,24,31,0.30);}
.final-card::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg,
    transparent 0 9px,
    rgba(20,24,31,0.04) 9px 10px);}
.final-card > *{position:relative;}

/* perforation seam — negative inline margins cancel the card padding so the
   dashed rule runs edge-to-edge; the notches are clipped in half by the card's
   overflow:hidden, reading as bites punched out of the ticket edge. */
.final-perf{position:relative; height:1px;
  margin:clamp(30px,4vw,44px) calc(-1 * clamp(24px,5vw,72px)) clamp(30px,4vw,44px);}
.final-perf::before{content:''; position:absolute; inset:0;
  border-top:1.5px dashed rgba(20,24,31,0.33);}
.fp-notch{position:absolute; top:-9px; width:18px; height:18px;
  border-radius:999px; background:var(--bg);}
.fp-notch.l{left:-9px;}
.fp-notch.r{right:-9px;}
.final-card .meyebrow{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:0.22em;
  text-transform:uppercase; color:rgba(20,24,31,0.66); display:inline-flex; align-items:center; gap:9px; margin:0 0 18px;}
.final-card .meyebrow .sep{opacity:0.5;}
.final-card h2{font-size:clamp(44px,7vw,90px); color:var(--ink);}
.final-card .final-flame{display:block; margin:0 auto clamp(14px,2vw,20px);}
.final-card .sub{margin:22px auto 36px; font-size:clamp(18px,2vw,22px); color:rgba(20,24,31,0.64); max-width:40ch; line-height:1.45;}
.final-cta{display:flex; gap:13px; justify-content:center; flex-wrap:wrap;}
.final-card .btn-ink{background:#14181F; color:#F7F3E9;}
.final-card .btn-ink:hover{background:#232C3A;}
.final-card .btn-onbright{background:rgba(20,24,31,0.10); color:#14181F; border:1px solid rgba(20,24,31,0.22);}
.final-card .btn-onbright:hover{background:rgba(20,24,31,0.16);}

/* ---------- app-store badges (hero + final ticket) ---------- */
.store-badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.store-badge{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:9px 15px;min-width:172px;border-radius:13px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);color:#F7F3E9;text-decoration:none;line-height:1;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.store-badge:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
.store-badge .sb-ic{width:22px;height:22px;flex:0 0 auto;fill:#F7F3E9}
.store-badge .sb-txt{display:flex;flex-direction:column;gap:3px;text-align:left}
.store-badge .sb-txt b{font:700 15px/1 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.01em}
.store-badge.sm{padding:7px 12px;min-width:150px;border-radius:11px}
.store-badge.sm .sb-ic{width:18px;height:18px}
.store-badge.sm .sb-txt b{font-size:13px}

/* hero "Also on" row */
.hero-apps{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.hero-apps .ha-label{font:600 11px/1 'Inter Tight',system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,243,233,.5)}
/* Smoke-2026-07-10 item 8: on phones the two store badges span the SAME full
   width as the two hero CTAs above them (edge-to-edge). The hero-apps row goes
   column (label on its own line), the badges row takes full width with the two
   badges as equal flex halves — mirroring .hero-cta .btn{flex:1 1 0} + the 10px
   CTA gap so the two rows line up exactly. */
@media(max-width:600px){
  .hero-apps{flex-direction:column;align-items:stretch;gap:8px}
  .hero-apps .ha-label{text-align:left}
  .hero-apps .store-badges{width:100%;flex-wrap:nowrap;gap:10px}
  .hero-apps .store-badge.sm{flex:1 1 0;min-width:0}
}

/* store-first hero (home declutter 2026-07-16): badges promoted to primary CTA,
   quiet web-play link below. Additive — .store-badge/.sm/.btn untouched. */
.hero-apps:has(.store-badge.hero-primary){margin-top:32px}
.store-badge.hero-primary{padding:15px 22px;min-width:186px;border-radius:15px}
.store-badge.hero-primary .sb-ic{width:26px;height:26px}
.store-badge.hero-primary .sb-txt b{font-size:17px}
.hero-weblink{display:inline-block;margin-top:12px;font-family:var(--sans);font-weight:500;
  font-size:0.9em;color:var(--fg-faint);text-decoration:none;transition:color .15s ease}
.hero-weblink:hover{color:var(--fg-soft);text-decoration:underline}
@media(max-width:600px){
  .hero-apps .store-badge.hero-primary{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px}
}

/* badges inside the cream ticket (dark pills) + quiet create link */
.final-apps{margin-top:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.final-apps .store-badges{gap:14px;justify-content:center}
.final-apps .store-badge{padding:14px 24px;min-width:196px;border-radius:16px;
  background:rgba(20,24,31,.9);border-color:rgba(20,24,31,.5);color:#F7F3E9;box-shadow:0 6px 18px rgba(20,24,31,.18)}
.final-apps .store-badge:hover{background:#232C3A;border-color:rgba(20,24,31,.7);transform:translateY(-1px)}
.final-apps .store-badge .sb-ic{width:26px;height:26px;fill:#F7F3E9}
.final-apps .store-badge .sb-txt b{font-size:17px}
.final-create{font:600 14px/1 'Inter Tight',system-ui,sans-serif;color:rgba(20,24,31,.6);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(20,24,31,.25)}
.final-create:hover{color:rgba(20,24,31,.9);text-decoration-color:rgba(20,24,31,.5)}

/* ---------- mobile install nudge (touch "Create a game") ---------- */
.qr-overlay.mobile{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,8,12,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.qr-overlay.mobile .qr-modal{position:relative;width:min(92%,360px);background:#FAF7F0;border:1px solid rgba(20,24,31,.10);
  border-radius:24px;padding:44px 30px 34px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55);color:#14181F}
.qr-overlay.mobile .hero-mascot{display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.qr-overlay.mobile .hero-mascot svg{display:block;width:120px;height:120px}
.qr-overlay.mobile h3{font:700 26px/1.05 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.03em;margin:0 0 10px;color:#14181F}
.qr-overlay.mobile .qr-sub{margin:0 0 24px;color:rgba(20,24,31,.62);font-size:15.5px;line-height:1.5}
.qr-overlay.mobile .store-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:58px;
  border-radius:15px;background:#14181F;color:#F7F3E9;text-decoration:none;box-shadow:0 8px 22px rgba(20,24,31,.28)}
.qr-overlay.mobile .store-cta svg{width:25px;height:25px;fill:#F7F3E9;flex:0 0 auto}
.qr-overlay.mobile .store-cta .t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.qr-overlay.mobile .store-cta .t small{font:600 10px/1 'Inter Tight',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
.qr-overlay.mobile .store-cta .t b{font:700 18px/1 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.01em}
.qr-overlay.mobile .qr-continue{display:inline-block;margin-top:18px;font:600 14px/1 'Inter Tight',system-ui,sans-serif;
  color:rgba(20,24,31,.55);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0}
.qr-overlay.mobile .qr-continue:hover{color:#14181F}

/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--hair); padding:40px 0 60px;}
.foot-inner{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.foot-brand{display:flex; flex-direction:column; align-items:flex-start; gap:7px;}
.foot-brand .word{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.02em;}
.foot-brand .url{font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:0.06em; color:var(--pantsy-red);}
.foot-brand .url:hover{color:var(--fire);}
.foot-flag{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-faint);}
.foot-tag{font-family:var(--mono); font-size:12.5px; color:var(--fg-faint); letter-spacing:0.02em; line-height:1.65;}
.foot-right{display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; text-align:right;}
@media(max-width:600px){ .foot-right{align-items:flex-start; text-align:left;} }
.foot-legal{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-faint); transition:color 140ms ease;}
.foot-legal:hover{color:var(--fire);}
.foot-legal + .foot-flag::before{content:'·'; margin-right:22px; color:var(--fg-faint); opacity:0.5;}
.foot-mail{font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:0.06em; color:var(--fg-soft);}
.foot-mail:hover{color:var(--fire);}
.foot-nav{display:flex; flex-wrap:wrap; gap:10px 26px; margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid var(--hair);}
.foot-nav a{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-faint); transition:color 140ms ease;}
.foot-nav a:hover{color:var(--fire);}

/* ---------- pack breadth seam (hero → §2) ---------- */
.pack-breadth{margin:0; padding:clamp(14px,1.8vw,20px) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
/* balance whitespace so the band sits centered between hero and §2 */
#start{padding-top:clamp(72px,9vw,124px);}
/* ---------- pack marquee (categories breadth) ---------- */
.pack-marquee{position:relative; overflow:hidden; padding:8px 0;
  margin:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
/* Smoke-2026-07-10 item 7: start the marquee at translateX(0) so the FIRST chip
   is whole. The old -37s pre-scroll landed a chip boundary mid-track at load, so
   on a narrow viewport the leftmost chip was bisected ("half-cut"). The loop is
   seamless regardless of start offset (the track is the chip run duplicated, and
   the -50% keyframe lands the copy exactly over the original). */
.pm-track{display:flex; width:max-content; animation:marquee 165s linear infinite; animation-delay:0s;}
.pack-marquee:hover .pm-track{animation-play-state:paused;}
.pm-chip{flex:none; margin-right:10px; font-family:var(--sans); font-weight:700; font-size:15px; white-space:nowrap;
  padding:9px 16px; border-radius:999px; border:1px solid var(--hair-hi); color:var(--fg-soft); background:rgba(247,243,233,0.04);
  transition:color 300ms ease, background 300ms ease, border-color 300ms ease;}
.pm-chip.chosen{color:var(--cream); background:rgba(255,46,136,0.13); border-color:var(--fire);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* Smoke-2026-07-10 item 7: on phones the 8% left mask fade (~31px at 390w) ate
   the first chip's left edge even at translateX(0). Drop the LEFT fade on mobile
   (keep the trailing/right fade that signals "more to scroll") so the opening
   chip reads fully. */
@media(max-width:600px){ .pack-marquee{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);} }
@media (prefers-reduced-motion:reduce){ .pm-track{animation:none; flex-wrap:wrap; width:auto; justify-content:center;} .pack-marquee{-webkit-mask-image:none; mask-image:none;} }

/* ---------- smart-roast ticker (above final CTA) ---------- */
.roast-band{padding:clamp(22px,3.2vw,40px) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.roast-label{text-align:center; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--smarty-gold); margin:0 0 clamp(14px,1.7vw,22px); display:flex; align-items:center; justify-content:center; gap:9px;}
.roast-label::before{content:''; width:6px; height:6px; border-radius:999px; background:var(--smarty-gold);}
.roast-marquee{position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.roast-track{display:flex; gap:12px; width:max-content; animation:marquee 88s linear infinite; animation-delay:-18s;}
.roast-marquee:hover .roast-track{animation-play-state:paused;}
.roast-chip{flex:none; font-family:var(--display); font-weight:600; font-style:italic; font-size:clamp(16px,1.65vw,20px); white-space:nowrap;
  color:var(--cream-dim); padding:10px 20px; border-radius:999px; border:1px solid var(--hair); background:rgba(255,210,74,0.05);}
@media (prefers-reduced-motion:reduce){ .roast-track{animation:none; flex-wrap:wrap; width:auto; justify-content:center;} .roast-marquee{-webkit-mask-image:none; mask-image:none;} }

/* ---------- reveal ---------- */
.pack-peek{position:fixed; z-index:90; transform:translate(-50%,-100%); pointer-events:none; opacity:0;
  transition:opacity 150ms ease; font-family:var(--sans); font-weight:700; font-size:14px; color:var(--ink);
  background:var(--cream); padding:7px 12px; border-radius:10px; white-space:nowrap; box-shadow:0 12px 26px rgba(0,0,0,0.45);}
.pack-peek.show{opacity:1;}
.pack-peek .pk-label{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--fire-dim); margin-right:5px;}
.pack-peek::after{content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--cream);}
.pm-chip{cursor:pointer;}
.reveal{opacity:0; transform:translateY(26px); transition:opacity 720ms cubic-bezier(.2,.7,.2,1), transform 720ms cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.d1{transition-delay:90ms;} .d2{transition-delay:180ms;} .d3{transition-delay:270ms;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }
@keyframes flick{0%,100%{transform:scale(1) rotate(-1deg);}50%{transform:scale(1.05) rotate(1.5deg);}}
.flick{transform-origin:50% 90%; animation:flick 2.6s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.flick{animation:none;}}

/* ---------- desktop "play on your phone" QR modal (Create-game on a computer) ---------- */
.qr-overlay{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,8,12,0.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.qr-overlay.open{display:flex; animation:qrFade 160ms ease;}
@keyframes qrFade{from{opacity:0;}to{opacity:1;}}
.qr-modal{position:relative; width:min(92vw,400px); background:#FAF7F0; border:1px solid rgba(20,24,31,0.10);
  border-radius:24px; padding:clamp(30px,4vw,42px); text-align:center; box-shadow:0 30px 80px rgba(0,0,0,0.55); color:var(--ink);}
.qr-modal .qr-eyebrow{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--fire); margin:0 0 12px;}
.qr-modal h3{font-family:var(--display); font-weight:700; font-size:clamp(23px,2.8vw,29px); letter-spacing:-0.03em; line-height:1.05; margin:0 0 10px; color:var(--ink);}
.qr-modal .qr-sub{margin:0 0 22px; color:rgba(20,24,31,0.62); font-size:16px; line-height:1.5;}
.qr-box{width:184px; height:184px; margin:0 auto 18px; background:#fff; border:1px solid rgba(20,24,31,0.08); border-radius:18px; padding:13px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;}
.qr-box svg{width:100%; height:100%; display:block;}
.qr-box.hide{display:none;}
.qr-url{display:inline-block; font-family:var(--mono); font-weight:700; font-size:15px; color:var(--ink); background:rgba(20,24,31,0.05); border:1px solid rgba(20,24,31,0.12); padding:9px 16px; border-radius:999px; margin:0 0 22px;}
.qr-continue{display:inline-block; font-family:var(--sans); font-weight:600; font-size:14px; color:rgba(20,24,31,0.55); text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:0;}
.qr-continue:hover{color:var(--ink);}
.qr-close{position:absolute; top:14px; right:15px; width:32px; height:32px; border:0; background:transparent; color:rgba(20,24,31,0.45); font-size:24px; line-height:1; cursor:pointer; border-radius:8px;}
.qr-close:hover{color:var(--ink); background:rgba(20,24,31,0.07);}
@media (prefers-reduced-motion:reduce){ .qr-overlay.open{animation:none;} }

/* ---------- cross-links row (shared with comparison/occasion pages) ---------- */
.xlinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(30px,4vw,46px); justify-content:center;}
.final-wrap:has(.xlinks){padding-bottom:clamp(30px,4vw,46px);}
.xlink{font-family:var(--sans); font-weight:600; font-size:15px; padding:11px 13px; white-space:nowrap; border-radius:999px;
  border:1px solid var(--hair-hi); color:var(--fg-soft); background:rgba(247,243,233,0.03); transition:color 140ms ease, border-color 140ms ease, background 140ms ease;}
.xlink:hover{color:var(--fg); border-color:var(--hair-hi); background:rgba(247,243,233,0.07);}
/* SEO cross-links: present for crawl, visually recessive so they don’t pull conversion intent.
   Compound selector (.xlink.xlink-quiet) so it beats compare.css's later single-class .xlink. */
.xlink.xlink-quiet{border-color:transparent; background:transparent; color:var(--fg-faint); font-weight:500; padding-left:10px; padding-right:10px;}
.xlink.xlink-quiet:hover{color:var(--fg-soft); border-color:transparent; background:transparent;}
/* force the quiet SEO links onto their own row below the occasion links */
.xlink-break{flex-basis:100%; height:0; margin:0; padding:0; border:0;}

/* ---------- language selector (flag) — v2-32 redesign (current+suggested trigger + searchable dropdown) ---------- */
.lang-pick{position:relative; display:inline-flex;}

/* trigger — height matches the Create game button (.btn-sm = 48px) */
.lang-btn{appearance:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:7px; height:48px; padding:0 14px; border-radius:13px;
  border:1px solid var(--hair-hi); color:var(--fg); background:rgba(247,243,233,0.04);
  transition:border-color 140ms ease, background 140ms ease;}
.lang-btn:hover{border-color:rgba(247,243,233,0.30); background:rgba(247,243,233,0.08);}
.lang-btn .lang-flag{font-size:17px; line-height:1;}
.lang-btn .lang-suggest{font-size:15px; position:relative; opacity:0.9;}
.lang-btn .lang-suggest[hidden]{display:none;}
.lang-btn .lang-suggest::after{content:''; position:absolute; top:-3px; right:-4px; width:5px; height:5px;
  border-radius:999px; background:var(--ember); box-shadow:0 0 0 2px #0B0F15;}
.lang-sep{width:1px; height:16px; background:var(--hair-hi); margin:0 3px;}
.lang-open{display:inline-flex; align-items:center; gap:4px;}
.lang-globe{width:18px; height:18px; stroke:var(--fg-soft); transition:stroke 140ms ease;}
.lang-btn:hover .lang-globe{stroke:var(--fg);}
.lang-caret{font-size:10px; opacity:0.55; transition:transform 200ms ease;}
.lang-pick.open .lang-caret{transform:rotate(180deg);}

/* panel */
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:90; width:288px;
  display:flex; flex-direction:column;
  background:rgba(24,10,34,0.97); backdrop-filter:blur(18px);
  border:1px solid var(--hair-hi); border-radius:16px; padding:8px; box-shadow:0 24px 60px rgba(0,0,0,0.55);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity 160ms ease, transform 160ms ease;}
.lang-pick.open .lang-menu{opacity:1; transform:none; pointer-events:auto;}

.lang-search{flex:none; display:flex; align-items:center; gap:8px; padding:0 11px; height:40px; margin-bottom:7px;
  border-radius:11px; background:rgba(0,0,0,0.28); border:1px solid var(--hair);}
.lang-search svg{width:15px; height:15px; stroke:var(--fg-faint); flex:none;}
.lang-search input{flex:1; min-width:0; background:none; border:0; outline:none; color:var(--fg);
  font-family:var(--sans); font-size:14.5px;}
.lang-search input::placeholder{color:var(--fg-faint);}

.lang-suggest-row,.lang-current-row{flex:none; display:flex; align-items:center; gap:10px; padding:11px;
  border-radius:11px; color:var(--fg); font-family:var(--sans); font-weight:600; font-size:14.5px; text-decoration:none;}
.lang-suggest-row{background:linear-gradient(90deg, rgba(255,46,136,0.18), rgba(255,46,136,0.05));
  border:1px solid rgba(255,46,136,0.30); margin-bottom:5px;}
.lang-suggest-row[hidden]{display:none;}
.lang-current-row{background:rgba(247,243,233,0.06); border:1px solid var(--hair);}
.lang-suggest-row .lang-flag,.lang-current-row .lang-flag{font-size:17px; flex:none;}
.lang-tag{margin-left:auto; font-family:var(--mono); font-weight:700; font-size:9px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ember);}
.lang-tag--muted{color:var(--fg-faint);}

.lang-divider{flex:none; display:flex; align-items:center; gap:10px; margin:11px 6px 7px;
  font-family:var(--mono); font-weight:700; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-faint);}
.lang-divider::after{content:''; flex:1; height:1px; background:var(--hair);}

.lang-list{flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--hair-hi) transparent;}
.lang-list::-webkit-scrollbar{width:8px;}
.lang-list::-webkit-scrollbar-thumb{background:var(--hair-hi); border-radius:8px;}

.lang-opt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; appearance:none; cursor:pointer;
  font-family:var(--sans); font-weight:500; font-size:14.5px; color:var(--fg-soft); background:transparent; border:0;
  border-radius:10px; padding:11px; text-decoration:none;}
.lang-opt .lang-flag{font-size:17px; flex:none;}
.lang-opt:hover{background:rgba(247,243,233,0.06); color:var(--fg);}
.lang-opt.is-on{color:var(--fg); background:rgba(255,46,136,0.12);}   /* kept for occasion pages */
.lang-opt[hidden]{display:none;}   /* de-duped suggested row (author display:flex overrides UA [hidden]) */
.lang-opt[data-soon]{cursor:default; opacity:0.78;}                  /* kept: unpublished locales */
.lang-opt em{margin-left:auto; font-style:normal; font-family:var(--mono); font-weight:700; font-size:9.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-faint);}   /* kept: "soon" tag */

.lang-empty{display:none; padding:16px 10px; font-family:var(--mono); font-size:11px; color:var(--fg-faint); text-align:center;}
.lang-empty[hidden]{display:none;}
.lang-empty.show{display:block;}

/* mobile: full-width sheet pinned under the sticky 74px nav, list scrolls
   inside. The trigger sits mid-nav (left of Create game), so a right:0 absolute
   menu would overflow the left screen edge on a phone — fix to the viewport. */
@media(max-width:640px){
  .lang-menu{position:fixed; top:82px; left:14px; right:14px; width:auto; max-height:calc(100vh - 100px);}
}

/* iOS native shell (2026-07-16): the app's WKWebView ships with
   scrollView.isScrollEnabled=false (the GAME screens must not rubber-band),
   which also kills document-level pan scrolling on these pages when the app
   opens them in the same webview (Profile → About/Legal). Inner-element
   scrolling is unaffected by that native flag, so under the shell (the
   html.in-native-shell class app.js stamps) BODY becomes the scroller.
   header.nav's own env(safe-area-inset-top) padding still clears the notch
   (sticky works inside the body scroller); position:fixed overlays are
   viewport-anchored and unaffected. Browsers/PWA never get the class. */
html.in-native-shell{height:100%;overflow:hidden}
html.in-native-shell body{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}


/* ============================================================
   BUKSI ADDITIONS — everything below is new to this fork.
   ============================================================ */

/* Screen placeholder: the slot a real 390x844 screen has not been drawn for yet.
   Same box as .scrn-embed, so swapping a placeholder for an <iframe> is a
   one-line change and nothing around it moves. */
.scrn-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:26px; text-align:center; background:
    repeating-linear-gradient(135deg, rgba(247,243,233,0.035) 0 10px, transparent 10px 20px), #10141A;}
.scrn-ph b{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-0.02em; color:var(--cream-dim);}
.scrn-ph span{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-faint); line-height:1.6;}
.scrn-ph::before{content:''; position:absolute; inset:10px; border:1px dashed rgba(247,243,233,0.16); border-radius:26px;}


/* The nav CTA: .nav-links a (0-1-1) outranks .btn-fire (0-1-0) in the parent sheet, so the
   nav button inherited the muted link colour. Same ink as every other CTA. */
.nav-links a.btn-fire{color:var(--ink);}

/* Hero: with the store bundles not live, the web CTA is the hero's primary action,
   so it takes a real button rather than the parent's quiet .hero-weblink. */
.hero-cta{margin-top:20px;}
@media(max-width:900px){ .hero-cta{display:flex; justify-content:center;} }
.final-cta{margin-top:4px;}
.final-card .final-apps{margin-top:22px;}

/* Store badges before the bundles are live (Buksi's iOS/Android shells are the S2 lane). */
.store-badge.is-soon{opacity:0.55; cursor:default; pointer-events:none;}
.store-badge.is-soon .sb-txt small{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;}

/* The round's four beats, under the configurator's copy. */
.beats{margin:22px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.beats li{display:flex; gap:12px; align-items:flex-start; font-size:16.5px; line-height:1.5; color:var(--fg-soft);}
.beats li b{color:var(--cream); font-weight:600;}
.beats .n{flex:none; width:26px; height:26px; margin-top:2px; border-radius:999px; background:rgba(255,46,136,0.14);
  border:1px solid rgba(255,46,136,0.36); color:var(--fire-hi);
  font-family:var(--mono); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;}

/* The report is the one screen that genuinely scrolls in the app (the capture frames
   are only its first viewport), so its embed keeps native scrolling while every other
   screen stays scrolling="no". */
/* The report is the one screen that genuinely scrolls in the app (the owner-pack
   frames are only its first viewport). Two things block that in this chassis:
   .scrn-embed is pointer-events:none, and .scrn-shield covers the screen at z-index 4
   to catch taps. Both are lifted for this embed only — every other screen keeps the
   shield and stays scrolling="no". */
.scrn:has(> .scrn-embed[data-screen="report"]) .scrn-shield{ display:none; }
.scrn-embed[data-screen="report"]{ pointer-events:auto; touch-action:pan-y; overscroll-behavior:contain; }

/* The packs sheet scrolls for the same reason: the registry went 23 → 47, so the
   grid is 1536px tall inside an 844px screen and the frame shows ~21 of 47 with the
   bottom row sliced. Its #grid is the app's own scroller — same two lifts as above. */
.scrn:has(> .scrn-embed[data-screen="packs"]) .scrn-shield{ display:none; }
.scrn-embed[data-screen="packs"]{ pointer-events:auto; touch-action:pan-y; overscroll-behavior:contain; }


/* The demo draws its own island (it is a whole device cut); the frame's notch doubled it. */
.phone:has(> .scrn > .scrn-embed[data-src*="demo"]) > .notch{ display:none; }

/* sibling apps, under the hero facts */
.hero-xref{margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--fg-soft);}
.hero-xref a{color:var(--fg); font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,0.28); text-underline-offset:3px;}
.hero-xref a:hover{text-decoration-color:currentColor;}
.hero-xref span{margin:0 6px; opacity:0.5;}
@media(max-width:900px){ .hero-xref{text-align:center;} }

/* 2026-09-23 (owner): NO BAND inside the phone. The screen runs to the ring on all four sides —
   padding and the inset shadow are gone, and the screen takes the phone's own corner radius. */
.phone, .quad .phone{padding:0 !important;}
.phone .scrn{border-radius:inherit !important;}


/* ============================================================
   ZUBON ADDITIONS (2026-10-04) — both doors share this block.
   ============================================================ */

/* Centred section head (the questions, the FAQ). */
.sec-head{max-width:780px; margin:0 auto; text-align:center;}
.sec-head h2{font-size:clamp(36px,4.6vw,60px);}
.sec-head .lead{margin:22px auto 0; font-size:clamp(18px,1.95vw,22px); max-width:46ch;}

/* The round in one phone: each beat's board is its own iframe, stacked; one shows. */
.scrn-embed.cyc{opacity:0; transition:opacity 420ms ease;}
.scrn-embed.cyc.on{opacity:1;}
@media (prefers-reduced-motion:reduce){ .scrn-embed.cyc{transition:none;} }
.beats li[hidden]{display:none;}
.beats .beat{appearance:none; background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
  display:flex; gap:12px; align-items:flex-start; width:100%; padding:8px 10px; margin:-8px -10px; border-radius:12px;
  transition:background 200ms ease, color 200ms ease;}
.beats .beat:hover{background:rgba(247,243,233,0.04);}
.beats .beat:focus-visible{outline:2px solid var(--fire); outline-offset:2px;}
.beats .beat[aria-pressed="true"]{background:rgba(247,243,233,0.06); color:var(--cream);}
.beats .beat[aria-pressed="true"] .n{background:var(--fire); border-color:var(--fire); color:var(--ink);}
.beats [data-when][hidden]{display:none;}
@media(max-width:880px){ .beats{text-align:left; max-width:440px; margin-left:auto; margin-right:auto;} }

/* Tonight's packs: the five the vibe vote deals, under the vibe chips. */
.tonight{margin-top:18px;}
.tonight-label{margin:0 0 10px; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-faint);}
.tonight-row{display:flex; flex-wrap:wrap; gap:8px;}
.tonight-row .pm-chip{margin-right:0; cursor:default; font-size:14px; padding:8px 14px;}
@media(max-width:880px){ .tonight{display:flex; flex-direction:column; align-items:center;} .tonight-row{justify-content:center;} }

/* ---------- the questions (one list per pack) ---------- */
.qs-index{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:32px auto 0; max-width:940px;}
.qs-index a{font-family:var(--sans); font-weight:600; font-size:14px; padding:9px 15px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--hair-hi); color:var(--fg-soft); background:rgba(247,243,233,0.03);
  transition:color 140ms ease, border-color 140ms ease, background 140ms ease;}
.qs-index a:hover{color:var(--fg); border-color:rgba(247,243,233,0.32);}
.qs-index a[aria-current="true"]{color:var(--cream); background:rgba(255,46,136,0.13); border-color:var(--fire);}
.qs-panels{margin:clamp(28px,4vw,44px) auto 0; display:flex; flex-direction:column; gap:clamp(16px,2vw,22px);}
.qs-pack{border-radius:22px; background:rgba(247,243,233,0.045); border:1px solid rgba(247,243,233,0.07);
  padding:clamp(20px,2.6vw,32px); scroll-margin-top:96px;}
.qs-js:not(.qs-all) .qs-pack:not(.on){display:none;}
.qs-pack h3{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:clamp(24px,2.4vw,30px); letter-spacing:-0.03em; line-height:1.1;}
.qs-pack h3 small{margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-faint);}
.qs-list{margin:18px 0 0; padding:0; list-style:none; counter-reset:q; columns:2; column-gap:44px;}
@media(max-width:820px){ .qs-list{columns:1;} }
.qs-list li{counter-increment:q; break-inside:avoid; display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px;
  padding:12px 0; border-top:1px solid var(--hair); font-size:16.5px; line-height:1.45; color:var(--cream); text-wrap:pretty;}
.qs-list li::before{content:counter(q, decimal-leading-zero); font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--fg-faint); padding-top:3px;}
.qs-list .stem{color:var(--fg-soft);}
.qs-list .or{color:var(--fire-hi); font-weight:700;}
.qs-foot{display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; align-items:center; margin-top:clamp(24px,3vw,34px);}
.qs-note{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-faint);}

/* ---------- FAQ ---------- */
.faq-list{margin:clamp(30px,4vw,48px) auto 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,4vw,56px); align-items:start;}
@media(max-width:820px){ .faq-list{grid-template-columns:1fr;} }
.faq-list .faq-item:nth-child(-n+2){border-top:1px solid var(--hair);}
@media(max-width:820px){ .faq-list .faq-item:nth-child(2){border-top:0;} }
.faq-item{border-bottom:1px solid var(--hair);}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 4px; font-family:var(--display); font-weight:700; font-size:clamp(19px,1.9vw,23px); letter-spacing:-0.02em; line-height:1.2;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; flex:none; font-family:var(--mono); font-weight:700; font-size:22px; line-height:1; color:var(--fire-hi); transition:transform 200ms ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:focus-visible{outline:2px solid var(--fire); outline-offset:2px; border-radius:8px;}
.faq-item p{margin:0; padding:0 4px 22px; color:var(--fg-soft); font-size:17px; line-height:1.55; max-width:62ch; text-wrap:pretty;}
.faq-item p a{color:var(--fg); text-decoration:underline; text-decoration-color:rgba(247,243,233,0.3); text-underline-offset:3px;}
.faq-item p a:hover{text-decoration-color:currentColor;}
@media (prefers-reduced-motion:reduce){ .faq-item summary::after{transition:none;} }

/* The game switch: one site, two games (zubon.app/most-likely-to/ · /would-you-rather/). */
.game-switch{display:inline-flex; gap:4px; padding:4px; margin:0 0 26px; border-radius:999px; background:#10141A; border:1px solid rgba(247,243,233,0.09);}
.game-switch a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; font-family:var(--sans); font-size:14px; font-weight:600; color:#9DA9BC; white-space:nowrap; transition:background 160ms ease, color 160ms ease;}
.game-switch a:hover{color:var(--cream);}
.game-switch a[aria-current="page"]{background:var(--cream); color:var(--ink);}
.game-switch a:focus-visible{outline:2px solid var(--fire); outline-offset:2px;}
@media(max-width:420px){ .game-switch a{padding:0 12px; font-size:13px;} }

/* More from us: the cross-title row above the footer. Same markup on every title site;
   names and lines are the app's own (Z4 profile, "More from us"). */
.more-wrap{padding:clamp(40px,6vw,72px) 0; border-top:1px solid var(--hair);}
.more-wrap .eyebrow{margin-bottom:18px;}
.more{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
@media(max-width:760px){ .more{grid-template-columns:1fr;} }
.more-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:22px 20px; min-height:44px; border-radius:18px;
  background:rgba(247,243,233,0.045); border:1px solid rgba(247,243,233,0.07); transition:background 160ms ease, border-color 160ms ease;}
.more-card:hover{background:rgba(247,243,233,0.08); border-color:rgba(247,243,233,0.16);}
.more-card:focus-visible{outline:2px solid var(--fire); outline-offset:2px;}
.more-card b{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-0.03em; color:var(--cream);}
.more-card b::after{content:' ›'; color:var(--fire-hi);}
.more-card span{font-size:15px; color:var(--fg-soft); line-height:1.4;}

/* Host it: a 960 × 540 stream overlay in a wide frame (WYR page). */
.stream-frame{width:100%; max-width:560px; margin:0 auto; display:flex; flex-direction:column; align-items:center;}
.stream-scrn{position:relative; width:100%; aspect-ratio:960/540; border-radius:16px; overflow:hidden; background:#05080C;
  box-shadow:0 38px 84px rgba(0,0,0,0.6), 0 0 0 2px rgba(247,243,233,0.06), 0 0 0 8px #1A222E;}
.stream-embed{position:absolute; top:0; left:0; width:960px; height:540px; border:0; transform-origin:0 0; transform:scale(var(--s,0.5)); pointer-events:none;}

/* The search phrase, inside the H1 as its first line. */
.hero h1 .h1-kicker{display:block; margin:0 0 18px; font-family:var(--mono); font-style:normal; font-weight:700; font-size:13px; line-height:1.4; letter-spacing:0.24em; text-transform:uppercase; color:var(--fire-hi);}
.hero .hero-weblink{margin-top:16px; color:var(--fg-soft); text-decoration:underline; text-decoration-color:rgba(247,243,233,0.3); text-underline-offset:3px;}
.qs-pack h3{font-size:clamp(20px,2vw,26px);}

/* The Game row's cells are links (each switches the whole site), so they keep the cell look. */
a.cfg-cell{text-decoration:none; min-height:44px;}
a.cfg-cell:hover{color:var(--cream);}
a.cfg-cell.on:hover{color:#14181F;}
a.cfg-cell:focus-visible{outline:2px solid var(--fire); outline-offset:2px;}

/* The home lineup over the ticket (Zubon App 00 Home, on the cream). */
.final-card .final-lineup{display:block; width:min(300px,78%); height:auto; margin:0 auto clamp(18px,2.4vw,26px);}

.more-ic{width:64px; height:64px; border-radius:15px; margin-bottom:10px; box-shadow:0 8px 20px rgba(0,0,0,0.35);}
.qs-index{max-width:none;}

/* One lever format: the hero's game switch takes the round panel's segmented shape (r14 track, r10 cells). */
.game-switch{border-radius:14px; border-color:rgba(247,243,233,0.07);}
.game-switch a{border-radius:10px;}
.game-switch a[aria-current="page"]{background:#F7F3E9; color:#14181F;}

/* The lineup is inline (an <img> SVG loses its <style> on save); sway as Zubon App 00 Home. */
@keyframes zbSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.final-lineup .sw{transform-box:fill-box;transform-origin:50% 100%;animation-name:zbSway;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
@media (prefers-reduced-motion:reduce){ .final-lineup .sw{animation:none;} }

/* The apps row sits right under the ticket (owner, 10-04). */
.final-wrap{padding-bottom:clamp(20px,3vw,32px);}
.final-wrap + .more-wrap{padding-top:0; border-top:0;}

.dial-note{max-width:none;}

/* =====================================================================
   ZUBON SOON (2026-10-04, owner) — the App Store sheet. While Zubon waits
   for the App Store, a tap on an App Store badge opens this instead of
   leaving the page (site/soon.js). Delete with soon.js once the app is live.
   ===================================================================== */
.soon{position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  padding-bottom:max(20px, env(safe-area-inset-bottom, 0px));
  background:rgba(5,8,12,0.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transition:opacity 180ms ease;}
.soon[hidden]{display:none;}
.soon.is-in{opacity:1;}
.soon-card{position:relative; width:100%; max-width:440px; padding:28px 24px 22px; border-radius:24px;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,46,136,0.20), rgba(255,46,136,0) 60%), #0B0F15;
  border:1px solid var(--hair-hi); box-shadow:0 30px 80px rgba(0,0,0,0.55);
  transform:translateY(12px) scale(0.98); transition:transform 220ms cubic-bezier(.2,.8,.2,1);}
.soon.is-in .soon-card{transform:none;}
.soon-card .eyebrow{margin:0 0 14px;}
.soon-title{font-family:var(--display); font-weight:800; font-size:clamp(26px,6.4vw,32px); line-height:1.08;
  letter-spacing:-0.03em; color:var(--cream); margin:0 0 12px; text-wrap:balance;}
.soon-num{color:var(--fire-hi);}
.soon-body{font-family:var(--sans); font-size:17px; line-height:1.45; color:var(--fg-soft); margin:0 0 22px; text-wrap:pretty;}
.soon-actions{display:flex; flex-direction:column; gap:10px;}
.soon-actions .btn{width:100%;}
.soon-actions .btn-ghost{height:48px; font-size:15px;}
.soon-actions .btn:focus-visible{outline:2px solid var(--fire-hi); outline-offset:3px;}
html.soon-open{overflow:hidden;}
@media (prefers-reduced-motion: reduce){ .soon, .soon-card{transition:none;} .soon-card{transform:none;} }