/* ==========================================================================
   KEYBOARD BALLOON POP! - Classroom Educational Game Stylesheet
   Designed for Class 1 and Class 2 Students (Ages 6-8)
   100% Offline Ready, Bright Pastel Colors & Child-Friendly Aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700;800;900&family=Nunito:wght@700;800;900&display=swap');

:root {
  /* Bright, Uplifting Pastel Sky & Nature */
  --sky-top: #5ec7f8;
  --sky-mid: #9fe2ff;
  --sky-bottom: #e0f7fa;
  --cloud-color: rgba(255, 255, 255, 0.95);
  --grass-top: #86efac;
  --grass-bottom: #22c55e;
  --sun-core: #fef08a;
  --sun-ray: #fde047;

  /* Child-Friendly Pastel Accent Hues */
  --pastel-pink-soft: #fce7f3;
  --pastel-pink-border: #f472b6;
  --pastel-pink-text: #be185d;

  --pastel-purple-soft: #f3e8ff;
  --pastel-purple-border: #c084fc;
  --pastel-purple-text: #7e22ce;

  --pastel-blue-soft: #e0f2fe;
  --pastel-blue-border: #7dd3fc;
  --pastel-blue-text: #0369a1;

  --pastel-green-soft: #ecfdf5;
  --pastel-green-border: #6ee7b7;
  --pastel-green-text: #047857;

  --pastel-yellow-soft: #fef9c3;
  --pastel-yellow-border: #fde047;
  --pastel-yellow-text: #b45309;

  --text-dark: #1e293b;
  --text-light: #ffffff;
  --gold-star: #ffb300;

  --font-family: 'Fredoka', 'Nunito', 'Comic Sans MS', 'Trebuchet MS', 'Segoe UI', -apple-system, sans-serif;
  --btn-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
  --card-shadow: 0 20px 45px rgba(14, 116, 144, 0.16);
}

/* Base Reset & Full Height Container */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  background-color: var(--sky-top);
  -webkit-font-smoothing: antialiased;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   SKY BACKGROUND & CUTE NATURE SCENERY
   ========================================================================== */
.sky-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-bottom) 85%, #f0fdf4 100%);
  z-index: 1;
  overflow: hidden;
}

/* Cute Cartoon Sun with Smiling Face */
.sun {
  position: absolute;
  top: 25px;
  right: 50px;
  width: 95px;
  height: 95px;
  background: radial-gradient(circle, #fffde7 15%, var(--sun-core) 60%, var(--sun-ray) 100%);
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(255, 235, 59, 0.85), 0 0 90px rgba(255, 193, 7, 0.45);
  animation: sunGlow 4s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sun-face {
  position: relative;
  width: 60px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sun-eyes {
  display: flex;
  gap: 22px;
}
.sun-eyes::before,
.sun-eyes::after {
  content: '';
  width: 7px;
  height: 10px;
  background: #78350f;
  border-radius: 50%;
  animation: sunBlink 5s infinite;
}

@keyframes sunBlink {
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0.1); }
}

.sun-cheeks {
  position: absolute;
  width: 100%;
  top: 15px;
  display: flex;
  justify-content: space-between;
}
.sun-cheeks::before,
.sun-cheeks::after {
  content: '';
  width: 13px;
  height: 9px;
  background: rgba(244, 63, 94, 0.35);
  border-radius: 50%;
}

.sun-smile {
  width: 18px;
  height: 10px;
  border-bottom: 3.5px solid #78350f;
  border-radius: 0 0 16px 16px;
  margin-top: 1px;
}

@keyframes sunGlow {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.08); filter: brightness(1.15); }
}

/* Fluffy Cartoon Clouds */
.cloud {
  position: absolute;
  background: var(--cloud-color);
  border-radius: 100px;
  opacity: 0.88;
  filter: drop-shadow(0 8px 12px rgba(0, 100, 160, 0.15));
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: var(--cloud-color);
  border-radius: 50%;
}

.cloud-1 {
  width: 180px;
  height: 60px;
  top: 90px;
  left: -200px;
  animation: driftCloud 38s linear infinite;
}
.cloud-1::before {
  width: 80px;
  height: 80px;
  top: -40px;
  left: 25px;
}
.cloud-1::after {
  width: 60px;
  height: 60px;
  top: -25px;
  left: 85px;
}

.cloud-2 {
  width: 240px;
  height: 75px;
  top: 190px;
  left: -300px;
  animation: driftCloud 55s linear infinite 12s;
}
.cloud-2::before {
  width: 110px;
  height: 110px;
  top: -55px;
  left: 35px;
}
.cloud-2::after {
  width: 85px;
  height: 85px;
  top: -35px;
  left: 120px;
}

.cloud-3 {
  width: 150px;
  height: 50px;
  top: 320px;
  left: -200px;
  animation: driftCloud 45s linear infinite 5s;
  opacity: 0.6;
}
.cloud-3::before {
  width: 65px;
  height: 65px;
  top: -30px;
  left: 20px;
}
.cloud-3::after {
  width: 50px;
  height: 50px;
  top: -20px;
  left: 70px;
}

.cloud-4 {
  width: 200px;
  height: 65px;
  top: 140px;
  left: -250px;
  animation: driftCloud 48s linear infinite 24s;
}
.cloud-4::before {
  width: 90px;
  height: 90px;
  top: -45px;
  left: 30px;
}
.cloud-4::after {
  width: 70px;
  height: 70px;
  top: -30px;
  left: 95px;
}

@keyframes driftCloud {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 400px)); }
}

/* Cheerful Hills & Grass at Bottom */
.ground-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 5;
  pointer-events: none;
}

.hill {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, var(--grass-top) 0%, var(--grass-bottom) 100%);
  border-radius: 50% 50% 0 0;
}

.hill-left {
  left: -10%;
  width: 65%;
  height: 60px;
  opacity: 0.85;
}

.hill-right {
  right: -10%;
  width: 65%;
  height: 65px;
  opacity: 0.95;
}

.grass-trim {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18px;
  background: #2e7d32;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   COMPACT ULTRA-SLEEK NON-WRAPPING HEADER & HUD DASHBOARD
   Never wraps into multi-line rows. Fixed height gives maximum sky play area.
   ========================================================================== */
#game-header {
  position: relative;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 12px;
  box-shadow: 0 2px 10px rgba(0, 30, 80, 0.14);
  border-bottom: 2.5px solid #ffca28;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 46px;
  max-height: 46px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.header-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.game-title {
  margin: 0;
  padding: 0;
  font-weight: 900;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1;
}

.title-full {
  display: inline-block;
  font-size: 1.15rem;
  color: #d81b60;
  text-shadow: 1px 1px 0 #ffe082, 2px 2px 0 #ff6f00;
}

.title-tab,
.title-mobile {
  display: none;
}

/* Center Dashboard: Unified Stats Capsule */
.hud-dashboard {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin: 0 4px;
}

.hud-stats-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 244, 248, 0.85);
  padding: 3px 6px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Individual Compact Stat Pills */
.hud-stat-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1.5px solid #e0e0e0;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.hud-stat-pill:hover {
  transform: translateY(-1px);
}

.hud-stat-pill .hud-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.hud-stat-content {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.hud-stat-label {
  font-size: 0.55rem;
  font-weight: 800;
  color: #757575;
  letter-spacing: 0.3px;
}

.hud-value {
  font-size: 0.95rem;
  font-weight: 900;
  color: #212121;
  line-height: 1;
  min-width: 18px;
  text-align: right;
}

/* Specific Pill Color Themes */
.timer-pill {
  border-color: #64b5f6;
  background: #e3f2fd;
}
.timer-pill .hud-value {
  color: #0d47a1;
}

.timer-pill.timer-warning {
  border-color: #ff3d00;
  background: #ffebee;
  animation: pulseTimer 0.6s infinite alternate;
}
.timer-pill.timer-warning .hud-value {
  color: #b71c1c;
}

@keyframes pulseTimer {
  0% { transform: scale(1); }
  100% { transform: scale(1.06); box-shadow: 0 0 8px rgba(255, 61, 0, 0.6); }
}

.score-pill {
  border-color: #ffca28;
  background: #fff8e1;
}
.score-pill .hud-value {
  color: #e65100;
}

.popped-pill {
  border-color: #ba68c8;
  background: #f3e5f5;
}
.popped-pill .hud-value {
  color: #6a1b9a;
}

.highscore-pill {
  border-color: #ffd54f;
  background: #fffde7;
}
.highscore-pill .hud-value {
  color: #f57f17;
}

.hud-champ-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: #e65100;
  background: #ffe082;
  padding: 1px 6px;
  border-radius: 10px;
  max-width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #ffd54f;
}

/* Header Right: Stage & Level Pill + Action Buttons */
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Unified Stage & Level Pill Button */
.stage-level-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f3e5f5 0%, #e8f5e9 100%);
  border: 1.5px solid #ab47bc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  color: #4a148c;
  transition: all 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  touch-action: manipulation;
}

.stage-level-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(171, 71, 188, 0.3);
  border-color: #8e24aa;
}

.stage-level-pill:active {
  transform: translateY(1px);
}

.sl-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sl-divider {
  color: #9c27b0;
  font-size: 0.7rem;
  opacity: 0.7;
}

.sl-arrow {
  font-size: 0.65rem;
  color: #7b1fa2;
}

/* Action Controls Buttons */
.hud-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 32px;
  padding: 0 8px;
  font-size: 0.74rem;
  font-weight: 800;
  font-family: inherit;
  color: #ffffff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  touch-action: manipulation;
}

.ctrl-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.ctrl-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

#btn-pause {
  background: #ff8f00;
  box-shadow: 0 2px 0 #e65100, 0 2px 4px rgba(0, 0, 0, 0.15);
}
#btn-restart {
  background: #e53935;
  box-shadow: 0 2px 0 #b71c1c, 0 2px 4px rgba(0, 0, 0, 0.15);
}
#btn-sound {
  background: #43a047;
  box-shadow: 0 2px 0 #1b5e20, 0 2px 4px rgba(0, 0, 0, 0.15);
}
#btn-fullscreen {
  background: #8e24aa;
  box-shadow: 0 2px 0 #4a148c, 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   BALLOON PLAY AREA & BALLOON OBJECTS
   ========================================================================== */
#balloon-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; /* Physical keyboard only, no mouse clicks */
  overflow: hidden;
}

/* The Balloon Element Container (Strictly Keyboard Only - No Mouse/Touch Popping) */
.balloon-wrapper {
  position: absolute;
  width: 96px;
  height: 165px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none !important;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, left, top;
}

/* Off-screen input catcher to support mobile/tablet virtual keyboards */
.visually-hidden-catcher {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  z-index: -1;
}

/* Gentle Left-Right Floating Sway */
.balloon-inner {
  position: relative;
  width: 96px;
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: balloonSway 3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes balloonSway {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* Oval Balloon Sphere with Soft Candy Gloss Finish */
.balloon-body {
  position: absolute;
  width: 96px;
  height: 122px;
  border-radius: 50% 50% 50% 50% / 44% 44% 56% 56%;
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.22),
              inset 10px 12px 18px rgba(255, 255, 255, 0.6),
              0 10px 24px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Primary Specular Light Highlight */
.balloon-shine {
  position: absolute;
  top: 15px;
  left: 17px;
  width: 24px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  transform: rotate(-35deg);
  pointer-events: none;
  filter: blur(0.6px);
}

/* Secondary Cute Bubble Highlight */
.balloon-shine::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}

/* Large, Ultra-Readable Font for Class 1 & 2 Learners */
.balloon-letter {
  position: relative;
  z-index: 2;
  font-family: var(--font-family);
  font-size: 3.4rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 
    -2.5px -2.5px 0 #0f172a,
     2.5px -2.5px 0 #0f172a,
    -2.5px  2.5px 0 #0f172a,
     2.5px  2.5px 0 #0f172a,
     0 6px 12px rgba(0, 0, 0, 0.45);
  letter-spacing: 0;
  user-select: none;
}

/* Special Action Keys (Spacebar, Shift, Caps Lock, Tab, Enter) inside balloons */
.balloon-letter.special-key {
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.5px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 5px 9px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  max-width: 86px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Symbols font size tuning */
.balloon-letter.symbol-key {
  font-size: 3.1rem;
  line-height: 1;
}

/* Little Knot at bottom of balloon */
.balloon-knot {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 10px;
  border-radius: 3px 3px 6px 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Cute Balloon String */
.balloon-string {
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 2.5px;
  height: 48px;
  background: rgba(51, 65, 85, 0.6);
  transform: translateX(-50%);
  transform-origin: top center;
  animation: stringWave 2.5s ease-in-out infinite alternate;
}

@keyframes stringWave {
  0% { transform: translateX(-50%) rotate(-4deg); }
  100% { transform: translateX(-50%) rotate(4deg); }
}

/* Balloon Pop Burst Animation */
.balloon-popping {
  animation: burstBalloon 0.28s ease-out forwards !important;
}

@keyframes burstBalloon {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.4);
    opacity: 0.9;
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* Floating "+10" Score Popup Badge */
.score-popup {
  position: absolute;
  z-index: 45;
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffeb3b;
  text-shadow:
    -2px -2px 0 #d84315,
     2px -2px 0 #d84315,
    -2px  2px 0 #d84315,
     2px  2px 0 #d84315,
     0 6px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: floatScore 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  white-space: nowrap;
}

@keyframes floatScore {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -20px) scale(1.25);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -75px) scale(1);
    opacity: 0;
  }
}

/* Floating Negative Score Popup Badge */
.score-popup.score-negative {
  color: #ff5252;
  text-shadow:
    -2px -2px 0 #b71c1c,
     2px -2px 0 #b71c1c,
    -2px  2px 0 #b71c1c,
     2px  2px 0 #b71c1c,
     0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Score Pill Penalty Shake Animation */
.score-pill.score-pill-penalty {
  animation: penaltyShake 0.28s ease-in-out;
  border-color: #ff5252 !important;
  box-shadow: 0 0 14px rgba(255, 82, 82, 0.6) !important;
}

@keyframes penaltyShake {
  0%, 100% { transform: scale(1) translateX(0); }
  25% { transform: scale(0.95) translateX(-4px); }
  50% { transform: scale(0.95) translateX(4px); }
  75% { transform: scale(0.95) translateX(-3px); }
}

/* Floating Encouragement Toast */
.encouragement-banner {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  z-index: 60;
  padding: 10px 28px;
  border-radius: 40px;
  background: linear-gradient(135deg, #ffeb3b, #ff9800);
  border: 4px solid #ffffff;
  box-shadow: 0 8px 25px rgba(255, 111, 0, 0.45);
  font-size: 1.8rem;
  font-weight: 900;
  color: #d84315;
  letter-spacing: 1px;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.encouragement-banner.show {
  opacity: 1;
  transform: translateX(-50%) scale(1.1);
}

/* ==========================================================================
   CANVAS FOR CONFETTI & BURST PARTICLES
   ========================================================================== */
#fx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

/* ==========================================================================
   MODAL DIALOGS (START, PAUSE, GAME OVER)
   ========================================================================== */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 30, 60, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: 100%;
  max-width: 600px;
  max-height: 94vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 32px;
  padding: 20px 24px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 0 0 6px rgba(186, 230, 253, 0.45);
  border: 4px solid #bae6fd;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  animation: bounceIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-card::-webkit-scrollbar {
  width: 6px;
}
.modal-card::-webkit-scrollbar-track {
  background: transparent;
}
.modal-card::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

@keyframes bounceIn {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.modal-emoji {
  font-size: 2.2rem;
  line-height: 1;
}

.modal-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  color: #0284c7;
  text-shadow: 2px 2px 0 #b3e5fc;
  line-height: 1.2;
}

.modal-subtitle {
  font-size: 0.92rem;
  font-weight: 700;
  color: #546e7a;
}

/* Start Card - Cheerful, Bright Pastel, Child-Friendly for Class 1 & 2 */
.start-card {
  max-width: 700px;
  width: min(94vw, 700px);
  padding: 16px 22px;
  gap: 9px;
  border: 5px solid #38bdf8;
  border-radius: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  box-shadow: 0 20px 50px rgba(14, 165, 233, 0.22), 0 0 0 5px #bae6fd, 0 0 0 9px rgba(251, 207, 232, 0.6);
}

.title-balloon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.title-pop-balloon {
  font-size: 2.1rem;
  display: inline-block;
  animation: floatTitleBalloon 2.5s infinite ease-in-out alternate;
  filter: drop-shadow(0 4px 6px rgba(239, 68, 68, 0.3));
}

.title-pop-balloon:last-child {
  animation-delay: -1.25s;
}

@keyframes floatTitleBalloon {
  0% { transform: translateY(0) rotate(-6deg); }
  100% { transform: translateY(-7px) rotate(6deg); }
}

.start-card .modal-title {
  font-size: clamp(1.55rem, 2.9vw, 2.1rem);
  font-weight: 900;
  color: #0284c7;
  text-shadow: 2px 2px 0 #bae6fd, 4px 4px 0 #fed7aa;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.6px;
}

.start-card .modal-subtitle {
  font-size: clamp(0.85rem, 1.4vw, 0.98rem);
  font-weight: 800;
  color: #475569;
  margin: 0;
  background: #f1f5f9;
  padding: 3px 14px;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
}

/* 3-Step Visual Quick Guide (Child-Friendly & Space-Efficient) */
.quick-how-to {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #ffffff;
  border: 2.5px solid #fef08a;
  border-radius: 20px;
  padding: 8px 12px;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.12);
}

.how-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(0.8rem, 1.2vw, 0.92rem);
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 14px;
  flex: 1;
  justify-content: center;
}

.how-step.step-watch {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 2px solid #7dd3fc;
  color: #0369a1;
}

.how-step.step-press {
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 2px solid #fde047;
  color: #854d0e;
}

.how-step.step-pop {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2px solid #86efac;
  color: #15803d;
}

.how-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.step-watch .step-num { background: #0284c7; }
.step-press .step-num { background: #eab308; }
.step-pop .step-num { background: #16a34a; }

.how-step .step-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.how-arrow {
  font-size: 1.1rem;
  color: #f59e0b;
  font-weight: 900;
}

.txt-short {
  display: none;
}
.txt-long {
  display: inline;
}

.keyboard-tip-compact {
  width: 100%;
  font-size: clamp(0.82rem, 1.25vw, 0.92rem);
  color: #0369a1;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2.5px solid #38bdf8;
  padding: 6px 14px;
  border-radius: 16px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.1);
}

/* Big Button Styling & Large Attractive START GAME! Button */
.huge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  min-height: 62px;
  padding: 13px 28px;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 900;
  font-family: inherit;
  color: #ffffff;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  outline: none;
  transition: all 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.start-btn {
  background: linear-gradient(180deg, #34d399 0%, #10b981 50%, #059669 100%);
  box-shadow: 0 8px 0 #047857, 0 16px 30px rgba(16, 185, 129, 0.48);
  letter-spacing: 0.8px;
  animation: pulseStartBtn 2s infinite ease-in-out;
}

@keyframes pulseStartBtn {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 0 #047857, 0 16px 30px rgba(16, 185, 129, 0.48);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 9px 0 #047857, 0 20px 36px rgba(16, 185, 129, 0.6);
  }
}

.start-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 0 #047857, 0 20px 36px rgba(16, 185, 129, 0.55);
}

.start-btn:active {
  transform: translateY(4px) scale(0.99);
  box-shadow: 0 4px 0 #047857, 0 8px 16px rgba(16, 185, 129, 0.35);
}

/* Pause Modal */
.pause-card {
  border-color: #ffb74d;
}
.pause-msg {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e65100;
}
.modal-btn-row {
  display: flex;
  gap: 14px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.resume-btn {
  background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
  box-shadow: 0 6px 0 #0d47a1, 0 10px 20px rgba(21, 101, 192, 0.35);
  flex: 1;
  min-width: 180px;
}
.resume-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #0d47a1;
}
.resume-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #0d47a1;
}

.restart-btn {
  background: linear-gradient(180deg, #ef5350 0%, #c62828 100%);
  box-shadow: 0 6px 0 #8e0000, 0 10px 20px rgba(198, 40, 40, 0.35);
  flex: 1;
  min-width: 180px;
}
.restart-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #8e0000;
}
.restart-btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #8e0000;
}

/* Step 1: Learning Stage Selector in Start Modal */
.stage-selector-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #fbf7ff 0%, #ffffff 100%);
  border: 3.5px solid #d8b4fe;
  border-radius: 24px;
  padding: 10px 14px;
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.08);
}

.selector-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}

.selector-label {
  font-size: clamp(0.82rem, 1.25vw, 0.94rem);
  font-weight: 900;
  color: #7e22ce;
  letter-spacing: 0.5px;
}

.stage-step-pill {
  font-size: 0.78rem;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #9333ea, #7e22ce);
  padding: 3px 11px;
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(147, 51, 234, 0.35);
}

.stage-btn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.stage-select-btn {
  padding: 7px 5px;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: inherit;
  outline: none;
  position: relative;
}

.stage-select-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.stage-select-btn .stg-icon {
  font-size: 1.45rem;
  line-height: 1.1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.stage-select-btn:hover .stg-icon {
  transform: scale(1.15) rotate(5deg);
}

.stage-select-btn .stg-title {
  font-size: clamp(0.78rem, 1.15vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.stage-select-btn .stg-desc {
  font-size: clamp(0.64rem, 0.95vw, 0.72rem);
  font-weight: 800;
  white-space: nowrap;
}

/* Individual Stage Color Theming for Bright Child-Friendly Appeal */
/* Stage 1: Candy Sky Blue */
.stage-select-btn[data-stage="letters_am"] {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  border: 2.5px solid #7dd3fc;
  box-shadow: 0 3px 8px rgba(14, 165, 233, 0.12);
}
.stage-select-btn[data-stage="letters_am"] .stg-title { color: #0284c7; }
.stage-select-btn[data-stage="letters_am"] .stg-desc { color: #0369a1; }

/* Stage 2: Candy Lilac Purple */
.stage-select-btn[data-stage="letters_nz"] {
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
  border: 2.5px solid #d8b4fe;
  box-shadow: 0 3px 8px rgba(147, 51, 234, 0.12);
}
.stage-select-btn[data-stage="letters_nz"] .stg-title { color: #7e22ce; }
.stage-select-btn[data-stage="letters_nz"] .stg-desc { color: #9333ea; }

/* Stage 3: Candy Mint Green */
.stage-select-btn[data-stage="numbers"] {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 2.5px solid #86efac;
  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.12);
}
.stage-select-btn[data-stage="numbers"] .stg-title { color: #15803d; }
.stage-select-btn[data-stage="numbers"] .stg-desc { color: #16a34a; }

/* Stage 4: Candy Tangerine Orange */
.stage-select-btn[data-stage="symbols"] {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
  border: 2.5px solid #fdba74;
  box-shadow: 0 3px 8px rgba(249, 115, 22, 0.12);
}
.stage-select-btn[data-stage="symbols"] .stg-title { color: #c2410c; }
.stage-select-btn[data-stage="symbols"] .stg-desc { color: #ea580c; }

/* Stage 5: Candy Rose Pink */
.stage-select-btn[data-stage="special"] {
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
  border: 2.5px solid #fca5a5;
  box-shadow: 0 3px 8px rgba(244, 63, 94, 0.12);
}
.stage-select-btn[data-stage="special"] .stg-title { color: #be123c; }
.stage-select-btn[data-stage="special"] .stg-desc { color: #e11d48; }

/* Stage 6: Candy Golden Sunshine */
.stage-select-btn[data-stage="all_combined"] {
  background: linear-gradient(180deg, #ffffff 0%, #fefce8 100%);
  border: 2.5px solid #fde047;
  box-shadow: 0 3px 8px rgba(234, 179, 8, 0.12);
}
.stage-select-btn[data-stage="all_combined"] .stg-title { color: #a16207; }
.stage-select-btn[data-stage="all_combined"] .stg-desc { color: #ca8a04; }

/* Active Selection States: Vibrant, bold 3D outline + Pop Star Badge */
.stage-select-btn.active {
  transform: translateY(-3px) scale(1.03);
}

.stage-select-btn[data-stage="letters_am"].active {
  background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
  border: 3.5px solid #0284c7;
  box-shadow: 0 8px 18px rgba(2, 132, 199, 0.35), 0 0 0 3px #7dd3fc;
}

.stage-select-btn[data-stage="letters_nz"].active {
  background: linear-gradient(180deg, #f3e8ff 0%, #e9d5ff 100%);
  border: 3.5px solid #9333ea;
  box-shadow: 0 8px 18px rgba(147, 51, 234, 0.35), 0 0 0 3px #d8b4fe;
}

.stage-select-btn[data-stage="numbers"].active {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border: 3.5px solid #16a34a;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35), 0 0 0 3px #86efac;
}

.stage-select-btn[data-stage="symbols"].active {
  background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%);
  border: 3.5px solid #ea580c;
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.35), 0 0 0 3px #fdba74;
}

.stage-select-btn[data-stage="special"].active {
  background: linear-gradient(180deg, #ffe4e6 0%, #fecdd3 100%);
  border: 3.5px solid #e11d48;
  box-shadow: 0 8px 18px rgba(225, 29, 72, 0.35), 0 0 0 3px #fca5a5;
}

.stage-select-btn[data-stage="all_combined"].active {
  background: linear-gradient(180deg, #fef9c3 0%, #fef08a 100%);
  border: 3.5px solid #ca8a04;
  box-shadow: 0 8px 18px rgba(202, 138, 4, 0.35), 0 0 0 3px #fde047;
}

.stage-select-btn.active::after {
  content: '★';
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 2px solid #ffffff;
}

/* Stage Preview Box */
.stage-preview-box {
  width: 100%;
  background: #ffffff;
  border: 2px solid #d8b4fe;
  border-radius: 16px;
  padding: 6px 12px;
  box-sizing: border-box;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.preview-label {
  font-size: 0.76rem;
  font-weight: 900;
  color: #7e22ce;
  letter-spacing: 0.4px;
}

.preview-count {
  font-size: 0.76rem;
  font-weight: 900;
  color: #6b21a8;
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
  padding: 2px 8px;
  border-radius: 10px;
}

.stage-chips-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 44px;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}

.key-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 26px;
  padding: 0 6px;
  font-size: 0.86rem;
  font-weight: 900;
  font-family: inherit;
  color: #0f172a;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border: 1.5px solid #94a3b8;
  border-bottom: 3.5px solid #64748b;
  border-radius: 8px;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.key-chip.special-chip {
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
  border-color: #c084fc;
  border-bottom: 3.5px solid #9333ea;
  color: #7e22ce;
  font-size: 0.74rem;
  letter-spacing: 0.3px;
}

/* Difficulty Level Selector in Start Modal */
.level-selector-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border: 3.5px solid #86efac;
  border-radius: 24px;
  padding: 10px 14px;
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.08);
}

.level-selector-box .selector-label {
  font-size: clamp(0.82rem, 1.25vw, 0.94rem);
  font-weight: 900;
  color: #15803d;
  letter-spacing: 0.5px;
}

.level-btn-group {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.level-select-btn {
  flex: 1;
  padding: 7px 6px;
  border-radius: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: inherit;
  outline: none;
  position: relative;
}

.level-select-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.level-select-btn .lvl-icon {
  font-size: 1.5rem;
  line-height: 1.1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.level-select-btn:hover .lvl-icon {
  transform: scale(1.15) rotate(5deg);
}

.level-select-btn .lvl-title {
  font-size: clamp(0.82rem, 1.2vw, 0.94rem);
  font-weight: 900;
  letter-spacing: 0.3px;
}

.level-select-btn .lvl-desc {
  font-size: clamp(0.64rem, 0.95vw, 0.74rem);
  font-weight: 800;
  white-space: nowrap;
}

/* Individual Level Theming */
.level-select-btn[data-level="beginner"] {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 2.5px solid #86efac;
  box-shadow: 0 3px 8px rgba(22, 163, 74, 0.12);
}
.level-select-btn[data-level="beginner"] .lvl-title { color: #15803d; }
.level-select-btn[data-level="beginner"] .lvl-desc { color: #16a34a; }

.level-select-btn[data-level="intermediate"] {
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
  border: 2.5px solid #fde68a;
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.12);
}
.level-select-btn[data-level="intermediate"] .lvl-title { color: #b45309; }
.level-select-btn[data-level="intermediate"] .lvl-desc { color: #d97706; }

.level-select-btn[data-level="expert"] {
  background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
  border: 2.5px solid #fca5a5;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.12);
}
.level-select-btn[data-level="expert"] .lvl-title { color: #b91c1c; }
.level-select-btn[data-level="expert"] .lvl-desc { color: #dc2626; }

/* Active Level Button States */
.level-select-btn.active {
  transform: translateY(-3px) scale(1.03);
}

.level-select-btn[data-level="beginner"].active {
  border: 3.5px solid #16a34a;
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35), 0 0 0 3px #86efac;
}

.level-select-btn[data-level="intermediate"].active {
  border: 3.5px solid #d97706;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.35), 0 0 0 3px #fde68a;
}

.level-select-btn[data-level="expert"].active {
  border: 3.5px solid #dc2626;
  background: linear-gradient(180deg, #fee2e2 0%, #fecdd3 100%);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.35), 0 0 0 3px #fca5a5;
}

.level-select-btn.active::after {
  content: '✓';
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 2px solid #ffffff;
}

.level-select-btn[data-level="intermediate"].active::after {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.level-select-btn[data-level="expert"].active::after {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Completed Stage Banner in Results Modal */
.completed-stage-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #15803d;
  width: 100%;
  box-sizing: border-box;
}

.completed-stage-banner .cs-icon {
  font-size: 1.25rem;
}

/* Next Stage Step-by-Step Advance Button */
.go-next-stage-box {
  width: 100%;
}

.go-next-stage-btn {
  width: 100%;
  padding: 7px 12px;
  font-size: 0.84rem;
  font-weight: 900;
  font-family: inherit;
  color: #ffffff;
  background: linear-gradient(135deg, #ab47bc, #7b1fa2);
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 0 #4a148c, 0 6px 14px rgba(123, 31, 162, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.go-next-stage-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #4a148c, 0 8px 18px rgba(123, 31, 162, 0.45);
}

.go-next-stage-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #4a148c;
}

/* Stage & Level Selectors in Game Over Modal */
.go-stage-selector {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.go-section-title {
  font-size: 0.7rem;
  font-weight: 900;
  color: #0277bd;
  letter-spacing: 0.6px;
  text-align: left;
}

.go-stage-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}

.go-stage-btn {
  padding: 4px 4px;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 8px;
  border: 1.5px solid #e0e0e0;
  background: #ffffff;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  outline: none;
  white-space: nowrap;
}

.go-stage-btn:hover {
  transform: translateY(-1px);
}

.go-stage-btn.active {
  border-color: #8e24aa;
  background: #f3e5f5;
  color: #6a1b9a;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(142, 36, 170, 0.3);
}

/* Level Selector in Game Over Modal */
.go-level-selector {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.go-level-group {
  display: flex;
  gap: 5px;
  width: 100%;
}

.go-level-btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  background: #ffffff;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  outline: none;
  white-space: nowrap;
}

.go-level-btn:hover {
  transform: translateY(-1px);
}

.go-level-btn.active {
  border-color: #2e7d32;
  background: #e8f5e9;
  color: #1b5e20;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3);
}

.go-level-btn[data-level="intermediate"].active {
  border-color: #ff9800;
  background: #fff8e1;
  color: #e65100;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

.go-level-btn[data-level="expert"].active {
  border-color: #f44336;
  background: #ffebee;
  color: #c62828;
  box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3);
}

/* Champion Banner in Start Modal */
.champion-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(0.82rem, 1.2vw, 0.92rem);
  font-weight: 800;
  color: #78350f;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2.5px solid #f59e0b;
  border-radius: 16px;
  padding: 6px 14px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.champ-icon {
  font-size: 1.35rem;
  line-height: 1;
}

/* Creator Credits Badge (Bottom-Right Visible Screen Area) */
.creator-credits {
  position: absolute;
  bottom: 8px;
  right: 14px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 14px;
  border-radius: 25px;
  border: 2px solid #ffca28;
  box-shadow: 0 4px 12px rgba(0, 40, 80, 0.2);
  font-size: 0.85rem;
  font-weight: 800;
  color: #0d47a1;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.creator-credits:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 40, 80, 0.25);
  background: #ffffff;
}

.credits-icon {
  font-size: 1rem;
}

.credits-text {
  letter-spacing: 0.4px;
}

/* Game Over Results Modal - Compact Side-by-Side (No Scrolling Needed!) */
.results-card {
  width: 95%;
  max-width: 820px;
  max-height: 94vh;
  overflow-y: auto;
  border-color: #ffd54f;
  background: #fffde7;
  padding: 16px 22px;
  gap: 10px;
}

.results-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 4px;
  border-bottom: 2px dashed #ffe082;
  gap: 10px;
}

.results-badge {
  font-size: 0.9rem;
  font-weight: 900;
  color: #d84315;
  background: #ffe0b2;
  padding: 2px 10px;
  border-radius: 14px;
  margin-right: 8px;
}

.praise-title {
  display: inline-block;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 900;
  color: #c2185b;
  text-shadow: 1px 1px 0 #f8bbd0;
  vertical-align: middle;
}

.stars-rating {
  font-size: 1.8rem;
  letter-spacing: 4px;
  filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.4));
  flex-shrink: 0;
}

/* 2-Column Grid Layout */
.results-columns {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  align-items: stretch;
}

.results-col-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}

.results-col-right {
  flex: 1.15;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Big Score Box (Compact) */
.final-score-highlight {
  width: 100%;
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border: 3px solid #ffb300;
  border-radius: 16px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 3px 8px rgba(255, 179, 0, 0.2);
}

.final-score-label {
  font-size: 0.8rem;
  font-weight: 900;
  color: #ef6c00;
  letter-spacing: 1.2px;
}

.final-score-number {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 900;
  color: #e65100;
  line-height: 1;
  text-shadow: 2px 2px 0 #ffe082, 3px 3px 0 #ff8f00;
}

/* Detailed Score Breakdown Table (Compact) */
.results-details {
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #37474f;
  padding: 2px 0;
  border-bottom: 1px dashed #eceff1;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-name {
  font-weight: 700;
  text-align: left;
}

.detail-val {
  font-weight: 900;
  color: #0277bd;
  font-size: 0.95rem;
}

.highlight-row {
  background: #f1f8e9;
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
}
.highlight-row .detail-val {
  color: #2e7d32;
}

.max-score-row {
  background: #e3f2fd;
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
}
.max-score-row .detail-val {
  color: #1565c0;
}

/* Play Again Button in left column */
.play-again-btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 1.15rem;
  background: linear-gradient(180deg, #66bb6a 0%, #2e7d32 100%);
  box-shadow: 0 4px 0 #1b5e20, 0 6px 14px rgba(46, 125, 50, 0.35);
  margin-top: auto;
}
.play-again-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #1b5e20;
}
.play-again-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1b5e20;
}

/* High Score Person Name Entry Box (Compact) */
.name-entry-box {
  width: 100%;
  background: #ffffff;
  border: 3px solid #ffb300;
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 8px rgba(255, 179, 0, 0.18);
}

.name-entry-badge-row {
  display: flex;
  justify-content: center;
}

.name-record-badge {
  background: linear-gradient(135deg, #ff9800, #f57f17);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 2px 12px;
  border-radius: 16px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(245, 127, 23, 0.35);
  animation: pulseTimer 0.8s infinite alternate;
}

.name-input-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #5d4037;
}

.name-input-row {
  display: flex;
  width: 100%;
  gap: 6px;
  justify-content: center;
}

.player-name-input {
  flex: 1;
  max-width: 250px;
  padding: 6px 12px;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  border: 2px solid #ffca28;
  border-radius: 25px;
  outline: none;
  color: #1a237e;
  text-align: center;
  background: #fffde7;
  transition: all 0.2s ease;
}

.player-name-input:focus {
  border-color: #0288d1;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(2, 136, 209, 0.3);
}

.save-name-btn {
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 900;
  font-family: inherit;
  color: #ffffff;
  background: #2e7d32;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 3px 0 #1b5e20;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.save-name-btn:hover {
  background: #388e3c;
  transform: translateY(-1px);
}

.save-name-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #1b5e20;
}

.save-status-msg {
  font-size: 0.82rem;
  font-weight: 800;
  color: #2e7d32;
  min-height: 16px;
}

/* Leaderboard Card (Classroom Star Board - Compact) */
.leaderboard-card {
  width: 100%;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px dashed #e0e0e0;
  padding-bottom: 4px;
}

.lb-title {
  font-size: 0.8rem;
  font-weight: 900;
  color: #1565c0;
  letter-spacing: 0.4px;
}

.lb-reset-btn {
  font-size: 0.68rem;
  font-weight: 700;
  color: #9e9e9e;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1px 6px;
  cursor: pointer;
  font-family: inherit;
}

.lb-reset-btn:hover {
  color: #d32f2f;
  border-color: #d32f2f;
}

.leaderboard-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 105px;
  overflow-y: auto;
}

.lb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f9fbe7;
  font-size: 0.85rem;
  font-weight: 800;
}

.lb-item.first-place {
  background: #fff9c4;
  border: 1px solid #ffd54f;
  color: #b78103;
}

.lb-rank {
  width: 24px;
  text-align: left;
}

.lb-player {
  flex: 1;
  text-align: left;
  color: #37474f;
  margin: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-score {
  font-weight: 900;
  color: #e65100;
}

.lb-empty {
  font-size: 0.8rem;
  color: #9e9e9e;
  font-style: italic;
  padding: 3px 0;
}

/* Media Query for Results Modal on Narrow Displays */
@media (max-width: 720px) {
  .results-header {
    flex-direction: column;
    gap: 4px;
  }
  .results-columns {
    flex-direction: column;
  }
  .results-card {
    max-height: 90vh;
    padding: 14px 16px;
  }
}

/* ==========================================================================
   QUICK STAGE & DIFFICULTY SWITCHER MODAL (TOUCH / TABLET / DESKTOP)
   ========================================================================== */
.quick-stage-card {
  max-width: 520px;
  width: min(94vw, 520px);
  background: #ffffff;
  border: 4px solid #c084fc;
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(123, 31, 162, 0.22);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #f3e8ff;
  padding-bottom: 10px;
}

.quick-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #6b21a8;
  margin: 0;
}

.quick-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #d8b4fe;
  background: #faf5ff;
  color: #7e22ce;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  outline: none;
}

.quick-modal-close:hover {
  background: #9333ea;
  color: #fff;
  transform: rotate(90deg);
}

.quick-stage-section,
.quick-level-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-section-title {
  font-size: 0.74rem;
  font-weight: 900;
  color: #7e22ce;
  letter-spacing: 0.5px;
}

.quick-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.quick-stage-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.quick-stage-btn .qs-icon {
  font-size: 1.15rem;
}

.quick-stage-btn:hover {
  border-color: #c084fc;
  background: #faf5ff;
  transform: translateY(-1px);
}

.quick-stage-btn.active {
  border-color: #9333ea;
  background: #f3e8ff;
  color: #6b21a8;
  font-weight: 900;
  box-shadow: 0 0 0 2px #d8b4fe inset, 0 3px 8px rgba(147, 51, 234, 0.2);
}

.quick-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.quick-level-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 8px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.quick-level-btn:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
}

.quick-level-btn.active {
  border-color: #16a34a;
  background: #dcfce7;
  color: #15803d;
  font-weight: 900;
  box-shadow: 0 0 0 2px #86efac inset, 0 3px 8px rgba(22, 163, 74, 0.2);
}

.quick-apply-btn {
  width: 100%;
  margin-top: 6px;
  padding: 10px 18px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #9333ea, #a855f7);
  border: none;
  border-radius: 24px;
  box-shadow: 0 5px 0 #6b21a8, 0 6px 14px rgba(107, 33, 168, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-apply-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #6b21a8, 0 8px 18px rgba(107, 33, 168, 0.35);
}

.quick-apply-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #6b21a8;
}

/* ==========================================================================
   RESPONSIVE DESIGN (DESKTOP, TABLET, MOBILE - NO WRAPPING HEADER EVER)
   ========================================================================== */

/* 1. Large Tablets & Small Laptops (<= 1024px) */
@media (max-width: 1024px) {
  .title-full {
    display: none;
  }
  .title-tab {
    display: inline-block;
    font-size: 1.08rem;
    color: #d81b60;
    text-shadow: 1px 1px 0 #ffe082, 2px 2px 0 #ff6f00;
  }
}

/* 2. Standard Tablets / iPads / Landscape Mobile (<= 900px) */
@media (max-width: 900px) {
  #game-header {
    height: 44px;
    max-height: 44px;
    padding: 0 8px;
    gap: 6px;
  }

  /* High score card is saved in results screen; hide from header to keep 100% single line */
  .highscore-pill {
    display: none !important;
  }

  /* Compact controls: round icon buttons */
  .ctrl-text {
    display: none;
  }
  .ctrl-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.85rem;
  }

  .stage-level-pill {
    padding: 2px 8px;
    font-size: 0.74rem;
  }
}

/* 3. Small Tablets & Phones (<= 680px) */
@media (max-width: 680px) {
  .title-tab {
    display: none;
  }
  .title-mobile {
    display: inline-block;
    font-size: 1rem;
    color: #d81b60;
    text-shadow: 1px 1px 0 #ffe082;
  }

  #game-header {
    height: 42px;
    max-height: 42px;
    padding: 0 6px;
    gap: 4px;
  }

  /* Ultra-compact stat capsule: icon + number only */
  .hud-stat-label {
    display: none;
  }

  .hud-stat-pill {
    padding: 2px 6px;
    gap: 3px;
  }

  .hud-stat-pill .hud-icon {
    font-size: 0.88rem;
  }

  .hud-value {
    font-size: 0.88rem;
    min-width: 14px;
  }

  .stage-level-pill {
    padding: 2px 6px;
    gap: 3px;
    font-size: 0.72rem;
  }

  .ctrl-btn {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .quick-stage-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Adjust balloon scaling so more balloons fit on small screen */
  .balloon-wrapper {
    width: 75px;
    height: 135px;
  }
  .balloon-inner, .balloon-body {
    width: 75px;
    height: 98px;
  }
  .balloon-letter {
    font-size: 2.2rem;
  }
  .balloon-letter.special-key {
    font-size: 1.05rem;
  }

  .start-card {
    padding: 12px 14px;
    gap: 7px;
    border-radius: 24px;
  }
  .quick-how-to {
    padding: 6px 6px;
    gap: 2px;
    border-radius: 14px;
  }
  .txt-long {
    display: none;
  }
  .txt-short {
    display: inline;
  }
  .how-step {
    font-size: 0.7rem;
    gap: 3px;
    padding: 3px 4px;
    white-space: nowrap;
  }
  .how-step .step-num {
    width: 16px;
    height: 16px;
    font-size: 0.65rem;
  }
  .how-step .step-icon {
    font-size: 0.95rem;
  }
  .how-arrow {
    font-size: 0.8rem;
  }
  .keyboard-tip-compact {
    font-size: 0.72rem;
    padding: 5px 8px;
  }
  .stage-selector-box {
    padding: 8px 10px;
    gap: 5px;
    border-radius: 16px;
  }
  .stage-select-btn {
    padding: 5px 2px;
    border-radius: 12px;
  }
  .stage-select-btn .stg-icon {
    font-size: 1.1rem;
  }
  .stage-select-btn .stg-title {
    font-size: 0.72rem;
  }
  .stage-select-btn .stg-desc {
    font-size: 0.56rem;
  }
  .level-selector-box {
    padding: 8px 10px;
    gap: 5px;
    border-radius: 16px;
  }
  .level-select-btn {
    padding: 5px 3px;
    border-radius: 12px;
  }
  .level-select-btn .lvl-icon {
    font-size: 1.1rem;
  }
  .level-select-btn .lvl-title {
    font-size: 0.74rem;
  }
  .level-select-btn .lvl-desc {
    font-size: 0.56rem;
  }
  .champion-banner {
    padding: 5px 8px;
    font-size: 0.72rem;
  }
  .huge-btn {
    padding: 9px 18px;
    font-size: 1.2rem;
    min-height: 50px;
  }
}

/* 4. Very Compact Phones (<= 350px) */
@media (max-width: 350px) {
  .title-mobile {
    display: none; /* Maximum room for stats and controls */
  }

  .stage-tag .hud-label-text {
    display: none; /* Show icon only */
  }
  .level-tag .hud-label-text {
    display: none; /* Show icon only */
  }

  .stage-level-pill {
    padding: 2px 5px;
  }

  .hud-stats-group {
    gap: 3px;
    padding: 2px 4px;
  }

  .hud-stat-pill {
    padding: 2px 4px;
  }

  .ctrl-btn {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}

/* 5. Short Height Viewports (Laptops, Mobile Landscape) */
@media (max-height: 720px) {
  .start-card {
    padding: 10px 16px;
    gap: 6px;
    border-width: 3.5px;
    border-radius: 22px;
    max-height: 96vh;
    overflow-y: auto;
  }
  .start-card .modal-title {
    font-size: 1.35rem;
  }
  .start-card .modal-subtitle {
    font-size: 0.8rem;
  }
  .quick-how-to {
    padding: 6px 10px;
    gap: 4px;
    border-radius: 14px;
  }
  .how-step {
    font-size: 0.76rem;
    gap: 4px;
  }
  .how-step .step-num {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
  }
  .how-step .step-icon {
    font-size: 1.1rem;
  }
  .keyboard-tip-compact {
    font-size: 0.74rem;
    padding: 4px 8px;
    border-radius: 10px;
  }
  .stage-selector-box {
    padding: 6px 10px;
    gap: 4px;
    border-radius: 16px;
  }
  .selector-label {
    font-size: 0.74rem;
  }
  .stage-step-pill {
    font-size: 0.65rem;
    padding: 1px 6px;
  }
  .stage-select-btn {
    padding: 5px 3px;
    border-radius: 12px;
    gap: 2px;
  }
  .stage-select-btn .stg-icon {
    font-size: 1.1rem;
  }
  .stage-select-btn .stg-title {
    font-size: 0.74rem;
  }
  .stage-select-btn .stg-desc {
    font-size: 0.6rem;
  }
  .stage-preview-box {
    padding: 4px 8px;
    border-radius: 10px;
  }
  .preview-label, .preview-count {
    font-size: 0.65rem;
  }
  .stage-chips-scroll {
    max-height: 30px;
    gap: 3px;
  }
  .key-chip {
    height: 20px;
    font-size: 0.72rem;
    min-width: 20px;
    padding: 0 4px;
  }
  .level-selector-box {
    padding: 6px 10px;
    gap: 4px;
    border-radius: 16px;
  }
  .level-select-btn {
    padding: 5px 4px;
    border-radius: 12px;
    gap: 2px;
  }
  .level-select-btn .lvl-icon {
    font-size: 1.1rem;
  }
  .level-select-btn .lvl-title {
    font-size: 0.76rem;
  }
  .level-select-btn .lvl-desc {
    font-size: 0.6rem;
  }
  .champion-banner {
    padding: 5px 10px;
    font-size: 0.76rem;
    border-radius: 12px;
  }
  .start-btn {
    padding: 9px 24px;
    font-size: 1.25rem;
    min-height: 50px;
    max-width: 320px;
  }
}