:root{
  --bg: #0b0f19;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #6366f1; /* dynamic based on blocks */
  --hit: #0f172a;
  --hit-border: #67e8f9;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: radial-gradient(1000px 600px at 20% 10%, #0f172a, var(--bg));
  color: var(--text);
}

#app{display:flex;flex-direction:column;min-height:100%}

.top-bar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:80px;
  padding:12px 20px;border-bottom:1px solid #1f2937;background:linear-gradient(180deg,rgba(17,24,39,.85),rgba(17,24,39,.6));
  backdrop-filter: blur(10px);
}
.top-left,.top-center,.top-right{display:flex;align-items:center;gap:16px}
.top-center{justify-content:center}
.top-right{gap:18px}

.score-wrap{display:flex;flex-direction:column}
.score-label{font-size:12px;color:#9ca3af;letter-spacing:2px}
.score-odometer{font-weight:800;font-size:28px;color:white;text-shadow:0 0 12px color-mix(in srgb, var(--accent) 70%, transparent)}

.combo-badge{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(31,41,55,.6);border:1px solid #1f2937;box-shadow:inset 0 0 20px rgba(99,102,241,.15)}
.combo-icon{filter:drop-shadow(0 0 6px rgba(250,204,21,.6))}
.combo-text{color:#cbd5e1;font-weight:600;letter-spacing:1px}
.combo-value{font-weight:800;color:white}
.combo-bump{animation:comboBump .3s ease}
.combo-rainbow .combo-value{background:linear-gradient(90deg,#ff4d4f,#f59e0b,#22c55e,#4096ff,#9254de,#ff4d4f);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow 1.4s linear infinite}
.combo-fade{animation:comboFade .35s ease}

@keyframes comboBump{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes comboFade{0%{opacity:1}100%{opacity:.4}}
@keyframes rainbow{0%{background-position:0% 50%}100%{background-position:100% 50%}}

.level-wrap{display:flex;align-items:center;gap:8px}
.level-text{color:#cbd5e1;font-weight:700}
.level-ring{filter:drop-shadow(0 0 6px rgba(99,102,241,.5))}
.level-ring .ring-bg{fill:none;stroke:#1f2937;stroke-width:6}
.level-ring .ring-fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset .2s ease}

.hearts{display:flex;gap:6px}
.hearts svg{filter:drop-shadow(0 0 6px rgba(248,113,113,.3))}

.pause-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid #1f2937;background:linear-gradient(180deg,rgba(31,41,55,.7),rgba(31,41,55,.5));backdrop-filter:blur(8px);color:#e5e7eb;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.pause-btn:active{transform:translateY(1px)}

.game-area{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px 20px}

canvas#gameCanvas{width:100%;max-width:1100px;height:auto;aspect-ratio:16/9;border-radius:18px;background:radial-gradient(800px 500px at 20% 10%, color-mix(in srgb, var(--accent) 10%, #0b1220), #0b0f19);box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 60px color-mix(in srgb, var(--accent) 10%, transparent)}

.ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 300px at 80% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent)}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.65)}

.bottom-bar{width:100%;max-width:1100px;height:100px;display:flex;align-items:center;justify-content:center;background:rgba(17,24,39,.6);border:1px solid #1f2937;border-radius:14px}
.keymap-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.keymap-grid.large .key{width:48px;height:48px;border-radius:12px}
.key-item{display:flex;flex-direction:column;align-items:center;gap:6px}
.key{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:color-mix(in srgb, var(--c) 24%, #0b1220);border:1px solid color-mix(in srgb, var(--c) 50%, #1f2937);box-shadow:0 2px 10px color-mix(in srgb, var(--c) 24%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 18%, transparent);color:var(--text);font-weight:800}
.k-glow{animation:kGlow 2.2s ease-in-out infinite}
@keyframes kGlow{0%,100%{filter:drop-shadow(0 0 0px var(--c))}50%{filter:drop-shadow(0 0 10px var(--c))}}
.label{font-size:12px;color:#94a3b8}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.panel{width:min(560px,92vw);background:rgba(17,24,39,.72);border:1px solid #1f2937;border-radius:16px;padding:28px;text-align:center;backdrop-filter: blur(8px)}
.panel h1{margin:0 0 8px;font-size:clamp(28px,4vw,44px)}
.panel h2{margin:0 0 8px;font-size:clamp(22px,3vw,32px)}
.panel p{margin:0 0 12px;color:#94a3b8}
.panel .instructions{margin:8px auto 16px;max-width:520px;text-align:left;color:#9ca3af}
.panel .instructions li{margin:6px 0}
.panel.hidden{display:none}

.primary{appearance:none;border:0;border-radius:12px;background:linear-gradient(180deg,#818cf8,#6366f1);color:white;font-weight:700;padding:12px 18px;cursor:pointer;box-shadow:0 8px 24px rgba(99,102,241,.35);transition:transform .08s ease}
.primary:active{transform:translateY(1px)}

.footer{padding:12px 20px;border-top:1px solid #1f2937;text-align:center;color:#6b7280;background:rgba(17,24,39,.6);backdrop-filter: blur(8px)}

@media (max-width: 640px){
  .keymap-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}