:root{
  --bg:#0b0b12;
  --panel:#11111a;
  --elev:#141424;
  --text:#e7e7ef;
  --muted:#9aa0b4;
  --accent:#a970ff;
  --accent-2:#7f5bd6;
  --success:#53d39d;
  --error:#ff6b6b;
  --border:#24243a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell;line-height:1.4;color:var(--text);background:radial-gradient(1200px 800px at 20% -10%, #17172c, transparent), var(--bg);
}
.app-header{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, #0f0f1a, rgba(15,15,26,0.6));backdrop-filter:saturate(120%) blur(6px);position:sticky;top:0;z-index:5
}
.logo-title{display:flex;gap:12px;align-items:center}
.logo{width:36px;height:36px}
h1{font-size:20px;margin:0}
.tagline{margin:2px 0 0;color:var(--muted);font-size:13px}
.header-actions .btn{margin-left:8px}

.layout{display:grid;grid-template-columns:1fr 360px;gap:18px;max-width:1120px;margin:20px auto;padding:0 16px}
.canvas-col{display:flex;flex-direction:column;gap:12px}
.side-col{display:flex;flex-direction:column;gap:12px}

.game-wrap{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
canvas{width:100%;height:auto;border-radius:8px;background:#000}
.hud{display:flex;align-items:center;justify-content:space-between;font-variant-numeric:tabular-nums;color:#f1efff}
.hud .dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:#4f4f69;margin:0 8px}

.controls{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--accent);border:none;color:#1a122b;padding:10px 14px;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .05s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:#1b1530;color:#cdb8ff;border:1px solid #2a1f49}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
.panel.small{padding:12px}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field.switch{flex-direction:row;align-items:center;justify-content:space-between}
label{font-size:13px;color:var(--muted)}
input[type=text], select{
  background:#0f0f1c;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:8px;font-size:14px
}
input.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas;}
.hint{color:var(--muted);font-size:12px}

.leaderboard{list-style:none;margin:0;padding:0}
.leaderboard li{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:8px 6px;border-bottom:1px dashed #1e1e30;align-items:center}
.leaderboard li .meta{color:#abb0c5;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.leaderboard li .score{font-variant-numeric:tabular-nums;color:#f0f2ff}
.leaderboard .empty{color:var(--muted);text-align:center;padding:16px}

.waves{list-style:none;margin:0;padding:0}
.waves li{padding:4px 0;color:#d7d9ea}

.app-footer{display:flex;gap:10px;align-items:center;justify-content:center;border-top:1px solid var(--border);padding:14px;color:#a6aac2}
.app-footer .dot{width:6px;height:6px;border-radius:50%;background:#4f4f69;display:inline-block}

.share-banner{background:linear-gradient(90deg, rgba(169,112,255,.16), transparent);border:1px solid #2c2150;color:#e8dbff;padding:8px 10px;border-radius:10px}
.share-banner .dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:#4f4f69;margin:0 8px}

.alert{padding:10px 12px;border-radius:10px}
.alert.error{background:#2a0f16;border:1px solid #5a1b27;color:#ffb3c0}

.touch-controls{display:none;gap:10px;justify-content:space-between;margin-top:8px}
.touch-controls .tc{flex:1;border:1px solid #2b2444;background:#1b1530;color:#cdb8ff;border-radius:8px;padding:12px;font-size:18px}

.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%, 10px);background:#1c1331;color:#e9dcff;border:1px solid #2c2150;padding:10px 14px;border-radius:10px;opacity:0;transition:opacity .3s ease, transform .3s ease;z-index:10}
.toast.show{opacity:1;transform:translate(-50%, 0)}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .touch-controls{display:flex}
}