/* Rewind story theme: fonts, the 9 palettes, stage typography, template visuals, player chrome + lobby.
   Stage = 1080 x 1920 design px (scaled). Palettes are CSS variables on .pal-<name>; templates only use vars. */
/* fonts: /fonts/fonts.css (self-hosted by scripts/vendor.mjs) */

:root {
  --f-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --f-ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-emoji: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* ---------- palettes: bg gradient, ink (AA on bg), hi (display highlight >= 3:1), accent (shapes, stickers) ---------- */
.pal-ember  { --bg1:#FF5A1F; --bg2:#F2264B; --ink:#1A0905; --ink2:rgba(26,9,5,.78); --hi:#1A0905; --accent:#FFE14D; --accent2:#2416D9; --shape:#FF8A3D; --shape2:#FFB199; --card:#FFF4EA; --cardInk:#1A0905; --line:rgba(26,9,5,.16); --onAccent:#1A0905; --onAccent2:#FFFFFF; }
.pal-violet { --bg1:#4A1FFF; --bg2:#7A3CF0; --ink:#FFFFFF; --ink2:rgba(255,255,255,.82); --hi:#C8FF3D; --accent:#C8FF3D; --accent2:#FF6FB1; --shape:#6B3DFF; --shape2:#9D6BFF; --card:#FFFFFF; --cardInk:#160A3D; --line:rgba(255,255,255,.2); --onAccent:#160A3D; --onAccent2:#2A0618; }
.pal-lime   { --bg1:#C6FF3D; --bg2:#8EEB3F; --ink:#0F1F07; --ink2:rgba(15,31,7,.78); --hi:#4A1FFF; --accent:#4A1FFF; --accent2:#FF4E21; --shape:#E4FF8F; --shape2:#7BD62E; --card:#FFFFFF; --cardInk:#0F1F07; --line:rgba(15,31,7,.16); --onAccent:#FFFFFF; --onAccent2:#FFFFFF; }
.pal-ocean  { --bg1:#0D2CF2; --bg2:#1B5BFF; --ink:#FFFFFF; --ink2:rgba(255,255,255,.84); --hi:#FFE14D; --accent:#FFE14D; --accent2:#FF6FB1; --shape:#2E4DFF; --shape2:#4C86FF; --card:#FFFFFF; --cardInk:#08154F; --line:rgba(255,255,255,.22); --onAccent:#08154F; --onAccent2:#2A0618; }
.pal-rose   { --bg1:#FF4FA3; --bg2:#FF86C2; --ink:#26041A; --ink2:rgba(38,4,26,.8); --hi:#1212B8; --accent:#1B1BE0; --accent2:#FFE14D; --shape:#FF77B8; --shape2:#FFB3D6; --card:#FFFFFF; --cardInk:#26041A; --line:rgba(38,4,26,.15); --onAccent:#FFFFFF; --onAccent2:#26041A; }
.pal-night  { --bg1:#0B0820; --bg2:#21185A; --ink:#F4F0FF; --ink2:rgba(244,240,255,.78); --hi:#FF4FA3; --accent:#FF4FA3; --accent2:#46E6C3; --shape:#2A2070; --shape2:#3B2E94; --card:#1B1442; --cardInk:#F4F0FF; --line:rgba(244,240,255,.16); --onAccent:#22041A; --onAccent2:#04261F; }
.pal-sun    { --bg1:#FFD23F; --bg2:#FFAB1A; --ink:#221300; --ink2:rgba(34,19,0,.8); --hi:#2416D9; --accent:#E8164F; --accent2:#2416D9; --shape:#FFE680; --shape2:#FFC54A; --card:#FFFFFF; --cardInk:#221300; --line:rgba(34,19,0,.15); --onAccent:#FFFFFF; --onAccent2:#FFFFFF; }
.pal-mint   { --bg1:#3DFFD0; --bg2:#A7FFE6; --ink:#04281F; --ink2:rgba(4,40,31,.8); --hi:#4A1FFF; --accent:#FF4D2E; --accent2:#4A1FFF; --shape:#7DFFE0; --shape2:#1FE6B5; --card:#FFFFFF; --cardInk:#04281F; --line:rgba(4,40,31,.15); --onAccent:#FFFFFF; --onAccent2:#FFFFFF; }
.pal-paper  { --bg1:#F4EFE6; --bg2:#E9E0CF; --ink:#151515; --ink2:rgba(21,21,21,.74); --hi:#D63A15; --accent:#E8431F; --accent2:#2416D9; --shape:#E6DCC8; --shape2:#D9CBB2; --card:#FFFFFF; --cardInk:#151515; --line:rgba(21,21,21,.14); --onAccent:#FFFFFF; --onAccent2:#FFFFFF; }

/* ---------- engine primitives (kit.js), scoped to the stage so the host page needs no engine CSS ---------- */
.rw-stage .layer { position: absolute; inset: 0; }
.rw-stage .abs { position: absolute; }
.rw-stage .anchor { position: absolute; width: 0; height: 0; }
.rw-stage .ctr { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: max-content; }
.rw-stage .scene { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 50% 45%; }
.rw-stage .kw { display: inline-block; }
.rw-stage .sl-line { padding-bottom: .06em; }
.rw-stage .lot svg { display: block; }
.rw-stage img.art3d { display: block; object-fit: contain; }
.rw-stage .punch-word { color: var(--ink); }
.rw-stage button { font-family: var(--f-ui); }

/* ---------- background (paint) ---------- */
.rw-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rw-bgl { position: absolute; inset: 0; background: linear-gradient(170deg, var(--bg1) 0%, var(--bg1) 38%, var(--bg2) 100%); opacity: 1; transition: opacity .9s cubic-bezier(.65,0,.35,1); }
.rw-bgl.out { opacity: 0; }
.rw-shapes { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform: translateY(var(--sy, 0px)); }
.rw-shape { position: absolute; will-change: transform; }
.rw-shape.blob { border-radius: 46% 54% 38% 62% / 52% 38% 62% 48%; }
.rw-shape.ring { border-radius: 50%; background: transparent !important; }
.rw-shape.pill { border-radius: 999px; }
.rw-shape.star svg, .rw-shape.squig svg { display: block; overflow: visible; }
@keyframes rwDriftA { 0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); } 50% { transform: translate3d(60px,-80px,0) rotate(18deg) scale(1.06); } 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); } }
@keyframes rwDriftB { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-90px,60px,0) rotate(-24deg); } 100% { transform: translate3d(0,0,0) rotate(0deg); } }
@keyframes rwSpin { to { transform: rotate(360deg); } }
@keyframes rwBob { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-36px,0); } }
.rw-grain { position: absolute; inset: -20%; opacity: .16; mix-blend-mode: overlay; pointer-events: none; background-size: 180px 180px; }
.rw-reduced .rw-shape, .rw-still .rw-shape { animation: none !important; }

/* ---------- stage typography ---------- */
.rw-scene { color: var(--ink); font-family: var(--f-ui); }
.rw-d { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; letter-spacing: -0.025em; line-height: .92; font-optical-sizing: auto; }
.rw-dw { font-family: var(--f-display); font-weight: 800; font-stretch: 100%; letter-spacing: -0.03em; line-height: .9; }
.rw-m { font-family: var(--f-mono); font-weight: 700; letter-spacing: .02em; }
.rw-u { font-family: var(--f-ui); }
.rw-e { font-family: var(--f-emoji); font-weight: 400; line-height: 1; }
.rw-num { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; letter-spacing: -0.04em; line-height: .82; font-variant-numeric: tabular-nums lining-nums; }
.rw-hi { color: var(--hi); }
.rw-kick { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-weight: 800; font-size: 34px; letter-spacing: .15em; text-transform: uppercase; padding: 15px 28px 14px; border-radius: 999px; background: var(--ink); color: var(--bg1); white-space: nowrap; }
.rw-kick i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.rw-title { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; letter-spacing: -0.025em; line-height: .94; color: var(--ink); text-wrap: balance; }
.rw-sub { font-family: var(--f-ui); font-weight: 600; color: var(--ink2); line-height: 1.25; text-wrap: pretty; }
.rw-label { font-family: var(--f-ui); font-weight: 700; color: var(--ink); line-height: 1.1; }
.rw-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; background: var(--card); color: var(--cardInk); font-family: var(--f-ui); font-weight: 800; font-size: 34px; white-space: nowrap; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.rw-chip b { font-family: var(--f-mono); font-weight: 800; }
.rw-sticker { display: inline-block; padding: 16px 30px; border-radius: 22px; background: var(--accent); color: var(--onAccent); font-family: var(--f-display); font-weight: 800; font-stretch: 90%; font-size: 44px; letter-spacing: -0.01em; box-shadow: 0 8px 0 rgba(0,0,0,.22); white-space: nowrap; }
.rw-sticker.alt { background: var(--accent2); color: var(--onAccent2); }
.rw-sticker.ink { background: var(--ink); color: var(--bg1); }

/* avatars + monograms */
.rw-av { position: relative; border-radius: 50%; overflow: hidden; background: var(--card); flex: none; }
.rw-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-av .mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-stretch: 85%; color: #fff; letter-spacing: -0.03em; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.rw-av.ring { box-shadow: 0 0 0 var(--ringw, 10px) var(--accent), 0 0 0 calc(var(--ringw, 10px) * 2) var(--ink); }

/* post card (sticker style) */
.rw-card { position: absolute; background: var(--card); color: var(--cardInk); border-radius: 46px; padding: 46px 50px 40px; box-shadow: 0 0 0 5px var(--ink), 14px 18px 0 0 var(--ink); font-family: var(--f-ui); }
.rw-card .hd { display: flex; align-items: center; gap: 22px; }
.rw-card .nm { font-weight: 800; font-size: 40px; line-height: 1.05; }
.rw-card .hn { font-family: var(--f-mono); font-weight: 500; font-size: 28px; opacity: .62; margin-top: 4px; }
.rw-card .tx { font-weight: 600; line-height: 1.24; margin-top: 30px; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.rw-card .qt { margin-top: 24px; border-radius: 26px; border: 3px solid currentColor; padding: 20px 24px; font-size: 28px; line-height: 1.3; opacity: .78; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rw-card .qt b { font-family: var(--f-mono); font-weight: 700; }
.rw-card .media { margin-top: 26px; border-radius: 28px; overflow: hidden; background: #0001; }
.rw-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-card .mt { display: flex; gap: 34px; margin-top: 30px; font-family: var(--f-mono); font-weight: 700; font-size: 30px; align-items: center; flex-wrap: wrap; }
.rw-card .mt span { display: inline-flex; align-items: center; gap: 10px; }
.rw-card .mt svg { width: 34px; height: 34px; }
.rw-card .mt .on { color: var(--accent2); }
.pal-ember .rw-card .mt .on, .pal-sun .rw-card .mt .on { color: #C8102E; }
.rw-card .dt { font-family: var(--f-mono); font-weight: 500; font-size: 26px; opacity: .6; margin-left: auto; }
.rw-card .rp { font-family: var(--f-mono); font-size: 26px; font-weight: 700; opacity: .6; margin-top: 22px; }

/* ranked rows */
.rw-row { position: absolute; left: 80px; right: 80px; display: flex; align-items: center; gap: 26px; }
.rw-row .n { width: 92px; text-align: right; flex: none; font-family: var(--f-display); font-weight: 800; font-stretch: 80%; color: var(--hi); line-height: .8; }
.rw-row .lb { flex: 1; min-width: 0; position: relative; }
.rw-row .lb .t { position: relative; font-family: var(--f-ui); font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
.rw-row .lb .s { position: relative; font-family: var(--f-mono); font-weight: 500; font-size: 26px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.rw-row .bar { position: absolute; left: -12px; top: 50%; height: 112%; transform-origin: 0 50%; border-radius: 20px; background: var(--line); translate: 0 -50%; }
.rw-row .v { flex: none; font-family: var(--f-mono); font-weight: 800; color: var(--ink); text-align: right; }

/* calendar */
.rw-cal-m { position: absolute; }
.rw-cal-m .ml { font-family: var(--f-mono); font-weight: 800; font-size: 26px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.rw-cal-m .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rw-cal-m .c { aspect-ratio: 1; border-radius: 8px; background: var(--line); }

/* persona card */
.rw-pcard { position: absolute; border-radius: 56px; overflow: hidden; background: var(--card); color: var(--cardInk); box-shadow: 0 0 0 6px var(--ink), 18px 22px 0 var(--ink); }
.rw-pcard .holo { position: absolute; inset: 0; background: conic-gradient(from 210deg at 50% 40%, #ff6fb1, #ffe14d, #46e6c3, #6b3dff, #ff6fb1); opacity: .9; }
.rw-pcard .inner { position: absolute; inset: 22px; border-radius: 40px; background: var(--card); overflow: hidden; }
.rw-pcard .sheen { position: absolute; top: -20%; bottom: -20%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); mix-blend-mode: soft-light; pointer-events: none; }
.rw-badge { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 22px; border-radius: 26px; background: color-mix(in srgb, var(--cardInk) 7%, transparent); min-height: 112px; }
.rw-badge .bt { font-family: var(--f-ui); font-weight: 800; font-size: 31px; line-height: 1.08; }
.rw-badge .bv { font-family: var(--f-mono); font-weight: 500; font-size: 23px; opacity: .72; line-height: 1.2; }

/* quiz */
.rw-opt { position: absolute; left: 90px; right: 90px; display: flex; align-items: center; gap: 26px; padding: 26px 34px; border-radius: 40px; background: var(--card); color: var(--cardInk); font-family: var(--f-ui); font-weight: 800; font-size: 46px; box-shadow: 0 0 0 5px var(--ink), 10px 12px 0 var(--ink); cursor: pointer; pointer-events: auto; transition: transform .18s cubic-bezier(.4,0,.2,1), background .18s; -webkit-tap-highlight-color: transparent; }
.rw-opt:active { transform: translate(6px, 8px); box-shadow: 0 0 0 5px var(--ink), 4px 4px 0 var(--ink); }
.rw-opt.sel { background: var(--accent); color: var(--onAccent); }
.rw-opt.dim { opacity: .45; }
.rw-opt .k { flex: none; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg1); font-family: var(--f-mono); font-size: 34px; }
.rw-btn { position: absolute; padding: 26px 54px; border-radius: 999px; background: var(--ink); color: var(--bg1); font-family: var(--f-ui); font-weight: 800; font-size: 44px; cursor: pointer; pointer-events: auto; border: 0; box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.rw-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 4px var(--ink); }
.rw-slider { position: absolute; left: 110px; right: 110px; height: 150px; pointer-events: auto; touch-action: none; cursor: grab; }
.rw-slider .tr { position: absolute; left: 0; right: 0; top: 63px; height: 24px; border-radius: 12px; background: var(--line); box-shadow: inset 0 0 0 3px var(--ink); }
.rw-slider .fl { position: absolute; left: 0; top: 63px; height: 24px; border-radius: 12px; background: var(--ink); }
.rw-slider .th { position: absolute; top: 15px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--ink), 6px 8px 0 var(--ink); display: grid; place-items: center; font-size: 56px; }

/* live dashboard (template + lobby) */
.rw-tape { position: absolute; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.rw-tape .ti { margin: 0 0 18px; padding: 22px 26px; border-radius: 28px; background: var(--card); color: var(--cardInk); font-family: var(--f-ui); font-weight: 600; font-size: 28px; line-height: 1.28; box-shadow: 0 0 0 4px var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw-tape .ti b { font-family: var(--f-mono); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; display: block; opacity: .6; margin-bottom: 4px; -webkit-line-clamp: 1; }

/* =====================================================================================================
   PLAYER CHROME (screen px, not stage px)
   ===================================================================================================== */
.rw-root { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: #07060f; font-family: var(--f-ui); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.rw-root * { box-sizing: border-box; }
.rw-room { position: absolute; inset: 0; transition: background 1s; }
.rw-room .glow { position: absolute; inset: -10%; background: radial-gradient(60% 50% at 30% 30%, var(--bg1), transparent 70%), radial-gradient(50% 50% at 75% 75%, var(--bg2), transparent 70%); opacity: .55; filter: blur(40px); transition: opacity 1s; }
.rw-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; overflow: clip; background: var(--bg1); }
.rw-framed .rw-frame { box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 9px #0f0d1c, 0 0 0 10px rgba(255,255,255,.08); }
.rw-room { background: #07060f; }
.rw-stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; overflow: hidden; overflow: clip; }
.rw-scenes { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; }
.rw-scenes > .scene { position: absolute; inset: 0; }
.rw-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 10; color: #fff; }
.rw-chrome > * { pointer-events: auto; }
.rw-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 18px; background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,0)); pointer-events: none; }
.rw-top > * { pointer-events: auto; }
.rw-segs { display: flex; gap: 4px; height: 3px; }
.rw-segs div { flex: 1; background: rgba(255,255,255,.35); border-radius: 3px; overflow: hidden; }
.rw-segs div i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.rw-chap { display: flex; gap: 3px; margin-top: 6px; height: 2px; opacity: .9; }
.rw-chap div { flex: 1; background: rgba(255,255,255,.18); border-radius: 2px; }
.rw-chap div.done { background: rgba(255,255,255,.7); }
.rw-chap div.cur { background: #fff; }
.rw-chap div.wait { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 4px, transparent 4px 7px); }
.rw-head { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rw-head .av { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.85); background: #fff2; }
.rw-head .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-head .who { min-width: 0; flex: 1; line-height: 1.15; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.rw-head .who b { display: block; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-head .who span { display: block; font-size: 12px; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-ib { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.22); color: #fff; border: 0; cursor: pointer; flex: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rw-ib svg { width: 19px; height: 19px; }
.rw-ib.off { opacity: .55; }
.rw-tapl, .rw-tapr { position: absolute; top: 90px; bottom: 120px; z-index: 1; }
.rw-tapl { left: 0; width: 30%; } .rw-tapr { right: 0; width: 70%; }
.rw-cap { position: absolute; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); text-align: center; pointer-events: none !important; font-family: var(--f-ui); font-weight: 800; font-size: clamp(15px, 4.3vw, 19px); line-height: 1.32; min-height: 1.4em; z-index: 3; }
@media (min-width: 720px) and (min-height: 560px) { .rw-cap { font-size: 17px; } }
.rw-cap .cl { display: inline; padding: 4px 10px; border-radius: 11px; background: rgba(10,8,20,.7); -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.62; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rw-cap .w { color: rgba(255,255,255,.62); transition: color .12s; }
.rw-cap .w.spoken { color: #fff; }
.rw-cap .w.active { color: #C8FF3D; }
.rw-cap.off { display: none; }
.rw-bot { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; z-index: 4; }
.rw-pill { flex: 1; height: 46px; border-radius: 999px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-ui); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; background: rgba(255,255,255,.94); color: #0b0820; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.rw-pill.dark { background: rgba(11,8,32,.72); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.rw-pill svg { width: 18px; height: 18px; }
.rw-toast { position: absolute; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); opacity: 0; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.96); color: #0b0820; font-weight: 800; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: opacity .25s, transform .35s cubic-bezier(.16,1,.3,1); pointer-events: none !important; white-space: nowrap; z-index: 20; display: flex; align-items: center; gap: 8px; }
.rw-toast.on { opacity: 1; transform: translate(-50%, 0); }
.rw-toast i { width: 8px; height: 8px; border-radius: 50%; background: #2bd576; }
.rw-paused { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(0,0,0,.4); display: grid; place-items: center; opacity: 0; transition: opacity .2s; pointer-events: none !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 5; }
.rw-paused.on { opacity: 1; }
.rw-paused svg { width: 30px; height: 30px; fill: #fff; }
.rw-buf { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 4px solid rgba(255,255,255,.3); border-top-color: #fff; animation: rwSpin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none !important; z-index: 5; }
.rw-buf.on { opacity: 1; }

/* cover (tap to play) + end screen */
.rw-cover { position: absolute; inset: 0; z-index: 30; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; color: var(--ink); cursor: pointer; }
.rw-cover.on { display: flex; }
.rw-cover .bg { position: absolute; inset: 0; background: linear-gradient(170deg, var(--bg1), var(--bg2)); }
.rw-cover > :not(.bg) { position: relative; }
.rw-cover .logo { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: 15px; letter-spacing: .28em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.rw-cover .cav { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--accent), 0 0 0 12px var(--ink); background: var(--card); }
.rw-cover .cav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-cover h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: clamp(30px, 9vw, 42px); line-height: .95; letter-spacing: -0.03em; max-width: 320px; }
.rw-cover p { font-weight: 600; font-size: 15px; color: var(--ink2); max-width: 290px; line-height: 1.35; }
.rw-play { width: 76px; height: 76px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 0 rgba(0,0,0,.2); animation: rwPulse 1.8s ease-in-out infinite; }
.rw-play svg { width: 30px; height: 30px; fill: var(--bg1); margin-left: 4px; }
@keyframes rwPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.rw-end { position: absolute; inset: 0; z-index: 25; display: none; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,.6)); }
.rw-end.on { display: flex; }
.rw-end h3 { color: #fff; font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: 30px; line-height: .95; letter-spacing: -0.02em; margin: 0 4px 6px; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.rw-end .rw-pill { flex: none; }

/* lobby (screen px) */
.rw-lobby { position: absolute; inset: 0; z-index: 8; display: none; flex-direction: column; padding: calc(84px + env(safe-area-inset-top, 0px)) 18px calc(78px + env(safe-area-inset-bottom, 0px)); color: var(--ink); overflow: hidden; }
.rw-lobby.on { display: flex; }
.rw-lobby .lk { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--bg1); }
.rw-lobby .lk i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rwBlink 1s steps(2) infinite; }
@keyframes rwBlink { 50% { opacity: .2; } }
.rw-lobby .lt { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: clamp(30px, 9.4vw, 40px); line-height: .93; letter-spacing: -0.03em; margin: 12px 0 2px; text-wrap: balance; }
.rw-lobby .ls { font-weight: 600; font-size: 14px; color: var(--ink2); line-height: 1.35; }
.rw-lobby .big { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.rw-lobby .big b { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-size: clamp(56px, 19vw, 84px); line-height: .82; letter-spacing: -0.04em; color: var(--hi); font-variant-numeric: tabular-nums; }
.rw-lobby .big span { font-weight: 800; font-size: 15px; line-height: 1.1; }
.rw-lobby .row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rw-lobby .stat { flex: 1; min-width: 90px; padding: 10px 12px; border-radius: 16px; background: var(--card); color: var(--cardInk); box-shadow: 0 0 0 2px var(--ink); }
.rw-lobby .stat b { display: block; font-family: var(--f-mono); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rw-lobby .stat span { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-lobby .bars { margin-top: 12px; display: grid; gap: 7px; }
.rw-lobby .bar { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12px; font-weight: 800; align-items: center; }
.rw-lobby .bar em { font-style: normal; font-family: var(--f-mono); font-weight: 700; font-size: 11px; opacity: .8; }
.rw-lobby .bar .tr { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ink); }
.rw-lobby .bar .tr i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 4px; transition: width .8s cubic-bezier(.16,1,.3,1); }
.rw-lobby .bar.done .tr i { background: var(--ink); }
.rw-lobby .tapew { position: relative; flex: 1; min-height: 70px; margin-top: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.rw-lobby .tape { position: absolute; left: 0; right: 0; top: 0; }
.rw-lobby .tape div { margin-bottom: 7px; padding: 8px 11px; border-radius: 13px; background: var(--card); color: var(--cardInk); font-size: 12.5px; font-weight: 600; line-height: 1.3; box-shadow: 0 0 0 1.5px var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw-lobby .tape div b { font-family: var(--f-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-right: 6px; }
.rw-lobby .up { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.rw-lobby .up div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.rw-lobby .up div em { font-style: normal; margin-left: auto; font-family: var(--f-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--line); }
.rw-lobby .up div.building em { background: var(--ink); color: var(--bg1); }
.rw-lobby .up div.ready em { background: var(--accent); color: var(--onAccent); }
.rw-lobby .up div i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.rw-lobby .up div.building i { background: var(--ink); animation: rwBlink 1s steps(2) infinite; }
.rw-lobby .up div.ready i { background: var(--ink); }
.rw-lobby .quiz { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; padding: 92px 18px 92px; background: linear-gradient(170deg, var(--bg1), var(--bg2)); }
.rw-lobby .quiz.on { display: flex; }
.rw-lobby .quiz .qk { align-self: flex-start; font-family: var(--f-mono); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--bg1); }
.rw-lobby .quiz h4 { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: clamp(28px, 8.6vw, 38px); line-height: .95; letter-spacing: -0.03em; margin: 14px 0 18px; text-wrap: balance; }
.rw-lobby .quiz button.o { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 10px; padding: 12px 14px; border-radius: 18px; border: 0; background: var(--card); color: var(--cardInk); font-family: var(--f-ui); font-weight: 800; font-size: 16px; text-align: left; box-shadow: 0 0 0 2.5px var(--ink), 5px 6px 0 var(--ink); cursor: pointer; }
.rw-lobby .quiz button.o img, .rw-lobby .quiz button.o .mono { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.rw-lobby .quiz button.o.sel { background: var(--accent); color: var(--onAccent); }
.rw-lobby .quiz .sl { margin: 8px 4px 18px; }
.rw-lobby .quiz .sl input { width: 100%; accent-color: var(--ink); height: 34px; }
.rw-lobby .quiz .sv { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: 64px; line-height: .9; color: var(--hi); letter-spacing: -0.04em; }
.rw-lobby .quiz .act { display: flex; gap: 10px; margin-top: 6px; }
.rw-lobby .quiz .act button { flex: 1; height: 46px; border-radius: 999px; border: 0; font-family: var(--f-ui); font-weight: 800; font-size: 15px; cursor: pointer; background: var(--ink); color: var(--bg1); }
.rw-lobby .quiz .act button.sk { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); flex: .6; }

.rw-reduced .rw-play, .rw-reduced .rw-lobby .lk i { animation: none; }
@media (prefers-reduced-motion: reduce) { .rw-shape { animation: none !important; } .rw-play { animation: none; } }

/* interactive scenes get the taps; the lobby hides scene chrome */
.rw-interactive .rw-tapl, .rw-interactive .rw-tapr, .rw-inlobby .rw-tapl, .rw-inlobby .rw-tapr { pointer-events: none !important; }
.rw-inlobby .rw-cap { display: none; }
.rw-gated .rw-cap { opacity: .0; }
/* thinking (an answer is being written) */
.rw-think { position: absolute; inset: 0; z-index: 9; display: none; flex-direction: column; justify-content: center; padding: 90px 24px 110px; color: var(--ink); background: linear-gradient(170deg, var(--bg1), var(--bg2)); }
.rw-think.on { display: flex; }
.rw-think .tk { align-self: flex-start; font-family: var(--f-mono); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--bg1); }
.rw-think .tq { margin: 14px 0 0; padding: 18px 18px 20px; border-radius: 22px; background: var(--card); color: var(--cardInk); box-shadow: 0 0 0 2.5px var(--ink), 6px 7px 0 var(--ink); font-family: var(--f-display); font-weight: 800; font-stretch: 87.5%; font-size: clamp(22px, 6.6vw, 30px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.rw-think .td { display: flex; gap: 8px; margin: 26px 0 10px 6px; }
.rw-think .td i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); animation: rwDot 1.1s ease-in-out infinite; }
.rw-think .td i:nth-child(2) { animation-delay: .15s; } .rw-think .td i:nth-child(3) { animation-delay: .3s; }
@keyframes rwDot { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-9px); opacity: 1; } }
.rw-think .ts { font-weight: 700; font-size: 13px; color: var(--ink2); margin-left: 4px; }
/* after an answer: follow-ups + back */
.rw-aend { position: absolute; inset: 0; z-index: 24; display: none; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 24px 16px calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(0,0,0,0) 20%, rgba(4,3,12,.78)); }
.rw-aend.on { display: flex; }
.rw-aend h3 { color: #fff; font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: 26px; line-height: .95; letter-spacing: -0.02em; margin: 0 4px 4px; }
.rw-aend .fu { display: flex; flex-direction: column; gap: 8px; }
.rw-fu { text-align: left; border: 0; cursor: pointer; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.95); color: #0b0820; font-family: var(--f-ui); font-weight: 700; font-size: 14.5px; line-height: 1.25; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.rw-fu::before { content: "✦ "; color: #5b2eff; }
.rw-err { color: #ffd0d0; font-size: 13px; font-weight: 600; margin: 0 4px; }
.rw-aend .acts { display: flex; gap: 8px; margin-top: 4px; }
.rw-aend .acts .rw-pill { flex: 1; }
/* lobby extras */
.rw-lobby .uh { font-family: var(--f-mono); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.rw-lobby .bestc { margin-top: 10px; padding: 9px 12px; border-radius: 14px; background: var(--accent); color: var(--onAccent); box-shadow: 0 0 0 2px var(--ink); }
.rw-lobby .bestc b { display: block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.rw-lobby .bestc span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; }
.rw-lobby .bar span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-lobby .lbars:empty, .rw-lobby .lstats:empty, .rw-lobby .lbest:empty { display: none; }
.rw-lobby .quiz button.o .mono { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.rw-end .rw-pill { height: 48px; }