:root{color-scheme:light;--paper:#fcfcfc;--ink:#181818;--muted:#555;--line:#c9c9c9;font:16px system-ui,Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--ink);background:#e7e7e7}
button,input{font:inherit}
button{cursor:pointer;color:inherit;background:var(--paper);border:2px solid var(--ink);font-weight:800}
button:hover{box-shadow:2px 2px 0 var(--ink)}
button:focus-visible,a:focus-visible,.pick:focus-within{outline:3px dashed var(--ink);outline-offset:4px}
.cabinet{width:min(1150px,100%);margin:auto;min-height:100svh;padding:0 clamp(14px,3vw,40px) 20px;background:repeating-linear-gradient(0deg,#fafafa 0 31px,#ededed 31px 32px);border-inline:1px solid #b8b8b8}
.mast,.matchbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px solid var(--ink);padding:12px 0}
.mast-end{display:flex;align-items:center;gap:18px}
.brand,h1,h2,.pick-name,.ink,#timer{font-family:Impact,'Arial Black',system-ui,sans-serif;font-style:italic;letter-spacing:.025em;text-transform:uppercase;font-weight:900}
.brand{color:inherit;text-decoration:none;font-size:clamp(1.2rem,3vw,2rem);white-space:nowrap}
.brand span{font-size:.56em;vertical-align:15%}
.edition,.eyebrow,.matchbar,.legend{font-family:ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:.08em}
.edition,.eyebrow{font-size:.75rem}
.small{padding:6px 11px;font-size:.82rem}
.intro{text-align:center;padding:clamp(15px,3vw,36px) 0 20px}
.eyebrow{margin:0 0 .45rem}
h1,h2{line-height:1;margin:.1em 0;text-wrap:balance}
h1{font-size:clamp(2.3rem,7vw,5.7rem);transform:rotate(-1deg)}
.intro>p:last-child{margin:.8rem auto 0;color:var(--muted);max-width:42ch}
.roster{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.8vw,20px)}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0;background:#fff8;border:2px solid #ababab;padding:12px 5px 9px;cursor:pointer}
.pick:nth-of-type(odd){transform:rotate(-.5deg)}
.pick:nth-of-type(even){transform:rotate(.5deg)}
.pick:has(:checked){border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.pick:has(:checked)::before{content:"▼";position:absolute;top:-13px;left:calc(50% - 10px);line-height:1;background:white;padding:0 2px}
.pick:hover{border-color:var(--ink)}
.pick canvas{width:100%;max-width:205px;height:auto;display:block}
.pick-name{font-size:clamp(.87rem,2.4vw,1.65rem);border-block:1px solid #999;text-align:center;width:93%;padding:2px 0}
.pick-move{font-size:clamp(.66rem,1.4vw,.83rem);color:var(--muted);text-align:center;padding-top:6px}
.sr,.pick input{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.launch{text-align:center;margin:24px 0 18px}
.ink{background:var(--ink);color:white;padding:9px 22px;border:2px solid var(--ink);font-size:clamp(1.1rem,2.8vw,1.55rem);box-shadow:4px 4px 0 #a0a0a0}
.ink:hover{background:#333}
.ink span{margin-left:14px}
.legend{border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 15px;padding-top:12px;margin-top:12px;font-size:.74rem;letter-spacing:0}
kbd{display:inline-block;min-width:1.4em;text-align:center;border:1px solid #777;background:white;padding:0 3px;font:inherit}
.matchbar{padding:8px 0;border-bottom:0;font-size:clamp(.65rem,1.8vw,.9rem)}
.arena{position:relative;border:2px solid var(--ink);box-shadow:4px 4px 0 #aaa;background:#f8f8f8;overflow:hidden}
#ring{display:block;width:100%;height:auto}
.hud{position:absolute;inset:3% 3% auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(7px,3vw,30px);pointer-events:none}
.fighter-hud{display:grid;gap:3px;line-height:1.1;font-weight:950;font-style:italic;text-transform:uppercase;font-size:clamp(.57rem,2vw,1.3rem)}
.rival{text-align:right}
#timer{font-size:clamp(1.05rem,4.7vw,3rem);line-height:1;background:#fafafa;padding:0 .22em}
meter{width:100%;height:clamp(6px,1.65vw,17px);appearance:none;display:block;background:#e9e9e9;border:1px solid #181818}
meter::-webkit-meter-bar{background:#e9e9e9;border:0;border-radius:0}
meter::-webkit-meter-optimum-value{background:repeating-linear-gradient(125deg,#161616 0 4px,#363636 4px 5px);border-radius:0}
meter::-moz-meter-bar{background:#202020}
meter.power{width:68%;height:clamp(4px,.75vw,8px)}
meter.power::-webkit-meter-optimum-value{background:repeating-linear-gradient(90deg,#4b4b4b 0 9px,#aaa 9px 10px)}
.rival meter{justify-self:end;direction:rtl}
.banner{position:absolute;top:21%;left:50%;transform:translateX(-50%) rotate(-3deg);background:white;border:2px solid var(--ink);padding:4px 12px;font-size:clamp(.65rem,2.6vw,1.55rem);font-weight:950;font-style:italic;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.overlay{position:absolute;inset:0;background:#fff9;display:grid;place-items:center;padding:7px}
.notice{width:min(85%,465px);background:#fff;border:2px solid var(--ink);padding:clamp(7px,2vw,22px);text-align:center;box-shadow:5px 5px 0 var(--ink)}
.notice h2{font-size:clamp(1.12rem,5vw,3.3rem)}
.notice p{font-size:clamp(.63rem,1.8vw,.96rem);margin:6px 0}
.notice-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin-top:9px}
.move-tip{text-align:center;font-size:.85rem;margin:11px 0 0;font-weight:700}
.touch{display:none;justify-content:space-between;gap:5px;margin-top:12px}
.touch div{display:flex;gap:4px}
.touch button{min-height:42px;padding:4px 7px;touch-action:none;user-select:none;font-size:clamp(.65rem,2.1vw,.9rem)}
.touch button.held{background:var(--ink);color:white}
@media(pointer:coarse),(max-width:640px){.touch{display:flex}}
@media(max-width:570px){.edition{display:none}.roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pick canvas{width:min(100%,135px)}.launch{margin-top:16px}.intro{padding-bottom:17px}.legend{gap:6px 11px}.intro>p:last-child{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
.cabinet{
  padding-top:env(safe-area-inset-top);
  padding-left:max(clamp(14px,3vw,40px),env(safe-area-inset-left));
  padding-right:max(clamp(14px,3vw,40px),env(safe-area-inset-right));
  padding-bottom:max(20px,env(safe-area-inset-bottom));
}
@media (pointer:coarse),(max-width:640px){
  .cabinet:has(#play:not([hidden])) .legend{display:none}
  .touch{align-items:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .touch div{display:grid;grid-template-columns:repeat(2,minmax(48px,1fr));gap:6px}
  .touch button{min-height:48px;min-width:48px;font-size:.85rem;-webkit-tap-highlight-color:transparent}
  .touch-move button{font-size:1.25rem}
  .touch-actions button:last-child{grid-column:span 2}
  .touch button[data-ready="true"]{outline:2px dashed var(--ink);outline-offset:2px}
}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){
  .cabinet:has(#play:not([hidden])) .mast{display:none}
  #play{position:relative}
  #ring{height:calc(100svh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain}
  .arena{margin-inline:auto;width:min(100%,calc((100svh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.81))}
  .touch{position:absolute;inset:auto 0 0;pointer-events:none}
  .touch button{pointer-events:auto}
  .move-tip{display:none}
}