:root, :root[data-theme="classic"] {
  --bg: #323437; --bg-alt: #2c2e31; --sub: #646669; --text: #d1d0c5;
  --err: #ca4754; --alt: #b392f0; --flash: #3c3d40; --overlay: rgba(50, 52, 55, .97);
  --stage-0: #7fb4d9; --stage-1: #e2b714; --stage-2: #f2734a;
  --font-ui: 'Roboto Mono', ui-monospace, Menlo, monospace;
  --font-words: 'Roboto Mono', ui-monospace, Menlo, monospace;
  --r: 8px;
  color-scheme: dark;
}
:root[data-theme="soft"] {
  --bg: #2b2d31; --bg-alt: #36383d; --sub: #a8aab1; --text: #ecebe6;
  --err: #f07178; --alt: #c3a6ff; --flash: #393b40; --overlay: rgba(43, 45, 49, .97);
  --stage-0: #8ccaf2; --stage-1: #f4c859; --stage-2: #ff9470;
  --font-ui: 'Nunito', system-ui, sans-serif;
  --font-words: 'DM Mono', ui-monospace, Menlo, monospace;
  --r: 12px;
  color-scheme: dark;
}
:root[data-theme="frost"] {
  --bg: #2e3440; --bg-alt: #3b4252; --sub: #aab3c4; --text: #eceff4;
  --err: #f2858e; --alt: #c9a3d9; --flash: #3b4252; --overlay: rgba(46, 52, 64, .97);
  --stage-0: #88c0d0; --stage-1: #ebcb8b; --stage-2: #e8997a;
  --font-ui: 'Lexend', system-ui, sans-serif;
  --font-words: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r: 12px;
  color-scheme: dark;
}
:root[data-theme="daylight"] {
  --bg: #f3f4f6; --bg-alt: #e4e7eb; --sub: #565c68; --text: #23272e;
  --err: #c02d39; --alt: #6a44bd; --flash: #e8eaee; --overlay: rgba(243, 244, 246, .97);
  --stage-0: #1f68a8; --stage-1: #8a5e00; --stage-2: #b63e1c;
  --font-ui: 'Nunito', system-ui, sans-serif;
  --font-words: 'DM Mono', ui-monospace, Menlo, monospace;
  --r: 12px;
  color-scheme: light;
}
:root {
  --main: var(--stage-0);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  height: var(--app-h, 100dvh); overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  transition: background .25s;
}
body.flash { background: var(--flash); transition: none; }
#inp { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; border: 0; padding: 0; }
button { font: inherit; }
kbd { background: var(--bg-alt); border-radius: 4px; padding: 1px 6px; font-family: inherit; color: var(--text); }

header {
  flex: none; width: 100%; max-width: 1000px; z-index: 5;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gutter-r) 6px var(--gutter-l);
  display: flex; align-items: center; gap: 16px;
}
.logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.logo span { color: var(--main); }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-left: auto; }
nav button {
  flex: none; background: none; border: 0; color: var(--sub); font-size: .82rem;
  padding: 6px 9px; border-radius: calc(var(--r) - 2px); cursor: pointer; transition: color .15s;
}
nav button:hover { color: var(--text); }
nav button.on { color: var(--main); }
nav .sep { flex: none; width: 1px; background: var(--bg-alt); margin: 4px 6px; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--main); outline-offset: 1px; }

main {
  flex: 1; min-height: 0; width: 100%; max-width: 1000px; overflow-y: auto; scrollbar-width: none;
  padding: 0 var(--gutter-r) 8px var(--gutter-l);
  display: flex; flex-direction: column; align-items: center;
}
#hud, .chip, #echo, #line, #caret, .stat .v, .vbtn span, .ob code, table, #prompt b, .seg b { font-family: var(--font-words); }
#hud { flex: none; display: flex; gap: 20px; align-items: baseline; color: var(--main); font-size: 1.6rem; min-height: 2.2rem; font-variant-numeric: tabular-nums; }
#hud .small { font-size: .85rem; color: var(--sub); }
#phase { font-size: .85rem; letter-spacing: .12em; color: var(--sub); text-transform: uppercase; }
#combo { font-size: 1rem; color: var(--sub); transition: color .1s, text-shadow .1s; }
#combo.hot { color: var(--main); text-shadow: 0 0 12px color-mix(in srgb, var(--main) 55%, transparent); }
.errflash { color: var(--err) !important; }
#banner { flex: none; color: var(--sub); font-size: .82rem; min-height: 1.2rem; text-align: center; }
#scr { flex: none; color: var(--sub); font-size: .72rem; opacity: .6; text-align: center; min-height: 1rem; }

#stages { flex: none; display: flex; gap: 4px; width: 100%; max-width: 560px; margin: 4px 0 2px; }
.seg {
  flex: 1; display: flex; justify-content: space-between; gap: 6px; padding: 5px 9px; border-radius: calc(var(--r) - 2px);
  background: var(--bg-alt); color: var(--sub); font-size: .75rem; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  transition: color .3s, box-shadow .3s;
}
.seg b { font-weight: 500; }
.seg.done { color: var(--text); }
.seg.done b { color: var(--sub); font-weight: 400; }
.seg.now { color: var(--main); box-shadow: inset 0 0 0 1px var(--main); }
.seg.broken { box-shadow: inset 0 0 0 1px var(--err); }
.seg.broken b { color: var(--err); }
.seg.bump { animation: bump .3s ease-out; }
@keyframes bump { 40% { transform: scale(1.06); } }

#arena {
  flex: 1 0 auto; width: 100%; display: grid; gap: 8px; align-items: center; margin-top: 6px;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  grid-template-areas: "tl t tr" "l stage r" "bl b br";
}
.slot[data-cell="tl"] { grid-area: tl; align-self: start; }
.slot[data-cell="t"] { grid-area: t; }
.slot[data-cell="tr"] { grid-area: tr; align-self: start; }
.slot[data-cell="l"] { grid-area: l; }
.slot[data-cell="r"] { grid-area: r; }
.slot[data-cell="bl"] { grid-area: bl; align-self: end; }
.slot[data-cell="b"] { grid-area: b; }
.slot[data-cell="br"] { grid-area: br; align-self: end; }
.slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slot[data-cell="t"], .slot[data-cell="b"] { flex-direction: row; justify-content: center; }
.slot.behind { opacity: .85; }
.slot.behind::before { content: 'behind'; font-size: .6rem; color: var(--sub); letter-spacing: .1em; text-align: center; align-self: center; }

#stage { grid-area: stage; position: relative; width: 100%; height: 100%; min-height: 110px; cursor: grab; touch-action: none; }
#stage:active { cursor: grabbing; }
#cube { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; } /* absolute so its pixel size never sizes the row */
#mirror { position: absolute; right: 0; bottom: 0; border-radius: calc(var(--r) + 2px); background: var(--bg-alt); pointer-events: none; }
#mirror span { position: absolute; right: 2px; top: -16px; white-space: nowrap; font-size: .62rem; color: var(--sub); letter-spacing: .08em; }
#toasts { position: absolute; left: 0; top: 6px; z-index: 2; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.toast { color: var(--main); font-size: .82rem; animation: toast 1.6s ease-out forwards; }
.toast.fault { color: var(--err); }
@keyframes toast { 0% { opacity: 0; transform: translateY(6px); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

.chip {
  position: relative; background: var(--bg-alt); border-radius: var(--r); padding: 15px 10px 8px; min-width: 0; white-space: nowrap;
  text-align: center; font-size: 1.05rem; transition: opacity .12s, transform .08s, box-shadow .12s;
}
.chip .nota { position: absolute; left: 7px; top: 4px; font-size: .65rem; color: var(--sub); }
.chip.alt .nota { color: var(--alt); }
.chip .w { display: inline-block; }
.chip .typed { color: var(--main); }
.chip.dim { opacity: .18; }
.chip.match { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main) 50%, transparent); }
.chip.fire { transform: scale(.94); box-shadow: inset 0 0 0 2px var(--main); }
.chip.target { box-shadow: inset 0 0 0 1px var(--main); }
.chip .w.fresh { animation: fresh .18s ease-out; }
.chip .w.flip { animation: flip .32s ease-out both; }
@keyframes fresh { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes flip { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: none; } }
#timer, .chip .typed, .toast, #caret { transition: color .3s, background .3s; }

#extras { flex: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.glabel { font-size: .65rem; color: var(--sub); letter-spacing: .1em; }
.gpairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pair { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pcap { font-size: .65rem; color: var(--alt); text-align: center; }
.pcap span { color: var(--sub); }
.pair .chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
#extras .chip { font-size: .85rem; padding: 13px 4px 7px; }
#hint { flex: none; color: var(--sub); font-size: .78rem; text-align: center; min-height: 1rem; margin-top: 4px; }

body.focus .chip:not(.match) { visibility: hidden; }
body.focus .slot::before { visibility: hidden; }
body.streaming .slot, body.streaming #hint { visibility: hidden; }
body.streaming #extras { display: none; }
body.drill #stages, body.drill #scr { visibility: hidden; }

#echo {
  flex: none; height: 2.1rem; margin-top: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; letter-spacing: .02em; border-radius: var(--r); min-width: 9rem; padding: 0 14px;
}
.echo-typed { color: var(--main); }
.echo-bad { color: var(--err); text-decoration: underline 2px; text-underline-offset: 4px; }
.echo-caret { width: 2px; height: 1.4rem; background: var(--main); margin-left: 2px; animation: blink 1s step-end infinite; }
#arena.wrong .chip { animation: wrongflash .3s ease-out; }
@keyframes wrongflash { 0% { box-shadow: inset 0 0 0 1px var(--err); } 100% { box-shadow: none; } }
body.streaming #echo { display: none; }

#prompt {
  position: absolute; z-index: 2; left: 0; right: 0; top: 4px; text-align: center; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#prompt b { font-size: 3rem; line-height: 1; color: var(--main); font-weight: 700; }
#prompt span { font-size: .75rem; color: var(--sub); letter-spacing: .06em; }
body.drill .chip.target { box-shadow: inset 0 0 0 2px var(--main); }

#stream { flex: none; width: 100%; margin-top: 10px; }
#case { color: var(--sub); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; text-align: center; }
#case b { color: var(--main); font-weight: 500; }
#line { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 1.6rem; line-height: 1.2; }
.sw { display: inline-flex; flex-direction: column; align-items: center; }
.sw .nota { font-size: .6rem; color: var(--sub); height: .9rem; }
.sw .nota.alt { color: var(--alt); }
.sw .l { color: var(--sub); }
.sw .l.ok { color: var(--text); }
.sw .l.bad { color: var(--err); text-decoration: underline 2px; text-underline-offset: 4px; }
.sw.repeat .l { color: var(--main); opacity: .8; }
.sw.done .l { color: var(--text); opacity: .35; }
.sw.done .l.bad { color: var(--err); opacity: .8; text-decoration: none; }
.sw.missed .word { text-decoration: underline 2px var(--err); text-underline-offset: 6px; }
#caret { position: absolute; width: 2px; height: 1.6rem; background: var(--main); border-radius: 1px; transition: left .08s ease-out, top .08s ease-out; animation: blink 1s step-end infinite; }
#caret.typing { animation: none; }
@keyframes blink { 50% { opacity: 0; } }

footer { flex: none; color: var(--sub); font-size: .7rem; padding: 4px var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 10px) var(--gutter-l); text-align: center; opacity: .8; }

.popover {
  position: fixed; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + 58px); right: var(--gutter-r);
  width: min(440px, calc(100vw - 32px)); max-height: calc(var(--app-h, 100dvh) - 80px); overflow-y: auto;
  background: var(--bg-alt); border-radius: calc(var(--r) + 2px); padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.vtitle { font-size: .7rem; color: var(--sub); letter-spacing: .1em; margin-bottom: 8px; }
.vtabs { display: flex; gap: 6px; margin-bottom: 8px; }
.vtabs button { flex: 1; background: var(--bg); border: 0; color: var(--sub); font-size: .75rem; padding: 6px 10px; border-radius: calc(var(--r) - 2px); cursor: pointer; }
.vtabs button.on { color: var(--main); box-shadow: inset 0 0 0 1px var(--main); }
.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vbtn {
  background: var(--bg); border: 0; border-radius: var(--r); padding: 6px 4px 4px; cursor: pointer;
  color: var(--sub); font-size: .7rem; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.vbtn canvas { width: 100%; max-width: 100%; aspect-ratio: 1; display: block; }
.vbtn.on { color: var(--main); box-shadow: inset 0 0 0 1px var(--main); }

#plist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.prow { display: flex; align-items: center; gap: 4px; background: var(--bg); border-radius: calc(var(--r) - 2px); padding: 4px; }
.prow.on { box-shadow: inset 0 0 0 1px var(--main); }
.prow button { background: none; border: 0; color: var(--sub); font-size: .75rem; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.prow button:hover { color: var(--text); }
.prow .pname { flex: 1; text-align: left; color: var(--text); font-size: .85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; }
.prow .pname span { color: var(--sub); font-size: .7rem; margin-left: 6px; }
.prow.on .pname { color: var(--main); }
.prow .danger { color: var(--err); }
#pform { display: flex; gap: 6px; }
#pform input, .pname-input {
  flex: 1; min-width: 0; background: var(--bg); border: 0; border-radius: calc(var(--r) - 2px); color: var(--text);
  font: inherit; font-size: .85rem; padding: 8px 10px;
}
#pform button { background: var(--bg); border: 0; color: var(--main); border-radius: calc(var(--r) - 2px); padding: 8px 12px; cursor: pointer; }

.plink { margin-top: 10px; background: none; border: 0; color: var(--sub); font-size: .75rem; cursor: pointer; padding: 4px 0; }
.plink:hover { color: var(--text); }

.ob { max-width: 620px; }
.ob h1 { font-size: 2.6rem; margin: 6px 0 4px; letter-spacing: -.02em; }
.ob h1 span { color: var(--main); }
.ob h2 { font-size: 1.4rem; margin: 6px 0 4px; font-weight: 500; text-wrap: balance; }
.ob-step { color: var(--sub); font-size: .75rem; letter-spacing: .12em; }
.ob-lead { color: var(--sub); margin: 0 0 16px; }
.ob-how { margin: 0 0 18px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.ob-how b { color: var(--main); font-weight: 500; }
.ob code { background: var(--bg-alt); padding: 1px 6px; border-radius: 4px; font-family: inherit; }
.ob-name { display: flex; flex-direction: column; gap: 6px; color: var(--sub); font-size: .85rem; }
.ob-name input { background: var(--bg-alt); border: 0; border-radius: var(--r); color: var(--text); font: inherit; font-size: 1rem; padding: 10px 12px; max-width: 320px; }
.ob-choice { margin-bottom: 12px; }
.ob-ctitle { color: var(--sub); font-size: .75rem; letter-spacing: .1em; margin-bottom: 6px; }
.ob-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.ob-opt, .ob-mode {
  background: var(--bg-alt); border: 0; border-radius: var(--r); color: var(--sub); text-align: left; cursor: pointer;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; line-height: 1.4;
}
.ob-opt b, .ob-mode b { color: var(--text); font-size: .95rem; font-weight: 500; }
.ob-opt.on { box-shadow: inset 0 0 0 1px var(--main); }
.ob-swatch { display: inline-flex; gap: 2px; margin-right: 8px; vertical-align: -1px; }
.ob-swatch i { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .35); }
.ob-theme .ob-opts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ob-opt.on b { color: var(--main); }
.ob-modes { display: flex; flex-direction: column; gap: 8px; }
.ob-mode:hover b, .ob-mode:focus-visible b { color: var(--main); }
.ob-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.ob-nav button { background: var(--bg-alt); border: 0; border-radius: var(--r); color: var(--sub); padding: 9px 16px; cursor: pointer; }
.ob-nav .ob-primary { color: var(--bg); background: var(--main); font-weight: 500; }

.overlay {
  position: fixed; inset: 0; z-index: 10; background: var(--overlay);
  display: flex; align-items: center; justify-content: center; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gutter-r) 16px var(--gutter-l);
  animation: fresh .2s ease-out;
}
.sheet { width: 100%; max-width: 760px; margin: auto; }
.big { display: flex; gap: 36px; flex-wrap: wrap; margin-bottom: 12px; }
.row { display: flex; gap: 28px; flex-wrap: wrap; margin: 12px 0; }
.stat .k { color: var(--sub); font-size: 1rem; }
.stat .v { color: var(--main); font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat.sm .k { font-size: .85rem; }
.stat.sm .v { font-size: 1.5rem; color: var(--text); }
.pb { color: var(--main); font-size: .9rem; letter-spacing: .1em; margin-bottom: 8px; }
.graph { width: 100%; height: 150px; display: block; margin-top: 8px; }
.again { color: var(--sub); font-size: .82rem; margin-top: 16px; }
.table-wrap { overflow-x: auto; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
th { text-align: left; color: var(--sub); font-weight: 400; padding: 4px 8px 6px 0; }
td { padding: 5px 8px 5px 0; border-top: 1px solid var(--bg-alt); white-space: nowrap; }

@media (max-width: 640px) {
  header { gap: 10px; padding-top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .logo { font-size: 1.1rem; }
  nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button { font-size: .75rem; padding: 6px 7px; }
  #hud { font-size: 1.25rem; gap: 12px; min-height: 1.8rem; }
  #scr, footer { display: none; }
  #banner { font-size: .72rem; }
  #arena { gap: 4px; }
  .slot { gap: 3px; }
  .chip { font-size: .76rem; padding: 13px 5px 5px; }
  .chip .nota { left: 5px; }
  #extras { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 6px; }
  .glabel, .pcap { display: none; }
  .gpairs { gap: 3px; }
  .pair .chips { gap: 2px; }
  #extras .chip { font-size: .72rem; padding: 12px 2px 4px; }
  #line { font-size: 1.2rem; gap: 2px 10px; }
  #echo { font-size: 1.2rem; height: 1.8rem; margin-top: 4px; }
  #prompt b { font-size: 2.2rem; }
  .ob h1 { font-size: 2rem; }
  .ob-opts { grid-template-columns: minmax(0, 1fr); }
  #caret { height: 1.2rem; }
  .stat .v { font-size: 2.2rem; }
  .vgrid { gap: 6px; }
}
@media (max-height: 760px) {
  #scr, footer { display: none; }
  #banner { font-size: .72rem; min-height: 1rem; }
  #hud { font-size: 1.3rem; min-height: 1.8rem; }
  #stages { margin: 2px 0 0; }
  .seg { padding: 3px 8px; }
  #arena { gap: 4px; margin-top: 2px; }
  .slot { gap: 3px; }
  .chip { font-size: .88rem; padding: 12px 8px 4px; }
  .chip .nota { top: 2px; font-size: .58rem; }
  .slot.behind::before { font-size: .55rem; }
  #echo { height: 1.7rem; font-size: 1.2rem; margin-top: 2px; }
  #extras { margin-top: 4px; gap: 6px; }
  #extras .chip { padding: 11px 3px 4px; font-size: .78rem; }
  #stage { min-height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}