:root{--ink:#2c294d;--muted:#767091;--purple:#7357ec;--purpleDark:#4d39af}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior:none}
body{margin:0;min-height:100svh;font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0%,#ffe7c5 0,transparent 35%),radial-gradient(circle at 92% 80%,#e8deff 0,transparent 42%),#f7f4ff;display:flex;justify-content:center;padding:10px 10px 20px}
.app{width:min(100%,460px);display:flex;flex-direction:column;gap:8px}
nav{display:flex;justify-content:space-between;align-items:center;gap:8px}
.back{display:inline-block;background:#fff;color:#5549a7;text-decoration:none;font-weight:900;padding:10px 15px;border-radius:14px;border:2px solid #e8e3fa}
h1{text-align:center;font-size:clamp(24px,6vw,32px);margin:2px 0 0;letter-spacing:-1px;color:#7153e6;text-shadow:2px 2px 0 #ddd6ff}
.hud{display:flex;gap:6px;align-items:center;justify-content:space-between;background:#fff;border-radius:16px;padding:7px 9px;box-shadow:0 6px 18px #5d4d9b14;font-weight:800;font-size:13px}
.hud span b{color:#7153e6}
.pausebtn{border:0;background:var(--purple);color:#fff;border-radius:11px;font:inherit;font-weight:900;padding:8px 12px;cursor:pointer;box-shadow:0 3px 0 var(--purpleDark);min-width:72px}
.stage{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#2c2552;box-shadow:0 9px 0 #7066b929,0 16px 33px #433a821c;touch-action:none}
.stage canvas{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:18px;background:#211c47d9;color:#fff}
.overlay.hidden{display:none}
.overlay h2{margin:0;font-size:30px;letter-spacing:-1px;color:#ffe27d}
.overlay p{margin:0;font-weight:700;font-size:14px;line-height:1.4;max-width:300px;color:#eae6ff}
.overlay .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.overlay button{border:0;background:#ffe27d;color:#4a3a10;border-radius:13px;font:inherit;font-size:16px;font-weight:900;padding:12px 18px;cursor:pointer;box-shadow:0 4px 0 #c99d2c}
.overlay button.alt{background:#fff;color:#5549a7;box-shadow:0 4px 0 #b9b0e8}
.overlay button.sel{outline:3px solid #fff}
.overlay button:active{transform:translateY(3px);box-shadow:0 1px 0 #c99d2c}
.pad{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pad button{flex:1;max-width:90px;height:56px;border:0;background:#fff;color:#6559ae;border-radius:16px;box-shadow:0 4px 0 #ded9ef;font:inherit;font-size:15px;font-weight:900;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.pad button:active,.pad button.on{transform:translateY(3px);box-shadow:0 1px 0 #ded9ef;background:#f3efff}
.hint{text-align:center;font-size:12px;color:#8d8ca5;margin:0;font-weight:700}
@media (hover:hover) and (pointer:fine){.pad.touchonly{display:none}}
@media(max-height:700px){h1{font-size:22px}.pad button{height:46px}}