:root{--bg:#0f0a26;--ink:#f1ecff;--muted:#a59ec9;--accent:#ff5dba;--accent2:#5df0ff;--panel:#1d1640;--line:#322a63;}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;}
body.themed{background:radial-gradient(1200px 600px at 50% -10%,#241353,#05030f);}
#app{max-width:430px;margin:0 auto;padding:16px 14px 26px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.hud{display:flex;gap:8px;width:100%;}
.stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:9px 8px;text-align:center;}
body.themed .stat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);backdrop-filter:blur(4px);}
.stat .k{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em;}
.stat .v{display:block;font-size:22px;font-weight:800;margin-top:2px;}
.stat.goal .v{color:var(--accent);}
.board{position:relative;width:100%;max-width:384px;}
canvas{display:block;width:100%;height:auto;background:#070414;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -20px #000;touch-action:none;}
body.themed canvas{border-color:rgba(255,255,255,.18);}
.overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;border-radius:18px;background:rgba(5,3,15,.80);backdrop-filter:blur(3px);}
.overlay.show{display:flex;}
.badge{font-size:12px;font-weight:800;letter-spacing:.08em;color:#160a1e;background:var(--accent);padding:4px 12px;border-radius:999px;}
.heroimg{width:138px;height:138px;object-fit:contain;display:none;mix-blend-mode:screen;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));}
.heroimg.show{display:block;}
.overlay h1{font-size:30px;margin:2px 0;font-weight:900;background:linear-gradient(96deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.overlay h2{font-size:22px;margin:0;}
.ribbon{font-size:13px;color:var(--muted);margin:0;}
.primary{min-height:50px;min-width:170px;font-size:17px;font-weight:800;color:#160a1e;background:var(--accent);border:0;border-radius:14px;cursor:pointer;}
.primary:active{transform:translateY(1px);}
.mrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;}
.mbtn{min-height:44px;font-size:13px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:8px 12px;cursor:pointer;}
.mpath{font-size:12px;color:var(--muted);}
.ups{display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px;}
.upbtn{min-height:52px;font-size:14px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:13px;padding:10px;cursor:pointer;text-align:left;}
.upbtn b{display:block;font-size:15px;}
.upbtn span{font-size:12px;color:var(--muted);}
.tip{font-size:13px;color:var(--muted);margin:2px 0;text-align:center;}
.controls{display:flex;gap:12px;width:100%;}
.controls button{flex:1;min-height:48px;font-size:16px;font-weight:700;color:#160a1e;background:var(--accent);border:0;border-radius:14px;cursor:pointer;}
.controls button#reset{background:var(--line);color:var(--ink);}