:root {
  --tg-bg: #1e1e2e;
  --tg-text: #ffffff;
  --tg-hint: #a0a0b0;
  --tg-link: #6ab7ff;
  --tg-button: #2ea6ff;
  --tg-button-text: #ffffff;
  --tg-secondary-bg: #26263a;

  /* Игровая палитра не зависит от темы Telegram — держим её неоновой всегда. */
  --paddle-color: #00e5ff;
  --paddle-color-2: #0066ff;
  --ball-color: #ffffff;
  --ball-glow-color: #7df9ff;
  --brick-1-color: #39ff88;
  --brick-2-color: #ffb020;
  --brick-3-color: #ff2fb3;
  --brick-steel-color: #8a97a8;
  --brick-tnt-color: #ff3b30;
  --brick-boss-color: #9d4edd;
  --crystal-glow-color: #ff2fb3;
  --sticky-color: #ffb020;

  --neon-accent-a: #00e5ff;
  --neon-accent-b: #ff2fb3;
  --stage-bg-1: #150f2e;
  --stage-bg-2: #050308;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#hud {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--tg-secondary-bg);
  border-bottom: 1px solid rgba(0, 229, 255, 0.25);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

#hud-lives,
#hud-score,
#hud-level {
  white-space: nowrap;
}

#hud-score-value {
  color: var(--neon-accent-a);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

#hud-lives-value {
  color: var(--neon-accent-b);
  text-shadow: 0 0 8px rgba(255, 47, 179, 0.6);
}

/* Cyan pairs with score — both are progress stats, distinct from lives' magenta danger cue. */
#hud-level-value {
  color: var(--neon-accent-a);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

#hud-combo-value {
  color: var(--neon-accent-b);
  text-shadow: 0 0 8px rgba(255, 47, 179, 0.6);
}

#hud-combo.hidden {
  display: none;
}

/* Supplementary purchase/timer info — smaller and undimmed relative to the primary
   score/lives/level stats above so it doesn't compete for attention. */
#hud-extra-lives,
#hud-sticky-charges,
#hud-laser-charges,
#hud-expand-timer,
#hud-sticky-timer,
#hud-laser-timer {
  white-space: nowrap;
  font-size: 12px;
  opacity: 0.85;
}

#hud-extra-lives.hidden,
#hud-sticky-charges.hidden,
#hud-laser-charges.hidden,
#hud-expand-timer.hidden,
#hud-sticky-timer.hidden,
#hud-laser-timer.hidden {
  display: none;
}

#hud-extra-lives-value,
#hud-sticky-charges-value,
#hud-laser-charges-value {
  color: var(--neon-accent-b);
}

#hud-expand-timer-value,
#hud-sticky-timer-value,
#hud-laser-timer-value {
  color: var(--neon-accent-a);
}

#hud-mute-btn {
  margin-left: auto;
}

#hud-mute-btn,
#hud-pause-btn {
  padding: 8px 10px;
}

#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 0%, var(--stage-bg-1) 0%, var(--stage-bg-2) 70%);
}

/* Оборачивает canvas + crystal-layer, чтобы оба центрировались во #stage как единое целое —
   crystal-layer позиционируется inset:0 относительно этого контейнера, а не всего #stage,
   иначе на широком (десктопном) экране оверлеи кристальных кирпичей разъедутся с canvas. */
#playfield {
  position: relative;
  line-height: 0;
}

#game-canvas {
  display: block;
  touch-action: none;
}

/* Container for crystal-brick glow overlays; positioned to match canvas coordinate space */
#crystal-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.brick-crystal {
  position: absolute;
  border-radius: 6px;
  background: linear-gradient(160deg, #ff7fd4, var(--brick-3-color));
  box-shadow: 0 0 8px 3px var(--crystal-glow-color);
  animation: crystal-pulse 1.4s ease-in-out infinite;
  will-change: filter, box-shadow;
}

@keyframes crystal-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 8px 3px var(--crystal-glow-color);
  }
  50% {
    filter: brightness(1.6);
    box-shadow: 0 0 22px 8px var(--crystal-glow-color);
  }
}

.boss-health-bar {
  position: absolute;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(157, 78, 221, 0.5);
  overflow: hidden;
}

.boss-health-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brick-boss-color), var(--brick-3-color));
  transition: width 0.15s ease;
}

button {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--neon-accent-a), var(--neon-accent-b));
  color: #0a0a12;
  cursor: pointer;
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.45),
    0 0 28px rgba(255, 47, 179, 0.25);
  transition: filter 0.15s ease, transform 0.1s ease;
}

button:active {
  filter: brightness(0.9);
  transform: scale(0.97);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(21, 15, 46, 0.85) 0%, rgba(2, 1, 6, 0.92) 100%);
  text-align: center;
  padding: 24px;
}

.overlay.hidden {
  display: none;
}

#onboarding-hint {
  color: var(--tg-hint);
  font-size: 14px;
  line-height: 1.4;
}

#onboarding-hint p {
  margin: 0;
}

#onboarding-hint.hidden {
  display: none;
}

#daily-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tg-secondary-bg);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.12) inset;
}

#daily-reward-text {
  margin: 0;
  color: var(--tg-hint);
  font-size: 14px;
}

#daily-reward.hidden {
  display: none;
}

.overlay h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, var(--neon-accent-a), var(--neon-accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.45));
}

.panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--tg-bg);
  overflow-y: auto;
}

.panel.hidden {
  display: none;
}

.panel h2 {
  margin: 0;
  color: var(--neon-accent-a);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* Тот же "callout box" язык, что у #daily-reward, но акцент на magenta — тёплый
   праздничный тон лучше подходит для позитивного сообщения "это бесплатно", чем
   нейтральный cyan, уже занятый у #daily-reward под обычную информационную плашку. */
#shop-free-banner {
  margin: 0;
  padding: 10px 14px;
  background: var(--tg-secondary-bg);
  border: 1px solid rgba(255, 47, 179, 0.35);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 47, 179, 0.15) inset;
  color: var(--neon-accent-b);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

#shop-free-banner.hidden {
  display: none;
}

#shop-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 10px;
}

#levels-grid button {
  aspect-ratio: 1;
  padding: 0;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--tg-secondary-bg);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.12) inset;
}

#leaderboard-list {
  padding-left: 24px;
}

#leaderboard-list li {
  padding: 4px 0;
}

#leaderboard-list li::marker {
  color: var(--neon-accent-b);
  font-weight: 700;
}

.own-entry {
  color: var(--neon-accent-a);
  font-weight: 700;
}

#leaderboard-best {
  color: var(--neon-accent-a);
}

/* Магента, как у #hud-lives-value/#hud-combo-value — рядом с заголовком #overlay-gameover
   h1, уже использующим цианово-магентовый градиент, магента лучше читается как отдельный
   акцент "почти получилось", не сливаясь с общим glow заголовка. */
#gameover-message {
  margin: 0;
  color: var(--neon-accent-b);
  text-shadow: 0 0 8px rgba(255, 47, 179, 0.6);
  font-weight: 700;
}

#gameover-message.hidden {
  display: none;
}