:root{--bg:#10101a;--panel:#1b1b2a;--accent:#4f9dff;--text:#e8e8f0;--muted:#8a8aa0}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;overflow-y:auto}#app{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:460px;padding:16px 12px 250px;display:flex}header{justify-content:space-between;align-items:baseline;width:100%;display:flex}h1{letter-spacing:.12em;color:var(--accent);font-size:1.15rem}#hud{color:var(--muted);font-variant-numeric:tabular-nums;flex-direction:column;align-items:flex-end;gap:2px;font-size:.8rem;display:flex}#board{background:#16161f;border-radius:10px;display:block;box-shadow:0 4px 18px #00000073}#pad{right:max(14px, env(safe-area-inset-right,0px));bottom:max(14px, env(safe-area-inset-bottom,0px));z-index:5;grid-template-rows:repeat(3,68px);grid-template-columns:repeat(3,68px);gap:8px;display:grid;position:fixed}#pad button{color:var(--text);background:var(--panel);touch-action:none;cursor:pointer;border:1px solid #2e2e44;border-radius:12px;justify-content:center;align-items:center;display:flex}#pad button:active{background:#2a2a42;transform:scale(.96)}#up{grid-area:1/2}#left{grid-area:2/1}#down{grid-area:3/2}#right{grid-area:2/3}#actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}#actions button{color:var(--text);background:var(--panel);cursor:pointer;border:1px solid #2e2e44;border-radius:10px;justify-content:center;align-items:center;padding:10px 12px;display:flex}#actions button:active{background:#2a2a42}#selector-close .icon,#actions .icon,#overlay-actions .icon{width:22px;height:22px;display:block}#pad .icon{width:26px;height:26px;display:block}#overlay{z-index:10;background:#080810b8;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#overlay.visible{display:flex}#overlay-card{text-align:center;background:var(--panel);border:1px solid #2e2e44;border-radius:16px;padding:28px 36px;box-shadow:0 10px 40px #00000080}#overlay-card h2{color:var(--accent);margin-bottom:8px}#overlay-stars{letter-spacing:.2em;margin-bottom:12px;font-size:2.4rem;line-height:1}#overlay-stars .star-on{color:#e8b64c}#overlay-stars .star-off{color:#3a3a54}#hud .stars{color:#e8b64c}#overlay-card p{color:var(--muted);margin-bottom:18px;font-size:.9rem}#overlay-btn{color:#fff;background:var(--accent);cursor:pointer;border:none;border-radius:10px;padding:10px 22px;font-size:1rem}#overlay-actions{justify-content:center;gap:10px;display:flex}#overlay-actions button{cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:10px 14px;display:flex}#overlay-actions #overlay-btn{color:#fff;background:var(--accent);border:none}#overlay-actions #overlay-levels{color:var(--text);background:var(--panel);border:1px solid #2e2e44}#selector{z-index:20;background:#080810f2;flex-direction:column;width:100%;height:100%;display:none;position:fixed;inset:0}#selector[hidden]{display:none!important}#selector.visible{display:flex}#selector header{flex:none;align-items:center;gap:12px;padding:14px 16px;display:flex}#selector h2{color:var(--accent);letter-spacing:.08em;font-size:1.1rem}#selector-progress{color:var(--muted);font-variant-numeric:tabular-nums;flex:1;font-size:.8rem}#selector-close{width:40px;height:40px;color:var(--text);background:var(--panel);cursor:pointer;border:1px solid #2e2e44;border-radius:10px;justify-content:center;align-items:center;display:flex}#selector-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));align-content:start;gap:10px;padding:0 16px 16px;display:grid;overflow-y:auto}.tile{background:var(--panel);min-height:56px;color:var(--text);font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;border:1px solid #2e2e44;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:10px 4px;font-size:.9rem;display:flex}.tile:active{background:#2a2a42}.tile.done{border-color:#e8b64c}.tile.current{outline:2px solid var(--accent);outline-offset:1px}.tile-stars{color:#e8b64c;letter-spacing:1px;min-height:1em;font-size:.65rem}.section-header{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;grid-column:1/-1;padding:14px 2px 0;font-size:.72rem}