/* ============================================================ Tuuba — tuuba.pantsy.app/home/ landing. TUUBA · F (2026-09-26). A fork of zubon/style.css (itself a fork of buksi → marketing/v2-19-src): class names and geometry unchanged, so a diff reads as COLOUR only. Palette 1b "Midnight & saffron", from design_handoff_tuuba/README.md and app/public/css/tokens.css html[data-variant="tuuba"]; every Zubon literal mapped to its Tuuba role (ground stops, fg, paper, ink, signal, seats). ============================================================ */ /* ============================================================ Pantsy — pantsy.app landing Screen-led. The app does the talking; text is supplement. Lives in Pantsy's dark-plum world (v3 tokens). ============================================================ */ :root{ /* BUKSI FORK of Pantsy's marketing tokens. Every value below is Buksi's own, 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:#05070F; /* --surface-deep */ --bg-grad: radial-gradient(ellipse 100% 45% at 50% 0%, rgba(159,214,196,0.14) 0%, transparent 100%), radial-gradient(ellipse 120% 60% at 50% -10%, #22305A 0%, #152040 35%, #0B1126 68%, #05070F 100%); --cream:#F7F1E8; --cream-dim:#EDE3D2; --ink:#1C130B; --fire:#FFB23F; /* --primary · the CTA */ --fire-hi:#FFC466; /* --pantsy-hi */ --fire-dim:#E89A26; /* .pack-peek's label; the parent sheet reads it and never defines it */ --ember:#FFB23F; /* seat orange (GAME pack, B1 Lobby row) */ --pantsy-red:#FFB23F; --pantsy-red-hi:#FFC466; --smarty-gold:#FFB23F; --violet:#C4B0FF; /* the REAL seat violet (GAME pack, B1 Lobby row) */ --aqua:#9FD6C4; /* seat cyan (GAME pack, B1 Lobby row) */ --positive:#B4FA6E; /* --role-positive */ --fg:#F7F1E8; --cream-fg:#F7F1E8; /* the parent sheet reads this and never defines it */ --fg-soft:rgba(247,241,232,0.66); --fg-faint:rgba(247,241,232,0.52); --hair:rgba(247,241,232,0.10); --hair-hi:rgba(247,241,232,0.18); --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(159,214,196,0.10) 0%, transparent 62%), radial-gradient(ellipse 44% 40% at 100% 30%, rgba(255,178,63,0.07) 0%, transparent 56%), radial-gradient(ellipse 44% 40% at 0% 78%, rgba(159,214,196,0.05) 0%, transparent 56%);} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;} @media(max-width:640px){ .wrap{padding:0 20px;} } /* ---------- type ---------- */ .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,178,63,0.34);} .btn-fire:hover{background:var(--fire-hi); box-shadow:0 14px 34px rgba(255,178,63,0.46);} .btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--hair-hi);} .btn-ghost:hover{background:rgba(247,241,232,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,7,15,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,7,15,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,#FFE3B8,#FFB23F 55%,#E89A26); -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,178,63,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,7,15,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:#05070F; padding:6px; box-shadow:0 38px 84px rgba(0,0,0,0.6), 0 0 0 2px rgba(247,241,232,0.06), 0 0 0 8px #26314F;} .phone .scrn{position:relative; width:100%; aspect-ratio:390/844; border-radius:34px; overflow:hidden; background-color:#0B1126;} /* 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:#1C130B; 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,178,63,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 .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,241,232,0.07), 0 0 0 4px #26314F;} .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(9px,1.2vw,15px);} .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,#152040 0%, #0B1126 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,178,63,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 .eyebrow{margin-bottom:26px;} @media(max-width:900px){ .hero .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,178,63,0.5); background:rgba(255,178,63,0.10);} .phase-rail .ph[data-ph="vote"].on{color:var(--smarty-gold); border-color:rgba(255,178,63,0.5); background:rgba(255,178,63,0.10);} .phase-rail .ph[data-ph="reveal"].on{color:var(--pantsy-red-hi); border-color:rgba(255,196,102,0.5); background:rgba(255,178,63,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,178,63,0.24) 0%, transparent 66%); filter:blur(22px);} .demo-stage .phone{width:100%;} .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 #FFC466. */ /* 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 (#1B2547 / #0B1022) 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 #FFC466. */ .cfg-wrap{margin-top:30px;} .cfg{width:100%; border-radius:22px; background:rgba(247,241,232,0.045); border:1px solid rgba(247,241,232,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,241,232,0.06);} .cfg-row--chaos{position:relative; padding:7px 14px 9px; border-top:1px solid rgba(247,241,232,0.2); background:rgba(255,178,63,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:#F7F1E8;} /* 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 ", 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:#FFC466; white-space:nowrap;} .cfg-hint{font-size:11.5px; line-height:1.4; color:#A8B0C8;} .cfg-row--chaos.is-on .cfg-hint{color:#FFC466;} .cfg-hint > span[hidden]{display:none;} .cfg-seg{display:flex; gap:4px; padding:4px; margin-top:8px; background:#0B1126; border-radius:14px; border:1px solid rgba(247,241,232,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:#A8B0C8; transition:background 160ms ease, color 160ms ease;} .cfg-cell.on{background:#F7F1E8; color:#1C130B;} .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,241,232,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,241,232,0.32);} .vibe:active{transform:translateY(1px);} .vibe.on{background:rgba(255,178,63,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,178,63,0.5); color:var(--smarty-gold);} .vibe-dice:hover{border-color:var(--smarty-gold); background:rgba(255,178,63,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(28,19,11,0.30);} .final-card::before{content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg, transparent 0 9px, rgba(28,19,11,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(28,19,11,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(28,19,11,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(28,19,11,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:#1C130B; color:#F7F1E8;} .final-card .btn-ink:hover{background:#1B2547;} .final-card .btn-onbright{background:rgba(28,19,11,0.10); color:#1C130B; border:1px solid rgba(28,19,11,0.22);} .final-card .btn-onbright:hover{background:rgba(28,19,11,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:#F7F1E8;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:#F7F1E8} .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,241,232,.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(28,19,11,.9);border-color:rgba(28,19,11,.5);color:#F7F1E8;box-shadow:0 6px 18px rgba(28,19,11,.18)} .final-apps .store-badge:hover{background:#1B2547;border-color:rgba(28,19,11,.7);transform:translateY(-1px)} .final-apps .store-badge .sb-ic{width:26px;height:26px;fill:#F7F1E8} .final-apps .store-badge .sb-txt b{font-size:17px} .final-create{font:600 14px/1 'Inter Tight',system-ui,sans-serif;color:rgba(28,19,11,.6); text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(28,19,11,.25)} .final-create:hover{color:rgba(28,19,11,.9);text-decoration-color:rgba(28,19,11,.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,7,15,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .qr-overlay.mobile .qr-modal{position:relative;width:min(92%,360px);background:#F7F1E8;border:1px solid rgba(28,19,11,.10); border-radius:24px;padding:44px 30px 34px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55);color:#1C130B} .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:#1C130B} .qr-overlay.mobile .qr-sub{margin:0 0 24px;color:rgba(28,19,11,.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:#1C130B;color:#F7F1E8;text-decoration:none;box-shadow:0 8px 22px rgba(28,19,11,.28)} .qr-overlay.mobile .store-cta svg{width:25px;height:25px;fill:#F7F1E8;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(28,19,11,.55);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:0} .qr-overlay.mobile .qr-continue:hover{color:#1C130B} /* ---------- 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,241,232,0.04); transition:color 300ms ease, background 300ms ease, border-color 300ms ease;} .pm-chip.chosen{color:var(--cream); background:rgba(255,178,63,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,178,63,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,7,15,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:#F7F1E8; border:1px solid rgba(28,19,11,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(28,19,11,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(28,19,11,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(28,19,11,0.05); border:1px solid rgba(28,19,11,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(28,19,11,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(28,19,11,0.45); font-size:24px; line-height:1; cursor:pointer; border-radius:8px;} .qr-close:hover{color:var(--ink); background:rgba(28,19,11,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,241,232,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,241,232,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,241,232,0.04); transition:border-color 140ms ease, background 140ms ease;} .lang-btn:hover{border-color:rgba(247,241,232,0.30); background:rgba(247,241,232,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 #0B1022;} .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(5,7,15,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,178,63,0.18), rgba(255,178,63,0.05)); border:1px solid rgba(255,178,63,0.30); margin-bottom:5px;} .lang-suggest-row[hidden]{display:none;} .lang-current-row{background:rgba(247,241,232,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,241,232,0.06); color:var(--fg);} .lang-opt.is-on{color:var(--fg); background:rgba(255,178,63,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