*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080c1b;color:#e4e7f6;font-family:monospace}body{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#17254a 0,#080c1b 65%)}main{text-align:center;padding:20px 12px}#cabinet{position:relative;margin:auto;width:min(616px,94vw,calc((100dvh - 165px)*.846));box-shadow:0 24px 80px #0009;border:1px solid #52618b;background:#101327}canvas{display:block;width:100%;image-rendering:pixelated;aspect-ratio:auto;outline:none;touch-action:none}#softkeys{height:40px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #29365c;background:#111a33;font-size:9px;letter-spacing:.4px;color:#7f8db4}button,input,select{font:inherit}button{cursor:pointer;color:#fff;background:#243364;border:1px solid #6778a5;padding:9px 13px;touch-action:none}button:hover,button:focus-visible{background:#3d5199;outline:2px solid #b9c6ff}#softkeys button{border:0;background:transparent;height:100%;font-size:12px}#panel{position:absolute;inset:0 0 40px;display:none;align-items:center;justify-content:center;background:#081029de;padding:20px}#panel.open{display:flex}#panel form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:330px}#panel h2{font-size:18px;margin:0 0 8px;color:#ffd860;text-transform:uppercase}#panel label{text-align:left;font-size:12px;color:#acbde7;display:flex;flex-direction:column;gap:5px}input,select{min-width:0;width:100%;padding:9px;color:white;border:1px solid #667aa9;background:#152344}#panel p{line-height:1.6;font-size:12px}#panel .row{display:flex;gap:10px}.guide{font-size:11px;line-height:2;color:#c3d0ef}.guide span{color:#677799;font-size:9px}.note{font:11px sans-serif;color:#667794;max-width:528px}#touch{display:none;align-items:center;justify-content:space-between;gap:12px;margin:15px auto;max-width:528px;width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#touch *,canvas,#softkeys{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#touch .dpad{order:2}#touch .fire{order:0}#touch>button:last-child{order:1}.dpad{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,40px);gap:3px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.fire{border-radius:50%;width:65px;height:65px;background:#7d392d}button.pressed{background:#8c6c34}@media(pointer:coarse){#touch{display:flex}.guide{display:none}main{padding-top:8px}#cabinet{width:min(440px,82vw,calc((100dvh - 200px)*.846))}#touch>button:last-child{font-size:9px;padding:8px}}@media(max-height:760px) and (pointer:fine){#cabinet{width:min(440px,calc((100dvh - 140px)*.846))}}

#cabinet.expanded{width:min(1100px,96vw,calc((100dvh - 165px)*var(--arena-ratio)))}#panel{overflow:auto}#panel form{margin:auto}#fullscreen{font-size:11px;padding:5px 12px;margin-top:8px}main:fullscreen{width:100vw;height:100dvh;background:#080c1b;display:flex;flex-direction:column;justify-content:center}main:fullscreen .note{display:none}#cabinet.expanded #softkeys{font-size:9px;letter-spacing:0}#cabinet.expanded canvas{aspect-ratio:auto}

#effects{margin:10px auto;max-width:1000px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}#effects[hidden]{display:none}.effect-player{flex:1;min-width:180px;max-width:500px;background:#101a30;border:1px solid #344467;padding:8px;text-align:left;font:12px monospace}.effect-player strong{display:block;margin-bottom:6px}.effect-items{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.effect-item{display:flex;align-items:center;gap:4px}.effect-item img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}.effect-timer{display:flex;align-items:center;gap:6px;width:100%;margin-top:5px}.effect-timer progress{width:70px;accent-color:#ffcf43}.effect-timer span{flex:1}body:has(#effects:not([hidden])) #cabinet{width:min(616px,94vw,calc((100dvh - 245px)*.846))}body:has(#effects:not([hidden])) #cabinet.expanded{width:min(1100px,96vw,calc((100dvh - 245px)*var(--arena-ratio)))}