[hidden] { display: none !important; }
/* Layout: one 16:9 stage, letterboxed and centred; every size inside scales with --u (1% of stage width). */
:root {
  --night: #1d1430;      /* letterbox + panels */
  --ink: #2a1d3f;        /* text on paper */
  --paper: #fff7fb;      /* speech bubbles */
  --sakura: #ff5c97;     /* brand / target */
  --mint: #22c79e;       /* correct letters */
  --sun: #ffb238;        /* combo / highlights */
  --alarm: #ff3d5e;      /* typos, damage */
  --dim: #9c8fb5;        /* secondary text on night */
  --f-display: "Mochiy Pop One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "M PLUS Rounded 1c", "Segoe UI", system-ui, sans-serif;
  --f-type: "M PLUS 1 Code", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --u: 10px;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  margin: 0; background: var(--night); color: var(--paper);
  font-family: var(--f-body); overflow: hidden;
  display: grid; place-items: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 12px; box-sizing: border-box;
}
#stage {
  position: relative; width: 1280px; aspect-ratio: 16 / 9; max-width: 100%;
  overflow: hidden; border-radius: calc(var(--u) * 1); background: #3b2a4f;
  box-shadow: 0 0 0 2px #3a2b55, 0 24px 60px rgba(0,0,0,.45);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
/* full screen (button or home-screen app): no margins, the stage fills the screen */
html.fs body { padding: 0; }
/* attract mode: arcade style "PRESS START" over the demo */
.demo { position: absolute; inset: 0; pointer-events: none; z-index: 5000; }
.demo-tag { position: absolute; left: 50%; top: calc(var(--u) * 6.2); transform: translateX(-50%); font: 800 calc(var(--u) * 1)/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: #fff; background: rgba(29,20,48,.7); border-radius: 99px; padding: calc(var(--u) * .5) calc(var(--u) * 1.2); }
.demo-start { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); font: calc(var(--u) * 4.4)/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--sun); -webkit-text-stroke: calc(var(--u) * .18) var(--night); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .35) 0 var(--night), 0 0 calc(var(--u) * 2) rgba(255,178,56,.6); white-space: nowrap; animation: demoBlink 1.1s steps(1, end) infinite; }
.demo-sub { position: absolute; left: 50%; top: calc(66% + var(--u) * 5.6); transform: translateX(-50%); font: 800 calc(var(--u) * 1.15)/1 var(--f-body); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; }
@keyframes demoBlink { 50% { opacity: 0; } }
#offBtn.ready { box-shadow: inset 0 0 0 2px var(--mint); color: var(--mint); }
#offBtn:disabled { opacity: .85; cursor: default; }
html.fs #stage { border-radius: 0; box-shadow: none; }
#hall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#actors { position: absolute; inset: 0; }
.girl { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform; pointer-events: none; }
.girl img { display: block; height: 100%; width: auto; max-width: none; transform: translateX(-50%); position: absolute; left: 0; bottom: 0; filter: drop-shadow(0 0 1px rgba(40,20,60,.35)); }
.girl.close .shadow { display: none; }
.girl.boss img { filter: drop-shadow(0 0 1px rgba(40,20,60,.35)) drop-shadow(0 0 calc(var(--u) * .9) rgba(var(--glow), .75)); animation: aura 1.1s ease-in-out infinite alternate; }
@keyframes aura { to { filter: drop-shadow(0 0 1px rgba(40,20,60,.35)) drop-shadow(0 0 calc(var(--u) * 1.8) rgba(var(--glow), .95)); } }
.girl.boss.final img { filter: drop-shadow(0 0 1px rgba(40,20,60,.35)) drop-shadow(0 0 calc(var(--u) * 1.4) rgba(255,255,255,.95)) drop-shadow(0 0 calc(var(--u) * 3) rgba(var(--glow), .9)) brightness(1.08); animation: finalAura 1.6s ease-in-out infinite alternate; }
@keyframes finalAura { to { filter: drop-shadow(0 0 1px rgba(40,20,60,.35)) drop-shadow(0 0 calc(var(--u) * 2.2) rgba(255,255,255,1)) drop-shadow(0 0 calc(var(--u) * 5) rgba(var(--glow), 1)) brightness(1.15); } }
.girl.ghost { pointer-events: none; animation: ghost .38s ease-out forwards; }
.girl.ghost .shadow { display: none; }
@keyframes ghost { from { opacity: .45; } to { opacity: 0; } }
.girl .shadow { position: absolute; left: 0; bottom: -2%; width: 70%; height: 5%; transform: translateX(-50%); border-radius: 50%; background: rgba(40,20,50,.28); }
.girl.spirit:not(.close) img { -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 94%); mask-image: linear-gradient(to bottom, #000 64%, transparent 94%); }
.girl.spirit .shadow { display: none; }
.bubble {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  background: var(--paper); color: var(--ink); font-family: var(--f-type); font-weight: 700;
  font-size: calc(var(--u) * 1.75); line-height: 1.2; letter-spacing: .04em;
  padding: calc(var(--u) * .45) calc(var(--u) * .9); border-radius: calc(var(--u) * .9);
  border: calc(var(--u) * .2) solid #e9d8ec; pointer-events: none;
}
.bubble::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -.75); width: calc(var(--u) * .9); height: calc(var(--u) * .9); background: inherit; border-right: inherit; border-bottom: inherit; transform: translateX(-50%) rotate(45deg); }
.bubble .name { display: block; font-family: var(--f-body); font-weight: 800; font-size: .52em; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: .1em; }
.bubble .done { color: var(--mint); }
.bubble .cur { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sakura); text-decoration-thickness: .14em; text-underline-offset: .18em; }
.bubble .rest { color: var(--ink); }
.bubble .opt { opacity: .55; }
.bubble .petal { color: transparent !important; background: radial-gradient(circle at 40% 40%, #ff8fb8, #e0386e 70%); border-radius: 60% 0 60% 0; }
.bubble .glitch { color: #00c8ff !important; text-shadow: .08em 0 #ff3d5e, -.08em 0 #22c79e; }
.bubble .ghostc { box-shadow: inset 0 -.18em 0 #a24bff; background: rgba(162,75,255,.18); }
.bubble.council { border-color: var(--sun); }
.petal-fly { position: absolute; font-size: calc(var(--u) * 2.2); pointer-events: none; animation: petalFly 1s linear forwards; }
@keyframes petalFly { to { transform: translate(var(--dx), calc(var(--u) * 1.5)) rotate(240deg); opacity: .2; } }
.bubble .done.opt { opacity: .7; }
.bubble .name .club { text-transform: none; letter-spacing: .04em; font-weight: 500; opacity: .85; }
.bubble.target { border-color: var(--sakura); box-shadow: 0 0 0 calc(var(--u) * .25) rgba(255,92,151,.35); }
.bubble.boss { white-space: normal; width: max-content; max-width: calc(var(--u) * 42); text-align: left; font-size: calc(var(--u) * 1.9); }
.bubble.shake { animation: shake .25s; }
.bubble.danger { border-color: var(--alarm); background: linear-gradient(var(--alarm), var(--alarm)) left bottom / calc(var(--fuse, 1) * 100%) calc(var(--u) * .35) no-repeat, var(--paper); animation: pulse .4s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 calc(var(--u) * .45) rgba(255,61,94,.35); } }
.demo-btn { position: absolute; left: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); pointer-events: auto; font: 800 calc(var(--u) * .9)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(29,20,48,.7); border: 0; border-radius: 99px; padding: calc(var(--u) * .5) calc(var(--u) * .9); cursor: pointer; }
.demo-btn[aria-pressed="true"] { background: var(--sakura); }
/* debug panel: jump around and watch every animation without typing */
.dbg { position: absolute; left: calc(var(--u) * 1.6); top: calc(var(--u) * 6.5); pointer-events: auto; display: flex; flex-direction: column; gap: calc(var(--u) * .5); background: rgba(29,20,48,.78); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .7); font: 800 calc(var(--u) * .85)/1 var(--f-body); color: #fff; z-index: 6000; }
.dbg .row { display: flex; gap: calc(var(--u) * .4); flex-wrap: wrap; align-items: center; }
.dbg b { letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
.dbg button, .dbg select { font: inherit; color: #fff; background: rgba(255,255,255,.14); border: 0; border-radius: 99px; padding: calc(var(--u) * .4) calc(var(--u) * .8); cursor: pointer; }
.dbg button[aria-pressed="true"] { background: var(--sakura); }
.dbg select option { color: #000; }
.roster { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: calc(var(--u) * .5); align-items: end; width: 100%; }
.roster figure { margin: 0; display: grid; justify-items: center; gap: calc(var(--u) * .3); }
.roster img { height: calc(var(--u) * 10); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.roster figcaption { font-size: calc(var(--u) * .8); font-weight: 800; letter-spacing: .06em; color: #fff; text-transform: uppercase; white-space: nowrap; }
.roster .boss figcaption { color: var(--sun); }
.stage-pick { align-items: center; gap: calc(var(--u) * .5); }
.stage-pick .pick-lbl { font-size: calc(var(--u) * .9); font-weight: 800; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; margin-right: calc(var(--u) * .4); }
#stagePick { display: inline-flex; gap: calc(var(--u) * .5); }
.btn.small { padding: calc(var(--u) * .5) calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.1); min-width: 0; }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); font-size: calc(var(--u) * 1.2); }
.btn-row { display: flex; gap: calc(var(--u) * 1.2); align-items: center; }
.boss-timer { position: absolute; left: 50%; top: calc(var(--u) * 4.2); transform: translateX(-50%); width: calc(var(--u) * 26); height: calc(var(--u) * .7); border-radius: 99px; background: rgba(29,20,48,.7); overflow: hidden; }
.boss-timer[hidden] { display: none; }
.boss-timer i { display: block; height: 100%; width: 100%; background: var(--sun); transform-origin: left; }
.boss-timer.low i { background: var(--alarm); }
.frames { display: flex; gap: calc(var(--u) * 1.6); align-items: flex-end; justify-content: center; }
.frames figure { margin: 0; display: grid; justify-items: center; gap: calc(var(--u) * .4); }
.frames img { height: calc(var(--u) * 14); width: auto; }
.frames figcaption { font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.boom { position: absolute; transform: translate(-50%, -50%); pointer-events: none; animation: boom 1.6s ease-out forwards; }
.boom svg { width: 100%; height: 100%; display: block; animation: boomSpin 1.6s linear; }
.boom b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font: 400 calc(var(--u) * 4)/1 var(--f-display); color: #fff; -webkit-text-stroke: calc(var(--u) * .25) var(--alarm); white-space: nowrap; }
@keyframes boom { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 15% { transform: translate(-50%, -50%) scale(1.15); } 25% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
@keyframes boomSpin { to { transform: rotate(25deg); } }
#stage.shake { animation: stageShake .5s; }
#stage.quake { animation: stageShake .35s infinite; }
.storm-p { position: absolute; left: calc(var(--u) * -3); width: calc(var(--u) * 1.1 * var(--s)); height: calc(var(--u) * .75 * var(--s)); border-radius: 70% 0 70% 0; opacity: .9; z-index: 3500; pointer-events: none; animation: storm 3s linear forwards; }
.storm-p.rose { background: none; width: auto; height: auto; font-size: calc(var(--u) * 1.6 * var(--s)); line-height: 1; }
@keyframes storm { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes stageShake { 20%, 60% { transform: translate(calc(var(--u) * -.8), calc(var(--u) * .4)); } 40%, 80% { transform: translate(calc(var(--u) * .8), calc(var(--u) * -.4)); } }
@keyframes shake { 20%,60% { margin-left: calc(var(--u) * -.6); } 40%,80% { margin-left: calc(var(--u) * .6); } }
.bubble .sp { display: inline-block; width: .6em; }
.bubble .done.sp { border-bottom: .12em solid var(--mint); }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--f-body); }
.hud-top { position: absolute; left: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.3); display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 2); }
.composure { display: grid; gap: calc(var(--u) * .35); }
.composure .lbl { font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.bar { width: calc(var(--u) * 18); height: calc(var(--u) * 1.3); border-radius: 99px; background: rgba(29,20,48,.75); padding: calc(var(--u) * .22); box-sizing: border-box; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--mint); width: 100%; transition: width .2s, background .2s; }
.bar.low i { background: var(--alarm); }
.right { text-align: right; display: grid; gap: calc(var(--u) * .25); justify-items: end; }
.score { font-family: var(--f-display); font-size: calc(var(--u) * 2.1); color: #fff; text-shadow: 0 2px 0 var(--ink); font-variant-numeric: tabular-nums; }
.combo { font-family: var(--f-display); font-size: calc(var(--u) * 1.3); color: var(--sun); text-shadow: 0 2px 0 var(--ink); min-height: 1.2em; }
.combo.pop { animation: pop .18s; }
@keyframes pop { 50% { transform: scale(1.25); } }
.hearts { display: flex; gap: calc(var(--u) * .4); font-size: calc(var(--u) * 1.6); }
.hearts svg { width: 1em; height: 1em; display: block; }
.hearts .lost path { fill: rgba(29,20,48,.6); stroke: rgba(255,255,255,.35); }
.stagebar { position: absolute; left: 50%; top: calc(var(--u) * 1.3); transform: translateX(-50%); font-weight: 800; font-size: calc(var(--u) * .95); letter-spacing: .14em; text-transform: uppercase; background: rgba(29,20,48,.7); padding: calc(var(--u) * .35) calc(var(--u) * 1); border-radius: 99px; color: #fff; white-space: nowrap; }
.typed-echo { position: absolute; left: 50%; bottom: calc(var(--u) * 1.6); transform: translateX(-50%); font-family: var(--f-type); font-weight: 700; font-size: calc(var(--u) * 1.5); background: rgba(29,20,48,.78); color: var(--mint); padding: calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .7); min-width: calc(var(--u) * 14); text-align: center; letter-spacing: .05em; }
.typed-echo .caret { display: inline-block; width: .55em; border-bottom: .12em solid var(--paper); margin-left: .05em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mute { position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); pointer-events: auto; font: 800 calc(var(--u) * .9)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(29,20,48,.7); border: 0; border-radius: 99px; padding: calc(var(--u) * .5) calc(var(--u) * .9); cursor: pointer; }
.mute:focus-visible, .btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

#flash { position: absolute; inset: 0; background: var(--sakura); opacity: 0; pointer-events: none; transition: opacity .35s; }
#banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; z-index: 6000; } /* above the defeated boss */
#banner .big { display: inline-block; font-family: var(--f-display); font-size: calc(var(--u) * 4.2); color: #fff; text-shadow: 0 calc(var(--u) * .3) 0 var(--sakura), 0 calc(var(--u) * .6) 0 var(--ink); }
#banner .small { font-weight: 800; font-size: calc(var(--u) * 1.2); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-top: calc(var(--u) * .8); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#banner.show { animation: bannerIn .35s ease-out; }
@keyframes bannerIn { from { transform: translateY(calc(var(--u) * 2)); opacity: 0; } }
.float { position: absolute; transform: translate(-50%, -100%); font-family: var(--f-display); font-size: calc(var(--u) * 1.4); color: var(--sun); text-shadow: 0 2px 0 var(--ink); pointer-events: none; animation: floatUp .9s ease-out forwards; white-space: nowrap; }
.float.bad { color: var(--alarm); }
@keyframes floatUp { to { margin-top: calc(var(--u) * -4); opacity: 0; } }
#stage.wobble #actors { animation: wobble .5s infinite; }
@keyframes wobble { 25% { transform: rotate(.6deg) translateX(calc(var(--u) * .3)); } 75% { transform: rotate(-.6deg) translateX(calc(var(--u) * -.3)); } }
#stage.wobble .bubble .txt span { display: inline-block; animation: jiggle .3s infinite; }
@keyframes jiggle { 50% { transform: translateY(-.12em) rotate(4deg); } }
/* Tetsuko's heavy steps */
#stage.stomp { animation: stomp .2s; }
@keyframes stomp { 40% { transform: translateY(calc(var(--u) * var(--stomp, .3))); } }
/* Akira powering up */
/* the whole bubble trembles (letters stay on their line) and gets a little more room for the glow */
.bubble.powered { border-color: #ffd400; box-shadow: 0 0 calc(var(--u) * 1.4) #ffd400; padding: calc(var(--u) * .6) calc(var(--u) * 1.1); animation: powerJig .12s infinite; }
@keyframes powerJig { 50% { margin-top: calc(var(--u) * -.18); margin-left: calc(var(--u) * .12); } }
.bubble.powered .rest { color: #c98a00; text-shadow: 0 0 .35em #ffd400; }
.girl.powered img { filter: drop-shadow(0 0 calc(var(--u) * 2.6) rgba(255,215,0,1)) brightness(1.12) !important; }
/* Yuzu's final form: HEARTBEAT data bubbles and the system override */
.bubble.data { border-color: #ff2a7a; box-shadow: 0 0 calc(var(--u) * .9) rgba(255,42,122,.75); font-family: ui-monospace, Menlo, Consolas, monospace; }
#stage.override #hall { filter: hue-rotate(150deg) contrast(1.35) saturate(1.4); }
#stage.override #actors { animation: glitchShift .14s steps(2) infinite; }
@keyframes glitchShift { 50% { transform: translateX(calc(var(--u) * .5)); filter: drop-shadow(calc(var(--u) * -.3) 0 rgba(0,200,255,.7)) drop-shadow(calc(var(--u) * .3) 0 rgba(255,40,120,.7)); } }
#stage.flipx .bubble .txt { display: inline-block; transform: scaleX(-1); }
#stage.flipy .bubble .txt { display: inline-block; transform: rotate(180deg); }
/* Easy mode offer on the results screen */
.offer[hidden] { display: none; }
.offer { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.2); margin-top: calc(var(--u) * .8); }
.offer img { height: calc(var(--u) * 13); width: auto; }
.offer .say { background: var(--paper); color: var(--ink); border-radius: calc(var(--u) * .9); padding: calc(var(--u) * .7) calc(var(--u) * 1); font-size: calc(var(--u) * 1.25); max-width: calc(var(--u) * 34); text-align: left; }
.offer .say b { display: block; font-size: .8em; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.offer .btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.offer .btn-row { margin-top: calc(var(--u) * .6); }

/* Screens */
.screen { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(29,20,48,.82); }
.screen[hidden] { display: none !important; }
.panel { width: min(88%, calc(var(--u) * 70)); display: grid; gap: calc(var(--u) * 1.6); justify-items: center; text-align: center; }
.logo { font-family: var(--f-display); font-size: calc(var(--u) * 7.5); line-height: 1; color: #fff; letter-spacing: .02em; text-shadow: 0 calc(var(--u) * .45) 0 var(--sakura), 0 calc(var(--u) * .9) 0 var(--ink); margin: 0; }
.logo b { color: var(--sun); font-weight: inherit; }
.tag { font-size: calc(var(--u) * 1.5); font-weight: 800; margin: 0; color: #fff; text-wrap: balance; }
.roster { display: flex; gap: calc(var(--u) * 1.4); align-items: flex-end; justify-content: center; }
.roster figure { margin: 0; display: grid; justify-items: center; gap: calc(var(--u) * .4); }
.roster img { height: calc(var(--u) * 13); width: auto; }
.roster figcaption { font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.roster figcaption strong { display: block; color: #fff; font-size: 1.25em; letter-spacing: .04em; }
.roster .boss figcaption strong { color: var(--sakura); }
.btn { font: 400 calc(var(--u) * 1.7)/1 var(--f-display); color: var(--ink); background: var(--sun); border: 0; border-radius: 99px; padding: calc(var(--u) * 1) calc(var(--u) * 2.6); cursor: pointer; box-shadow: 0 calc(var(--u) * .35) 0 #c97c06; }
.btn:active { transform: translateY(calc(var(--u) * .2)); box-shadow: 0 calc(var(--u) * .15) 0 #c97c06; }
.hint { font-size: calc(var(--u) * 1.05); color: var(--dim); margin: 0; }
.hint.rtip { color: #fff; font-size: calc(var(--u) * 1.15); }
.hint b { color: var(--sun); }
.hint kbd { font-family: var(--f-type); background: rgba(255,255,255,.12); padding: .1em .4em; border-radius: .3em; color: #fff; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1); width: 100%; }
.stat { background: rgba(255,255,255,.07); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * 1) calc(var(--u) * .6); }
.stat b { display: block; font-family: var(--f-display); font-size: calc(var(--u) * 2.4); color: #fff; font-weight: 400; font-variant-numeric: tabular-nums; }
.stat span { font-size: calc(var(--u) * .9); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.grade { font-family: var(--f-display); font-size: calc(var(--u) * 6); line-height: 1; color: var(--sun); text-shadow: 0 calc(var(--u) * .4) 0 var(--ink); }
.result-title { font-family: var(--f-display); font-size: calc(var(--u) * 3.4); color: #fff; margin: 0; }
#kbd { position: absolute; opacity: 0; width: 1px; height: 1px; left: 50%; top: 50%; border: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .girl.boss img { animation: none; }
  .bubble.danger { animation: none; }
  #stage.wobble #actors, #stage.wobble .bubble .txt span, #stage.stomp, #stage.override #actors, #stage.quake, .bubble.powered, .combo.pop, #stage.shake, .bubble.shake, #banner.show { animation: none !important; }
}

/* ---------- 2026-10-28 complete build ---------- */
/* menus always sit above the girls and their bubbles */
.screen { z-index: 9000; }
#scene { z-index: 8000; }
#credits { z-index: 8500; }
/* Akira: a gentler power-up jolt and a low rumble on her last line */
#stage.ashake { animation: stageShakeSoft .5s; }
#stage.aquake { animation: stageShakeSoft .6s infinite; }
@keyframes stageShakeSoft { 25% { transform: translate(calc(var(--u) * -.22), calc(var(--u) * .1)); } 75% { transform: translate(calc(var(--u) * .22), calc(var(--u) * -.1)); } }
/* Yuzu's final form: her line waits, greyed out, until the data bubbles are cleared */
.bubble.locked .txt span { color: #b3a8c4 !important; text-decoration: none; }
.bubble.locked { opacity: .82; }
/* Yuzu's arena: sparks, hearts, code rain, warnings, red heartbeat pulse (behind the bubbles) */
.cx, .heart-fly { position: absolute; pointer-events: none; z-index: 1700; }
.heart-fly { font-size: calc(var(--u) * 1.4); transform: translate(-50%, -50%) scale(.4); animation: heartFly 1.3s ease-in forwards; }
@keyframes heartFly { 70% { opacity: .95; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--s)); opacity: 0; } }
.cx.spark { width: calc(var(--u) * 2.4 * var(--s)); height: calc(var(--u) * 2.4 * var(--s)); transform: translate(-50%, -50%); background:
  radial-gradient(circle, #fff 0 12%, hsla(var(--h), 100%, 70%, .95) 18%, transparent 42%),
  linear-gradient(90deg, transparent 47%, hsla(var(--h), 100%, 80%, .9) 50%, transparent 53%),
  linear-gradient(0deg, transparent 47%, hsla(var(--h), 100%, 80%, .9) 50%, transparent 53%);
  animation: spark .6s ease-out forwards; }
.cx.kira { font: 400 calc(var(--u) * 1.6 * var(--s))/1 var(--f-body); color: #fffbe6; text-shadow: 0 0 calc(var(--u) * .5) #ffe08a, 0 0 calc(var(--u) * 1.1) #ffc2e0; transform: translate(-50%, -50%) scale(0); animation: kira .9s ease-in-out forwards; }
@keyframes kira { 40% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; } to { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: .6; } }
.cx.pop { font: 400 calc(var(--u) * 2.2 * var(--s))/1 var(--f-body); color: var(--c); text-shadow: 0 0 calc(var(--u) * .6) var(--c); transform: translate(-50%, -50%) scale(0); animation: heartPop 1s ease-out forwards; }
@keyframes heartPop { 25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 45% { transform: translate(-50%, -50%) scale(.95); } 75% { opacity: .9; } to { transform: translate(-50%, calc(-50% - var(--u) * 1.5)) scale(.6); opacity: 0; } }
@keyframes spark { from { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.3) rotate(60deg); opacity: 0; } }
.cx.code { white-space: pre; font: 700 calc(var(--u) * 1.1)/1.05 var(--f-type); color: rgba(255,60,140,.75); text-shadow: 0 0 calc(var(--u) * .5) rgba(255,40,120,.9); animation: codeFall 1.8s linear forwards; z-index: 1650; }
@keyframes codeFall { to { transform: translateY(calc(var(--u) * 62)); opacity: .1; } }
.cx.warn { font: 400 calc(var(--u) * 1.1)/1 var(--f-display); color: #fff; background: rgba(255,30,90,.85); padding: calc(var(--u) * .35) calc(var(--u) * .7); border-radius: calc(var(--u) * .4); transform: translate(-50%, -50%); animation: warn 1.5s steps(6) forwards; white-space: nowrap; }
@keyframes warn { 0%, 30%, 60% { opacity: 1; } 15%, 45% { opacity: .2; } 100% { opacity: 0; } }
#stage.chaos::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1600; box-shadow: inset 0 0 calc(var(--u) * 6) rgba(255,0,80,.55); animation: beat .75s ease-out infinite; }
@keyframes beat { 0%, 30% { box-shadow: inset 0 0 calc(var(--u) * 9) rgba(255,0,80,.75); } 15% { box-shadow: inset 0 0 calc(var(--u) * 4) rgba(255,0,80,.35); } 100% { box-shadow: inset 0 0 calc(var(--u) * 5) rgba(255,0,80,.3); } }

/* title */
.logo-img { width: calc(var(--u) * 44); height: auto; margin: calc(var(--u) * -1) 0 calc(var(--u) * -.6); filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(0,0,0,.45)); }
#title .panel { gap: calc(var(--u) * 1.1); }
#title .tag { font-size: calc(var(--u) * 1.3); }
.fb-link { position: absolute; right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.1); background: none; border: 0; color: var(--dim); font: 800 calc(var(--u) * .85)/1 var(--f-body); letter-spacing: .08em; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; opacity: .75; }
.fb-link:hover { opacity: 1; color: #fff; }
.btn.ghost.small.pill { font-size: calc(var(--u) * 1); padding: calc(var(--u) * .5) calc(var(--u) * 1.2); }

/* story scenes */
.scene { position: absolute; inset: 0; overflow: hidden; cursor: pointer; }
.scene-bg { position: absolute; inset: 0; background: #1d1430 center / cover no-repeat; }
.scene-girl { position: absolute; left: 50%; bottom: -3%; height: 96%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 0 calc(var(--u) * .5) rgba(0,0,0,.35)); }
.scene-girl.flus { height: 128%; bottom: -36%; }
.scene.leaving .scene-girl, .scene.leaving .dlg, .scene.leaving .scene-bg { transition: opacity .6s ease; opacity: 0; }
.scene-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.scene-black.on { opacity: 1; }
.scene-girl.pop { animation: girlPop .25s ease-out; }
@keyframes girlPop { from { transform: translateX(-50%) translateY(calc(var(--u) * 1)); opacity: .3; } }
.scene-fx { position: absolute; inset: 0; pointer-events: none; }
.scene.misfire .scene-bg { animation: misfire 1.6s; }
@keyframes misfire { 0%, 20%, 40% { filter: none; } 10%, 30%, 50% { filter: hue-rotate(-40deg) saturate(3) brightness(1.5); } }
.fw { position: absolute; width: calc(var(--u) * .45); height: calc(var(--u) * .45); border-radius: 50%; box-shadow: 0 0 calc(var(--u) * .6) currentColor; animation: fw 1.4s ease-out forwards; }
@keyframes fw { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.dlg { position: absolute; left: 50%; bottom: calc(var(--u) * 1.8); transform: translateX(-50%); width: calc(var(--u) * 76); min-height: calc(var(--u) * 8); box-sizing: border-box;
  background: rgba(255,247,251,.96); color: var(--ink); border-radius: calc(var(--u) * 1.2); border: calc(var(--u) * .25) solid #f3b6d0; padding: calc(var(--u) * 1.4) calc(var(--u) * 2) calc(var(--u) * 1.6);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(29,20,48,.45); display: flex; gap: calc(var(--u) * 1.4); align-items: flex-start; }
.dlg-name { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * -1.5); background: var(--sakura); color: #fff; font: 400 calc(var(--u) * 1.2)/1 var(--f-display); padding: calc(var(--u) * .5) calc(var(--u) * 1.1); border-radius: 99px; }
.dlg-text { margin: 0; font-size: calc(var(--u) * 1.65); font-weight: 800; line-height: 1.45; flex: 1; }
.dlg.narr { background: rgba(29,20,48,.88); color: #fff; border-color: rgba(255,255,255,.25); }
.dlg.narr .dlg-text { font-style: italic; font-weight: 500; }
.dlg-pa { flex: none; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: 50%; overflow: hidden; border: calc(var(--u) * .25) solid var(--sakura); background: #ffe3ef; position: relative; }
.dlg-pa img { position: absolute; width: 230%; max-width: none; left: 50%; top: -6%; transform: translateX(-50%); }
.dlg-pa::after { content: "📢"; position: absolute; right: -2%; bottom: -2%; font-size: calc(var(--u) * 1.6); }
.dlg-next { position: absolute; right: calc(var(--u) * 1.4); bottom: calc(var(--u) * .7); color: var(--sakura); font-size: calc(var(--u) * 1.1); animation: blink 1s steps(1) infinite; }
.scene-skip { position: absolute; right: calc(var(--u) * 1.4); top: calc(var(--u) * 1.2); background: rgba(29,20,48,.7); color: #fff; border: 0; border-radius: 99px; font: 800 calc(var(--u) * .85)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: calc(var(--u) * .5) calc(var(--u) * .9); cursor: pointer; }

/* credits */
.credits { position: absolute; inset: 0; background: #000; overflow: hidden; cursor: pointer; }
.credits-roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; display: grid; gap: calc(var(--u) * 2.4); }
.credits-roll.go { animation: roll 28s linear forwards; }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(calc(-100% - var(--u) * 60)); } }
.the-end { font: 400 calc(var(--u) * 6)/1 var(--f-display); color: #fff; text-shadow: 0 calc(var(--u) * .4) 0 var(--sakura); margin-bottom: calc(var(--u) * 8); }
.cr { display: grid; gap: calc(var(--u) * .5); }
.cr .role { font-size: calc(var(--u) * 1); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sakura); }
.cr b { font: 400 calc(var(--u) * 1.8)/1.15 var(--f-display); color: #fff; }
.thanks { position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(var(--u) * 5)/1 var(--f-display); color: #fff; text-shadow: 0 calc(var(--u) * .4) 0 var(--sakura), 0 calc(var(--u) * .8) 0 var(--ink); animation: bannerIn .6s ease-out; }
.credits .scene-skip { z-index: 2; }

/* character list */
.gallery-panel { width: 92%; height: 90%; display: grid; grid-template-rows: auto 1fr; gap: calc(var(--u) * 1); }
.gal-head { display: flex; align-items: center; justify-content: space-between; }
.gal-head h2 { margin: 0; font: 400 calc(var(--u) * 2.4)/1 var(--f-display); }
.gal-head span { color: var(--dim); font-weight: 800; margin-left: calc(var(--u) * 1); }
.gal-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: calc(var(--u) * .6); overflow-y: auto; padding: calc(var(--u) * .3); align-content: start; }
.gcard { display: grid; justify-items: center; gap: calc(var(--u) * .3); background: rgba(255,255,255,.07); border: 0; border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .5) calc(var(--u) * .2); color: #fff; font: 800 calc(var(--u) * .8)/1 var(--f-body); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.gcard img { height: calc(var(--u) * 9); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.gcard.boss { background: rgba(255,178,56,.16); }
.gcard.unseen { cursor: default; color: var(--dim); }
.gcard.unseen img { filter: brightness(0) opacity(.55); }
button.gcard:hover, button.gcard:focus-visible { background: rgba(255,92,151,.3); outline: none; }
.gal-detail { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(18,12,32,.85); cursor: pointer; }
.gal-detail figure { margin: 0; display: grid; justify-items: center; gap: calc(var(--u) * .6); }
.gal-detail img { height: calc(var(--u) * 40); width: auto; }
.gal-detail figcaption b { display: block; font: 400 calc(var(--u) * 2.4)/1 var(--f-display); }
.gal-detail figcaption span { color: var(--dim); font-weight: 800; }

/* feedback */
.fb-panel { width: min(80%, calc(var(--u) * 56)); }
.fb-panel textarea { width: 100%; box-sizing: border-box; min-height: calc(var(--u) * 12); resize: none; border-radius: calc(var(--u) * .9); border: calc(var(--u) * .2) solid #e9d8ec; padding: calc(var(--u) * 1); font: 500 calc(var(--u) * 1.3)/1.4 var(--f-body); color: var(--ink); background: var(--paper); }
.fb-rate { display: flex; gap: calc(var(--u) * .4); align-items: center; color: var(--dim); font-weight: 800; }
.fb-rate button { background: none; border: 0; font-size: calc(var(--u) * 2); cursor: pointer; filter: grayscale(1) opacity(.45); padding: 0; }
.fb-rate button.on { filter: none; }
.fb-err { color: var(--alarm); margin: 0; font-weight: 800; }
.fb-thanks { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.6); }
.fb-thanks img { height: calc(var(--u) * 30); width: auto; }
.fb-thanks .say { background: var(--paper); color: var(--ink); border-radius: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); font: 400 calc(var(--u) * 1.9)/1.3 var(--f-display); max-width: calc(var(--u) * 30); text-align: left; margin-bottom: calc(var(--u) * 8); position: relative; }
.fb-thanks .say b { display: block; font: 800 calc(var(--u) * .9)/1 var(--f-body); color: var(--sakura); letter-spacing: .12em; text-transform: uppercase; margin-bottom: calc(var(--u) * .6); }
@media (prefers-reduced-motion: reduce) { #stage.ashake, #stage.aquake, #stage.chaos::after { animation: none !important; } }