*{box-sizing:border-box}body{color:#fff8e7;background:#2b2140;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;display:flex}#app{width:min(100vw,960px);padding:12px}#hud{background:#3d2f5c;border-radius:10px 10px 0 0;align-items:center;gap:18px;padding:6px 12px;font-size:18px;font-weight:600;display:flex}#hud[hidden]{display:none}.hud-spacer{flex:1}.hud-btn{cursor:pointer;background:0 0;border:0;border-radius:6px;padding:2px 6px;font-size:20px}.hud-btn:hover{background:#fff2}#stage{position:relative}canvas{aspect-ratio:640/384;width:100%;image-rendering:pixelated;background:#9fd8ff;border-radius:0 0 10px 10px;display:block}.overlay{text-align:center;background:#1e1432d1;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}h1{margin:0;font-size:clamp(28px,5vw,46px)}h2{margin:0;font-size:28px}button{font:inherit;color:#3a2a12;cursor:pointer;background:#ffe39a;border:0;border-radius:8px;padding:8px 18px;font-weight:600;box-shadow:0 3px #c79a3a}button:hover:not(:disabled){background:#fff0c4}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #c79a3a}button:disabled{cursor:not-allowed;opacity:.55}button.big{padding:10px 28px;font-size:22px}.controls{opacity:.9;gap:4px;font-size:14px;display:grid}kbd{color:#2b2140;background:#fff8e7;border-radius:4px;min-width:22px;margin:0 2px;padding:1px 6px;font-size:12px;font-weight:700;display:inline-block}#level-grid{grid-template-columns:repeat(3,minmax(130px,1fr));gap:10px;display:grid}.level-btn{flex-direction:column;justify-content:center;gap:2px;min-height:76px;display:flex}.level-btn .num{font-size:22px}.level-btn .name{font-size:13px;font-weight:500}.level-btn .best{font-size:12px;font-weight:500}.level-btn.locked{color:#2b2140;background:#8a8296;box-shadow:0 3px #5d566a}.stars{letter-spacing:6px;color:#ffd23f;text-shadow:0 2px #a0731a;font-size:46px}.stars .off{color:#6d6380;text-shadow:none}dl{grid-template-columns:auto auto;gap:4px 16px;margin:0;font-size:16px;display:grid}dt{text-align:right;opacity:.85}dd{text-align:left;margin:0;font-weight:700}.record{color:#ffd23f;margin:0;font-weight:700}.row{gap:10px;display:flex}.hint{text-align:center;opacity:.8;min-height:1.4em;margin:8px 0 0;font-size:14px}
