*{box-sizing:border-box}body{margin:0;background:#f7f8f6;color:#202622;font:15px/1.5 system-ui}header,main{max-width:1180px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center}h1{font-size:clamp(30px,5vw,44px);margin:0;letter-spacing:-.04em}p{color:#647068}a{color:#27533b}button,select{font:600 12px system-ui;min-height:42px;border:1px solid #dfe4df;border-radius:5px;padding:9px 12px}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #1e80c1;outline-offset:2px}#player{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;gap:10px;margin:24px 0;padding:16px;border:1px solid #dfe4df;border-radius:8px;background:white}.toolbar,.buttons,.stats{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.toolbar strong{font-size:19px}.stats{font-size:12px}.stats strong{font-size:18px}#status{margin:0;font-size:13px;font-weight:600;min-height:20px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;min-height:0}.arena{height:660px;min-height:0;min-width:0;display:grid;place-items:center;container-type:size}#playfield{width:min(100cqw,50cqh);height:min(200cqw,100cqh);position:relative;background:#122330;border:3px solid #405663;border-radius:7px;overflow:hidden;box-shadow:0 7px 18px #15233115}#playfield[data-theme=lcd]{background:#bac19a;border:8px solid #43483a;border-radius:12px;box-shadow:inset 0 0 10px #202d1f50,0 6px 0 #30382e}#playfield[data-theme=forest]{border-color:#55745b;background:#16281b}#playfield[data-theme=ocean]{border-color:#407c8a;background:#092331}#canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-3px}#veil{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#10202be8;color:white;padding:20px}#veil h2{font-size:25px;color:white!important;margin-bottom:8px}#veil p{font-size:13px;color:#dae7e0!important}#playfield[data-theme=lcd] #veil{background:#bac19aef;color:#26301c}#playfield[data-theme=lcd] #veil h2,#playfield[data-theme=lcd] #veil p{color:#26301c!important}aside{min-height:0;overflow:auto}.previews{display:grid;grid-template-columns:1fr 1fr;gap:10px}.previews>div{border:1px solid #dfe4df;border-radius:6px;padding:8px;background:#f4f6f1}.previews h2{font-size:13px;margin:0 0 5px}.previews small{font-size:9px;color:#647068}.previews canvas{display:block;width:100%;height:auto;max-height:170px}#holdCanvas{max-height:60px}.settings{display:grid;gap:8px}label{font-size:12px;display:block}select{width:100%;display:block;margin-top:4px}input[type=checkbox]{accent-color:#27533b}.help,.keys{font-size:11px}.keys{margin:0;text-align:center}summary{cursor:pointer;font-size:13px;font-weight:700;padding:10px 0}details{margin-top:12px;border-top:1px solid #dfe4df}#progress{width:100%;accent-color:#27533b}.touch-controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.touch-controls button{min-width:55px;min-height:46px;font-size:18px;touch-action:none;user-select:none;-webkit-user-select:none}.touch-controls button[data-held=true]{background:#152b20!important;color:white!important}.guide{margin:30px 0}.guide h2{font-size:23px}footer{padding:24px 0}[hidden]{display:none!important}html.block-full,html.block-full body{overflow:hidden}#player:is(:fullscreen,:-webkit-full-screen,.expanded){position:fixed;inset:0;width:100%;height:100dvh;z-index:100;margin:0;border:0;border-radius:0;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .arena{height:100%}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .workspace{overflow:hidden}#player:is(:fullscreen,:-webkit-full-screen,.expanded) aside{max-height:100%;overflow:auto}@media(max-width:700px){main{padding:12px}#player{padding:10px}.workspace{grid-template-columns:minmax(0,1fr) 112px;gap:8px}.arena{height:min(115vw,620px)}.toolbar strong{font-size:14px}.buttons{gap:4px}.buttons button{padding:7px;font-size:10px;min-height:38px}.stats{font-size:10px}.stats strong{font-size:15px}.previews{grid-template-columns:1fr;gap:5px}.previews canvas{max-height:140px}#holdCanvas{max-height:50px}.previews h2{font-size:11px}.settings select{font-size:10px;min-height:36px;padding:5px}.help{font-size:10px}.touch-controls{gap:4px}.touch-controls button{min-width:0;flex:1;padding:6px;font-size:15px;min-height:44px}.keys{font-size:9px}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .keys{display:none}#player:is(:fullscreen,:-webkit-full-screen,.expanded){grid-template-rows:auto auto auto minmax(0,1fr) auto}#player:is(:fullscreen,:-webkit-full-screen,.expanded) aside .help{display:none}}@media(max-height:500px) and (orientation:landscape){#player .buttons button{min-height:30px;padding:4px 8px}#player .toolbar strong{font-size:13px}#player .stats strong{font-size:13px}#player:is(:fullscreen,:-webkit-full-screen,.expanded){grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px}#player:is(:fullscreen,:-webkit-full-screen,.expanded) #status{display:none}#player .workspace{grid-template-columns:minmax(0,1fr) 200px}#player .keys{display:none}.touch-controls button{min-height:32px;padding:3px 8px;font-size:14px}.previews{grid-template-columns:1fr 1fr}.previews canvas{max-height:90px}#holdCanvas{max-height:50px}}@media(prefers-reduced-motion:reduce){#playfield{scroll-behavior:auto}}

#player .workspace{height:660px}#player .arena{height:100%}@media(max-width:700px){#player .workspace{height:min(115vw,620px)}}#player:is(:fullscreen,:-webkit-full-screen,.expanded) .workspace{height:100%}

#player .arena{padding:10px}#playfield{border:0;box-shadow:0 0 0 3px #405663,0 7px 18px #15233115}#playfield[data-theme=lcd]{border:0;box-shadow:0 0 0 8px #43483a,0 12px 0 #30382e}#playfield[data-theme=forest]{box-shadow:0 0 0 3px #55745b}#playfield[data-theme=ocean]{box-shadow:0 0 0 3px #407c8a}