:root{
  --bg: #0b0f14;
  --surface: #121820;
  --text: #e6edf3;
  --muted: #8b9db0;
  --primary: #4f8cff;
  --accent: #35c46a;
  --danger: #ff4d6d;
  --grid: #1f2937;
}
:root.light{
  --bg:#f6f7fb; --surface:#ffffff; --text:#0f172a; --muted:#64748b; --primary:#2563eb; --accent:#16a34a; --danger:#dc2626; --grid:#e5e7eb;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}

.topbar{display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); border-bottom:1px solid #1f2937; position:sticky; top:0; z-index:10}
.topbar .icon-btn{margin-left:4px}
.app-title{margin:0; font-size:20px}
.scoreboard{margin-left:auto; display:flex; gap:16px; color:var(--muted)}
.icon-btn{border:none; background:transparent; color:var(--text); font-size:20px; cursor:pointer}

.container{max-width:900px; margin:24px auto; padding:0 16px; display:grid; grid-template-columns: 1fr; gap:16px}
.game-wrapper{display:flex; flex-direction:column; align-items:center; gap:12px; background:var(--surface); border:1px solid #1f2937; border-radius:12px; padding:16px}
canvas{width:100%; height:auto; max-width:480px; background:var(--bg); border-radius:8px}
.controls{display:flex; gap:8px}
button.primary{background:linear-gradient(180deg, color-mix(in lab, var(--primary) 90%, white), var(--primary)); box-shadow: 0 4px 12px rgba(79,140,255,0.25);}
button.secondary{backdrop-filter: blur(6px)}
button.secondary{background:transparent; color:var(--text); border:1px solid #334155; padding:10px 14px; border-radius:8px; cursor:pointer}
button.primary:hover{filter:brightness(1.05)}
button.secondary:hover{background:#0b1220}

.settings{background:var(--surface); border:1px solid #1f2937; border-radius:12px; padding:16px}
.setting-item{display:flex; align-items:center; justify-content:space-between; margin:8px 0}
select{background:var(--bg); color:var(--text); border:1px solid #334155; border-radius:8px; padding:8px}

.dpad{display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:column}
.dpad-row{display:flex; gap:8px}
.dpad-btn{width:64px; height:64px; border-radius:12px; border:1px solid #334155; background:var(--surface); color:var(--text); font-size:24px; cursor:pointer}
.dpad-btn:active{transform:scale(0.98); background:#0b1220}

.footer{color:var(--muted); text-align:center; padding:12px}

/* 网格线效果（在 canvas 背景上表现）*/
.game-wrapper{background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; border:1px solid color-mix(in lab, var(--grid) 80%, transparent)}
.leaderboard{max-width:900px; margin:0 auto; padding:0 16px 24px}
.lb-title{font-size:18px; color:var(--muted)}
.lb-list{background:var(--surface); border:1px solid #1f2937; border-radius:12px; padding:12px;}
.lb-list li{padding:6px 8px; border-bottom:1px dashed #334155}
.lb-list li:last-child{border-bottom:none}