/* ─── Color Palette ─── */
/* Extracted from the menu gradient and used consistently throughout */
:root {
  color-scheme: dark;

  /* Primary gradient stops (menu background) */
  --color-blue:        #1e50dc;
  --color-blue-mid:    #4a6ec0;
  --color-mauve:       #9a5070;
  --color-red:         #c83030;

  /* Surface & text */
  --color-surface:     #1a1a2e;
  --color-white:       #ffffff;
  --color-text:        #f8f3e8;
  --color-text-muted:  rgba(255, 255, 255, 0.72);

  /* Accent / highlight */
  --color-gold:        #ffe07a;
  --color-gold-deep:   #ffb347;

  /* Player / AI */
  --color-player:      #ff6b6b;
  --color-player-light:#ff8888;
  --color-ai:          #42c8ff;
  --color-ai-light:    #7ad8ff;

  /* Overlays & panels */
  --panel-bg:          rgba(16, 20, 26, 0.82);
  --panel-border:      rgba(255, 255, 255, 0.16);
  --panel-text:        var(--color-text);
  --panel-accent:      var(--color-gold);

  /* Shared */
  --font-main:         'Fredoka One', sans-serif;
  --radius-pill:       999px;
  --radius-card:       24px;
}

/* ─── Base ─── */

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-blue);
  font-family: var(--font-main);
}

body {
  position: relative;
}

/* ─── Game shell ─── */
#game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#game-container {
  position: absolute;
  inset: 0;
}

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

/* ─── Start screen ─── */
#start-screen {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    var(--color-blue) 0%,
    var(--color-blue-mid) 40%,
    var(--color-mauve) 55%,
    var(--color-red) 100%
  );
  overflow: hidden;
  transition: opacity 0.35s ease-out;
}

#start-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Floating emoji layer */
.emoji-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.emoji-field .emoji {
  position: absolute;
  opacity: 0.14;
  font-size: 32px;
  animation: float-up linear infinite;
  will-change: transform;
}

@keyframes float-up {
  0% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  100% {
    transform: translateY(calc(-100vh - 60px)) rotate(calc(var(--rot, 0deg) + 40deg));
  }
}

/* Content */
.start-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(92vw, 560px);
  padding: 0 24px;
  animation: fade-in-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.start-hero {
  font-size: clamp(56px, 16vw, 96px);
  line-height: 1;
  animation: hero-bob 2.4s ease-in-out infinite;
}

@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.start-title {
  margin: 8px 0 0;
  font-family: var(--font-main);
  font-size: clamp(38px, 10vw, 68px);
  color: var(--color-white);
  text-align: center;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  line-height: 1.1;
}

.start-tagline {
  margin: 0;
  font-size: clamp(13px, 3.5vw, 18px);
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.02em;
}

.start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  min-width: min(72vw, 320px);
  height: clamp(52px, 14vw, 64px);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-surface);
  font-family: var(--font-main);
  font-size: clamp(17px, 4.5vw, 24px);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.start-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.start-btn:active {
  transform: scale(0.96);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.start-btn.loading {
  pointer-events: none;
  opacity: 0.85;
  animation: btn-pulse 1s ease-in-out infinite;
}

.start-menu-panel,
.difficulty-panel {
  width: 100%;
}

.start-menu-panel {
  display: flex;
  justify-content: center;
}

.difficulty-panel {
  display: grid;
  gap: 20px;
  margin-top: 18px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: rgba(11, 17, 35, 0.34);
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: fade-in-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.difficulty-panel.hidden,
.start-menu-panel.hidden {
  display: none;
}

.difficulty-header {
  display: grid;
  text-align: center;
}

.difficulty-title {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.1;
}

.difficulty-slider-wrap {
  display: grid;
  gap: 14px;
}

.difficulty-slider {
  --difficulty-color: #ffd86b;
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #57d17a 0%, #ffd86b 50%, #ff6b6b 100%);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.difficulty-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  background: var(--difficulty-color);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.difficulty-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  background: var(--difficulty-color);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.difficulty-slider::-moz-range-track {
  height: 10px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #57d17a 0%, #ffd86b 50%, #ff6b6b 100%);
}

.difficulty-slider-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.difficulty-step {
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-main);
  font-size: clamp(14px, 3.4vw, 18px);
  cursor: pointer;
  transition: color 0.14s ease, transform 0.14s ease, text-shadow 0.14s ease;
}

.difficulty-step:hover {
  transform: translateY(-1px);
}

.difficulty-step.active {
  color: var(--step-color, #ffffff);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}

.difficulty-confirm-btn {
  margin-top: 0;
  min-width: 100%;
}

@keyframes btn-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.02); opacity: 1; }
}

/* ─── Countdown overlay ─── */
.countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.countdown-overlay.hidden {
  display: none;
}

.countdown-overlay.fade-out {
  opacity: 0;
}

.countdown-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.countdown-badge {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 3.2vw, 18px);
  color: var(--color-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  /* Fixed height so layout doesn't shift on show/hide */
  min-height: 1.4em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.countdown-badge.visible {
  opacity: 0.95;
  transform: translateY(0);
}

.countdown-number {
  font-family: var(--font-main);
  font-size: clamp(72px, 22vw, 140px);
  color: var(--color-white);
  line-height: 1;
  /* Fixed height at max number size so GO! doesn't cause reflow */
  min-height: clamp(72px, 22vw, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow:
    0 0 40px rgba(255, 255, 255, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.6);
  transition: none;
}

.countdown-number.pop {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.15s ease-out, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.countdown-number.shrink {
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.28s ease-in, transform 0.28s ease-in;
}

.countdown-number.go {
  font-size: clamp(56px, 16vw, 100px);
  color: var(--color-gold);
  text-shadow:
    0 0 50px rgba(255, 224, 122, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

.countdown-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 3.5vw, 20px);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  /* Fixed height so layout doesn't shift on show/hide */
  min-height: 1.6em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.countdown-sub.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Game Over overlay ─── */
.game-over-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
  pointer-events: none;
}

.game-over-overlay.visible {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.game-over-overlay.hidden {
  display: none;
}

.game-over-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92%;
  max-width: 460px;
  padding: 32px 24px 36px;
  border-radius: var(--radius-card);
  /* Menu-consistent gradient background */
  background: linear-gradient(
    160deg,
    var(--color-blue) 0%,
    var(--color-blue-mid) 50%,
    var(--color-mauve) 100%
  );
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transform: translateY(30px) scale(0.92);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
}

.game-over-overlay.visible .game-over-banner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.game-over-emoji {
  font-size: clamp(48px, 12vw, 72px);
  line-height: 1;
  animation: trophy-bounce 1.2s ease-in-out infinite;
}

@keyframes trophy-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

.game-over-title {
  margin: 4px 0 0;
  font-family: var(--font-main);
  font-size: clamp(28px, 8vw, 48px);
  color: var(--color-white);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  line-height: 1.1;
}

.game-over-title.win {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-over-title.lose {
  color: var(--color-text-muted);
}

.game-over-score {
  margin: 2px 0 8px;
  font-family: var(--font-main);
  font-size: clamp(18px, 5vw, 28px);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  letter-spacing: 0.04em;
}

.game-over-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  min-width: min(64vw, 260px);
  height: clamp(48px, 12vw, 58px);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-surface);
  font-family: var(--font-main);
  font-size: clamp(16px, 4vw, 22px);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.game-over-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.game-over-btn:active {
  transform: scale(0.96);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

.game-over-btn--secondary {
  margin-top: 0;
  background: transparent;
  color: var(--color-text-muted);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
  font-size: clamp(14px, 3.5vw, 18px);
  height: clamp(42px, 10vw, 50px);
  min-width: min(56vw, 220px);
}

.game-over-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.36);
  color: var(--color-white);
  box-shadow: none;
}

.game-over-btn--secondary:active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* ─── Tuning panel ─── */
#tuning-panel {
  position: absolute;
  top: max(5vh, 16px);
  left: max(3vw, 12px);
  z-index: 20;
  width: min(44vw, 320px);
  max-height: 72vh;
  overflow: auto;
  border: 3px solid var(--panel-border);
  border-radius: 18px;
  background: var(--panel-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
  color: var(--panel-text);
}

#tuning-panel[open] {
  padding-bottom: 10px;
}

#tuning-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px 10px;
  font-family: var(--font-main);
  font-size: clamp(10px, 1.8vw, 13px);
  color: white;
  letter-spacing: 0.04em;
}

#tuning-panel summary::-webkit-details-marker {
  display: none;
}

#panel-root {
  padding: 0 12px 12px;
}

.tuning-group {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.tuning-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--panel-accent);
  text-transform: uppercase;
}

.tuning-row {
  display: grid;
  gap: 4px;
}

.tuning-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.25;
}

.tuning-label span:last-child {
  opacity: 0.88;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--color-ai-light);
}

.hint-chip {
  position: absolute;
  right: max(3vw, 12px);
  bottom: max(4vh, 12px);
  z-index: 20;
  padding: 10px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28);
  color: white;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

@media (max-width: 700px) {
  #tuning-panel {
    width: min(58vw, 280px);
  }
}