/* Prime - otodoke.css
   Otodoke!, DGIRL's anime action game. The look of a modern anime action
   game's interface: slanted panels, hot pink and cyan on night navy, a big
   italic combo counter, katakana and kanji beside the English. */

@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:800 900; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('../assets/fonts/FragmentMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --pink:#FF3D9A; --pink-hi:#FF7AC8; --cyan:#29E7FF; --gold:#FFD23F; --red:#FF2A55;
  --night:#0D0818; --night-2:#170E2A; --glass:rgba(16,9,30,.72);
  --line:rgba(255,255,255,.16); --muted:rgba(255,255,255,.7);
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --display:'Bricolage Grotesque', 'Inter', sans-serif;
  --jp:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  --mono:'Fragment Mono', 'SF Mono', Menlo, monospace;
  --safe-t:max(14px, env(safe-area-inset-top)); --safe-r:max(14px, env(safe-area-inset-right));
  --safe-b:max(14px, env(safe-area-inset-bottom)); --safe-l:max(14px, env(safe-area-inset-left));
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* one spacing scale for every screen */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --radius:20px;
}
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body.oto { background:var(--night); color:#fff; font:500 14px/1.45 var(--sans); overflow:hidden; overscroll-behavior:none; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
[lang="ja"] { font-family:var(--jp); font-weight:800; }
kbd { display:inline-grid; place-items:center; min-width:1.8em; height:1.8em; padding:0 .45em; margin:0 .15em 0 .5em; font:400 .78em/1 var(--mono); color:#fff; background:rgba(255,255,255,.08); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; }
kbd:first-child { margin-left:0; }
#stage { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; display:block; touch-action:none; outline:none; }

/* ---------- loader ---------- */
.loader { position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:var(--s4); padding:var(--s6); background:var(--night); font-weight:700; text-align:center; z-index:40; }
.loader p { margin:0; max-width:40ch; font-variant-numeric:tabular-nums; }
.loader .ring { width:38px; height:38px; border-radius:50%; border:4px solid rgba(255,255,255,.18); border-top-color:var(--pink); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(1turn); } }

/* ---------- screens ---------- */
.screen { position:fixed; inset:0; z-index:20; display:flex; align-items:center; gap:var(--s5); padding:max(var(--s6), env(safe-area-inset-top)) max(var(--s6), env(safe-area-inset-right)) max(var(--s6), env(safe-area-inset-bottom)) max(var(--s6), env(safe-area-inset-left)); }
.screen.title { justify-content:space-between; padding-inline:clamp(var(--s6), 6vw, 96px); }
.screen.over, .screen.pause { justify-content:center; background:radial-gradient(ellipse at center, rgba(13,8,24,.35), rgba(13,8,24,.8)); }
.panel { position:relative; display:flex; flex-direction:column; gap:var(--s5); width:min(440px, 100%); max-height:100%; overflow:auto; padding:var(--s6); background:linear-gradient(160deg, rgba(25,15,45,.9), rgba(13,8,24,.84)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); scrollbar-width:none; }
.panel::-webkit-scrollbar { display:none; }
.panel.narrow { width:min(380px, 100%); gap:var(--s4); }
.panel.side { width:min(360px, 100%); gap:var(--s4); }
.group { display:flex; flex-direction:column; gap:var(--s3); }
h1 { margin:0; font:800 clamp(56px, 7.5vw, 96px)/.88 var(--display); letter-spacing:-.03em; font-style:italic; text-shadow:0 0 28px rgba(255,61,154,.5); }
h2 { margin:0; font:800 clamp(34px, 4.6vw, 48px)/1 var(--display); font-style:italic; letter-spacing:-.02em; }
.side h2 { font-size:24px; }
.pause h2 { font-size:32px; }
.sub { margin:0; color:var(--muted); font-size:15px; line-height:1.55; max-width:36ch; }
.cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 var(--s6); border:0; background:var(--pink); color:#fff; font:900 15px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow:0 0 30px rgba(255,61,154,.4); transition:transform .15s var(--ease-out), filter .15s; }
.ghost { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 var(--s5); background:transparent; border:1px solid var(--line); border-radius:12px; color:#fff; font:800 14px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em; transition:border-color .15s, color .15s; }
@media (hover:hover) { .cta:hover { filter:brightness(1.12); transform:translateX(3px); } .ghost:hover { border-color:var(--cyan); color:var(--cyan); } }
.cta:active { transform:scale(.97); }
.cta:disabled { opacity:.5; }
.cta.small { min-height:48px; padding:0 var(--s5); font-size:14px; }
.title .cta { align-self:flex-start; }
.best { margin:0; font:400 12px/1.4 var(--mono); color:var(--gold); }
.best:empty { display:none; }
.how { list-style:none; margin:0; padding:var(--s5) 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s5); font-size:13px; color:var(--muted); }
.how li { display:contents; }
.how b { color:#fff; font-weight:800; }
.keys { margin:0; font-size:12px; color:var(--muted); line-height:2.2; }
.keys-touch { display:none; }
.back { align-self:flex-start; color:var(--cyan); font-weight:700; font-size:13px; text-decoration:none; }
.back::before { content:'‹ '; }
.side-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.seg { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex:none; }
.seg button { padding:var(--s2) var(--s3); background:transparent; border:0; color:var(--muted); font:800 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.seg button[aria-pressed="true"] { background:var(--cyan); color:var(--night); }
.lb-note { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.lb-rows { list-style:none; margin:0; padding:0; display:grid; gap:var(--s1); }
.lb-rows li { display:grid; grid-template-columns:24px 1fr auto auto; gap:var(--s3); align-items:center; padding:var(--s2) var(--s3); background:rgba(255,255,255,.04); border-radius:8px; font-size:13px; }
.lb-rows li.top { background:linear-gradient(90deg, rgba(255,61,154,.2), rgba(255,255,255,.03)); }
.lb-rows li.me { box-shadow:inset 0 0 0 1px var(--cyan); }
.lb-rows .rk { font:800 15px/1 var(--display); font-style:italic; color:var(--muted); }
.lb-rows li.top .rk { color:var(--pink); }
.lb-rows .nm { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-rows .wv { font:800 18px/1 var(--display); font-style:italic; color:#fff; }
.lb-rows .wv::after { content:' w'; font:700 10px/1 var(--sans); color:var(--muted); font-style:normal; }
.lb-rows .sc { font:400 11px/1 var(--mono); color:var(--muted); min-width:56px; text-align:right; }
.waves { display:flex; align-items:center; gap:var(--s4); }
.waves b { font:800 104px/.82 var(--display); font-style:italic; color:var(--pink); text-shadow:0 0 34px rgba(255,61,154,.7); animation:stampin .5s var(--ease-out) both .2s; }
.waves span { font:900 13px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
@keyframes stampin { from { transform:scale(2.4) rotate(-12deg); opacity:0; } to { transform:none; opacity:1; } }
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s2); }
.stats div { display:flex; flex-direction:column; gap:var(--s1); padding:var(--s3); background:rgba(255,255,255,.05); border-radius:10px; }
.stats span { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.stats b { font:800 19px/1.1 var(--display); }
.save { display:grid; grid-template-columns:1fr auto; gap:var(--s2) var(--s3); align-items:end; }
.field { display:grid; gap:var(--s2); font:800 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.field input { height:48px; padding:0 var(--s4); background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px; color:#fff; font:700 15px/1 var(--sans); letter-spacing:0; text-transform:none; -webkit-appearance:none; appearance:none; }
.field input:focus { outline:none; border-color:var(--cyan); }
.save-msg { grid-column:1 / -1; margin:0; font-size:13px; line-height:1.5; color:var(--cyan); }
.save-msg:empty { display:none; }
.row-btns { display:flex; gap:var(--s3); flex-wrap:wrap; }
.row-btns > * { flex:1; }
.slider { display:grid; gap:var(--s2); font-weight:700; }
.slider input { width:100%; accent-color:var(--pink); }
.hint { margin:0; font-size:12px; color:var(--muted); }
.pause .row-btns { margin-top:var(--s2); }
.pause .row-btns > * { padding:0 var(--s4); }
.screen.over { align-items:flex-start; padding-top:max(10vh, var(--s6)); }

/* ---------- heads up display ---------- */
.hud { position:fixed; inset:0; z-index:10; pointer-events:none; }
.who { position:absolute; top:var(--safe-t); left:var(--safe-l); display:flex; gap:12px; align-items:center; }
.who img { width:64px; height:64px; object-fit:cover; object-position:top; background:linear-gradient(160deg, var(--pink), #5a1a8a); clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.who .name { margin:0 0 4px; font:900 13px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.bar { display:block; height:12px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22); transform:skewX(-18deg); overflow:hidden; }
.bar i { display:block; height:100%; transform-origin:left; transition:transform .18s var(--ease-out); }
.hp { display:flex; align-items:center; gap:8px; }
.hp .bar { width:min(240px, 34vw); }
.hp .bar i { background:linear-gradient(90deg, var(--pink), var(--pink-hi)); box-shadow:0 0 12px var(--pink); }
.hp b { font:800 16px/1 var(--display); font-style:italic; }
.ult { display:flex; align-items:center; gap:8px; margin-top:6px; }
.ult .bar { width:min(180px, 26vw); height:8px; }
.ult .bar i { background:linear-gradient(90deg, #1aa7c4, var(--cyan)); transform:scaleX(var(--u, 0)); }
.ult small { font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.ult.ready .bar i { background:linear-gradient(90deg, var(--cyan), #fff, var(--cyan)); background-size:200% 100%; animation:shine .8s linear infinite; box-shadow:0 0 14px var(--cyan); }
.ult.ready small { color:var(--cyan); }
@keyframes shine { to { background-position:-200% 0; } }
.hud .top { position:absolute; top:var(--safe-t); left:50%; transform:translateX(-50%); display:flex; gap:14px; align-items:baseline; font-weight:800; text-shadow:0 1px 8px rgba(0,0,0,.7); }
.hud .top .wave { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.hud .top .timer { font:400 18px/1 var(--mono); }
.hud .top .pts { font:800 20px/1 var(--display); font-style:italic; color:var(--gold); min-width:5ch; text-align:center; }
.hp.low .bar i { background:linear-gradient(90deg, var(--red), #ff8a8a); animation:blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity:.55; } }
.combo { position:absolute; right:calc(var(--safe-r) + 2vw); top:28vh; text-align:right; transform:skewX(-10deg); }
.combo b { display:block; font:800 clamp(56px, 8vw, 96px)/.85 var(--display); font-style:italic; color:#fff; text-shadow:0 0 22px var(--pink), 3px 3px 0 var(--pink); animation:pop .18s var(--ease-out); }
.combo span { font:900 14px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--pink-hi); }
@keyframes pop { from { transform:scale(1.35); } }
.bossbar { position:absolute; left:50%; bottom:calc(var(--safe-b) + 34px); transform:translateX(-50%); width:min(560px, 70vw); text-align:center; }
.bossbar p { margin:0 0 6px; font:900 14px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 8px #000; }
.bossbar p span { color:var(--gold); margin-left:6px; }
.bossbar .bar { height:14px; }
.bossbar .bar i { background:linear-gradient(90deg, #ff7a1a, var(--gold)); box-shadow:0 0 14px #ff9a1a; }
.hud .keys { position:absolute; bottom:var(--safe-b); left:var(--safe-l); margin:0; opacity:.75; }
#bars, #nums { position:fixed; inset:0; pointer-events:none; z-index:9; }
.ebar { position:absolute; left:0; top:0; width:54px; height:5px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.3); transform-origin:center; }
.ebar b { display:block; height:100%; background:var(--red); transform-origin:left; }
.num { position:absolute; left:0; top:0; font:800 26px/1 var(--display); font-style:italic; color:#fff; text-shadow:0 0 10px var(--pink), 2px 2px 0 #b0105a; will-change:transform; }
.num.big { font-size:40px; color:var(--gold); text-shadow:0 0 14px #ff9a1a, 2px 2px 0 #9a4a00; }
.num.heal { color:#4dff9a; text-shadow:0 0 12px #1aff7a, 2px 2px 0 #0a5a2a; font-size:30px; }
.num.pts { font:900 16px/1 var(--sans); font-style:normal; color:var(--gold); text-shadow:0 1px 6px #000; letter-spacing:.04em; }
.ebar.elite { border-color:var(--gold); }
.ebar.elite b { background:var(--gold); }
.banner { position:fixed; left:0; right:0; top:34vh; z-index:11; text-align:center; pointer-events:none; opacity:0; }
.banner b { display:block; font:800 clamp(48px, 9vw, 110px)/.9 var(--display); font-style:italic; letter-spacing:-.02em; text-shadow:0 0 30px rgba(255,61,154,.8); }
.banner small { display:block; margin-top:8px; font-size:18px; color:var(--cyan); letter-spacing:.2em; }
.banner.show { animation:banner 2s var(--ease-out) both; }
@keyframes banner { 0% { opacity:0; transform:scaleX(1.8); filter:blur(8px); } 15% { opacity:1; transform:none; filter:none; } 80% { opacity:1; } 100% { opacity:0; transform:translateX(-40px); } }
.callout { position:fixed; left:50%; top:22vh; z-index:11; pointer-events:none; opacity:0; font:800 clamp(40px, 6vw, 72px)/1 var(--display); font-style:italic; transform:translateX(-50%); }
.callout.perfect { color:var(--cyan); text-shadow:0 0 26px var(--cyan), 3px 3px 0 #0a5a7a; }
.callout.ko { color:var(--gold); text-shadow:0 0 30px #ff9a1a; font-size:clamp(70px, 12vw, 150px); top:30vh; }
.callout.fight { color:#fff; font-size:clamp(70px, 12vw, 160px); top:30vh; text-shadow:0 0 30px var(--pink), 6px 6px 0 var(--pink); }
.callout.clear { color:var(--cyan); text-shadow:0 0 26px var(--cyan), 4px 4px 0 #0a5a7a; top:30vh; }
.praise { position:fixed; right:calc(var(--safe-r) + 2vw); top:calc(28vh + clamp(90px, 11vw, 130px)); z-index:11; pointer-events:none; opacity:0; font:800 clamp(26px, 3.4vw, 44px)/1 var(--display); font-style:italic; color:#fff; text-shadow:0 0 18px var(--pink), 3px 3px 0 var(--pink); transform:skewX(-10deg); }
.praise.hot { color:var(--gold); text-shadow:0 0 22px #ff9a1a, 3px 3px 0 #b0105a; }
.praise.show { animation:praise 1.3s var(--ease-out) both; }
@keyframes praise { 0% { opacity:0; transform:skewX(-10deg) translateX(40px) scale(1.4); } 14% { opacity:1; transform:skewX(-10deg); } 80% { opacity:1; } 100% { opacity:0; transform:skewX(-10deg) translateY(-14px); } }
.callout.show { animation:callout 1.1s var(--ease-out) both; }
@keyframes callout { 0% { opacity:0; transform:translateX(-50%) scale(1.8); } 15% { opacity:1; transform:translateX(-50%) scale(1); } 75% { opacity:1; } 100% { opacity:0; transform:translateX(-50%) translateY(-20px); } }

/* ---------- the cut in ---------- */
.cutin { position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; background:rgba(13,8,24,.35); }
.cutin .band { position:absolute; left:-10%; right:-10%; top:50%; height:min(38vh, 300px); transform:translateY(-50%) rotate(-6deg); background:linear-gradient(90deg, #ff3d9a, #9b2cff 70%, #29e7ff); overflow:hidden; box-shadow:0 0 0 4px #fff, 0 0 60px rgba(255,61,154,.8); }
.cutin .lines { position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 40px, rgba(255,255,255,.25) 40px 42px); animation:lines .3s linear infinite; }
@keyframes lines { to { background-position:-84px 0; } }
.cutin img { position:absolute; left:18%; bottom:-6%; height:118%; transform:rotate(6deg); filter:drop-shadow(8px 0 0 rgba(13,8,24,.6)); }
.cutin p { position:absolute; right:14%; top:50%; transform:translateY(-50%) rotate(6deg); margin:0; text-align:right; }
.cutin p b { display:block; font:800 clamp(34px, 6vw, 76px)/.9 var(--display); font-style:italic; text-shadow:4px 4px 0 rgba(13,8,24,.5); }
.cutin p small { display:block; font-size:clamp(18px, 2.4vw, 30px); margin-top:6px; color:#fff; letter-spacing:.3em; }
.cutin.go .band { animation:band 1.25s var(--ease-out) both; }
.cutin.go img { animation:slidein 1.25s var(--ease-out) both; }
.cutin.go p { animation:slidein2 1.25s var(--ease-out) both; }
@keyframes band { 0% { clip-path:inset(0 100% 0 0); } 18% { clip-path:inset(0 0 0 0); } 82% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 0 0 100%); } }
@keyframes slidein { 0% { transform:translateX(-60%) rotate(6deg); opacity:1; } 20% { transform:translateX(0) rotate(6deg); } 85% { transform:translateX(4%) rotate(6deg); opacity:1; } 100% { transform:translateX(30%) rotate(6deg); opacity:0; } }
@keyframes slidein2 { 0% { transform:translate(60%, -50%) rotate(6deg); opacity:0; } 22% { transform:translate(0, -50%) rotate(6deg); opacity:1; } 85% { opacity:1; } 100% { transform:translate(-20%, -50%) rotate(6deg); opacity:0; } }

/* ---------- touch ---------- */
.touchui, .turn { display:none; }
@media (pointer:coarse) {
  .keys-desk { display:none; }
  .keys-touch { display:block; }
  body[data-state="play"] .touchui { display:block; }
  .touchui { position:fixed; inset:0; z-index:12; pointer-events:none; }
  .stick { position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); opacity:0; transition:opacity .15s; left:18vw; top:70vh; }
  .stick.on { opacity:1; }
  .stick i { position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px; border-radius:50%; background:rgba(255,255,255,.55); }
  .tb { position:absolute; pointer-events:auto; border:2px solid rgba(255,255,255,.35); background:rgba(16,9,30,.55); color:#fff; font:900 12px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em; border-radius:50%; touch-action:none; }
  .tb.down { background:var(--pink); }
  .t-attack { width:84px; height:84px; right:calc(var(--safe-r) + 10px); bottom:calc(var(--safe-b) + 20px); border-color:var(--pink); }
  .t-dodge { width:64px; height:64px; right:calc(var(--safe-r) + 110px); bottom:calc(var(--safe-b) + 14px); border-color:var(--cyan); }
  .t-ult { width:60px; height:60px; right:calc(var(--safe-r) + 30px); bottom:calc(var(--safe-b) + 120px); }
  .t-pause { width:40px; height:40px; right:var(--safe-r); top:var(--safe-t); border-radius:8px; }
  .hud .keys, .ult kbd { display:none; }
  .combo { top:20vh; }
}
@media (pointer:coarse) and (orientation:portrait) {
  body[data-state="play"] .turn { display:grid; position:fixed; inset:0; z-index:50; place-content:center; text-align:center; gap:8px; background:var(--night); font:800 22px/1.2 var(--sans); }
  .turn small { font:500 14px/1.4 var(--sans); color:var(--muted); }
}
@media (max-width:900px) { .screen.title .panel.side { display:none; } }
@media (max-width:760px) { .screen.over .panel.side { display:none; } }
/* phones on their side: everything has to fit in about 390 pixels of height */
@media (max-height:520px) {
  .screen { padding:max(var(--s3), env(safe-area-inset-top)) max(var(--s5), env(safe-area-inset-right)) max(var(--s3), env(safe-area-inset-bottom)) max(var(--s5), env(safe-area-inset-left)); }
  .screen .panel.side { display:none; }
  .panel { padding:var(--s5); gap:var(--s4); width:min(420px, 56vw); }
  .screen.over .panel { width:min(520px, 70vw); }
  h1 { font-size:48px; }
  h2 { font-size:30px; }
  .sub { font-size:13px; }
  .cta, .ghost { min-height:44px; }
  .how, .title .keys { display:none; }
  .waves b { font-size:60px; }
  .stats div { padding:var(--s2) var(--s3); }
  .stats b { font-size:15px; }
  .field input { height:44px; }
  .hud .top { left:auto; right:calc(var(--safe-r) + 54px); transform:none; }
  .screen.over { align-items:center; padding-top:max(var(--s3), env(safe-area-inset-top)); }
  /* the results in two columns: what happened on the left, what next on the right */
  .screen.over .panel:first-child { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:min-content; align-content:center; column-gap:var(--s5); row-gap:var(--s4); width:min(720px, 88vw); }
  .screen.over .panel:first-child > .group, .screen.over .panel:first-child > .stats { grid-column:1; }
  .screen.over .panel:first-child > .save, .screen.over .panel:first-child > #saveNone, .screen.over .panel:first-child > .row-btns { grid-column:2; }
  .screen.over .panel:first-child > .group { grid-row:1; }
  .screen.over .panel:first-child > .stats { grid-row:2; }
  .screen.over .panel:first-child > .save, .screen.over .panel:first-child > #saveNone { grid-row:1; align-self:end; }
  .screen.over .panel:first-child > .row-btns { grid-row:2; align-self:end; }
  .save { grid-template-columns:1fr; }
  .stats span { font-size:9px; }
  .panel.narrow { gap:var(--s3); }
  .slider { gap:var(--s1); }
}
/* phones upright: the menus stack in the middle */
@media (max-width:600px) and (min-height:521px) {
  .screen.title { justify-content:center; align-items:flex-start; padding-top:max(var(--s7), env(safe-area-inset-top)); }
  .panel { width:100%; padding:var(--s5); }
  .stats { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .banner.show, .callout.show, .cutin.go .band, .cutin.go img, .cutin.go p { animation-duration:.01s; }
}