:root{--bg:#120c1f;--ink:#f1ecf8;--muted:#a99bc4;--accent:#b58cff;--accent2:#ffcc4d;--panel:#211633;--line:#392a52;}
*{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%,#241a40,#080611);}
#app{max-width:420px;margin:0 auto;padding:14px 12px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.hud{display:flex;gap:10px;width:100%;}
.stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:9px 12px;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:.05em;}
.stat .v{display:block;font-size:23px;font-weight:800;margin-top:2px;}
.stat.goal .v{color:var(--accent2);}
.stat.life .v{color:#ff6a8e;}
.board{position:relative;width:100%;max-width:360px;}
canvas{display:block;width:100%;height:auto;background:#080611;border:1px solid var(--line);border-radius:16px;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:20px;text-align:center;border-radius:16px;background:rgba(8,6,17,.78);backdrop-filter:blur(3px);}
.overlay.show{display:flex;}
.badge{font-size:12px;font-weight:800;letter-spacing:.08em;color:#160a26;background:var(--accent);padding:4px 12px;border-radius:999px;}
.overlay h1{font-size:28px;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:20px;margin:0;}
.ribbon{font-size:13px;color:var(--muted);margin:0;}
.primary{min-height:48px;min-width:160px;font-size:16px;font-weight:800;color:#160a26;background:var(--accent);border:0;border-radius:13px;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:50px;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);}
.handbar{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px;}
.energy{font-size:13px;color:var(--accent2);font-weight:700;}
.hand{display:flex;gap:8px;width:100%;}
.card{flex:1;min-height:88px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#2a1d40,#1a1230);padding:8px 6px;cursor:pointer;text-align:center;display:flex;flex-direction:column;justify-content:space-between;}
.card.atk{border-color:#ff6a8e;}
.card.def{border-color:#5af0c8;}
.card .cn{font-size:13px;font-weight:800;}
.card .cd{font-size:11px;color:var(--muted);}
.card .ce{font-size:11px;color:var(--accent2);font-weight:700;}
.card:active{transform:translateY(1px);}
.endbtn{min-height:44px;font-size:15px;font-weight:800;color:#160a26;background:var(--accent2);border:0;border-radius:12px;cursor:pointer;}
.tip{font-size:12.5px;color:var(--muted);margin:2px 0;text-align:center;}
.controls{display:flex;gap:12px;width:100%;}
.controls button{flex:1;min-height:44px;font-size:15px;font-weight:700;color:#160a26;background:var(--accent);border:0;border-radius:12px;cursor:pointer;}
.controls button#reset{background:var(--line);color:var(--ink);}