*{box-sizing:border-box} :root{color-scheme:dark;font-family:Inter,Segoe UI,Arial,sans-serif;color:#e8f5f0;background:#101923}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#203c43 0,transparent 58%);min-height:100vh}main{max-width:1160px;margin:auto;padding:30px 24px 18px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:#83b6ad}h1{font-size:27px;margin:9px 0 0;letter-spacing:-1px}h1 span{font-weight:400;color:#8dabae}.badge{font-size:10px;letter-spacing:2px;border:1px solid #3f645e;border-radius:20px;padding:8px 12px;color:#a5e1bb}.layout{display:grid;grid-template-columns:minmax(0,720px) 1fr;gap:32px;align-items:start}.play{background:#0a121a;border:1px solid #34524d;border-radius:15px;overflow:hidden;box-shadow:0 18px 50px #0004}.score,.under{display:flex;justify-content:space-between;padding:15px 20px;font:11px Consolas,monospace;letter-spacing:1px;color:#94b1ab}.score i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a7eda5;margin-right:8px}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#263c36}.under{font-size:10px;letter-spacing:0;border-top:1px solid #20382f}aside{padding:8px 0}h2{font-size:30px;line-height:1.12;letter-spacing:-1px;margin:12px 0 15px}p{color:#a3b9b7;font-size:13px;line-height:1.6}.fact{padding:14px 0;border-bottom:1px solid #2e4247}.fact b{display:block;font-size:14px}.fact span{display:block;font-size:11px;color:#8ba6a3;margin-top:5px}.notice{background:#b6db9b0c;border-left:2px solid #a6bf7c;margin:19px 0;padding:10px 12px;font-size:11px;color:#b4c4b5;line-height:1.6}details{font-size:12px;color:#b2c7c1;margin:18px 0}summary{cursor:pointer}label{display:flex;align-items:center;gap:7px;margin:12px 0;font-size:11px}input{background:#0e1a21;border:1px solid #3b5756;color:#e6f6e7;border-radius:5px;width:58px;padding:5px;margin-left:auto}small{color:#8ba6a3;line-height:1.5}button{font:inherit;cursor:pointer;color:#d6e7df;background:#253b3b;border:1px solid #3b5854;border-radius:7px;padding:9px 11px}button:hover{background:#36534b}button:focus-visible{outline:2px solid #d2ee99;outline-offset:3px}.actions{display:flex;gap:7px;flex-wrap:wrap;font-size:11px}.actions button:first-child{background:#b9dc99;color:#172a24;border-color:#b9dc99}.help{font-size:11px;line-height:1.8}.touch{display:flex;justify-content:space-between;align-items:center;max-width:720px;padding:22px 12px 10px;touch-action:none;user-select:none}.dpad{display:grid;grid-template-columns:46px 46px 46px;grid-template-rows:42px 42px 42px;gap:4px}.dpad button{padding:0;font-size:17px}.dpad [data-control=up]{grid-column:2}.dpad [data-control=left]{grid-column:1;grid-row:2}.dpad span{grid-column:2;grid-row:2;display:grid;place-items:center;color:#537067}.dpad [data-control=right]{grid-column:3;grid-row:2}.dpad [data-control=down]{grid-column:2;grid-row:3}.bomb-button{width:88px;height:88px;border-radius:50%;background:#d6b36b;color:#28312b;border:4px solid #645a3e;font-size:30px}.bomb-button small{display:block;color:#343c2e;font-size:9px;letter-spacing:1px}.touch-note{font-size:9px;letter-spacing:1px;text-align:center;color:#8eaaa5;line-height:1.8}button.held{background:#e0efc2;color:#132e25}footer{color:#6e8b88;font-size:10px;margin-top:14px;letter-spacing:.3px}@media(max-width:780px){main{padding:16px 13px}.layout{grid-template-columns:1fr;gap:15px}aside{order:2}h1{font-size:22px}h1 span{font-size:14px}.touch{padding:15px 8px;max-width:none}h2{font-size:23px}aside h2 br{display:none}.fact{display:inline-block;width:49%;vertical-align:top;padding-right:5px}.notice{margin:12px 0}aside p{margin:8px 0}header{margin-bottom:18px}.badge{font-size:8px;padding:7px} .score,.under{padding:11px 13px}}

/* Keep touch controls beside the arena flow, before the reference notes on phones. */
.layout{row-gap:0}.layout>aside{grid-column:2;grid-row:1 / span 2}.layout>.touch{grid-column:1;width:100%}
@media(max-width:780px){.layout>aside{grid-column:1;grid-row:auto}.layout>.touch{grid-column:1;grid-row:auto}}

[hidden]{display:none!important}select{background:#0e1a21;border:1px solid #3b5756;color:#e6f6e7;border-radius:5px;padding:7px;max-width:175px;margin-left:auto;font:inherit}#player-name{width:175px}#online-options input{min-width:0}#server-url{width:190px}#room-code{width:65px;text-transform:uppercase;margin:0}.primary,#create-room,#start-online{background:#b9dc99;color:#172a24}button:disabled{opacity:.45;cursor:default}#network-status{font-size:12px;color:#d7c992;overflow-wrap:anywhere}#room-panel{padding:12px;border:1px solid #496e61;border-radius:8px;margin:12px 0}#room-label{font:700 22px Consolas,monospace;letter-spacing:3px}#standings{margin:18px 0}.standing{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #2c4243;font-size:12px}.standing b{font:700 16px Consolas,monospace}.standing.dead{opacity:.5}.standing i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.score{gap:8px;flex-wrap:wrap}aside h2{margin-bottom:18px}@media(max-width:780px){#battle-options label,#online-options label{max-width:430px}.layout>aside{padding-top:14px}#server-url{width:210px}#reference-panel .fact{width:100%}.score{font-size:10px}}
.primary:hover,#create-room:hover,#start-online:hover{background:#cee6b7;color:#14271d}button:disabled{color:#8ba6a3}

/* Pixel-era presentation and captured thumb movement. */
#menu-toggle{display:none}canvas{image-rendering:pixelated}.play{border-radius:7px;border:3px solid #6a8075;box-shadow:0 3px 0 #263b3e,0 18px 50px #0004}.score{background:#172339;border-bottom:3px solid #aebfa1;color:#fff3d1;font-weight:700}.under{background:#172339;color:#e4dcc2}.touch{gap:20px}.action-cluster{display:flex;align-items:center;gap:15px}.ability-button{width:64px;height:64px;border-radius:50%;border:3px solid #7086a4;background:#354868;font-size:26px;touch-action:none}.ability-button small{display:block;font-size:9px;color:#d7e2f0}.bomb-button{touch-action:none}.power-status{background:#172339;border:1px solid #5a716f;padding:9px 11px;font-size:12px;color:#ffe7a4;margin:12px 0}.bonus-row{display:flex;gap:8px;align-items:center;font-size:11px;line-height:1.5;margin:10px 0}.bonus-row canvas{width:32px;height:32px;flex:0 0 32px;background:none}#character-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 6px}#character-picker button{padding:3px;background:#1a2c3e;border:2px solid #42595d;border-radius:5px;display:grid;place-items:center}#character-picker button[aria-pressed=true]{border-color:#ffe3a1;background:#34485b}#character-picker canvas{width:40px;height:50px;background:none}#move-pad{position:relative;width:144px;height:144px;flex:0 0 144px;border-radius:50%;border:2px solid #66887e;background:radial-gradient(circle,#2a4845 0 40%,#172d32 41% 65%,#0c1b23 66%);touch-action:none;user-select:none;box-shadow:inset 0 0 0 7px #9bb39115}#move-pad.active{border-color:#dbedb9}#stick-knob{position:absolute;left:45px;top:45px;width:50px;height:50px;border-radius:50%;border:3px solid #aecab2;background:#7b9f94;box-shadow:0 3px 0 #0d2829;pointer-events:none}.stick-arrow{position:absolute;color:#a9c2b4;font-size:12px;pointer-events:none}.stick-arrow.up{top:8px;left:64px}.stick-arrow.down{bottom:8px;left:64px}.stick-arrow.left{top:62px;left:9px}.stick-arrow.right{top:62px;right:9px}body.menu-open{overflow:hidden}
@media(max-width:900px){
 main{padding:10px 10px 16px}.layout{display:flex;flex-direction:column;gap:0;align-items:center}header{margin-bottom:10px;gap:8px}h1{font-size:22px}.eyebrow{font-size:8px;letter-spacing:2px}.badge{padding:7px;font-size:8px}#menu-toggle{display:block;margin-left:auto;font-size:20px;padding:5px 11px}header .badge{margin-left:0}.play{width:100%;max-width:660px}.layout>aside{display:none}body.menu-open .layout>aside{display:block;position:fixed;z-index:20;inset:70px 10px 10px;background:#101f2bf5;border:2px solid #718d7d;border-radius:8px;padding:16px;overflow:auto;width:auto}.layout>.touch{width:100%;max-width:660px;padding:14px 6px 3px;gap:8px}.touch-note{font-size:8px;letter-spacing:0}.action-cluster{gap:8px}.bomb-button{width:88px;height:88px}.ability-button{width:58px;height:58px}.under{font-size:9px;padding:9px 8px}.score{padding:10px 8px;font-size:9px}.layout>aside .fact{width:100%}footer{font-size:8px;text-align:center;margin-top:10px}.help{font-size:11px}
}
@media(max-width:900px) and (orientation:landscape){
 main{padding:4px 12px}header{height:32px;margin-bottom:4px}header .eyebrow{display:none}h1{font-size:18px;margin:0}h1 span{font-size:13px}.badge{display:none}#menu-toggle{padding:1px 11px;font-size:18px}.layout>.play{width:calc((100dvh - 100px)*1.154);max-width:calc(100vw - 310px)}.layout>.touch{position:fixed;inset:38px 12px 10px;max-width:none;pointer-events:none;align-items:flex-end;padding:0;width:auto}.touch>*{pointer-events:auto}#move-pad{width:132px;height:132px;flex-basis:132px}#stick-knob{left:39px;top:39px}.stick-arrow.up,.stick-arrow.down{left:58px}.stick-arrow.left,.stick-arrow.right{top:56px}.touch-note{display:none}.action-cluster{flex-direction:column;gap:12px}.bomb-button{width:88px;height:88px}.ability-button{width:58px;height:58px}.score{padding:6px 8px}.under{padding:6px 8px;font-size:8px}footer{display:none}body.menu-open .layout>aside{inset:42px 140px 8px}
}
@media(max-width:460px){.touch-note{display:none}.action-cluster{gap:12px}.layout>.touch{padding:14px 4px 3px}}

.play>.power-status{margin:0;border:0;border-top:1px solid #536e68;font:11px Consolas,monospace;min-height:30px;padding:8px 10px}@media(max-width:900px) and (orientation:landscape){.layout>.play{width:calc((100dvh - 135px)*1.154)}.play>.power-status{font-size:9px;min-height:24px;padding:6px 8px}}

/* Scalable HD artwork: keep smooth outlines at desktop and phone densities. */
canvas{image-rendering:auto}.play{position:relative}.score,.under{font-family:Segoe UI,Arial,sans-serif;text-shadow:none;letter-spacing:.3px}.score{font-size:12px}.under{font-size:11px}.play>.power-status{font-family:Segoe UI,Arial,sans-serif;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bonus-row{font-size:12px;gap:11px;margin:13px 0}.bonus-row canvas{width:42px;height:42px;flex-basis:42px}#character-picker canvas{width:48px;height:60px}#bonus-inspector{position:absolute;left:12px;right:12px;bottom:39px;z-index:4;display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid #d7c98f;border-radius:12px;background:#142538f5;box-shadow:0 4px 22px #0008;color:#fff2d6}#bonus-inspector-icon{width:64px;height:64px;flex:0 0 64px;background:transparent}#bonus-inspector strong{font-size:17px}#bonus-inspector p{font-size:13px;margin:4px 0;line-height:1.4;color:#dce9e3}#bonus-inspector-close{margin-left:auto;align-self:flex-start;padding:0 7px;font-size:22px;background:none;border:0}
@media(max-width:900px){.score{font-size:10px}.under{font-size:10px}.play>.power-status{font-size:11px}#bonus-inspector{left:6px;right:6px;gap:9px;padding:8px;bottom:36px}#bonus-inspector-icon{width:48px;height:48px;flex-basis:48px}#bonus-inspector strong{font-size:15px}#bonus-inspector p{font-size:12px}}
@media(max-width:900px) and (orientation:landscape){.score{font-size:9px}.under{font-size:8px}.play>.power-status{font-size:9px}#bonus-inspector{bottom:28px;gap:6px;padding:6px}#bonus-inspector-icon{width:40px;height:40px;flex-basis:40px}#bonus-inspector strong{font-size:13px}#bonus-inspector p{font-size:10px}}
#live-leaderboard{display:flex;gap:5px;padding:7px 9px;background:#142135;border-bottom:1px solid #526477;flex-wrap:wrap;font-family:Segoe UI,Arial,sans-serif}.live-score{display:flex;align-items:center;justify-content:space-between;gap:6px;flex:1 1 135px;min-width:0;padding:5px 7px;background:#25364d;border-radius:5px;color:#dce8eb;font-size:12px}.live-score.you{box-shadow:inset 0 0 0 1px #d6c38b}.live-score span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-score b{flex-shrink:0;color:#ffe5a0}@media(max-width:900px){#live-leaderboard{padding:4px;gap:4px}.live-score{font-size:10px;padding:4px;flex-basis:42%}}

.connection-state{margin:8px 0;padding:12px 16px;border:1px solid #e6bd77;border-radius:12px;background:#392d28;color:#fff0c9;font-size:15px;line-height:1.4}
#death-notice{margin:0;padding:12px 14px;background:#4b292c;color:#fff1cb;border-top:2px solid #eaa67f;font-size:16px;font-weight:700;line-height:1.4}#death-notice::before{content:"!";display:inline-grid;place-items:center;width:23px;height:23px;border:2px solid #ffd49b;border-radius:50%;margin-inline-end:9px}