/* Layout: roster grid left, live preview + move sheet right; the game is a 16:9 stage with a move bar under it.
   Single dark theme on purpose: a lantern-lit festival night, so the bright arenas pop against the UI. */
:root {
  --bg: #12131c; --panel: #1b1d2b; --panel2: #24273a; --line: #33374f; --text: #fbf3e4; --muted: #aeb0c8;
  --accent: #ffb547; --accent-ink: #2a1606; --good: #6ae07a; --bad: #ff6a5a;
  --display: "Lilita One", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { background: var(--bg) radial-gradient(1200px 500px at 50% -120px, #2a2440 0%, rgba(18,19,28,0) 70%) no-repeat; color: var(--text) }
body { font: 400 15px/1.45 var(--body); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 30px 28px }
.legal { color: var(--muted); font-size: 12px; margin: 4px 0 0; max-width: 80ch }
button { font: inherit; color: inherit; cursor: pointer }
button:focus-visible, .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
kbd { font: 400 12px/1 var(--display); background: var(--panel2); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 4px; padding: 4px 6px; color: var(--text); min-width: 22px; text-align: center; display: inline-block }
.wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 14px }
header.top { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap }
h1 { font: 400 clamp(34px, 6vw, 56px)/1 var(--display); margin: 0; letter-spacing: .5px; color: var(--text); text-shadow: 0 3px 0 #0b0b14, 0 0 28px rgba(255,181,71,.35) }
.sub { font: 400 15px var(--display); color: var(--accent); letter-spacing: .12em; text-transform: uppercase; margin: 2px 0 0 }
h1 em { font-style: normal; color: var(--accent) }
.lede { margin: 6px 0 0; color: var(--muted); max-width: 60ch }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; color: var(--muted) }
.ghost:hover { color: var(--text); border-color: var(--muted) }

/* select screen */
.sel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 14px; align-items: start }
.roster, .detail, .setup { background: var(--panel); border: 1px solid var(--line); border-radius: 16px }
.roster { padding: 12px; min-width: 0 }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px }
.tab { background: none; border: 0; padding: 8px 10px 9px; color: var(--muted); font: 400 15px var(--display); border-bottom: 3px solid transparent; margin-bottom: -1px }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent) }
.count { color: var(--muted); font-size: 13px; margin: 0 0 8px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px }
.card { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; background: var(--panel2); border: 2px solid transparent; border-radius: 14px; transition: transform .12s, border-color .12s }
.card canvas { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mc, #ffb547) 45%, #24273a), #1b1d2b 75%); box-shadow: 0 0 0 2px #0b0b14 }
.card span { font: 700 13px/1.15 var(--body); text-align: center; min-height: 2.3em; display: grid; place-items: center }
.card:hover { transform: translateY(-2px); border-color: var(--line) }
.card[aria-pressed="true"] { border-color: var(--mc, var(--accent)); background: #2c2f46; box-shadow: 0 0 0 1px #000 inset, 0 6px 18px -8px var(--mc, var(--accent)) }
.detail { overflow: hidden; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 10px) }
.pv { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-bottom: 1px solid var(--line) }
#preview { width: 100%; height: 100%; display: block }
#previewMove { position: absolute; left: 12px; bottom: 10px; font: 400 17px var(--display); color: var(--accent); text-shadow: 0 2px 0 #0b0b14 }
.dbody { padding: 14px 16px 16px; display: grid; gap: 10px }
.dbody h2 { font: 400 30px/1.05 var(--display); margin: 0; text-wrap: balance }
.dbody .tag { margin: 0; color: var(--muted) }
.pills { display: flex; flex-wrap: wrap; gap: 6px }
.pill { font: 800 11.5px var(--body); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted) }
.pill.warn { color: var(--accent); border-color: #7a5a24 }
.stats { display: grid; gap: 6px }
.stat { display: grid; grid-template-columns: 56px 1fr 84px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted) }
.stat b { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums }
.meter { height: 9px; background: #0e0f18; border-radius: 99px; overflow: hidden }
.meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff8ab0, var(--accent)) }
.basic, .moves li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start }
.basic { padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.muted { color: var(--muted) }
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.mh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline }
.mh b { font: 400 16px var(--display) }
.cd { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums }
.moves p { margin: 2px 0 0 }
.moves .ms { color: var(--muted); font-size: 12.5px }
.setup { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; padding: 12px 14px }
.setup .grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.setup .lbl { font: 800 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px }
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font-size: 14px; font-weight: 700 }
.chip[aria-pressed="true"] { background: #3d3222; border-color: var(--accent); color: #ffe2a6 }
.go { margin-left: auto; display: flex; gap: 8px }
.fight { background: linear-gradient(#ffc964, var(--accent)); color: var(--accent-ink); border: 0; border-radius: 99px; padding: 12px 30px; font: 400 22px var(--display); box-shadow: 0 4px 0 #a8661a, 0 0 0 2px #0b0b14; transition: transform .08s }
.fight:hover { transform: translateY(-1px) } .fight:active { transform: translateY(3px); box-shadow: 0 1px 0 #a8661a, 0 0 0 2px #0b0b14 }
.howto { color: var(--muted); font-size: 13px; margin: 0 }

/* game */
.gbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.gbar .an { font: 400 18px var(--display); color: var(--muted) }
.gbar .acts { display: flex; gap: 6px; flex-wrap: wrap }
.stage { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #0b0b14; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none }
#c { width: 100%; height: 100%; display: block }
/* paper grain over the fight, blended by the GPU compositor instead of an overlay pass on the canvas every frame */
.grainfx { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .11; background-size: 160px 160px }
body.lowfx .grainfx { display: none }
.overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(12,12,26,.74); text-align: center; padding: 16px }
.overlay h2 { font: 400 clamp(30px, 6vw, 60px)/1 var(--display); margin: 0; text-shadow: 0 3px 0 #0b0b14 }
#end.won h2 { color: var(--accent) }
.overlay p { margin: 0; color: var(--muted) }
.overlay .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.overlay .btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 10px 18px; font: 400 16px var(--display) }
.overlay .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: #0b0b14 }
dl.es { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 6px; min-width: min(560px, 80vw) }
dl.es div { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px }
dl.es dt { font-size: 12px; color: var(--muted) } dl.es dd { margin: 0; font: 400 20px var(--display); font-variant-numeric: tabular-nums }
.movebar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.mv { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; min-height: 52px; touch-action: none }
.mv .nm { font: 700 14px/1.15 var(--body); overflow-wrap: anywhere }
.mv .cdtxt { position: absolute; right: 8px; top: 6px; font: 400 12px var(--display); color: var(--muted); font-variant-numeric: tabular-nums }
.mv .cdfill { position: absolute; inset: 0; background: rgba(0,0,0,.55); transform-origin: bottom; transform: scaleY(0); pointer-events: none }
.mv.ready { border-color: #7a5a24 }
.mv.ready kbd { background: var(--accent); color: var(--accent-ink); border-color: #0b0b14 }
.keys { color: var(--muted); font-size: 13px; margin: 0 }
.touchpad { display: none }
body.touch .touchpad { display: block }
#joy { position: absolute; left: 3%; bottom: 6%; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.22); touch-action: none }
#knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(0,0,0,.4) }
.tbtn { position: absolute; bottom: 7%; width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); font: 400 15px var(--display); color: #fff; touch-action: none }
#tHit { right: 3% } #tJump { right: calc(3% + 86px); bottom: 3% ; width: 60px; height: 60px }

/* full screen: only the stage, letterboxed; everything else hides */
.fsexit { display: none; position: absolute; top: 10px; right: 10px; z-index: 6; background: rgba(18,19,30,.7); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font: 700 13px var(--body); opacity: .35; transition: opacity .2s }
.fsexit:hover, .fsexit:focus-visible { opacity: 1 }
.stage:fullscreen, body.bigscreen .stage { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; z-index: 100; display: grid; place-items: center; background: #000 }
.stage:fullscreen #c, body.bigscreen #c { width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)) }
.stage:fullscreen .fsexit, body.bigscreen .fsexit { display: block }
body.bigscreen { overflow: hidden }
/* modes, pickers, panels */
.modes { display: flex; gap: 6px; flex-wrap: wrap }
.modes .chip { font: 400 17px var(--display); padding: 9px 18px }
.pickers { display: flex; gap: 8px; flex-wrap: wrap }
.picker { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 2px solid var(--line); border-radius: 99px; padding: 6px 12px }
.picker b { font: 400 16px var(--display); color: var(--pc) } .picker canvas { border-radius: 50% }
.picker[aria-pressed="true"] { border-color: var(--pc); background: var(--panel2) }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 10px }
.panel h3 { font: 400 19px var(--display); margin: 0 }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px }
.chapter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: var(--panel2); border: 2px solid transparent; border-radius: 12px; padding: 8px 10px }
.chapter[aria-pressed="true"] { border-color: var(--accent) }
.chapter:disabled { opacity: .45; cursor: not-allowed }
.chapter .cn { font: 400 24px var(--display); color: var(--accent); min-width: 22px; text-align: center }
.chapter .cb { display: grid; min-width: 0 } .chapter b { font: 400 16px var(--display) } .chapter small { color: var(--muted) } .chapter .stars { color: var(--accent); letter-spacing: 2px; font-size: 14px }
.chapter .foes canvas { border-radius: 50%; background: #1b1d2b }
.chapter .foes { display: flex; gap: 3px; flex-wrap: wrap; max-width: 70px }
.chapters .act { grid-column: 1 / -1; margin: 6px 0 0; font: 400 16px var(--display); color: var(--accent); letter-spacing: .04em }
.sel1 { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 6px 8px; font: inherit }
.note { flex-basis: 100%; margin: 0; color: var(--accent); font-size: 13px }
.overlay.story p { max-width: 52ch; color: var(--text); font-size: 18px; text-align: left; margin: 4px 0 0 }
.talk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: rgba(27,29,43,.92); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; max-width: min(640px, 92%) }
.talk canvas { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a3150, #1b1d2b 75%); box-shadow: 0 0 0 3px var(--accent) }
.talk b { font: 400 19px var(--display); color: var(--accent); display: block; text-align: left }
.prog { color: var(--muted); font-size: 12px }
.tpanel { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start }
.tpanel ul, .tpanel ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px }
.tpanel li.done { color: var(--good) }
.tpanel ol li { display: flex; justify-content: space-between; gap: 8px; background: var(--panel2); border-radius: 8px; padding: 4px 10px }
.tpanel ol li b { font-variant-numeric: tabular-nums }
.movebar.multi { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.mvrow { display: contents }
.movebar.multi .mvrow { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; border-left: 4px solid var(--pc); padding-left: 6px }
.movebar.multi .mv { padding: 6px; min-height: 46px; grid-template-columns: 1fr } .movebar.multi .mv .nm { font-size: 12px }
.who { font: 400 16px var(--display); color: var(--pc); align-self: center }
.lobby { display: grid; gap: 10px }
.lobby .row2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.lobby input { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 7px 10px; font: inherit; width: 170px }
.lobby ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.lobby li { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 12px; padding: 6px 10px; border-left: 4px solid var(--pc, var(--line)) }
.lobby .tagx { font-size: 12px; color: var(--muted); margin-left: auto }
.lobby .code { font: 400 22px var(--display); color: var(--accent); letter-spacing: 1px }
@media (max-width: 900px) {
  .sel { grid-template-columns: 1fr }
  .detail { position: static }
  .go { margin-left: 0; width: 100% } .fight { flex: 1 }
  .movebar { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) }
  .card canvas { width: 40px; height: 40px }
  .movebar { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  #joy { width: 90px; height: 90px } .tbtn { width: 60px; height: 60px } #tJump { right: calc(3% + 70px); width: 50px; height: 50px }
}
@media (prefers-reduced-motion: reduce) { .card, .fight { transition: none } }

/* ---------- menu lighting: lantern-lit backdrop, realm-tinted glow, light sweeps ---------- */
:root { --realm: #ffb547; --realm-sky: #78c0f0 }
#menuBg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; will-change: transform }
body > .wrap { position: relative; z-index: 1 }
.roster, .detail, .setup, .panel { background: rgba(27,29,43,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
#menu h1 { position: relative; background: linear-gradient(180deg, #fff8e8 30%, #ffd9a0); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 0 #0b0b14) drop-shadow(0 0 22px color-mix(in srgb, var(--realm) 55%, transparent)); animation: flicker 4s ease-in-out infinite }
#menu h1 em { background: linear-gradient(100deg, var(--accent) 20%, #fff2c8 45%, var(--realm) 60%, var(--accent) 80%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite }
#menu h1::before { content: ""; position: absolute; left: -38px; top: 4px; width: 26px; height: 34px; border-radius: 45% 45% 40% 40%; background: radial-gradient(circle at 50% 55%, #fff4c8 0 22%, #ffb547 45%, #d8641c 100%); box-shadow: 0 0 22px 6px rgba(255,170,70,.55); transform-origin: 50% -14px; animation: swing 3.2s ease-in-out infinite }
.sub { text-shadow: 0 0 14px color-mix(in srgb, var(--realm) 60%, transparent) }
@keyframes flicker { 0%, 100% { opacity: 1 } 46% { opacity: .96 } 50% { opacity: .9 } 54% { opacity: .98 } }
@keyframes shimmer { to { background-position: -250% 0 } }
@keyframes swing { 0%, 100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
.card { position: relative; overflow: hidden; isolation: isolate }
.card::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255,240,200,.22) 50%, transparent 60%); transform: translateX(-70%); transition: transform .5s; pointer-events: none; z-index: -1 }
.card:hover::after { transform: translateX(70%) }
.card:hover { box-shadow: 0 8px 22px -10px var(--mc, var(--accent)) }
.card:hover canvas { box-shadow: 0 0 0 2px #0b0b14, 0 0 16px 2px color-mix(in srgb, var(--mc, #ffb547) 60%, transparent) }
.card[aria-pressed="true"] { animation: picked 2.2s ease-in-out infinite }
.card[aria-pressed="true"] canvas { box-shadow: 0 0 0 2px var(--mc, var(--accent)), 0 0 22px 4px color-mix(in srgb, var(--mc, #ffb547) 70%, transparent) }
@keyframes picked { 50% { box-shadow: 0 0 0 1px #000 inset, 0 6px 26px -4px var(--mc, var(--accent)) } }
.detail { border-color: color-mix(in srgb, var(--realm) 45%, var(--line)); box-shadow: 0 0 40px -12px var(--realm); transition: box-shadow .6s, border-color .6s }
.pv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 75% at 50% 0%, color-mix(in srgb, var(--realm) 30%, transparent), transparent 70%), linear-gradient(180deg, transparent 70%, rgba(10,10,18,.45)); mix-blend-mode: screen }
.detail.lit .pv::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 55%, rgba(255,250,230,.55), transparent 60%); animation: litflash .6s ease-out forwards }
@keyframes litflash { from { opacity: 1 } to { opacity: 0 } }
.dbody h2 { background: linear-gradient(180deg, #fff 35%, color-mix(in srgb, var(--realm) 60%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent }
.meter i { background: linear-gradient(90deg, #ff8ab0, var(--realm)); box-shadow: 0 0 10px color-mix(in srgb, var(--realm) 60%, transparent) }
.tab[aria-selected="true"] { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent) }
.modes .chip[aria-pressed="true"] { box-shadow: 0 0 18px -4px var(--accent) }
.fight { position: relative; overflow: hidden; background: linear-gradient(#ffd47a, var(--accent) 60%, #f09a2a); box-shadow: 0 4px 0 #a8661a, 0 0 0 2px #0b0b14, 0 0 26px -2px rgba(255,170,60,.7); animation: glowp 1.8s ease-in-out infinite }
.fight::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: sweep 2.6s ease-in-out infinite }
@keyframes glowp { 50% { box-shadow: 0 4px 0 #a8661a, 0 0 0 2px #0b0b14, 0 0 40px 4px rgba(255,170,60,.85) } }
@keyframes sweep { 0%, 55% { left: -60% } 100% { left: 130% } }
@media (prefers-reduced-motion: reduce) { #menu h1, #menu h1 em, #menu h1::before, .card[aria-pressed="true"], .fight, .fight::after, .detail.lit .pv::before { animation: none } .card::after { transition: none } }
.opts { display: flex; gap: 6px; flex-wrap: wrap }
.ghost[aria-pressed="false"] { opacity: .6; text-decoration: line-through }
.howto2 { background: rgba(12,12,26,.86); z-index: 5 }
.hgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; width: min(640px, 92%) }
.hgrid div { display: grid; gap: 4px; background: rgba(27,29,43,.92); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; text-align: left }
.hgrid b { font: 400 16px var(--display); color: var(--accent) } .hgrid span { color: var(--text); font-size: 14px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center }
.howto2 p { max-width: 52ch }
.padfocus { outline: 3px solid #fff !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255,181,71,.55) !important }
.padtoast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 200; max-width: min(560px, 92vw); background: rgba(20,22,36,.95); color: var(--text); border: 1px solid var(--accent); border-radius: 14px; padding: 10px 16px; font: 700 14px var(--body); box-shadow: 0 8px 30px rgba(0,0,0,.5) }
.ghost.dl { color: var(--accent); border-color: #7a5a24 }
.spect { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: flex; gap: 12px; align-items: center; background: rgba(14,15,26,.86); border: 1px solid var(--line); border-radius: 99px; padding: 6px 8px 6px 18px; font: 700 14px var(--body); white-space: nowrap }
.spect .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 99px; padding: 8px 16px; font: 400 16px var(--display) }
@media (max-width: 600px) { .spect { white-space: normal; border-radius: 16px; width: 92% } }
.ghead { grid-column: 1 / -1; margin: 4px 2px 0; font: 400 15px var(--display); color: var(--accent); letter-spacing: .03em; display: flex; gap: 8px; align-items: baseline }
.ghead small { font: 600 12px var(--body); color: var(--muted); letter-spacing: 0 }
.ghead + .ghead { display: none }
.card.base { background: linear-gradient(180deg, #3a3122, var(--panel2)); border-color: #7a5a24 }
.card .btag { position: absolute; top: 5px; left: 5px; font: 800 9.5px var(--body); font-style: normal; letter-spacing: .08em; color: var(--accent-ink); background: var(--accent); border-radius: 99px; padding: 1px 6px }

/* ===================== screen flow: title > main > setup > fighters > arena > VS ===================== */
.menu { min-width: 0; max-width: 100%; position: relative; min-height: calc(100vh - 58px); display: flex; flex-direction: column; gap: 14px }
.scr { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 14px; animation: scrIn .34s cubic-bezier(.2,.8,.2,1) both }
.menu.back .scr { animation-name: scrBack }
@keyframes scrIn { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
html, body { overflow-x: clip }
@keyframes scrBack { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
.lamp { display: none }
/* title */
.scr-title { align-items: center; justify-content: center; text-align: center; min-height: calc(100vh - 110px); gap: 30px }
.tlogo h1 { font-size: clamp(58px, 11vw, 136px); line-height: .95 }
.tlogo h1::before { width: 44px !important; height: 58px !important; left: -64px !important; top: 14px !important }
.tlogo .sub { font-size: clamp(15px, 2vw, 22px); letter-spacing: .38em; margin-top: 10px }
.press { background: none; border: 0; font: 400 clamp(18px, 2.4vw, 26px) var(--display); color: var(--text); letter-spacing: .14em; text-transform: uppercase; animation: pressBlink 1.6s ease-in-out infinite; text-shadow: 0 0 18px rgba(255,181,71,.6) }
@keyframes pressBlink { 50% { opacity: .35 } }
.marquee { width: 100%; max-width: calc(100vw - 32px); contain: inline-size; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) }
.mtrack { display: flex; gap: 16px; width: max-content; animation: marq 70s linear infinite }
.mtrack canvas { width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mc, #ffb547) 45%, #24273a), #1b1d2b 75%); box-shadow: 0 0 0 2px #0b0b14 }
@keyframes marq { to { transform: translateX(-50%) } }
/* main menu */
.mainGrid { display: grid; grid-template-columns: minmax(300px, 470px) minmax(0, 1fr); gap: 28px; flex: 1 }
.mainLeft { display: flex; flex-direction: column }
.mini { font-size: 42px !important; margin: 4px 0 18px 46px }
.modeTiles { display: grid; gap: 10px }
.mtile { position: relative; overflow: hidden; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left; padding: 14px 18px; border-radius: 16px; background: rgba(27,29,43,.82); border: 2px solid var(--line); transition: transform .16s, border-color .16s, background .16s }
.mtile .ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, #1b1d2b); font: 400 26px var(--display); color: var(--accent) }
.mtile b { font: 400 27px/1 var(--display) } .mtile small { display: block; margin-top: 5px; color: var(--muted); font-size: 13.5px }
.mtile .go { font: 400 24px var(--display); color: var(--accent); opacity: 0; transition: opacity .16s, transform .16s; transform: translateX(-6px) }
.mtile:hover, .mtile.padfocus, .mtile:focus-visible { transform: translateX(8px); border-color: var(--accent); background: linear-gradient(90deg, rgba(255,181,71,.2), rgba(27,29,43,.88)) }
.mtile:hover .go, .mtile.padfocus .go, .mtile:focus-visible .go { opacity: 1; transform: none }
.mtile .badge { position: absolute; top: 10px; right: 14px; font: 800 10px var(--body); letter-spacing: .1em; color: var(--accent-ink); background: var(--accent); border-radius: 99px; padding: 2px 8px }
.feature { position: relative; overflow: hidden; min-height: 440px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--realm) 45%, var(--line)); box-shadow: 0 0 60px -20px var(--realm); background: rgba(27,29,43,.45) }
#featPv { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.featTxt { position: absolute; left: 24px; bottom: 22px; display: grid; gap: 4px; text-shadow: 0 2px 0 #0b0b14 }
.featTxt small { color: var(--accent); font: 800 12px var(--body); letter-spacing: .16em; text-transform: uppercase }
.featTxt b { font: 400 clamp(34px, 4vw, 52px)/1 var(--display) } .featTxt span { color: var(--text); opacity: .8 }
/* setup */
.shead .kicker, .kicker { font: 800 12px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 }
.shead h2 { font: 400 clamp(30px, 4vw, 46px)/1.05 var(--display); margin: 2px 0 4px }
.scr-setup .setup { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 18px }
.scr-setup .setup > .grp { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line) }
.scr-setup .setup > .grp:last-of-type { border-bottom: 0 }
.scr-setup .setup .lbl { font: 400 17px var(--display); letter-spacing: 0; text-transform: none; color: var(--text) }
.scr-setup .chip { padding: 10px 18px; font-size: 15px }
/* fighter select */
.scr-select .sel { grid-template-columns: minmax(300px, 430px) minmax(0, 1fr); flex: 1 }
.scr-select .pv { aspect-ratio: 4 / 3.3 }
.stamp { position: absolute; left: 50%; top: 44%; z-index: 2; font: 400 40px var(--display); color: #fff; padding: 2px 18px; border: 4px solid var(--accent); border-radius: 12px; text-transform: uppercase; background: rgba(255,181,71,.28); text-shadow: 0 3px 0 #0b0b14; pointer-events: none; animation: stamp .9s cubic-bezier(.2,1.5,.4,1) both; white-space: nowrap }
@keyframes stamp { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.3); opacity: 0 } 35% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1) } 80% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1) } }
.mlist summary { cursor: pointer; font: 400 17px var(--display); color: var(--accent); padding: 4px 0; list-style: none } .mlist summary::before { content: "+ "; } .mlist[open] summary::before { content: "\2212  "; }
.mlist[open] { display: grid; gap: 10px }
.scr-select .pickers { justify-content: center }
.scr-select .picker { padding: 8px 16px 8px 10px; border-width: 2px; min-width: 170px }
.scr-select .picker b { font-size: 18px }
.rcard { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 14px; background: repeating-linear-gradient(135deg, #24273a 0 10px, #2a2d44 10px 20px); border: 2px dashed var(--line) }
.rcard i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 400 30px var(--display); font-style: normal; color: var(--accent); background: #1b1d2b; box-shadow: 0 0 0 2px #0b0b14 }
.rcard span { font: 700 13px/1.15 var(--body); min-height: 2.3em; display: grid; place-items: center }
.rcard:hover, .rcard.padfocus { border-color: var(--accent) }
/* arena select */
.stageHero { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 21 / 8; max-height: 40vh; border: 1px solid var(--line); background: linear-gradient(180deg, #2a3150, #1b1d2b) }
#stageImg { width: 100%; height: 100%; object-fit: cover; display: block }
#stageImg:not([src]) { visibility: hidden }
.stageTxt { position: absolute; left: 24px; bottom: 18px; display: grid; gap: 2px; text-shadow: 0 2px 0 #0b0b14 }
.stageTxt small { color: var(--accent); font: 800 12px var(--body); letter-spacing: .16em; text-transform: uppercase } .stageTxt b { font: 400 clamp(32px, 4vw, 52px)/1 var(--display) } .stageTxt span { opacity: .85 }
.arenaGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px }
.arenaGrid .chip { display: grid; padding: 0; overflow: hidden; border-radius: 14px; text-align: left; background: var(--panel2); border: 2px solid transparent; font: 400 15px var(--display); transition: transform .12s, border-color .12s }
.arenaGrid .chip img, .arenaGrid .chip .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: linear-gradient(180deg, #34406a, #1b1d2b) }
.arenaGrid .chip .ph { display: grid; place-items: center; font: 400 34px var(--display); color: var(--accent) }
.arenaGrid .chip span { padding: 7px 10px }
.arenaGrid .chip:hover, .arenaGrid .chip.padfocus { transform: translateY(-2px); border-color: var(--line) }
.arenaGrid .chip[aria-pressed="true"] { border-color: var(--accent); background: #3d3222; box-shadow: 0 0 22px -4px var(--accent); color: var(--text) }
/* settings */
.opts.big .ghost { padding: 12px 20px; font: 400 17px var(--display) }
.ctrlCard { background: rgba(27,29,43,.78); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px }
.ctrlCard h3 { font: 400 19px var(--display); margin: 0 }
.ctrlCard .hgrid { width: 100% }
/* flow bar */
.flowbar { position: sticky; top: 10px; z-index: 20; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: rgba(14,15,26,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.4) }
.fbtn { background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 9px 16px; font: 400 16px var(--display); color: var(--text) }
.fbtn kbd { font-size: 10px; padding: 2px 4px; margin-right: 4px }
.fbtn:hover, .fbtn.padfocus { border-color: var(--accent) }
.crumbs { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap }
.crumbs li { font: 800 11.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 5px 11px; border-radius: 99px; background: var(--panel2) }
.crumbs li.done { color: var(--text) } .crumbs li.on { color: var(--accent-ink); background: var(--accent) }
.hints { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap }
.hints kbd { font-size: 10px; padding: 2px 5px }
.flowbar .fight { padding: 11px 30px; font-size: 20px }
/* VS splash */
.vs { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; overflow: hidden; background: radial-gradient(ellipse at center, rgba(30,24,46,.55), rgba(8,8,16,.92)); animation: vsOut .45s 2.15s forwards }
.vs.fast { animation: vsOut .25s forwards }
.vsSide { display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 0 2%; animation: slideL .5s cubic-bezier(.2,1.25,.3,1) both }
.vsSide.l { background: linear-gradient(100deg, rgba(255,181,71,.4), rgba(255,181,71,0) 75%) }
.vsSide.r { animation-name: slideR; background: linear-gradient(260deg, rgba(90,216,255,.32), rgba(90,216,255,0) 75%) }
.vsSide figure { margin: 0 -6%; display: grid; justify-items: center; align-content: end; height: 100% }
.vsSide img { height: min(84%, 52vw); max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) }
.vsSide figcaption { margin: 4px 0 6%; font: 400 clamp(16px, 2.6vw, 38px) var(--display); text-shadow: 0 3px 0 #0b0b14; white-space: nowrap }
.vsSide figcaption small { display: block; text-align: center; font: 800 clamp(9px, 1vw, 12px) var(--body); letter-spacing: .16em; color: var(--accent) }
.vsMid { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 0 1% }
.vsMid b { font: 400 clamp(56px, 10vw, 150px)/1 var(--display); color: var(--accent); text-shadow: 0 6px 0 #0b0b14, 0 0 40px rgba(255,181,71,.6); animation: vsPop .55s .25s cubic-bezier(.2,1.8,.4,1) both }
.vsMid small { white-space: nowrap; text-align: center; font: 800 clamp(10px, 1.2vw, 14px) var(--body); letter-spacing: .2em; text-transform: uppercase; animation: vsPop .4s .5s both }
@keyframes slideL { from { transform: translateX(-60%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes slideR { from { transform: translateX(60%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes vsPop { from { transform: scale(2.6); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes vsOut { to { opacity: 0; visibility: hidden } }
@media (max-width: 900px) {
  .mainGrid { grid-template-columns: 1fr } .feature { min-height: 300px } .hints { display: none }
  .scr-select .sel { grid-template-columns: 1fr } .scr-setup .setup > .grp { grid-template-columns: 1fr; gap: 8px }
  .flowbar { flex-wrap: wrap } .flowbar .fight { flex: 1 }
}
@media (prefers-reduced-motion: reduce) { .scr, .mtrack, .press, .stamp, .vs, .vsSide, .vsMid b, .vsMid small { animation: none !important } }
.dcol { display: grid; gap: 8px } .dnote { color: var(--muted); font-size: 13.5px } .dnote b { color: var(--accent); font-weight: 800 }
@media (max-width: 600px) {
  .flowbar { gap: 8px; padding: 8px } .crumbs { display: none } .fbtn { padding: 8px 12px; font-size: 14px } .fbtn kbd { display: none }
  .flowbar .fight { padding: 10px 18px; font-size: 17px }
  .scr-select .pv { aspect-ratio: 16 / 10 } .scr-select .dbody { padding: 10px 14px }
  .tlogo h1::before { display: none }
}

/* ===================== hand-made skin: inked wobbly edges, flat painted fills, paper grain, hard print shadows =====================
   No glass, no soft glows: every panel is a painted card with a slightly shaky ink outline, like a cut-out sticker. */
:root { --ink: #0b0b14; --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") }
.mtile, .menu .card, .rcard, .menu .chip, .menu .panel, .menu .roster, .menu .detail, .menu .setup, .flowbar, .fbtn, .menu .fight, .flowbar .fight, .crumbs li, .menu .picker, .ctrlCard, .ctrlCard .hgrid div, .menu .ghost, .padtoast, .overlay .btn, .spect, .hgrid div, .talk, dl.es div {
  position: relative; isolation: isolate; background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
.mtile::before, .menu .card::before, .rcard::before, .menu .chip::before, .menu .panel::before, .menu .roster::before, .menu .detail::before, .menu .setup::before, .flowbar::before, .fbtn::before, .menu .fight::before, .flowbar .fight::before, .crumbs li::before, .menu .picker::before, .ctrlCard::before, .ctrlCard .hgrid div::before, .menu .ghost::before, .padtoast::before, .overlay .btn::before, .spect::before, .hgrid div::before, .talk::before, dl.es div::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; border: 2.5px solid var(--edge, var(--ink)); border-radius: var(--r, 12px);
  background: var(--paper), var(--fill, #1d1f30); box-shadow: 3px 4px 0 var(--ink); filter: url(#rough); pointer-events: none; transition: none }
/* fills */
.menu .panel, .menu .roster, .menu .detail, .menu .setup, .ctrlCard { --fill: #1d1f30; --r: 18px }
.mtile { --fill: #262839; --r: 16px }
.mtile:hover, .mtile.padfocus, .mtile:focus-visible { --fill: #3a2f23; --edge: var(--accent); transform: rotate(-.7deg) translateY(-2px) !important; background: none !important }
.mtile:nth-child(even) { transform: rotate(.35deg) } .mtile:nth-child(odd) { transform: rotate(-.3deg) }
.mtile .ic { background: none !important; position: relative; isolation: isolate } .mtile .ic::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 12px; background: #3a2f23; border: 2px solid var(--ink); filter: url(#rough) }
.mtile .ic svg { filter: url(#rough) }
.menu .card { --fill: #262839; --r: 14px; overflow: visible }
.menu .card::after { display: none }
.menu .card:nth-child(3n) { transform: rotate(.5deg) } .menu .card:nth-child(3n+1) { transform: rotate(-.4deg) }
.menu .card:hover, .menu .card.padfocus { --edge: #d9c7a8; transform: rotate(-1.2deg) translateY(-3px); box-shadow: none !important }
.menu .card[aria-pressed="true"] { --fill: #3a2f23; --edge: var(--mc, var(--accent)); animation: none; box-shadow: none !important }
.menu .card[aria-pressed="true"]::before { border-width: 3.5px; box-shadow: 4px 5px 0 var(--ink) }
.menu .card canvas, .menu .card:hover canvas, .menu .card[aria-pressed="true"] canvas { box-shadow: 0 0 0 2.5px var(--ink) !important }
.menu .card.base { --fill: #3a3123 }
.rcard { --fill: #23253a; border-style: solid !important } .rcard:hover, .rcard.padfocus { --edge: var(--accent) }
.menu .chip { --fill: #262839; --r: 999px; padding: 9px 18px } .menu .chip::before { filter: url(#rough2) }
.menu .chip[aria-pressed="true"] { --fill: #ffb547; color: var(--accent-ink) !important; font-weight: 800 }
.menu .chip:hover, .menu .chip.padfocus { --edge: #d9c7a8 }
.menu .fight, .flowbar .fight { --fill: #ffb547; --r: 999px; animation: none !important; color: var(--accent-ink) }
.menu .fight::after, .flowbar .fight::after { display: none }
.menu .fight::before, .flowbar .fight::before { background: var(--paper), linear-gradient(#ffd47a, #ffb547 55%, #ee9426); box-shadow: 4px 5px 0 var(--ink); filter: url(#rough2) }
.flowbar .fight:hover, .flowbar .fight.padfocus { transform: rotate(-1.5deg) scale(1.03) }
.flowbar .fight:active { transform: translate(2px, 3px) } .flowbar .fight:active::before { box-shadow: 1px 1px 0 var(--ink) }
.flowbar { --fill: #15161f; --r: 18px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px) }   /* re-assert: the sketch rule above sets position: relative */
.fbtn, .menu .ghost { --fill: #262839; --r: 999px } .fbtn:hover, .fbtn.padfocus, .menu .ghost:hover { --edge: var(--accent) }
.crumbs li { --fill: #262839; --r: 999px; padding: 5px 12px } .crumbs li::before { box-shadow: 2px 2px 0 var(--ink); border-width: 2px; filter: url(#rough2) }
.crumbs li.on { --fill: #ffb547; color: var(--accent-ink) } .crumbs li:nth-child(odd) { transform: rotate(-1deg) } .crumbs li:nth-child(even) { transform: rotate(.8deg) }
.menu .picker { --fill: #262839; --r: 999px; --edge: var(--pc) } .menu .picker[aria-pressed="true"] { --fill: #3a2f23 }
.ctrlCard .hgrid div, .hgrid div { --fill: #262839 } .padtoast { --fill: #1d1f30; --edge: var(--accent) } .spect { --fill: #15161f; --r: 999px }
.overlay .btn { --fill: #262839; --r: 999px } .overlay .btn.primary { --fill: #ffb547; color: var(--accent-ink) }
.talk { --fill: #1d1f30; --r: 18px } dl.es div { --fill: #1d1f30 }
/* framed pictures: an inked frame drawn over canvases and arena art */
.feature, .stageHero, .scr-select .pv { box-shadow: none !important; border-color: transparent !important; background: #1d1f30 }
.feature::after, .stageHero::after, .scr-select .detail .pv::after { content: ""; position: absolute; inset: 2px; z-index: 3; border: 3px solid var(--ink); border-radius: inherit; filter: url(#rough); pointer-events: none; background: none; mix-blend-mode: normal }
.feature, .stageHero { border-radius: 20px; outline: 0 } .feature { transform: rotate(.4deg) } .stageHero { transform: rotate(-.3deg) }
.arenaGrid .chip { --fill: #262839; --r: 12px; overflow: visible; padding: 6px !important; gap: 4px }
.arenaGrid .chip img, .arenaGrid .chip .ph { border-radius: 8px; border: 2px solid var(--ink) }
.arenaGrid .chip:nth-child(odd) { transform: rotate(-.6deg) } .arenaGrid .chip:nth-child(even) { transform: rotate(.5deg) }
.arenaGrid .chip:hover, .arenaGrid .chip.padfocus { transform: rotate(-1.4deg) translateY(-3px) }
.arenaGrid .chip[aria-pressed="true"] { --fill: #ffb547; color: var(--accent-ink) !important; box-shadow: none !important }
/* hand lettering: hard print shadows instead of glows, brush swashes behind titles */
#menu h1 { filter: drop-shadow(4px 5px 0 var(--ink)) !important }
.picker .pteam { margin-left: 4px; padding: 2px 8px; border-radius: 999px; font: 400 12px var(--display); letter-spacing: .04em; color: #fff; border: 2px solid var(--ink); cursor: pointer; text-transform: uppercase }
.picker .pteam.t1 { background: #d8483a } .picker .pteam.t2 { background: #2f78d8 }
.picker .pteam:hover { filter: brightness(1.12) }
.acctBtn { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 2px solid var(--ink); background: #2a2c44; color: var(--text); font: 700 14px var(--body); cursor: pointer; box-shadow: 2px 3px 0 var(--ink) }
.acctBtn:hover { background: #34375a } .acctBtn canvas { border-radius: 50% }
.acctModal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(8,8,18,.72) }
.acctCard { position: relative; isolation: isolate; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px 20px; color: var(--text) }
.acctCard::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper), #1d1f30; box-shadow: 5px 6px 0 var(--ink); filter: url(#rough) }
.acctHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px } .acctHead h2 { margin: 0; font: 400 30px var(--display) } .acctHead p { margin: 2px 0 10px }
.acctList { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px }
.acctList li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line) }
.acctList li.on { border-color: var(--accent); background: rgba(255,181,71,.1) } .acctList li canvas { border-radius: 50% } .acctList li b { font: 400 18px var(--display) }
.acctList li small { font: 700 10px var(--body); letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px }
.acctAct { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap } .acctOn { color: var(--accent); font: 700 13px var(--body) } .acctWarn { color: #ffb0a0; font: 700 13px var(--body) }
.acctRow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 }
.acctForm { display: grid; gap: 6px } .acctForm input, .acctCard input, .acctCode { font: 600 16px var(--body); padding: 9px 12px; border-radius: 10px; border: 2px solid var(--ink); background: #f6efe0; color: #1b1a26 }
.acctPin { width: 86px } .acctCode { width: 100%; min-height: 64px; resize: vertical; font: 600 12px/1.3 ui-monospace, monospace; margin: 4px 0 }
.acctCheck { display: flex; gap: 8px; align-items: center; font: 600 14px var(--body); margin-top: 4px } .acctMsg { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,181,71,.15); color: #ffe2b0; font: 700 14px var(--body) }
.acctCard .btn.danger { background: #c8402a; color: #fff } .acctCard .small { font-size: 12px } .acctCard .lbl { font: 700 13px var(--body); color: var(--muted); margin-top: 6px }
.tlogo { position: relative; isolation: isolate }
/* title screen: "works on mobile, console & PC" badge in the bottom-right corner, drawn like a sticker */
.plat { display: none }
body:has(#menu:not([hidden])[data-screen="title"]) .plat, #menu:not([hidden])[data-screen="title"] ~ .plat { display: flex }
.plat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 5; align-items: center; gap: 10px; padding: 9px 14px 9px 11px; isolation: isolate; transform: rotate(-2.5deg); color: #1b1a26; font: 400 16px/1.15 var(--display); letter-spacing: .02em; pointer-events: none; animation: platIn .5s .5s cubic-bezier(.2,1.4,.4,1) both }
.plat::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper), #fff1d6; box-shadow: 4px 5px 0 var(--ink); filter: url(#rough) }
.plat b { font-weight: 400; color: #b8461e }
.picons { display: flex; gap: 3px }
.picons svg { width: 24px; height: 24px; fill: #ffd27a; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.picons svg:nth-child(2) { fill: #9ad0ff } .picons svg:nth-child(3) { fill: #a8e0a0 } .picons .dot { fill: var(--ink); stroke: none }
@keyframes platIn { from { opacity: 0; transform: rotate(-2.5deg) translateY(16px) scale(.9) } }
@media (max-width: 560px) { .plat { font-size: 13px; padding: 7px 10px 7px 8px; gap: 7px } .picons svg { width: 19px; height: 19px } }
@media (prefers-reduced-motion: reduce) { .plat { animation: none } }
@media (max-height: 520px) { .plat { font-size: 12px; padding: 6px 9px 6px 7px; gap: 6px; bottom: 8px } .picons svg { width: 17px; height: 17px } .scr-title { gap: 6px; min-height: 0 } .scr-title .tlogo h1 { font-size: clamp(44px, 15vh, 80px) } .ticon { width: clamp(48px, 15vh, 96px); margin-bottom: -6px } .scr-title .marquee { margin-bottom: 44px } }
.ticon { width: clamp(72px, 19vh, 176px); height: auto; margin-bottom: -14px; filter: drop-shadow(5px 7px 0 rgba(11,11,20,.55)); animation: ticonBob 3.2s ease-in-out infinite; user-select: none }
@keyframes ticonBob { 50% { transform: translateY(-5px) rotate(-1.5deg) } }
@media (prefers-reduced-motion: reduce) { .ticon { animation: none } }
.tlogo::before { content: ""; position: absolute; left: -6%; right: -6%; top: 18%; bottom: 8%; z-index: -1; background: #8a3a24; border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; transform: rotate(-2.5deg); filter: url(#rough2); box-shadow: 6px 7px 0 var(--ink); opacity: .85 }
.tlogo .sub { text-shadow: 2px 2px 0 var(--ink) !important; color: #ffd27a }
.press { text-shadow: 3px 3px 0 var(--ink) !important; animation: pressBob 1.4s ease-in-out infinite !important }
@keyframes pressBob { 0%, 100% { transform: rotate(-1.5deg) } 50% { transform: rotate(1.5deg) translateY(-3px) } }
.shead h2, .featTxt b, .stageTxt b, .dbody h2 { text-shadow: 3px 3px 0 var(--ink) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--text) !important }
.shead h2 { display: inline-block; position: relative; transform: rotate(-1.2deg); isolation: isolate }
.shead .lede { color: #e6e2f0; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(11,11,20,.95), 0 0 2px var(--ink) }
.shead h2::after { content: ""; position: absolute; left: -4px; right: -10px; bottom: 2px; height: 34%; z-index: -1; background: #8a3a24; border-radius: 6px 20px 8px 18px; filter: url(#rough2); transform: rotate(.8deg) }
.featTxt b::after, .stageTxt b::after { content: none }
.kicker, .featTxt small, .stageTxt small { text-shadow: 1.5px 1.5px 0 var(--ink) }
.tab[aria-selected="true"] { border-bottom-color: transparent !important; text-shadow: none !important; position: relative }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 5px; background: var(--accent); border-radius: 4px; filter: url(#rough2); transform: rotate(-1.5deg) }
.ghead { text-shadow: 2px 2px 0 var(--ink) } .ghead small { text-shadow: none }
.card .btag { box-shadow: 2px 2px 0 var(--ink); transform: rotate(-6deg); border: 1.5px solid var(--ink) }
.mtile .badge { box-shadow: 2px 2px 0 var(--ink); transform: rotate(5deg); border: 1.5px solid var(--ink) }
.meter { border: 2px solid var(--ink); filter: url(#rough); height: 11px }
.meter i { box-shadow: none !important; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 9px), linear-gradient(90deg, #ff8ab0, var(--realm)) }
.stamp { filter: url(#rough2); background: rgba(138,58,36,.55) !important; border-color: #ffd27a !important; box-shadow: 4px 5px 0 var(--ink) }
.detail { box-shadow: none !important; transition: none }
.vsMid b { text-shadow: 6px 7px 0 var(--ink) !important; filter: url(#rough) }
.vsSide figcaption { text-shadow: 3px 3px 0 var(--ink) }
.vsSide.l { background: linear-gradient(100deg, rgba(138,58,36,.6), rgba(138,58,36,0) 70%) } .vsSide.r { background: linear-gradient(260deg, rgba(36,70,110,.6), rgba(36,70,110,0) 70%) }
/* no SVG roughness on the ~110 marquee icons: re-filtering them every frame was the title screen's main cost */
.mtrack canvas { box-shadow: 0 0 0 2.5px var(--ink), 3px 4px 0 var(--ink) !important }
.mtrack { will-change: transform }
.mtrack canvas:nth-child(odd) { transform: rotate(-4deg) } .mtrack canvas:nth-child(even) { transform: rotate(3deg) translateY(4px) }
.padfocus { outline: 3px dashed #fff !important; outline-offset: 4px; box-shadow: none !important }
@media (prefers-reduced-motion: reduce) { .press { animation: none !important } }
.xptoast { position: absolute; right: 14px; top: 64px; z-index: 7; display: grid; gap: 8px; width: min(380px, 70%); pointer-events: none }
.xptoast.go { animation: xpIn .4s cubic-bezier(.2,1.4,.4,1) both, xpOut .4s 3.1s forwards }
@keyframes xpIn { from { transform: translateX(40px) rotate(3deg); opacity: 0 } }
@keyframes xpOut { to { opacity: 0; transform: translateY(-10px) } }
.xprow { --fill: #1d1f30; --r: 14px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; text-align: left; position: relative; isolation: isolate }
.xprow::before { content: ""; position: absolute; inset: 1px; z-index: -1; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper), var(--fill); box-shadow: 3px 4px 0 var(--ink); filter: url(#rough) }
.xprow.up { --fill: #3a2f23 }
.xprow img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--ink) }
.xpmain { display: grid; gap: 3px; min-width: 0 } .xpmain b { font: 400 17px var(--display) } .xpmain small { color: var(--muted); font-size: 12.5px } .xpmain strong { color: var(--accent) }
.lv { font: 800 11px var(--body); color: var(--accent-ink); background: var(--accent); border: 1.5px solid var(--ink); border-radius: 99px; padding: 1px 7px; vertical-align: 2px; box-shadow: 1.5px 1.5px 0 var(--ink) }
.xpbar { display: block; height: 10px; border: 2px solid var(--ink); border-radius: 99px; background: #0e0f18; overflow: hidden; filter: url(#rough) }
.xpbar i { display: block; height: 100%; width: var(--to); background: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 4px, transparent 4px 9px), linear-gradient(90deg, #ffd27a, var(--accent)); animation: xpFill 1.2s .3s cubic-bezier(.3,.8,.3,1) both }
@keyframes xpFill { from { width: var(--from) } to { width: var(--to) } }
.lvup { font: 400 15px/1.05 var(--display); color: var(--accent-ink); background: var(--accent); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; text-align: center; transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--ink); animation: lvPop .7s .4s cubic-bezier(.2,1.6,.4,1) both }
@keyframes lvPop { from { transform: rotate(-6deg) scale(2.4); opacity: 0 } to { transform: rotate(-6deg) scale(1); opacity: 1 } }
.xpbox { display: grid; gap: 8px; width: min(560px, 86vw) } .xpbox h3 { margin: 0; font: 400 18px var(--display); text-align: left }
.dlevel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center } .dlevel b { font: 400 18px var(--display); color: var(--accent); text-shadow: 2px 2px 0 var(--ink) } .dlevel small { grid-column: 1 / -1; color: var(--muted); font-size: 12px }
.card .lvtag { position: absolute; top: 5px; right: 5px; font: 800 9.5px var(--body); font-style: normal; color: #fff; background: #4a3fa0; border: 1.5px solid var(--ink); border-radius: 99px; padding: 1px 6px; transform: rotate(5deg); box-shadow: 1.5px 1.5px 0 var(--ink) }
.xpm { display: inline-block; margin-left: 6px; font: 800 11px var(--body); color: var(--accent-ink); background: var(--accent); border: 1.5px solid var(--ink); border-radius: 99px; padding: 1px 7px; transform: rotate(-3deg) }

/* ---------- math story: quiz card, grade picker, How-to card ---------- */
.overlay.mathcard { align-content: start; place-content: start center; overflow-y: auto; padding: clamp(14px, 3vh, 34px) 16px 24px; gap: 10px; background: rgba(12,12,26,.86) }
.mathcard > * { width: min(760px, 100%) }
.mathcard .kicker { margin: 0; font: 400 14px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent) }
.mathcard h2 { font-size: clamp(26px, 4.4vw, 44px) }
.pips { display: flex; gap: 8px; align-items: center; justify-content: center }
.pips i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); background: #2a2c40; box-shadow: 2px 3px 0 var(--ink); filter: url(#rough) }
.pips i.on { background: radial-gradient(circle at 40% 35%, #fff2b0, #ffb547 60%, #e08a1a); animation: lvPop .4s ease-out }
.pips span { margin-left: 6px; font: 400 15px var(--display); color: var(--text) }
.mathcard .mtip { position: relative; isolation: isolate; text-align: left; padding: 10px 14px; color: #f3e6c8 !important; font-size: 15px; line-height: 1.4 }
.mathcard .mtip::before, .mathcard .mq::before, .howto::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper), var(--fill, #2a2438); box-shadow: 3px 4px 0 var(--ink); filter: url(#rough) }
.mathcard .mtip::after { content: "Tip"; position: absolute; top: -10px; left: 12px; font: 400 12px var(--display); letter-spacing: .1em; background: #8a3a24; color: #ffe7b0; padding: 1px 8px; border-radius: 6px; border: 2px solid var(--ink) }
.mathcard .mq { position: relative; isolation: isolate; --fill: #f6ecd6; color: #1b1a26 !important; font: 400 clamp(20px, 3.4vw, 30px)/1.35 var(--display); padding: 18px 20px; white-space: pre-line; text-align: center }
.mopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.mopt { position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; text-align: left; font: 400 clamp(17px, 2.6vw, 22px)/1.2 var(--display); color: var(--text); background: none; border: 0; cursor: pointer; white-space: pre-line }
.mopt::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper), var(--mf, #262839); box-shadow: 3px 4px 0 var(--ink); filter: url(#rough2); transition: transform .12s }
.mopt:hover:not(:disabled)::before, .mopt:focus-visible::before, .mopt.padfocus::before { --mf: #34374f; transform: translate(-1px, -2px) }
.mopt kbd { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #11121c; border: 2px solid var(--ink); font: 400 15px var(--display); color: var(--accent) }
.mopt.right::before { --mf: #2f7a43 } .mopt.wrong::before { --mf: #8a2e2e }
.mopt:disabled { cursor: default } .mopt:disabled:not(.right):not(.wrong) { opacity: .55 }
.mfb { text-align: left; font-size: 16px; line-height: 1.4; color: var(--text) !important; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--ink) }
.mfb.good { background: rgba(47,122,67,.35) } .mfb.bad { background: rgba(138,46,46,.35) }
.mfb b { font: 400 18px var(--display) }
.gradeRow { margin: 0 0 10px; flex-wrap: wrap } .gradeRow #gradeSel { flex-wrap: wrap }
.gradeRow .chip { min-width: 46px; justify-content: center }
.howto { position: relative; isolation: isolate; --fill: #f6ecd6; width: min(560px, 100%); color: #1b1a26; text-align: left; padding: 12px 18px 10px }
.howto h3 { margin: 0 0 6px; font: 400 20px var(--display); color: #8a3a24 }
.howto ol { margin: 0; padding-left: 22px; display: grid; gap: 3px; font-size: 15px; line-height: 1.35 }
#end { overflow-y: auto }
@media (max-width: 560px) { .mopts { grid-template-columns: 1fr } .mopt { min-height: 48px } }
@media (max-width: 900px), (max-height: 620px) { .overlay.mathcard { position: fixed; inset: 0; z-index: 60; border-radius: 0; background: #12131f } }
/* phones: results, pause and story talk get the whole screen instead of squeezing into the small game view */
@media (max-width: 900px), (max-height: 620px) { #end.overlay, #pause.overlay, #storyCard.overlay { position: fixed; inset: 0; z-index: 60; border-radius: 0; overflow-y: auto; background: rgba(14,15,28,.95); place-content: safe center; padding: 20px 16px 28px } #end.overlay { align-content: start; place-content: start center } }

.legalLinks { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font-size: 12px; opacity: .7; z-index: 5 }
.legalLinks a { color: inherit }
.acctCloud { border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px }
.acctCloud h3 { margin: 0 0 4px }
.acctCloudCode { font-size: 1.4em; letter-spacing: .08em; font-family: ui-monospace, monospace }