/* YOUR WIFE GOES TO A BAR: page, stage, start screen, subtitles, RPG choice box, achievement plate,
   result card and the recording safe zone. Brand: the lavender glossy PSP-style panels and the
   rounded brand font (M PLUS Rounded 1c, OFL). All sizes are relative to the stage (cqw / cqh),
   so the 1080x1920 recording frame and a phone look the same. */
@font-face {
  font-family: 'M PLUS Rounded 1c';
  src: url('../../assets/brand/mplus-rounded-700.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg-deep: #7972bd; --bg-mid: #a8ace1; --bg-light: #d8c5f3; --ink: #241f55; --ink-soft: #4a4592;
  --violet: #5b50b4; --violet-dark: #3b3288; --line: rgba(255, 255, 255, 0.72);
  --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
  font-family: var(--font);
  font-synthesis: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg-deep); color: #fff; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.noscript { position: fixed; inset: auto 16px 40% 16px; text-align: center; font: 16px/1.4 var(--font); }

/* ---------------------------------------------------------------- page + stage */
#app { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: var(--bg-mid) url('../../assets/brand/background.webp') 24% 62% / cover no-repeat; }
#stage { position: relative; overflow: hidden; container-type: size; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  width: 100vw; height: 100vh; height: 100dvh; background: #050506;
  /* Reels safe zone of the 1080x1920 frame: left 110, right 160, top 220, bottom 420 px */
  --sl: 10.1852cqw; --sr: 14.8148cqw; --st: 11.4583cqh; --sb: 21.875cqh; }
html.vertical:not(.touch):not(.record) #stage { width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.45), 0 18px 70px rgba(40, 30, 110, 0.45); }
html.touch:not(.record) #stage {
  --sl: max(4.5cqw, env(safe-area-inset-left)); --sr: max(4.5cqw, env(safe-area-inset-right));
  --st: calc(env(safe-area-inset-top) + 8cqh); --sb: calc(env(safe-area-inset-bottom) + 3.5cqh); }
/* ?record: a fixed 1080x1920 stage scaled to the window (main.js sets the transform) */
html.record #app { place-items: start; background: #000; }
html.record #stage { width: 1080px; height: 1920px; transform-origin: 0 0; position: absolute; left: 0; top: 0; box-shadow: none; }
html.record, html.record * { cursor: none !important; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter 0.06s, opacity 0.5s; opacity: 0; }
#view.on { opacity: 1; } /* hidden while loading: the shader warm-up draws every scene once */
/* the interface layer: the whole stage, or a centred column on a landscape screen */
#ui { position: absolute; inset: 0; container-type: size; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui > #hud { pointer-events: none; }
html.wide #ui { left: 0; right: 0; margin: 0 auto; width: min(100%, 80cqh);
  --sl: 3.5cqw; --sr: 3.5cqw; --st: 7cqh; --sb: 5cqh; }
/* the framing zone of the wide 3D view (the director keeps faces above the choice box) */
html.wide #stage { --sl: 4cqw; --sr: 4cqw; --st: 7cqh; --sb: 34cqh; }
#view.freeze { filter: grayscale(0.9) contrast(1.18) brightness(0.86); }
#black { position: absolute; inset: 0; background: #000; z-index: 6; }

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud button { pointer-events: auto; }
.hud-btns { position: absolute; z-index: 30; top: calc(env(safe-area-inset-top) + 1.2cqw); right: calc(env(safe-area-inset-right) + 1.2cqw); display: flex; gap: 0.6cqw; }
html.wide .hud-btns { position: fixed; top: calc(env(safe-area-inset-top) + 1.6cqh); right: calc(env(safe-area-inset-right) + 1.6cqh); }
html.wide .hud-btn { width: max(44px, 6.5cqw); height: max(44px, 6.5cqw); }
#btn-full .i-exit, #btn-full.on .i-enter { display: none; }
#btn-full.on .i-exit { display: block; }
.hud-btn { width: max(44px, 9cqw); height: max(44px, 9cqw); display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.hud-btn svg { width: 72%; height: 72%; padding: 18%; border-radius: 50%; fill: #fff; background: rgba(32, 26, 72, 0.5);
  border: 1px solid rgba(216,197,243,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.hud-btn:hover svg { background: rgba(60, 50, 130, 0.7); }
#btn-sound .i-off, #btn-sound.muted .i-on { display: none; }
#btn-sound.muted .i-off { display: block; }
html.record .hud-btns { display: none; }

/* subtitles: bold white with a black outline, inside the safe zone */
.subtitle { position: absolute; left: var(--sl); right: var(--sr); bottom: calc(var(--sb) + 2.5cqh); text-align: center;
  font: 400 5.2cqw/1.22 var(--font); color: #fff; text-wrap: balance; opacity: 0; transition: opacity 0.06s;
  -webkit-text-stroke: 0.62cqw #000; paint-order: stroke fill;
  text-shadow: 0 0.35cqw 0.9cqw rgba(0,0,0,0.85); }
.subtitle.show { opacity: 1; }
/* phones: some mobile browsers draw -webkit-text-stroke thin or not at all over the fill, so the
   outline is also drawn with eight hard shadows; the line sits higher, clear of the thumb area */
html.touch:not(.record) .subtitle { bottom: calc(var(--sb) + 11cqh); -webkit-text-stroke: 0.35cqw #000;
  text-shadow: 0.45cqw 0 0 #000, -0.45cqw 0 0 #000, 0 0.45cqw 0 #000, 0 -0.45cqw 0 #000,
    0.32cqw 0.32cqw 0 #000, -0.32cqw 0.32cqw 0 #000, 0.32cqw -0.32cqw 0 #000, -0.32cqw -0.32cqw 0 #000,
    0 0.6cqw 1.4cqw rgba(0,0,0,0.8); }
.subtitle.guest { color: #fff6d8; }

/* ---------------------------------------------------------------- the RPG choice box */
.choices { position: absolute; left: var(--sl); right: var(--sr); bottom: var(--sb); }
.choices-tab { display: inline-block; margin: 0 0 -0.2cqw 3cqw; padding: 1.05cqw 2.6cqw 0.9cqw; border-radius: 1.6cqw 1.6cqw 0 0;
  font: 400 2.5cqw/1 var(--font); letter-spacing: 0.14em; color: var(--ink);
  background: linear-gradient(180deg, #fff, var(--bg-light)); box-shadow: inset 0 1px 0 #fff; }
.choices-list { display: flex; flex-direction: column; gap: 0.7cqw; padding: 1.5cqw; border-radius: 2.6cqw;
  border: 0.32cqw solid rgba(222, 206, 248, 0.9);
  background: linear-gradient(180deg, rgba(64, 54, 136, 0.9) 0%, rgba(36, 30, 86, 0.93) 55%, rgba(26, 22, 64, 0.95) 100%);
  box-shadow: inset 0 0.3cqw 0 rgba(255,255,255,0.28), inset 0 -0.6cqw 1.6cqw rgba(10,6,40,0.45), 0 1.6cqw 4cqw rgba(0,0,0,0.5);
  position: relative; overflow: hidden; }
.choices-list::before { content: ''; position: absolute; inset: 0 0 62% 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)); }
.choices-timer { height: 1cqw; margin: 0.2cqw 1cqw 0.8cqw; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.14); }
.choices-timer i { display: block; height: 100%; border-radius: inherit; transform-origin: left center; animation: drain linear forwards; }
@keyframes drain { 0% { transform: scaleX(1); background: #d8c5f3; } 55% { background: #ffe27a; } 80% { background: #ff7a4a; } 100% { transform: scaleX(0); background: #ff3b3b; } }
.opt { position: relative; display: flex; align-items: flex-start; gap: 1.6cqw; width: 100%; padding: 1.5cqw 2cqw 1.3cqw 1.4cqw; border: 0; border-radius: 1.7cqw;
  background: transparent; color: #fff; text-align: left; cursor: pointer; touch-action: manipulation;
  font: 400 4.15cqw/1.26 var(--font); text-shadow: 0 0.2cqw 0.4cqw rgba(0,0,0,0.5); transition: background 0.08s, color 0.08s; }
.opt .cur { flex: none; width: 3cqw; color: #ffe27a; opacity: 0; transform: translateX(-0.6cqw); transition: opacity 0.08s, transform 0.12s; font-size: 0.85em; line-height: 1.45; }
.opt .num { flex: none; width: 4.4cqw; height: 4.4cqw; margin-top: 0.3cqw; border-radius: 1.1cqw; display: grid; place-items: center; font-size: 2.6cqw;
  background: rgba(216,197,243,0.22); border: 0.2cqw solid rgba(216,197,243,0.55); }
html.touch .opt .num { display: none; }
.opt .label { flex: 1; min-height: 1.26em; }
.opt .caret { display: inline-block; width: 0.5em; height: 1em; margin-left: 0.08em; vertical-align: -0.12em; background: currentColor; opacity: 0.8; animation: blink 0.5s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.opt.sel { color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-light) 52%, #b9acef 100%);
  box-shadow: inset 0 0.25cqw 0 #fff, 0 0.5cqw 1.6cqw rgba(160, 140, 255, 0.45); }
.opt.sel .cur { opacity: 1; transform: none; color: var(--violet); }
.opt.sel .num { background: rgba(91,80,180,0.18); border-color: rgba(91,80,180,0.5); }
.opt:disabled { cursor: default; opacity: 0.34; filter: grayscale(1); }
.opt.wrong { color: #fff; background: linear-gradient(180deg, #ff6a6a, #c42a3a); box-shadow: 0 0 2.4cqw rgba(255,60,60,0.6); animation: shake 0.32s; opacity: 1; filter: none; }
.opt.wrong .cur { opacity: 1; color: #fff; }
.opt.press { transform: scale(0.98); }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-1.2cqw); } 40% { transform: translateX(1.1cqw); } 60% { transform: translateX(-0.8cqw); } 80% { transform: translateX(0.5cqw); } }
.choices.in .choices-list { animation: box-in 0.16s ease-out; }
@keyframes box-in { from { opacity: 0; transform: translateY(2cqw) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- achievement plate */
.achv { position: absolute; left: var(--sl); right: var(--sr); top: calc(var(--st) + 3cqh); display: flex; align-items: center; gap: 3cqw;
  padding: 2.4cqw 3.4cqw 2.4cqw 2.4cqw; border-radius: 999px; overflow: hidden;
  border: 0.35cqw solid rgba(236, 226, 255, 0.95);
  background: linear-gradient(180deg, rgba(70, 60, 150, 0.95), rgba(28, 22, 70, 0.96));
  box-shadow: inset 0 0.35cqw 0 rgba(255,255,255,0.35), 0 0 0 0.9cqw rgba(216,197,243,0.25), 0 2cqw 6cqw rgba(0,0,0,0.6), 0 0 8cqw rgba(170,150,255,0.45);
  animation: achv-in 0.5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes achv-in { from { opacity: 0; transform: scale(0.5) translateY(-4cqw); } to { opacity: 1; transform: none; } }
.achv-icon { flex: none; width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-items: center; color: #3a2a00;
  background: radial-gradient(circle at 40% 30%, #fff7c8, #ffd54a 45%, #c48a10 100%);
  box-shadow: inset 0 0.3cqw 0 rgba(255,255,255,0.8), 0 0 4cqw rgba(255,210,80,0.7); animation: spin-in 0.8s ease-out both; }
.achv-icon svg { width: 62%; height: 62%; }
@keyframes spin-in { from { transform: rotate(-200deg) scale(0.3); } to { transform: none; } }
.achv-text { min-width: 0; }
.achv-small { font: 400 2.7cqw/1.1 var(--font); letter-spacing: 0.08em; color: var(--bg-light); white-space: nowrap; }
.achv-big { margin-top: 0.8cqw; font: 400 5.6cqw/1.08 var(--font); color: #fff; text-shadow: 0 0 2cqw rgba(200,180,255,0.8); text-wrap: balance; }
.achv-shine { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 45%, transparent 60%); transform: translateX(-120%);
  animation: shine 1.2s 0.35s ease-in-out both; }
@keyframes shine { to { transform: translateX(120%); } }

/* ---------------------------------------------------------------- screens */
.screen { position: absolute; inset: 0; z-index: 20; }
/* start: title over the studio wide shot */
.start { display: flex; flex-direction: column; justify-content: space-between; text-align: center;
  padding: var(--st) var(--sr) var(--sb) var(--sl);
  --shade: linear-gradient(180deg, rgba(20,16,48,0.55) 0%, rgba(20,16,48,0) 32%, rgba(20,16,48,0) 55%, rgba(60,50,130,0.55) 100%); background: var(--shade); }
html.wide .screen { background: none; }
html.wide .screen::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -1; pointer-events: none; background: var(--shade); }
.title { margin: 0; display: flex; flex-direction: column; gap: 0.6cqw; font: 400 10.4cqw/1.0 var(--font); letter-spacing: 0.01em; color: #fff;
  text-shadow: 0 0.2cqw 0 rgba(59,50,136,0.65), 0 0.4cqw 2.4cqw rgba(30,20,90,0.8), 0 0 4cqw rgba(255,240,255,0.35); }
.title span:last-child { font-size: 0.76em; white-space: nowrap; }
.tagline { margin: 2.6cqw 0 0; font: 400 5cqw/1 var(--font); color: var(--bg-light); letter-spacing: 0.03em; text-shadow: 0 0.3cqw 1.4cqw rgba(0,0,0,0.7); }
.start-bottom { display: grid; gap: 2.4cqw; justify-items: center; }
.start-hint { margin: 0; font: 400 3.2cqw/1.3 var(--font); color: rgba(255,255,255,0.86); text-shadow: 0 0.2cqw 1cqw rgba(0,0,0,0.8); }
.start.loading .start-hint { display: none; }

/* ---------------------------------------------------------------- loading screen */
.loader { position: absolute; inset: 0; z-index: 60; container-type: size; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 75% at 50% 40%, #3b3288 0%, #1f1a4e 45%, #0a0820 100%);
  transition: opacity 0.65s ease, transform 0.65s ease; }
.loader.live { pointer-events: none; }
.loader.out { opacity: 0; transform: scale(1.04); }
.ld-spot { position: absolute; inset: -10% -20% 0; transform-origin: 50% 0; animation: ld-swing 7s ease-in-out infinite alternate; pointer-events: none;
  background:
    conic-gradient(from 162deg at 28% -4%, transparent 0deg, rgba(220,205,255,0.15) 9deg, transparent 19deg, transparent 360deg),
    conic-gradient(from 176deg at 74% -4%, transparent 0deg, rgba(220,205,255,0.11) 8deg, transparent 16deg, transparent 360deg); }
@keyframes ld-swing { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.loader::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(60% 40% at 50% 30%, rgba(255,60,90,0.35), rgba(255,60,90,0) 70%); }
.loader.live::after { opacity: 1; }
.ld-grain { position: absolute; inset: -50%; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; animation: ld-grain 0.5s steps(4) infinite; }
@keyframes ld-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -4%); } 75% { transform: translate(-1%, 3%); } }
.ld-inner { --u: min(1cqw, 0.75cqh); position: relative; width: calc(var(--u) * 84); display: grid; justify-items: center; text-align: center;
  gap: calc(var(--u) * 3); animation: ld-in 0.7s ease-out both; }
@keyframes ld-in { from { opacity: 0; transform: translateY(calc(var(--u) * 3)); } }
.ld-onair { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.5) calc(var(--u) * 3.4) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1.6); border: calc(var(--u) * 0.45) solid rgba(255,90,110,0.45); color: rgba(255,120,135,0.5);
  font: 400 calc(var(--u) * 4.6)/1 var(--font); letter-spacing: 0.22em; background: rgba(60,8,20,0.45);
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(0,0,0,0.5); animation: ld-flicker 3.2s linear infinite; }
.ld-onair i { width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: currentColor; }
@keyframes ld-flicker { 0%, 61%, 66%, 100% { opacity: 1; } 62%, 64% { opacity: 0.35; } 63% { opacity: 0.85; } }
.loader.live .ld-onair { animation: ld-on 0.45s ease-out both; color: #fff; border-color: #ffd5dc;
  background: linear-gradient(180deg, #ff5a70, #e01f43); text-shadow: 0 0 calc(var(--u) * 1.4) rgba(255,255,255,0.8);
  box-shadow: 0 0 calc(var(--u) * 3) rgba(255,50,80,0.9), 0 0 calc(var(--u) * 9) rgba(255,40,70,0.55), inset 0 calc(var(--u) * 0.4) 0 rgba(255,255,255,0.45); }
@keyframes ld-on { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1.04); } }
.ld-title { margin: calc(var(--u) * 2) 0 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); font: 400 calc(var(--u) * 10.4)/1 var(--font); color: #fff;
  text-shadow: 0 calc(var(--u) * 0.25) 0 rgba(59,50,136,0.8), 0 calc(var(--u) * 0.5) calc(var(--u) * 3) rgba(10,5,40,0.8), 0 0 calc(var(--u) * 5) rgba(216,197,243,0.35); }
.ld-title span:last-child { font-size: 0.76em; white-space: nowrap; }
.ld-ep { font: 400 calc(var(--u) * 2.7)/1.2 var(--font); letter-spacing: 0.2em; color: var(--bg-light); opacity: 0.85; }
#ld-wave { width: 100%; height: calc(var(--u) * 15); margin-top: calc(var(--u) * 3); display: block; }
.ld-row { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 3);
  font: 400 calc(var(--u) * 3.4)/1.3 var(--font); color: rgba(255,255,255,0.9); }
.ld-tipbox { overflow: hidden; text-align: left; flex: 1; min-width: 0; }
#ld-tip { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ld-tip.in { animation: ld-tip 0.35s ease-out both; }
@keyframes ld-tip { from { opacity: 0; transform: translateY(70%); } }
#ld-pct { font-variant-numeric: tabular-nums; color: var(--bg-light); min-width: 3.2em; text-align: right; }
.loader.failed .ld-onair { animation: none; opacity: 0.4; }
.loader.failed #ld-tip { white-space: normal; color: #ffb3c0; }

.btn-play { position: relative; display: block; width: 100%; max-width: 62cqw; min-height: max(56px, 13cqw); margin: 0 auto; border-radius: 999px; cursor: pointer;
  border: 0.25cqw solid rgba(255,255,255,0.85); color: #fff; font: 400 6.6cqw/1 var(--font); letter-spacing: 0.08em;
  background: linear-gradient(180deg, #8b80dc 0%, var(--violet) 48%, var(--violet-dark) 100%);
  box-shadow: inset 0 0.25cqw 0 rgba(255,255,255,0.65), inset 0 -0.5cqw 1.4cqw rgba(20,10,70,0.35), 0 1.4cqw 4.4cqw rgba(59,50,136,0.55), 0 0 0 0.9cqw rgba(255,255,255,0.18);
  text-shadow: 0 0.25cqw 0.5cqw rgba(20,10,70,0.5); touch-action: manipulation; }
.btn-play::after { content: ''; position: absolute; inset: 0.5cqw 10% 52% 10%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)); }
.btn-play:hover { filter: brightness(1.08); }
.btn-play:active { transform: translateY(1px) scale(0.99); }
.start .btn-play { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0.25cqw 0 rgba(255,255,255,0.65), inset 0 -0.5cqw 1.4cqw rgba(20,10,70,0.35), 0 1.4cqw 4.4cqw rgba(59,50,136,0.55), 0 0 0 1.8cqw rgba(255,255,255,0.28); } }
.btn-small { display: inline-flex; align-items: center; justify-content: center; gap: 1.6cqw; min-height: max(48px, 10.5cqw); padding: 0 6cqw; border-radius: 999px;
  border: 0.22cqw solid rgba(255,255,255,0.9); background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  color: var(--ink); font: 400 4.4cqw/1 var(--font); letter-spacing: 0.06em; cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 1px 0 #fff, 0 0.6cqw 2.4cqw rgba(59,50,136,0.25); }
.btn-small svg { width: 5cqw; height: 5cqw; fill: currentColor; }
.btn-small:hover { background: linear-gradient(180deg, #fff, rgba(255,255,255,0.75)); }
button:focus-visible { outline: 0.5cqw solid #fff; outline-offset: 0.5cqw; }

/* result card: a lavender glossy panel at the bottom of the safe zone */
.result { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--st) var(--sr) var(--sb) var(--sl);
  --shade: linear-gradient(180deg, rgba(121,114,189,0) 35%, rgba(60,50,130,0.5) 75%); background: var(--shade); }
.panel { position: relative; display: flex; flex-direction: column; gap: 2.6cqw; text-align: center; padding: 4.4cqw 4cqw 4cqw; border-radius: 4cqw; color: var(--ink);
  border: 0.25cqw solid var(--line); background: var(--bg-mid) url('../../assets/brand/background-900.webp') 30% 70% / cover no-repeat;
  box-shadow: inset 0 0.25cqw 0 #fff, 0 2.4cqw 8cqw rgba(30,20,90,0.55); animation: panel-in 0.35s ease-out both; overflow: hidden; }
.panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12) 45%, rgba(255,255,255,0)); }
.panel > * { position: relative; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6cqw); } to { opacity: 1; transform: none; } }
.panel-title { margin: 0; font: 400 6.4cqw/1.1 var(--font); color: var(--violet-dark); }
.stats { display: flex; justify-content: center; gap: 3cqw; }
.stat { flex: 1; display: grid; gap: 0.8cqw; padding: 2.4cqw 1cqw; border-radius: 2.4cqw; background: rgba(255,255,255,0.5); border: 0.2cqw solid rgba(255,255,255,0.9); box-shadow: inset 0 1px 0 #fff; }
.stat-num { font: 400 8cqw/1 var(--font); color: var(--violet-dark); }
.stat-label { font: 400 3cqw/1.1 var(--font); letter-spacing: 0.06em; color: var(--ink-soft); }

.toast { position: absolute; left: 50%; bottom: calc(var(--sb) + 2cqh); transform: translateX(-50%); z-index: 40; max-width: 80%;
  padding: 2.2cqw 4cqw; border-radius: 3cqw; background: rgba(32, 26, 72, 0.9); border: 1px solid rgba(216,197,243,0.7); color: #fff;
  font: 400 3.6cqw/1.35 var(--font); text-align: center; pointer-events: none; }

/* ---------------------------------------------------------------- safe zone overlay (S) */
#safezone { position: absolute; left: var(--sl); right: var(--sr); top: var(--st); bottom: var(--sb); z-index: 50; pointer-events: none; display: none;
  outline: 0.35cqw dashed rgba(255, 60, 60, 0.95); box-shadow: 0 0 0 200cqh rgba(255, 30, 30, 0.16); }
#safezone span { position: absolute; left: 1cqw; top: 1cqw; font: 400 2.4cqw/1 var(--font); color: #ff6b6b; letter-spacing: 0.1em; }
#stage.show-safe #safezone { display: block; }

@media (prefers-reduced-motion: reduce) {
  .achv, .achv-icon, .achv-shine, .panel, .start .btn-play, .choices.in .choices-list, .ld-spot, .ld-grain, .ld-onair, .ld-inner, #ld-tip.in { animation: none; }
}