*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#0f1222;color:#eef0ff;overflow-x:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#161a30;position:sticky;top:0;z-index:50;border-bottom:1px solid #262c4d}
.topbar a.back{color:#8ea0ff;text-decoration:none;font-size:15px;min-width:44px;min-height:44px;display:flex;align-items:center}
.topbar .title{flex:1;font-size:17px;font-weight:700;text-align:center}
.topbar .act{background:#232a4d;border:1px solid #35406e;color:#cdd6ff;border-radius:10px;padding:9px 12px;font-size:13px;cursor:pointer;min-height:40px}
.topbar .act:active{transform:scale(.95)}
.scoreline{text-align:center;padding:8px;font-size:14px;color:#9fb0e8}
.scoreline b{color:#ffd166;font-size:18px}
.stage{display:flex;flex-direction:column;align-items:center;padding:6px 10px 26px}
canvas{border-radius:14px;background:#181d38;box-shadow:0 6px 24px rgba(0,0,0,.4);touch-action:none;display:block}
.hint{text-align:center;color:#7583b8;font-size:13px;margin:8px 0;min-height:18px}
.toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);background:#2b3566;border:1px solid #4a5aa0;color:#fff;padding:10px 18px;border-radius:12px;font-size:14px;z-index:99;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1}
.btn{background:linear-gradient(135deg,#5b7cfa,#8a5bfa);border:0;color:#fff;border-radius:12px;padding:12px 26px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(95,110,250,.35)}
.btn:active{transform:scale(.96)}
.btn.ghost{background:#232a4d;border:1px solid #35406e;box-shadow:none}
.overlay{position:fixed;inset:0;background:rgba(8,10,22,.78);display:none;align-items:center;justify-content:center;z-index:80;flex-direction:column;gap:14px;text-align:center;padding:20px}
.overlay.on{display:flex}
.overlay .big{font-size:30px;font-weight:800}
.overlay .sub{color:#a9b6e8;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:14px;max-width:900px;margin:0 auto}
.card{background:linear-gradient(160deg,#1b2140,#161a30);border:1px solid #2a3157;border-radius:16px;padding:16px 12px;text-decoration:none;color:#eef0ff;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .15s}
.card:active{transform:scale(.96)}
.card .ico{font-size:38px;line-height:1}
.card .nm{font-size:15px;font-weight:700}
.card .ds{font-size:11px;color:#7f8ec4;text-align:center;line-height:1.4}
.card .hot{position:absolute;top:8px;right:8px;background:#ff5d5d;color:#fff;font-size:10px;padding:2px 7px;border-radius:8px;font-weight:700}
.card{position:relative}
.hero{padding:26px 16px 6px;text-align:center}
.hero h1{font-size:26px;background:linear-gradient(90deg,#7aa2ff,#c58bff,#ff9ecb);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.hero p{color:#8ea0d8;font-size:13px;margin-top:8px}
.sec{max-width:900px;margin:0 auto;padding:10px 14px 0;font-size:14px;color:#a8b6ea;font-weight:700}
.picks{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;scrollbar-width:none}
.picks::-webkit-scrollbar{display:none}
.pick{flex:0 0 auto;background:#1c2344;border:1px solid #2c3563;border-radius:999px;padding:7px 14px;font-size:13px;color:#c8d2ff;text-decoration:none}
.pick.on{background:#5b7cfa;color:#fff;border-color:#5b7cfa}
.foot{color:#57619000;text-align:center;font-size:11px;color:#57618f;padding:30px 10px 40px;line-height:1.8}