:root {
  --zt-bg: #0a0713;
  --zt-purple: #1c1128;
  --zt-purple-2: #2a1a3d;
  --zt-green: #5fae52;
  --zt-green-neon: #8fe86b;
  --zt-orange: #ff8a3d;
  --zt-red: #ff5c5c;
  --zt-gold: #ffd447;
  --zt-text: #f2f0f8;
  --zt-text-dim: #b9b3c9;
  --zt-radius: 16px;
  --zt-radius-sm: 12px;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

.zt-app {
  background: var(--zt-bg);
  color: var(--zt-text);
}

#gameStage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  min-height: 520px;
  max-height: 780px;
  border-radius: var(--zt-radius);
  overflow: hidden;
  background: #0a0713;
  box-shadow: 0 0 0 1px rgba(143, 232, 107, 0.15), 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(95, 174, 82, 0.12);
  touch-action: none; /* scoped to the game canvas area only, never the page */
  user-select: none;
}

@media (max-width: 480px) {
  #gameStage { min-height: 460px; aspect-ratio: 3 / 4.4; border-radius: 12px; }
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.zt-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start (not center) + generous top/bottom padding + its own
     scroll: a vertically-centered flex container whose content overflows
     clips equal amounts off BOTH the top and bottom, which makes a tall
     panel (e.g. game-over, with its stacked stats/nickname/CTAs) hide
     buttons with no obvious way to reveal them by scrolling down. Anchoring
     to the top and letting the screen scroll keeps everything reachable,
     while the padding still reads as roughly centered for short content
     (menu, countdown). Found via a real mobile-viewport screenshot, not
     visible from the DOM/CSS alone. */
  justify-content: flex-start;
  text-align: center;
  padding: 24px;
  padding-top: 8vh;
  padding-bottom: 32px;
  overflow-y: auto;
  z-index: 5;
}

.zt-screen[hidden] { display: none !important; }

/* Short, fixed-height content (menu, countdown, paused) reads better
   vertically centered; modal panels handle their own internal scroll
   (.zt-modal-panel has its own max-height + overflow-y), so the backdrop
   itself can stay centered too. Only screens whose content height is
   unpredictable (game-over, with its stacked stats/CTAs) keep the
   flex-start + scroll default above. */
#screenMenu, #screenCountdown, #screenPaused, .zt-modal {
  justify-content: center;
  padding-top: 24px;
}

#screenMenu, #screenGameOver {
  background: radial-gradient(ellipse at 50% 20%, rgba(95, 174, 82, 0.12), transparent 60%), rgba(10, 7, 19, 0.94);
}

#screenCountdown {
  background: rgba(6, 4, 12, 0.55);
  pointer-events: none;
}

#screenPaused {
  background: rgba(6, 4, 12, 0.7);
  z-index: 6;
}

.zt-title {
  font-family: 'Bungee', 'Poppins', sans-serif;
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 1px;
  color: var(--zt-green-neon);
  text-shadow: 0 0 18px rgba(143, 232, 107, 0.55), 0 4px 0 #12310c;
  margin: 0 0 6px;
}

.zt-subtitle {
  color: var(--zt-text-dim);
  font-weight: 600;
  margin: 0 0 22px;
  font-size: clamp(13px, 2.6vw, 16px);
}

.zt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  font-weight: 700;
  font-size: 17px;
  border-radius: var(--zt-radius-sm);
  background: linear-gradient(135deg, var(--zt-green), #3f8a35);
  color: #08160a;
  box-shadow: 0 0 0 1px rgba(143, 232, 107, 0.4), 0 8px 24px rgba(95, 174, 82, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.zt-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(143,232,107,0.55), 0 10px 30px rgba(95,174,82,0.45); }
.zt-btn:active { transform: translateY(1px) scale(0.98); }

.zt-btn--big { padding: 18px 48px; font-size: 20px; }
.zt-btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--zt-text);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
}
.zt-btn--danger {
  background: linear-gradient(135deg, var(--zt-red), #a12e2e);
  color: #2a0808;
  box-shadow: 0 0 0 1px rgba(255,92,92,0.4);
}
.zt-btn--gold {
  background: linear-gradient(135deg, var(--zt-gold), #c98a12);
  color: #2b1c00;
  box-shadow: 0 0 0 1px rgba(255,212,71,0.5);
}
.zt-btn:disabled { opacity: 0.55; cursor: default; transform: none; }

.zt-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.zt-best-line {
  margin-top: 22px;
  color: var(--zt-text-dim);
  font-size: 14px;
}
.zt-best-line strong { color: var(--zt-gold); font-size: 18px; }

#countdownNumber {
  font-family: 'Bungee', sans-serif;
  font-size: clamp(64px, 20vw, 120px);
  color: var(--zt-green-neon);
  text-shadow: 0 0 40px rgba(143,232,107,0.8);
}
#countdownNumber.pop { animation: ztPop 0.5s ease; }
@keyframes ztPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- HUD --- */
#screenHud {
  align-items: stretch;
  justify-content: flex-start;
  padding: 14px 16px;
  pointer-events: none;
  background: none;
}
.zt-hud-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  pointer-events: auto;
  flex-wrap: nowrap;
}
.zt-hud-block {
  background: rgba(10,7,19,0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 74px;
  text-align: center;
  flex: 1 1 auto;
}
.zt-hud-label { font-size: 10px; letter-spacing: 1px; color: var(--zt-text-dim); text-transform: uppercase; white-space: nowrap; }
.zt-hud-value { font-family: 'Bungee', sans-serif; font-size: 20px; color: var(--zt-text); white-space: nowrap; }

/* Narrow phones: the 4 HUD blocks + pause button must never push the
   pause button off the edge of the stage (found via a real 390px-wide
   Playwright screenshot — the flex row silently overflowed and clipped
   the pause button, which no functional/API test could have caught).
   Shrink padding/font and drop each block's min-width floor so the row
   always fits the available width instead of overflowing it. */
@media (max-width: 480px) {
  .zt-hud-top { gap: 4px; }
  .zt-hud-block { padding: 5px 6px; min-width: 0; border-radius: 8px; }
  .zt-hud-label { font-size: 8px; }
  .zt-hud-value { font-size: 15px; }
  .zt-icon-btn { width: 32px; height: 32px; font-size: 14px; flex: 0 0 auto; }
  #hudLives { font-size: 13px; }
}
#hudScore { color: var(--zt-green-neon); }
#hudCombo.is-hot { color: var(--zt-orange); text-shadow: 0 0 10px rgba(255,138,61,0.7); }
#hudTime.is-low { color: var(--zt-red); animation: ztPulse 0.5s infinite; }
@keyframes ztPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

#hudLives { font-size: 18px; }
#hudLives.shake { animation: ztShake 0.4s; }
@keyframes ztShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.zt-icon-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(10,7,19,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}

.zt-badge-float {
  position: absolute;
  top: 60px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
#hudDouble { background: rgba(255,217,61,0.9); color: #2b1c00; }
#hudFrozen { background: rgba(127,215,255,0.9); color: #002233; top: 92px; }

#comboBanner {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: 'Bungee', sans-serif;
  font-size: clamp(20px, 5vw, 32px);
  color: var(--zt-orange);
  text-shadow: 0 0 20px rgba(255,138,61,0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}
#comboBanner.show { animation: ztBanner 1s ease forwards; }
@keyframes ztBanner {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  35% { transform: translate(-50%,-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-60%) scale(1); }
}

#popupLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 8;
}
.score-popup {
  position: absolute;
  font-family: 'Bungee', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  animation: ztFloat 0.9s ease forwards;
  white-space: nowrap;
}
@keyframes ztFloat {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1); }
}

/* --- Game over --- */
.zt-goscore {
  font-family: 'Bungee', sans-serif;
  font-size: clamp(40px, 10vw, 64px);
  color: var(--zt-green-neon);
  text-shadow: 0 0 26px rgba(143,232,107,0.6);
  margin: 4px 0 14px;
}
.zt-go-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--zt-gold), #c98a12);
  color: #2b1c00;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 10px;
  animation: ztPop 0.5s ease;
}
.zt-go-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 10px 0 16px;
}
.zt-go-stat {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 10px 6px;
}
.zt-go-stat .zt-hud-label { display: block; }
.zt-go-stat .zt-hud-value { font-size: 17px; }

.zt-go-best {
  color: var(--zt-text-dim);
  font-size: 13px;
  margin-bottom: 14px;
}
.zt-go-best strong { color: var(--zt-gold); }

.zt-save-form {
  display: flex;
  gap: 8px;
  margin: 14px 0 6px;
  width: 100%;
  max-width: 380px;
  flex-wrap: wrap;
  justify-content: center;
}
.zt-input {
  flex: 1;
  min-width: 160px;
  padding: 12px 14px;
  border-radius: var(--zt-radius-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--zt-text);
}
.zt-input:focus { outline: 2px solid var(--zt-green-neon); }
.zt-save-status {
  min-height: 18px;
  font-size: 13px;
  color: var(--zt-green-neon);
  margin-bottom: 8px;
}
.zt-save-status.is-error { color: var(--zt-red); }

.zt-share-line {
  font-size: 12px;
  color: var(--zt-text-dim);
  max-width: 380px;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .zt-goscore { margin: 2px 0 8px; }
  .zt-go-stats { margin: 6px 0 10px; gap: 6px; }
  .zt-go-stat { padding: 6px 4px; }
  .zt-save-form { margin: 8px 0 4px; }
  .zt-btn { padding: 12px 22px; font-size: 15px; }
  .zt-btn-row { gap: 8px; }
}

/* --- Leaderboard / How-to overlays --- */
.zt-modal {
  z-index: 20;
  background: rgba(4,3,8,0.85);
}
.zt-modal-panel {
  background: linear-gradient(180deg, #17101f, #0d0a15);
  border: 1px solid rgba(143,232,107,0.2);
  border-radius: var(--zt-radius);
  padding: 22px;
  width: 100%;
  max-width: 440px;
  max-height: 86%;
  overflow-y: auto;
  text-align: left;
}
.zt-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.zt-modal-header h2 {
  font-family: 'Bungee', sans-serif;
  font-size: 20px;
  color: var(--zt-green-neon);
  margin: 0;
}
.zt-close {
  font-size: 22px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}

.zt-lb-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.zt-lb-tab {
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  font-weight: 600;
  color: var(--zt-text-dim);
}
.zt-lb-tab.active { background: var(--zt-green-neon); color: #08160a; }

.lb-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}
.lb-row.is-you { background: rgba(143,232,107,0.1); border-radius: 8px; }
.lb-rank { text-align: center; font-weight: 700; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 700; color: var(--zt-gold); }
.zt-lb-you {
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,212,71,0.12);
  color: var(--zt-gold);
  font-size: 13px;
  font-weight: 700;
}
.zt-lb-loading { text-align: center; padding: 20px; color: var(--zt-text-dim); font-size: 13px; }

.zt-howto-body p, .zt-howto-body li {
  color: var(--zt-text-dim);
  font-size: 14px;
  line-height: 1.6;
}
.zt-howto-body h3 {
  color: var(--zt-green-neon);
  font-size: 14px;
  margin: 14px 0 6px;
}
.zt-howto-body ul { padding-left: 18px; list-style: disc; }