/* style.css — Neon Breaker */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0a0118;
  color: #e9e4ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
  touch-action: manipulation;
}

html[data-theme="light"] { color-scheme: light; }

#root {
  position: fixed;
  inset: 0;
  display: block;
  background: #0a0118;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: none;
}

#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  pointer-events: none;
  z-index: 5;
}
.hud-left {
  display: flex;
  gap: 18px;
  align-items: center;
}
.hud-right {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.stat .label {
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(167,139,250,0.7);
  font-weight: 700;
  margin-bottom: 3px;
}
.stat .value {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 12px rgba(124,77,255,0.8);
  font-variant-numeric: tabular-nums;
}
.stat.lives .value {
  color: #ff4d8d;
  text-shadow: 0 0 12px rgba(255,77,141,0.9);
  letter-spacing: 2px;
  font-size: 16px;
}

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(124,77,255,0.4);
  background: rgba(20,10,40,0.6);
  backdrop-filter: blur(8px);
  color: #c4b5fd;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, background .2s, border-color .2s;
}
.icon-btn:hover {
  background: rgba(60,30,110,0.8);
  border-color: rgba(124,77,255,0.9);
  transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0) scale(0.95); }
.icon-btn.off { color: #6b6480; border-color: rgba(107,100,128,0.4); }

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,8,40,0.4) 0%, rgba(8,2,20,0.85) 100%);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  backdrop-filter: blur(2px);
}
#overlay.show {
  opacity: 1;
  pointer-events: auto;
}
#overlayInner {
  text-align: center;
  padding: 32px;
  transform: translateY(20px) scale(0.92);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .5s ease;
  max-width: 90%;
}
#overlayInner.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#title {
  margin: 0 0 14px;
  font-size: clamp(44px, 12vw, 92px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 0.92;
  background: linear-gradient(135deg, #ff4d8d 0%, #a78bfa 50%, #00e5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(167,139,250,0.4);
  filter: drop-shadow(0 0 30px rgba(255,77,141,0.3));
  animation: titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(255,77,141,0.3)); }
  50% { filter: drop-shadow(0 0 50px rgba(0,229,255,0.5)); }
}
#subtitle {
  margin: 0 0 28px;
  font-size: clamp(13px, 3.4vw, 16px);
  color: rgba(196,181,253,0.85);
  letter-spacing: 0.5px;
}
#startBtn {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #fff;
  padding: 16px 48px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #ff4d8d, #a78bfa);
  box-shadow: 0 8px 30px rgba(255,77,141,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
  transition: transform .15s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
#startBtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform .6s;
}
#startBtn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 40px rgba(255,77,141,0.6), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
#startBtn:hover::before { transform: translateX(100%); }
#startBtn:active { transform: translateY(0) scale(0.98); }

#hint {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(167,139,250,0.6);
  text-transform: uppercase;
  animation: hintBlink 2s ease-in-out infinite;
}
@keyframes hintBlink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (max-width: 380px) {
  .hud-left { gap: 12px; }
  .stat .value { font-size: 17px; }
  .stat .label { font-size: 8px; }
  .icon-btn { width: 34px; height: 34px; font-size: 16px; }
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) #overlay {
    background: radial-gradient(ellipse at center, rgba(40,20,80,0.4) 0%, rgba(20,10,40,0.9) 100%);
  }
}
html[data-theme="light"] #hud .stat .label { color: rgba(124,77,255,0.7); }