/* style.css — Neon Breaker */
:root {
  --bg: #0a0118;
  --bg2: #15032a;
  --fg: #f5e9ff;
  --accent: #ff2e88;
  --accent2: #2ee5ff;
  --panel: rgba(20, 6, 40, 0.72);
  --border: rgba(46, 229, 255, 0.25);
  --glow: 0 0 24px rgba(255,46,136,0.5);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #1a0a2e;
  --bg2: #2d1450;
  --fg: #ffffff;
  --panel: rgba(45, 20, 80, 0.85);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
#root {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
#game {
  position: absolute; inset: 0;
  display: block;
  touch-action: none;
  cursor: none;
}
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  pointer-events: none;
  z-index: 5;
}
.hud-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hud-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--accent2);
  opacity: 0.8;
}
.hud-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 10px currentColor;
  color: var(--fg);
}
.hud-val.lives { color: #ff2e88; font-size: 16px; letter-spacing: 2px; }
#level { color: #ffe22e; }
#score { color: #2eff7b; }
.hud-btn {
  margin-left: auto;
  pointer-events: auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.hud-btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--glow); }
.hud-btn:active { transform: scale(0.94); }
#mute + #fs { margin-left: 0; }

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: radial-gradient(ellipse at center, rgba(10,1,24,0.55), rgba(10,1,24,0.92));
  backdrop-filter: blur(2px);
  animation: fadeIn .4s ease;
}
#overlay:not(.show) { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel {
  text-align: center;
  padding: 36px 44px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 0 60px rgba(255,46,136,0.25), 0 0 30px rgba(46,229,255,0.18);
  max-width: 90vw;
  animation: pop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop {
  from { transform: scale(0.85) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.panel h1 {
  margin: 0 0 6px;
  font-size: clamp(34px, 8vw, 64px);
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  color: var(--fg);
  text-shadow:
    0 0 12px var(--accent),
    0 0 28px var(--accent),
    0 0 48px rgba(255,46,136,0.6);
}
.panel h1 span {
  display: block;
  color: var(--accent2);
  text-shadow:
    0 0 12px var(--accent2),
    0 0 28px var(--accent2),
    0 0 48px rgba(46,229,255,0.6);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
.tag {
  margin: 8px 0 4px;
  color: var(--accent2);
  font-size: 13px;
  letter-spacing: 2px;
  opacity: 0.85;
}
#msg {
  margin: 16px 0 22px;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--fg);
  opacity: 0.9;
  min-height: 20px;
}
#start {
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 4px;
  padding: 14px 40px;
  border: none;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #ff2e88, #ff7b2e);
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255,46,136,0.55), inset 0 0 12px rgba(255,255,255,0.25);
  transition: transform .15s, box-shadow .2s, filter .2s;
  animation: btnGlow 1.8s ease-in-out infinite;
}
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 24px rgba(255,46,136,0.5), inset 0 0 12px rgba(255,255,255,0.2); }
  50% { box-shadow: 0 0 40px rgba(255,46,136,0.85), inset 0 0 16px rgba(255,255,255,0.35); }
}
#start:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.1); }
#start:active { transform: scale(0.96); }
.hint {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 1.5px;
  opacity: 0.55;
  color: var(--fg);
}
@media (max-width: 480px) {
  .panel { padding: 26px 22px; }
  .hud-val { font-size: 15px; }
  #hud { gap: 8px; padding: 10px; }
  .hud-item { padding: 5px 9px; }
}