:root {
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --magenta: #ec4899;
  --white-glow: #f5f3ff;
  --bg: #0a0620;
  --panel: rgba(18, 10, 46, 0.92);
  --panel-border: rgba(139, 92, 246, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Global guarantee that the `hidden` attribute always wins over any
   author `display` rule below. Without this, ANY class that sets its own
   `display` (flex/grid/block) silently defeats `hidden` — found via a
   real Playwright run where a hidden overlay still intercepted clicks,
   then confirmed the same bug independently affected the combo HUD chip,
   the achievement toast (which played its entrance animation and stayed
   visible on every page load, not just when actually triggered), and the
   nickname form (stayed visible after a successful score submit). One
   global rule closes the whole bug class instead of patching it selector
   by selector. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--white-glow);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  min-height: 100dvh;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.ad-slot {
  width: 100%;
  max-width: 728px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px dashed rgba(255,255,255,0.12);
  margin: 8px auto;
}

#canvasWrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 720 / 1280;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 20px 60px rgba(59,0,120,0.45);
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: pointer;
  background: #120a2e;
}

/* --- HUD --------------------------------------------------------------- */
.hud {
  position: absolute;
  top: 54px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}

.hud-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(10,6,32,0.45);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 10px;
  padding: 4px 12px;
  min-width: 64px;
  backdrop-filter: blur(4px);
}

.hud-combo {
  transform: scale(1);
  transition: transform 0.15s ease;
}

.hud-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
}

.hud-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--white-glow);
  text-shadow: 0 0 8px var(--cyan);
}

.top-controls {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: rgba(10,6,32,0.6);
  color: var(--white-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.tutorial-hint {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  background: rgba(10,6,32,0.55);
  border: 1px solid var(--panel-border);
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 5;
  animation: pulse-hint 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* --- Overlays ------------------------------------------------------------ */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, rgba(60,20,120,0.55), rgba(6,3,20,0.92));
  text-align: center;
  z-index: 10;
  overflow-y: auto;
}

.overlay-transparent {
  background: rgba(6,3,20,0.35);
}

.logo {
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  text-shadow: 0 0 18px var(--purple), 0 0 40px var(--cyan);
}
.logo span { color: var(--magenta); }

.tagline {
  margin: 0 0 14px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--white-glow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  box-shadow: 0 6px 20px rgba(139,92,246,0.45);
}
.btn-glow { animation: glow-pulse 2.2s ease-in-out infinite; }
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(139,92,246,0.45); }
  50% { box-shadow: 0 6px 32px rgba(236,72,153,0.65); }
}

.btn-secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--panel-border);
}

.menu-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.countdown-num {
  font-size: 90px;
  font-weight: 800;
  text-shadow: 0 0 30px var(--cyan);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

/* --- Game Over ----------------------------------------------------------- */
.high-score-banner {
  font-size: 16px;
  font-weight: 800;
  color: #facc15;
  text-shadow: 0 0 14px #facc15;
  animation: banner-bounce 0.7s ease;
}
@keyframes banner-bounce {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.go-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: 6px 0;
}
.go-stats > div {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 6px 4px;
}
.go-label { font-size: 9px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; }
.go-value { font-size: 16px; font-weight: 700; }

.go-encourage {
  font-size: 12.5px;
  color: var(--cyan);
  margin: 2px 0 4px;
  min-height: 16px;
}

.nickname-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}
.nickname-label { font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }
.nickname-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--white-glow);
  font-size: 14px;
  text-align: center;
}
.submit-status { font-size: 11px; min-height: 14px; color: rgba(255,255,255,0.6); }

/* --- Leaderboard ----------------------------------------------------------- */
.lb-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.lb-tab {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--panel-border);
  color: rgba(255,255,255,0.7);
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 11px;
  cursor: pointer;
}
.lb-tab.active { background: linear-gradient(135deg, var(--purple), var(--cyan)); color: #fff; }

.lb-list {
  width: 100%;
  max-width: 380px;
  max-height: 44vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  font-size: 13px;
  align-items: center;
}
.lb-row.lb-me { background: rgba(139,92,246,0.25); border: 1px solid var(--purple); }
.lb-rank { color: rgba(255,255,255,0.5); font-weight: 700; }
.lb-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 700; color: var(--cyan); }
.lb-loading, .lb-empty { color: rgba(255,255,255,0.5); font-size: 12px; }

.howto-list {
  text-align: left;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}

.skins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 360px;
  margin: 6px 0;
}
.skin-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  font-size: 10px;
}
.skin-tile.locked { opacity: 0.4; cursor: not-allowed; }
.skin-tile.equipped { border-color: var(--cyan); box-shadow: 0 0 12px rgba(34,211,238,0.5); }
.skin-swatch { width: 32px; height: 32px; border-radius: 50%; }

/* --- Achievement toast ----------------------------------------------------- */
.achievement-toast {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid #facc15;
  border-radius: 10px;
  padding: 8px 14px;
  z-index: 20;
  box-shadow: 0 4px 20px rgba(250,204,21,0.35);
  animation: toast-in-out 3s ease forwards;
}
@keyframes toast-in-out {
  0% { opacity: 0; transform: translate(-50%, -10px); }
  10%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}
.ach-icon { font-size: 20px; }
.ach-title { font-size: 9px; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
.ach-name { font-size: 13px; font-weight: 700; color: #facc15; }

/* --- SEO content ----------------------------------------------------------- */
.seo-content {
  max-width: 640px;
  width: 100%;
  padding: 28px 18px 8px;
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  line-height: 1.65;
}
.seo-content h2 { font-size: 20px; color: var(--white-glow); }
.seo-content h3 { font-size: 15px; color: var(--cyan); margin-top: 20px; }
.related-games { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; list-style: none; }
.related-games a { color: var(--purple); text-decoration: none; }
.related-games a:hover { text-decoration: underline; }

@media (min-width: 860px) {
  #canvasWrap { max-width: 520px; }
}

/* --- Fullscreen mode ------------------------------------------------------
   Without this, the fullscreen button would just drop the browser chrome
   while the game stayed capped at its normal max-width, surrounded by
   dead space — not actually "fullscreen" in any useful sense. Hides the
   ad slots and SEO footer for an immersive view and lets the canvas grow
   to fill the viewport height while keeping its fixed portrait aspect
   ratio (LOGICAL_W/LOGICAL_H = 720/1280), centered horizontally. */
body.is-fullscreen .ad-slot,
body.is-fullscreen .seo-content {
  display: none;
}
body.is-fullscreen #app {
  padding: 0;
  justify-content: center;
  min-height: 100vh;
}
body.is-fullscreen #canvasWrap {
  max-width: none;
  width: auto;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}