/* Chaos Crib waitlist — shared styles for every page (home, beta, legal, 404) */

/* fonts are served from our own domain: no request to Google, nothing to disclose (GDPR, LG München 3 O 17493/20) */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400 700; font-stretch: 75% 125%; font-display: swap; src: url(fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400 700; font-stretch: 75% 125%; font-display: swap; src: url(fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Modak, cut down to the tile letters the logo doesn't have (BETA, 404) */
@font-face { font-family: 'Modak'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/modak-logo.woff2) format('woff2'); unicode-range: U+30, U+34, U+41-43, U+45, U+48-49, U+4F, U+52-54; }

:root {
  --night: #120a2e; --plum: #2a1460; --grape: #3b1d78; --ink: #1b1036;
  --pink: #ff3d8b; --pink-ink: #d81b63; --sun: #ffd23f; --sky: #3de0ff; --lime: #a6ff3d; --violet: #b98cff; --gold: #f5c542;
  --cream: #fff7ec; --soft: rgba(255, 247, 236, .74);
  --line: 0 0 0 5px var(--cream);
  --drop: 7px 9px 0 5px rgba(0, 0, 0, .42);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-snap-type: y proximity; scroll-padding-top: 74px; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--night); color: var(--cream); font: 500 18px/1.45 'Fredoka', system-ui, sans-serif; font-variation-settings: 'wdth' 100; }
::selection { background: var(--pink); color: var(--cream); }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; border-radius: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.g { display: inline-block; font-variation-settings: 'wdth' 75; }   /* a letter mid-translation */

h2 { margin: 0 0 12px; text-align: center; font-weight: 700; font-size: clamp(36px, 8.4vw, 72px); line-height: .96; letter-spacing: -.012em; font-variation-settings: 'wdth' 114; text-wrap: balance;
     text-shadow: 0 2px 0 var(--grape), 0 4px 0 #2a1460, 0 6px 0 var(--ink), 0 12px 20px rgba(0, 0, 0, .45); }
.lead { margin: 0 auto 26px; max-width: 40ch; text-align: center; color: var(--soft); font-size: clamp(17px, 2.4vw, 20px); }
section { padding: 36px 16px 56px; scroll-snap-align: start; }
.hero { scroll-snap-align: start; }

/* ---------- the floating island menu (always reachable) ---------- */
.nav { position: fixed; z-index: 60; top: max(10px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; width: min(1120px, calc(100% - 20px)); display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 999px; background: rgba(18, 10, 46, .74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 3px var(--cream), 5px 6px 0 3px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); }
.nav-logo { display: block; flex: none; margin-right: auto; }
.nav-logo img { display: block; width: auto; height: clamp(28px, 7.4vw, 36px); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.nav-links { position: relative; display: none; list-style: none; margin: 0 auto; padding: 0; gap: 2px; }
.nav-links a { position: relative; z-index: 1; display: block; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; color: var(--soft); transition: color .3s cubic-bezier(.32, .72, 0, 1); }
.nav-links a:hover, .nav-links a[aria-current="true"], .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-beta, .menu a { position: relative; }
.nav-beta i, .menu a i { position: absolute; top: -7px; right: -4px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; color: var(--night); background: var(--lime); border-radius: 99px; padding: 3px 6px; rotate: 8deg; box-shadow: 0 0 0 2px var(--night); }
.menu a i { position: static; font-size: 13px; padding: 4px 8px; margin-left: 4px; align-self: flex-start; }
.nav-ind { position: absolute; z-index: 0; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: rgba(255, 247, 236, .12); box-shadow: inset 0 0 0 2px rgba(255, 247, 236, .25); opacity: 0; pointer-events: none; }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 247, 236, .07); }
.langs button { border: 0; background: transparent; border-radius: 999px; padding: 6px 11px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color .3s cubic-bezier(.32, .72, 0, 1), color .3s cubic-bezier(.32, .72, 0, 1); }
.langs button[aria-pressed="true"] { background: var(--c); color: var(--night); }
.nav-cta { display: none; flex: none; padding: 9px 18px; border-radius: 999px; background: var(--pink-ink); color: var(--cream); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }
.burger { position: relative; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; }
.burger span { position: absolute; left: 11px; width: 20px; height: 3px; border-radius: 3px; background: var(--night); transition: transform .45s cubic-bezier(.32, .72, 0, 1), top .45s cubic-bezier(.32, .72, 0, 1); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 24px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }
.menu { position: fixed; z-index: 58; inset: 0; display: grid; align-content: center; justify-items: center; gap: 30px; padding: 90px 24px 40px; background: rgba(18, 10, 46, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.menu a { display: flex; align-items: center; gap: 14px; padding: 8px 6px; font-weight: 700; font-size: clamp(30px, 8.6vw, 44px); line-height: 1.05; text-decoration: none; font-variation-settings: 'wdth' 112; }
.menu a b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 247, 236, .1); font-size: 28px; }
.menu .menu-cta { justify-content: center; padding: 14px 30px; border-radius: 999px; background: var(--pink); font-size: 22px; box-shadow: var(--line), var(--drop); }
@media (min-width: 980px) {
  .nav { padding-left: 16px; }
  .nav-logo { margin-right: 0; }
  .nav-links { display: flex; }
  .nav-cta { display: block; }
  .burger { display: none; }
  .dock { display: none !important; }
}

/* ---------- hero: the page translates itself ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; padding: clamp(70px, 10svh, 92px) 16px clamp(14px, 3svh, 32px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero::before { content: ''; position: absolute; inset: -30px; z-index: -2; background: url(img/sofa.jpg) center 70% / cover; filter: blur(14px) saturate(1.2); opacity: .32; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 65% at 50% 0%, rgba(59, 29, 120, .6), transparent 62%), linear-gradient(transparent 58%, var(--night)); }
.brand { width: clamp(132px, min(62vw, 26svh), 300px); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }
/* chunky toy letters, extruded like the logo */
.say { margin: 2px auto 0; max-width: 12ch; min-height: 2.7em; font-weight: 700; font-size: clamp(34px, min(12.4vw, 9svh), 124px); line-height: .9; letter-spacing: -.012em; font-variation-settings: 'wdth' 118;
       text-shadow: 0 1px 0 #4a2590, 0 2px 0 var(--grape), 0 3px 0 #331a6b, 0 4px 0 #2a1460, 0 5px 0 #23114f, 0 6px 0 var(--ink), 0 7px 0 var(--ink), 0 14px 22px rgba(0, 0, 0, .5); }
@media (min-width: 760px) { .say { max-width: 14ch; min-height: 1.8em; } }
.echo { list-style: none; padding: 0; margin: clamp(8px, 2svh, 18px) 0 0; display: grid; gap: 6px; justify-items: center; }
.echo li { display: flex; gap: 10px; align-items: baseline; color: var(--soft); font-size: clamp(13px, min(3.6vw, 2.3svh), 21px); }
.code { flex: none; font-weight: 700; font-size: .78em; color: var(--night); background: var(--c); border-radius: 8px; padding: 1px 8px; rotate: -3deg; }

.crew { display: flex; justify-content: center; align-items: flex-end; gap: clamp(2px, 2vw, 30px); margin-top: auto; padding-top: clamp(16px, 4svh, 44px); }
.member { position: relative; width: clamp(80px, min(30vw, 19svh), 236px); background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.member .body { position: relative; display: block; }
.member img { width: 100%; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .42)); }
.phone { position: absolute; left: 56%; bottom: 0; width: 38%; aspect-ratio: 9 / 16; border-radius: 13px; background: var(--night); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--c), 0 0 0 7px var(--cream), 4px 6px 0 7px rgba(0, 0, 0, .4); transition: box-shadow .45s cubic-bezier(.32, .72, 0, 1); }
.phone span { writing-mode: vertical-rl; rotate: 180deg; font-weight: 700; font-size: clamp(9px, 2.3vw, 16px); color: var(--c); transition: color .35s cubic-bezier(.32, .72, 0, 1); }
.member[aria-pressed="true"] .phone { box-shadow: 0 0 0 4px var(--c), 0 0 0 7px var(--cream), 0 0 36px 12px var(--c); }
.member[aria-pressed="true"] .phone span { color: var(--cream); }
.bubble { position: absolute; z-index: 2; left: 50%; top: 2%; translate: -50% -100%; transform: scale(0); background: var(--cream); color: var(--night); font-weight: 700; font-size: clamp(13px, 3.4vw, 19px); padding: 6px 12px; border-radius: 16px; white-space: nowrap; box-shadow: 0 0 0 4px var(--c), 4px 5px 0 4px rgba(0, 0, 0, .35); pointer-events: none; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -12px; translate: -50% 0; border: 8px solid transparent; border-top: 10px solid var(--cream); }
.hint { margin: clamp(6px, 1.5svh, 14px) 0 0; color: var(--soft); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.hint svg { width: 20px; height: 20px; flex: none; }
.cta { margin-top: clamp(8px, 2svh, 18px); display: inline-flex; align-items: center; gap: 14px; font-weight: 700; font-size: 21px; text-decoration: none; color: var(--night); background: var(--sun); border-radius: 999px; padding: 8px 8px 8px 28px; box-shadow: var(--line), var(--drop), inset 0 2px 0 rgba(255, 255, 255, .5); }
.cta:active { translate: 0 4px; }
.cta-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--night); color: var(--sun); }
.cta-ico svg { width: 22px; height: 22px; }

/* ---------- the TV ---------- */
.show { display: grid; justify-items: center; }
.tv { position: relative; isolation: isolate; width: min(780px, 100%, calc(80svh - 170px)); margin-top: 34px; padding: clamp(12px, 2.6vw, 22px) clamp(12px, 2.6vw, 22px) clamp(30px, 4.4vw, 42px); border-radius: clamp(28px, 4vw, 44px); background: linear-gradient(160deg, #2e175c, #1b1036 70%); box-shadow: var(--line), var(--drop); }
.tv-peek { position: absolute; z-index: -1; right: 11%; top: 0; width: clamp(66px, 15vw, 112px); translate: 0 -74%; rotate: 8deg; }
.tv-brand { position: absolute; left: 50%; bottom: clamp(7px, 1.2vw, 12px); translate: -50% 0; font-weight: 700; font-size: clamp(11px, 1.6vw, 14px); letter-spacing: .06em; color: rgba(255, 247, 236, .5); }
.tv-led { position: absolute; right: clamp(18px, 4vw, 34px); bottom: clamp(11px, 1.8vw, 17px); width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.screen { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 4 / 5; border-radius: clamp(18px, 3vw, 28px); background: radial-gradient(120% 90% at 50% 0%, #3d1f7c, #150b36 72%); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 2px 0 3px rgba(255, 255, 255, .06), inset 0 0 60px rgba(0, 0, 0, .5); }
@media (min-width: 760px) { .screen { aspect-ratio: 4 / 3; } .tv { width: min(760px, 100%, calc(118svh - 400px)); } }
.screen::after { content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .1) 2px 3px), radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .35)); }
.standby { position: absolute; inset: 0; display: grid; place-items: center; opacity: .14; }
.standby img { width: 46%; }
.crt { position: absolute; inset: 0; display: flex; flex-direction: column; transform-origin: 50% 50%; }
.osd { display: flex; align-items: center; gap: 2.4cqw; padding: 2.6cqw 3.4cqw 0; font-weight: 700; font-size: clamp(11px, 2.6cqw, 16px); }
.osd .ch { color: var(--lime); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.osd .gname { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .9; }
.dots { display: flex; gap: 1cqw; }
.dots i { width: 1.6cqw; height: 1.6cqw; max-width: 9px; max-height: 9px; border-radius: 50%; background: rgba(255, 247, 236, .25); transition: background-color .3s cubic-bezier(.32, .72, 0, 1); }
.dots i.on { background: var(--lime); }
.osd .live { display: flex; align-items: center; gap: 1.2cqw; color: var(--pink); }
.osd .live i { width: 1.8cqw; height: 1.8cqw; max-width: 9px; max-height: 9px; border-radius: 50%; background: var(--pink); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 3.2cqw; padding: 2.4cqw 4.6cqw 4.6cqw; perspective: 900px; }
.noise { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; visibility: hidden; pointer-events: none; }

/* pieces shared by the example rounds (no CSS transitions on anything GSAP animates) */
.intro { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 1.6cqw; padding: 6cqw; text-align: center; }
.intro .em { width: clamp(96px, 30cqw, 220px); height: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .3)); }
.intro .tt { font-weight: 700; font-size: clamp(26px, 9cqw, 62px); line-height: .95; font-variation-settings: 'wdth' 112; color: var(--gc); text-shadow: 0 5px 0 rgba(0, 0, 0, .45); text-wrap: balance; }
.intro .ts { max-width: 32ch; font-size: clamp(13px, 3.5cqw, 21px); color: var(--soft); text-wrap: balance; }
.q { font-weight: 700; text-align: center; font-size: clamp(16px, 5.6cqw, 34px); line-height: 1.12; text-wrap: balance; transform-origin: 50% 60%; }
.ans-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6cqw; }
.ans { position: relative; display: flex; align-items: center; gap: 2.4cqw; min-height: 11cqw; padding: 1.8cqw 3cqw; border-radius: 3.4cqw; background: var(--cream); color: var(--night); font-weight: 700; font-size: clamp(13px, 4.3cqw, 25px); line-height: 1.15; box-shadow: 0 0 0 1cqw var(--c, var(--violet)), .9cqw 1.2cqw 0 1cqw rgba(0, 0, 0, .3); transition: box-shadow .45s cubic-bezier(.32, .72, 0, 1); }
.ans .txt { flex: 1; display: inline-block; transform-origin: 50% 60%; }
.code-chip { flex: none; display: inline-block; font-weight: 700; font-size: clamp(10px, 2.6cqw, 15px); color: var(--night); background: var(--c); border-radius: 99px; padding: .3cqw 1.8cqw; transform-origin: 50% 60%; }
.ans .slot { flex: none; display: flex; }
.ans.win { box-shadow: 0 0 0 1cqw var(--lime), 0 0 5cqw 1cqw rgba(166, 255, 61, .55); }
.avs { display: flex; justify-content: center; gap: 4.4cqw; min-height: 14cqw; }
.av { display: flex; flex-direction: column; align-items: center; gap: .6cqw; font-weight: 700; font-size: clamp(10px, 2.7cqw, 15px); }
.av img { width: clamp(34px, 10.5cqw, 66px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.av b { background: var(--c); color: var(--night); padding: .1cqw 1.6cqw; border-radius: 99px; }
.slot .av img, .votes .av img { width: clamp(26px, 8cqw, 46px); }
.slot .av b, .votes .av b { display: none; }
.verdict { position: absolute; left: 50%; bottom: 3.6cqw; translate: -50% 0; z-index: 4; background: var(--lime); color: var(--night); font-weight: 700; font-size: clamp(16px, 5.4cqw, 32px); padding: 1cqw 4cqw; border-radius: 99px; white-space: nowrap; box-shadow: 0 0 0 .9cqw var(--cream), .8cqw 1cqw 0 .9cqw rgba(0, 0, 0, .35); transform: scale(0); }
.pts { position: absolute; z-index: 7; font-weight: 700; font-size: clamp(26px, 10cqw, 70px); color: var(--lime); text-shadow: 0 5px 0 rgba(0, 0, 0, .5); white-space: nowrap; pointer-events: none; }
.spark { position: absolute; z-index: 6; width: 1.6cqw; height: 2.6cqw; min-width: 6px; min-height: 9px; border-radius: 2px; pointer-events: none; }
.crown { position: absolute; z-index: 3; top: -5.5cqw; right: 1cqw; font-size: clamp(22px, 8cqw, 50px); rotate: 14deg; pointer-events: none; }

/* ¿Qué preferirías? */
.wyr { display: flex; flex-direction: column; align-items: stretch; }
.opt { position: relative; min-height: 22cqw; display: grid; place-content: center; justify-items: center; gap: .8cqw; padding: 3cqw 3cqw 2.4cqw; border-radius: 4cqw; background: var(--c); color: var(--night); text-align: center; font-weight: 700; font-size: clamp(15px, 5cqw, 30px); line-height: 1.1; box-shadow: 0 0 0 1cqw var(--cream), 1cqw 1.3cqw 0 1cqw rgba(0, 0, 0, .35); transition: box-shadow .45s cubic-bezier(.32, .72, 0, 1); }
.opt .otxt { display: inline-block; transform-origin: 50% 60%; text-wrap: balance; }
.opt .pct { font-size: clamp(20px, 7.4cqw, 50px); font-variant-numeric: tabular-nums; line-height: 1; }
.opt .votes { display: flex; justify-content: center; gap: 1.2cqw; min-height: 8cqw; }
.or { z-index: 2; align-self: center; margin: -2.6cqw 0; padding: .4cqw 3.2cqw; border-radius: 99px; background: var(--night); color: var(--cream); font-weight: 700; font-size: clamp(14px, 4.6cqw, 28px); box-shadow: 0 0 0 .8cqw var(--cream); }
.opt.win { box-shadow: 0 0 0 1cqw var(--lime), 0 0 6cqw 1cqw rgba(166, 255, 61, .55); }
@container (min-width: 560px) {
  .wyr { flex-direction: row; align-items: center; }
  .wyr .opt { flex: 1; min-height: 34cqw; }
  .or { margin: 0 -2.6cqw; }
}

/* Buen Gusto */
.mg { display: flex; flex-direction: column; align-items: center; gap: 4.6cqw; }
.prompt { width: min(100%, 86cqw); padding: 3.6cqw 4cqw; border-radius: 3cqw; background: #0c0620; color: var(--cream); font-weight: 700; font-size: clamp(15px, 4.8cqw, 29px); line-height: 1.18; text-align: center; text-wrap: balance; rotate: -1.5deg; box-shadow: 0 0 0 1cqw var(--cream), 1cqw 1.3cqw 0 1cqw rgba(0, 0, 0, .4); transform-origin: 50% 60%; }
.blank { display: inline-block; min-width: 16cqw; border-bottom: .8cqw solid var(--sun); vertical-align: baseline; }
.blank.on { min-width: 0; color: var(--sun); }
.hand { display: flex; justify-content: center; gap: 2.6cqw; width: 100%; }
.mcard { position: relative; width: 28cqw; aspect-ratio: 3 / 4; transform-style: preserve-3d; }
.mcard:nth-child(1) { rotate: -5deg; } .mcard:nth-child(3) { rotate: 5deg; }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.2cqw; border-radius: 2.4cqw; background: var(--cream); color: var(--night); font-weight: 700; font-size: clamp(11px, 3.3cqw, 19px); line-height: 1.12; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 0 0 .8cqw var(--c), .7cqw .9cqw 0 .8cqw rgba(0, 0, 0, .35); }
.face.back { transform: rotateY(180deg); }
.face .code-chip { align-self: flex-start; }
.face .mark { margin-top: auto; font-size: clamp(8px, 2cqw, 12px); opacity: .45; }
.mcard.win { z-index: 2; }
@container (min-width: 560px) { .mcard { width: 23cqw; aspect-ratio: 1 / 1.02; } .prompt { width: 70cqw; } }

/* ---------- the overview: all 17 games as cards ---------- */
.deck { display: grid; justify-items: center; padding-left: 0; padding-right: 0; }
.deck h2, .deck .lead { padding: 0 16px; }
.track { position: relative; display: flex; gap: 22px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 18px 20px 34px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .track { flex-wrap: wrap; justify-content: center; overflow: visible; max-width: 1240px; gap: 20px 18px; } }
@media (min-width: 1200px) { .card { width: 176px; height: 230px; } .card .nm { font-size: 19px; } .card .back .ds { font-size: 14.5px; } }
.card { position: relative; flex: none; width: 196px; height: 252px; perspective: 1100px; scroll-snap-align: start; }
.card .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.card:nth-child(odd) .in { rotate: -1.6deg; } .card:nth-child(even) .in { rotate: 1.4deg; }
.card .face { padding: 15px; border-radius: 24px; gap: 0; font-size: 18px; line-height: 1.3; box-shadow: 0 0 0 5px var(--cream), 6px 8px 0 5px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .35); }
.card .front { background: var(--c); color: var(--night); }
.card .back { background: var(--plum); color: var(--cream); box-shadow: 0 0 0 5px var(--cream), 6px 8px 0 5px rgba(0, 0, 0, .4); }
.card .chn { font-weight: 700; font-size: 13px; opacity: .65; font-variant-numeric: tabular-nums; }
.card .art { position: relative; flex: 1 1 0; min-height: 0; margin: 2px -6px 6px; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .2)); }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card .nm { margin: 0; font-weight: 700; font-size: 21px; line-height: 1.05; font-variation-settings: 'wdth' 106; }
.card .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.card .tags span { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; background: rgba(18, 10, 46, .16); }
.card .tags .t-adult { background: var(--night); color: var(--pink); }
.card .tags .t-tv { background: var(--night); color: var(--lime); }
.card .back .nm { font-size: 18px; color: var(--c); }
.card .back .ds { margin: 10px 0 auto; font-size: 15.5px; line-height: 1.35; }
.card .back .turn { font-size: 13px; opacity: .6; }
.card .hit { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; border-radius: 24px; cursor: pointer; }
.card.flipped .front, .card:not(.flipped) .back { pointer-events: none; }

/* ---------- waiting room: the join screen ---------- */
.room { display: grid; justify-items: center; gap: 26px; }
.room-head { display: grid; justify-items: center; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 460px; }
.perks li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; background: rgba(255, 247, 236, .06); box-shadow: inset 0 0 0 2px rgba(255, 247, 236, .08); font-weight: 600; font-size: 16px; line-height: 1.3; }
.perks b { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c); font-size: 22px; box-shadow: 3px 4px 0 rgba(0, 0, 0, .35); }
.perks a { color: var(--sun); }
.phone-stage { position: relative; width: min(400px, 100%); isolation: isolate; }
.phone-stage::before { content: ''; position: absolute; z-index: -2; inset: 8% -18% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 61, 139, .32), transparent); filter: blur(10px); }
.phone-peek { position: absolute; z-index: -1; right: -14%; top: 18%; width: clamp(110px, 32vw, 170px); rotate: 14deg; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .4)); }
.device { position: relative; width: 100%; margin-top: 0; padding: 14px; border-radius: 48px; background: #1b1036; box-shadow: var(--line), var(--drop); }
.device::before { content: ''; position: absolute; z-index: 2; top: 14px; left: 50%; translate: -50% 0; width: 34%; height: 24px; border-radius: 0 0 16px 16px; background: #1b1036; }
.device-screen { position: relative; overflow: hidden; min-height: 560px; padding: 46px 18px 24px; border-radius: 36px; background: linear-gradient(170deg, var(--plum), #1a0d40); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 40px rgba(0, 0, 0, .35); }
.device h2, .device h3 { margin: 0 0 6px; letter-spacing: 0; text-shadow: none; text-align: center; font-size: 28px; line-height: 1.05; font-variation-settings: 'wdth' 110; }
.device label.f { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 15px; color: var(--soft); }
.device input[type=text], .device input[type=email] { width: 100%; padding: 13px 15px; border-radius: 16px; border: 3px solid rgba(255, 247, 236, .25); background: rgba(255, 247, 236, .08); color: var(--cream); font: inherit; font-size: 19px; }
.device input::placeholder { color: rgba(255, 247, 236, .42); }
.device input:focus { outline: none; border-color: var(--sun); background: rgba(255, 247, 236, .13); }
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; }
.pick legend { padding: 0; margin: 14px 0 6px; font-weight: 600; font-size: 15px; color: var(--soft); }
.pick label { position: relative; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick span { display: block; padding: 11px 0; border: 3px solid var(--c); border-radius: 14px; text-align: center; font-weight: 700; transition: background-color .3s cubic-bezier(.32, .72, 0, 1), color .3s cubic-bezier(.32, .72, 0, 1); }
.pick input:checked + span { background: var(--c); color: var(--night); }
.pick input:focus-visible + span { outline: 4px solid var(--cream); outline-offset: 3px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14px; color: var(--soft); }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--pink); }
.go { width: 100%; margin-top: 18px; padding: 15px; border: 0; border-radius: 999px; background: var(--pink); color: var(--cream); font-weight: 700; font-size: 22px; cursor: pointer; box-shadow: 0 6px 0 #a3134f; }
.go:active { translate: 0 4px; box-shadow: 0 2px 0 #a3134f; }
.err { min-height: 20px; margin-top: 10px; text-align: center; font-size: 14px; color: #ff9cc2; }
.done { position: absolute; inset: 46px 18px 24px; display: grid; align-content: center; justify-items: center; gap: 12px; text-align: center; }
.done[hidden] { display: none; }
.check { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--night); font-size: 62px; font-weight: 700; box-shadow: var(--line), var(--drop); }
.done h2, .done h3 { margin: 10px 0 0; }
.done p { margin: 0; color: var(--soft); max-width: 28ch; }
.wa { margin-top: 6px; display: inline-block; padding: 13px 22px; border-radius: 999px; background: #15803d; color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; box-shadow: 0 5px 0 #0d5226; }
.preview { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--sun); }
/* ---------- the word game: logo letters on a board ---------- */
.play { display: grid; justify-items: center; }
.play-grid { display: grid; justify-items: center; gap: 18px; width: min(1000px, 100%); }
.play-board { width: min(540px, 100%); }
.play-side { width: min(540px, 100%); display: grid; justify-items: center; align-content: start; gap: 12px; }
.tray { padding: 10px; border-radius: 30px; background: #2a1460; box-shadow: var(--line), var(--drop), inset 0 2px 0 rgba(255, 255, 255, .12); }
.board { position: relative; aspect-ratio: 7 / 5; border-radius: 22px; background: radial-gradient(120% 120% at 50% 0%, #26114f, #130a31); box-shadow: inset 0 0 30px rgba(0, 0, 0, .45); }
.cell { position: absolute; border-radius: 12px; background: rgba(255, 247, 236, .055); box-shadow: inset 0 0 0 2px rgba(255, 247, 236, .045); }
.glow { position: absolute; z-index: 1; border-radius: 16px; background: rgba(166, 255, 61, .16); box-shadow: 0 0 0 3px var(--lime), 0 0 26px rgba(166, 255, 61, .5); pointer-events: none; }
.lt { position: absolute; z-index: 2; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.lt svg { display: block; width: 100%; height: 100%; padding: 6%; overflow: visible; filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, .42)); pointer-events: none; }
.lt.static { position: static; display: inline-block; cursor: default; }
.lt:focus-visible { outline: 4px solid var(--sun); outline-offset: -2px; border-radius: 14px; }
.game-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.count { font-weight: 700; font-size: 17px; }
.game-btns { display: flex; gap: 8px; }
.pill-btn { border: 3px solid var(--cream); background: transparent; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .3s cubic-bezier(.32, .72, 0, 1), color .3s cubic-bezier(.32, .72, 0, 1); }
.pill-btn:hover { background: var(--cream); color: var(--night); }
.clue { min-height: 1.5em; margin: 12px 0 0; color: var(--sun); font-weight: 600; white-space: pre-wrap; text-align: center; }
.wordcard { min-height: 104px; display: grid; place-items: center; }
.wc { display: inline-grid; justify-items: center; gap: 8px; padding: 14px 22px; border-radius: 24px; background: var(--cream); color: var(--night); box-shadow: 0 0 0 5px var(--lime), 6px 8px 0 5px rgba(0, 0, 0, .4); }
.wc .w { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(26px, 6vw, 36px); letter-spacing: .05em; line-height: 1; }
.wc .tr { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-weight: 600; }
.wc .tr span { display: inline-flex; align-items: baseline; gap: 6px; }
.foundlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fw { padding: 3px 10px; border-radius: 99px; border: 2px solid var(--c); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.share-btn { display: inline-block; padding: 11px 20px; border-radius: 999px; background: #15803d; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 5px 0 #0d5226; }
.share-btn[hidden] { display: none; }
@media (min-width: 980px) {
  .room { grid-template-columns: 1fr minmax(0, 400px); grid-template-areas: "head phone" "preview preview"; align-items: center; column-gap: 80px; max-width: 1080px; margin: 0 auto; }
  .room-head { grid-area: head; justify-items: start; }
  .room-head h2, .room-head .lead { text-align: left; margin-left: 0; }
  .room .phone-stage { grid-area: phone; rotate: -2.5deg; }
  .phone-peek { right: -26%; top: 22%; width: 180px; }
  .room .preview { grid-area: preview; }
  .play-grid { grid-template-columns: minmax(0, 540px) minmax(0, 360px); justify-content: center; align-items: start; column-gap: 48px; }
  .play-side { padding-top: 24px; }
}

/* ---------- how to play: a real sequence ---------- */
.how { max-width: 1040px; margin: 0 auto; }
.steps-wrap { position: relative; margin-top: 18px; }
.path { position: absolute; z-index: 0; overflow: visible; pointer-events: none; }
.path path { fill: none; stroke-linecap: round; }
.path .bg { stroke: rgba(255, 247, 236, .14); stroke-width: 6; }
.path .fg { stroke: var(--sun); stroke-width: 6; }
.path.v { left: 29px; top: 32px; width: 6px; height: calc(100% - 64px); }
.path.h { display: none; }
.steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; align-items: start; }
.ico { grid-row: span 2; position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--c); box-shadow: 0 0 0 4px var(--cream), 4px 5px 0 4px rgba(0, 0, 0, .4); }
.ico::after { content: attr(data-n); position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--night); font-weight: 700; font-size: 15px; }
.steps b { font-size: 22px; line-height: 1.15; }
.steps .d { color: var(--soft); }
.note { margin: 34px auto 0; text-align: center; color: var(--soft); max-width: 46ch; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ico { grid-row: auto; margin-bottom: 10px; }
  .path.v { display: none; }
  .path.h { display: block; left: 16.66%; top: 29px; width: 66.68%; height: 6px; }
}

footer { margin-top: 70px; padding: 30px 16px 110px; border-top: 2px solid rgba(255, 247, 236, .1); text-align: center; color: var(--soft); font-size: 15px; }
footer .us { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 640px; margin: 0 auto 14px; text-align: left; }
footer .us img { width: 74px; flex: none; }
footer a { color: var(--cream); }

.dock { position: fixed; z-index: 55; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; padding: 13px 26px; border-radius: 999px; background: var(--pink-ink); color: var(--cream); font-weight: 700; font-size: 18px; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 4px var(--cream), 5px 7px 0 4px rgba(0, 0, 0, .4); visibility: hidden; opacity: 0; }
.fx { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.fx i { position: absolute; width: 10px; height: 16px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .osd .live i { animation: none; }
  html { scroll-behavior: auto; }
}

/* very short screens (phones held sideways, small laptops) */
@media (max-height: 560px) {
  .echo, .hint { display: none; }
  .say { min-height: 0; }
}

/* ---------- closed beta page ---------- */
.beta { min-height: 100svh; padding: clamp(86px, 12svh, 120px) 16px 56px; display: grid; justify-items: center; gap: 30px; }
.beta-copy { display: grid; justify-items: center; text-align: center; max-width: 560px; }
.beta-tiles { display: flex; gap: 2px; margin-bottom: 6px; }
.beta-tiles .lt { width: clamp(64px, 17vw, 96px); height: clamp(64px, 17vw, 96px); }
.beta-tiles .lt:nth-child(odd) { rotate: -5deg; } .beta-tiles .lt:nth-child(even) { rotate: 4deg; translate: 0 6px; }
.beta h1 { margin: 6px 0 12px; font-weight: 700; font-size: clamp(38px, 8vw, 72px); line-height: .95; letter-spacing: -.01em; font-variation-settings: 'wdth' 116; text-wrap: balance;
           text-shadow: 0 2px 0 var(--grape), 0 4px 0 #2a1460, 0 6px 0 var(--ink), 0 12px 20px rgba(0, 0, 0, .45); }
.beta-perks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; text-align: left; }
.beta-perks li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; background: rgba(255, 247, 236, .06); box-shadow: inset 0 0 0 2px rgba(255, 247, 236, .08); font-weight: 600; }
.beta-perks b { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c); font-size: 22px; box-shadow: 3px 4px 0 rgba(0, 0, 0, .35); }
.beta-need { margin: 16px 0 0; color: var(--soft); }
.beta-crew { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.beta-crew img { width: clamp(60px, 15vw, 92px); filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .4)); }
.multi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; }
.multi legend, .device select + legend { padding: 0; margin: 14px 0 6px; font-weight: 600; font-size: 15px; color: var(--soft); }
.multi label { position: relative; }
.multi input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.multi span { display: block; padding: 11px 0; border: 3px solid var(--c); border-radius: 14px; text-align: center; font-weight: 700; transition: background-color .3s cubic-bezier(.32, .72, 0, 1), color .3s cubic-bezier(.32, .72, 0, 1); }
.multi input:checked + span { background: var(--c); color: var(--night); }
.multi input:focus-visible + span { outline: 4px solid var(--cream); outline-offset: 3px; }
.device select { width: 100%; padding: 13px 15px; border-radius: 16px; border: 3px solid rgba(255, 247, 236, .25); background: rgba(255, 247, 236, .08); color: var(--cream); font: inherit; font-size: 18px; }
.device select option { color: var(--night); }
.back-link { display: inline-block; margin-top: 10px; color: var(--sun); font-weight: 600; }
@media (min-width: 980px) {
  .beta { grid-template-columns: 1fr minmax(0, 400px); align-items: start; column-gap: 80px; max-width: 1080px; margin: 0 auto; }
  .beta-copy { justify-items: start; text-align: left; }
  .beta-copy .lead { text-align: left; margin-left: 0; }
  .beta .phone-stage { rotate: 2deg; }
}

/* ---------- small helpers shared by every page ---------- */
.skip { position: fixed; z-index: 80; top: 10px; left: 10px; padding: 10px 18px; border-radius: 999px; background: var(--sun); color: var(--night); font-weight: 700; text-decoration: none; translate: 0 -160%; }
.skip:focus { translate: 0 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot: only bots fill it */
.go:disabled { opacity: .72; cursor: progress; }
.fine { margin: 4px 0 0; text-align: center; font-size: 13px; }
.fine a { color: var(--soft); }
.done .confirm { font-size: 14px; }
.done .confirm[hidden] { display: none; }
footer .legal-links { font-size: 14px; }

/* first visit in another language: a small offer under the menu, never an automatic switch */
.suggest { position: fixed; z-index: 59; top: calc(max(10px, env(safe-area-inset-top)) + 64px); left: 50%; translate: -50% 0; width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--cream); color: var(--night); font-weight: 600; font-size: 15px; line-height: 1.2; box-shadow: 0 0 0 4px var(--c), 5px 7px 0 4px rgba(0, 0, 0, .4); visibility: hidden; opacity: 0; }
.suggest-go { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--c); color: var(--night); font-weight: 700; font-size: 15px; cursor: pointer; }
.suggest-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(18, 10, 46, .1); color: var(--night); font-size: 22px; line-height: 1; cursor: pointer; }

/* ---------- legal notice & privacy ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(96px, 14svh, 130px) 20px 20px; }
.legal h1 { margin: 0 0 10px; font-weight: 700; font-size: clamp(36px, 7vw, 60px); line-height: .98; letter-spacing: -.01em; font-variation-settings: 'wdth' 114; text-wrap: balance;
            text-shadow: 0 2px 0 var(--grape), 0 4px 0 #2a1460, 0 6px 0 var(--ink), 0 12px 20px rgba(0, 0, 0, .45); }
.legal .stand { margin: 0 0 26px; color: var(--soft); font-size: 15px; }
.legal .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.legal .toc a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(255, 247, 236, .08); box-shadow: inset 0 0 0 2px rgba(255, 247, 236, .14); color: var(--cream); font-weight: 600; font-size: 15px; text-decoration: none; }
.legal section { padding: 0; scroll-snap-align: none; scroll-margin-top: 90px; }
.legal h2 { margin: 46px 0 14px; text-align: left; font-size: clamp(30px, 5.4vw, 44px); }
.legal h3 { margin: 28px 0 8px; font-size: 21px; line-height: 1.2; font-variation-settings: 'wdth' 106; }
.legal p, .legal li { color: var(--soft); font-size: 17px; line-height: 1.55; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--sun); }
.legal strong { color: var(--cream); }
.legal .box { margin: 14px 0; padding: 16px 20px; border-radius: 20px; background: rgba(255, 247, 236, .06); box-shadow: inset 0 0 0 2px rgba(255, 247, 236, .08); }
.legal .box p { margin: 0; color: var(--cream); }
.legal .todo { padding: 0 6px; border-radius: 6px; background: var(--sun); color: var(--night); font-weight: 700; }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; justify-items: center; align-content: center; padding: clamp(90px, 13svh, 120px) 16px 30px; text-align: center; }
.nf-poroto { position: relative; width: clamp(120px, 34vw, 180px); margin: 26px 0 0; }
.nf-poroto img { width: 100%; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .42)); }
.nf-poroto .bubble { top: 8%; }
.nf h1 { max-width: 16ch; margin: 14px 0 12px; font-weight: 700; font-size: clamp(34px, 7vw, 64px); line-height: .98; letter-spacing: -.01em; font-variation-settings: 'wdth' 116; text-wrap: balance;
         text-shadow: 0 2px 0 var(--grape), 0 4px 0 #2a1460, 0 6px 0 var(--ink), 0 12px 20px rgba(0, 0, 0, .45); }
.nf .lead { margin-bottom: 18px; }
.nf .back-link { margin-top: 22px; }