*{box-sizing:border-box}html,body{margin:0;height:100%;background:#132b3e;color:#f8f1df;font-family:ui-rounded,'Avenir Next',system-ui,sans-serif;overscroll-behavior:none}body{overflow:hidden;touch-action:none}main{max-width:1100px;height:100dvh;margin:auto;padding:12px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}header{display:flex;align-items:center;justify-content:space-between;gap:10px}small{font-weight:800;letter-spacing:2px;font-size:10px;color:#91cfdd}h1{font-size:clamp(20px,3vw,30px);margin:2px 0}button{border:0;border-radius:14px;background:#28516a;color:white;font:inherit;font-weight:800;min-width:60px;min-height:56px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button:focus-visible{outline:3px solid #ffe59a;outline-offset:3px}button:active,button.active{background:#5893ab;transform:translateY(2px)}#mute{padding:8px 13px;font-size:13px}.hud{display:flex;justify-content:space-between;gap:8px;background:#203c50;border-radius:12px;padding:9px 14px;font-size:14px}.hud strong{color:#ffd478}#stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#0d2232;border-radius:20px;overflow:hidden;border:1px solid #416076}canvas{display:block;width:100%;height:100%;object-fit:contain}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#102536b8;padding:16px}.overlay[hidden]{display:none}.panel{max-width:440px;background:#183a50f2;border:1px solid #66838d;padding:25px;border-radius:24px;text-align:center;box-shadow:0 15px 50px #07172280}.panel h2{font-size:30px;margin:10px 0}.panel p{font-size:16px;line-height:1.5}.panel .keys,.panel .prototype{font-size:12px;color:#b6ced7}.panel button{background:#ffd478;color:#183344;padding:10px 35px}.panel small{color:#ffd478}#message{margin:0;text-align:center;min-height:22px;font-size:14px;color:#ffd478}.controls{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 12px}.pad{display:grid;grid-template:repeat(2,56px)/repeat(3,64px);gap:5px}.up{grid-column:2}.left{grid-row:2;grid-column:1}.down{grid-row:2;grid-column:2}.right{grid-row:2;grid-column:3}.actions{display:flex;gap:12px}.actions button{width:100px;height:85px;font-size:20px;background:#3b6173}.actions #sort{background:#b37e36}.actions span{display:block;font-size:10px;letter-spacing:1px;opacity:.8;margin-top:5px}footer{display:flex;justify-content:space-between;font-size:10px;color:#9bb6c5}@media(max-width:500px){main{gap:7px;padding-top:9px}.hud{font-size:12px}header small{font-size:8px;letter-spacing:1px}.controls{padding:0}.pad{grid-template:repeat(2,58px)/repeat(3,58px)}.actions{gap:8px}.actions button{width:72px;height:85px;font-size:16px}footer span{display:none}.panel{padding:18px}.panel h2{font-size:26px}}@media(max-height:550px) and (min-width:600px){main{display:grid;grid-template-columns:1fr 230px;grid-template-rows:auto auto 1fr auto;gap:5px}header{grid-column:1/3}header h1{font-size:20px}header small,footer{display:none}.hud{grid-column:1}#stage{grid-column:1;grid-row:3/5}#message{grid-column:2;grid-row:2;font-size:12px}.controls{grid-column:2;grid-row:3/5;flex-direction:column;justify-content:center;padding:0;gap:16px}.pad{grid-template:repeat(2,56px)/repeat(3,60px)}.actions button{width:94px;height:70px}}