/* =====================================================
   LABYRINTH GAME — style.css
   Modern dark theme
   ===================================================== */

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --font: 'Outfit', sans-serif;

  /* Dark base palette */
  --bg-darkest:   #0d0f14;
  --bg-dark:      #13161e;
  --bg-mid:       #1a1e2a;
  --bg-light:     #222736;
  --text-muted:   #8892aa;

  /* Ball */
  --ball-shine:   #f0f0f0;
  --ball-mid:     #b8b8b8;
  --ball-shadow:  #5a5a5a;

  /* UI accents */
  --accent-green:  #3ecf6e;
  --accent-gold:   #f5c842;
  --accent-red:    #e85454;
  --accent-blue:   #4db8ff;

  /* Difficulty colours */
  --easy-clr:   #3ecf6e;
  --medium-clr: #f5a623;
  --hard-clr:   #e85454;

  /* UI Glass */
  --glass-bg:     rgba(13,15,20,0.85);
  --glass-border: rgba(100,120,180,0.25);

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.7);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.55);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-darkest);
  font-family: var(--font);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Game Canvas ── */
#gameCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Screens ── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 10;
}

.screen.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Start Screen ── */
#startScreen {
  background: linear-gradient(160deg, rgba(13,15,20,0.97) 0%, rgba(8,10,16,0.99) 100%);
}

.screen-content {
  width: min(92vw, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Logo */
.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.logo-ball {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--ball-shine) 0%, var(--ball-mid) 55%, var(--ball-shadow) 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), inset 0 -4px 12px rgba(0,0,0,0.3);
  animation: logoBounce 2.5s ease-in-out infinite;
}

@keyframes logoBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-12px) scale(1.04); }
}

.logo-title {
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  font-weight: 900;
  color: var(--accent-gold);
  letter-spacing: 2px;
  text-shadow: 0 3px 12px rgba(0,0,0,0.5);
}

.logo-sub {
  font-size: clamp(1rem, 4vw, 1.3rem);
  color: var(--text-muted);
  font-weight: 600;
}

/* Level Select */
.level-select {
  width: 100%;
}

.level-label {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.level-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.level-btn {
  flex: 1;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  color: #fff;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  font-family: var(--font);
}

.level-btn:hover, .level-btn:active {
  transform: translateY(-4px) scale(1.04);
  box-shadow: var(--shadow-lg);
}

.level-btn.easy   { border-color: var(--easy-clr); }
.level-btn.medium { border-color: var(--medium-clr); }
.level-btn.hard   { border-color: var(--hard-clr); }

.level-btn.easy:hover   { box-shadow: 0 8px 32px rgba(62,207,110,0.4); }
.level-btn.medium:hover { box-shadow: 0 8px 32px rgba(245,166,35,0.4); }
.level-btn.hard:hover   { box-shadow: 0 8px 32px rgba(232,84,84,0.4); }

.level-icon {
  font-size: 2rem;
  line-height: 1;
}

.level-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.level-btn.easy   .level-name { color: var(--easy-clr); }
.level-btn.medium .level-name { color: var(--medium-clr); }
.level-btn.hard   .level-name { color: var(--hard-clr); }

.level-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.level-stars {
  font-size: 0.9rem;
  min-height: 1.1em;
  letter-spacing: 1px;
}

.hint-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 500;
  opacity: 0.8;
  animation: hintPulse 3s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* ── HUD ── */
#hud {
  pointer-events: none;
  z-index: 20;
  justify-content: space-between;
  padding: 12px 16px;
  flex-direction: column;
}

#hud.active {
  pointer-events: none;
}

.hud-top, .hud-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#hud.active .hud-top,
#hud.active .hud-bottom {
  pointer-events: all;
}

.hud-bottom {
  justify-content: center;
}

.hud-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: var(--glass-bg);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s, box-shadow 0.16s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hud-btn:hover, .hud-btn:active {
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.hud-level-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  border-radius: 999px;
  padding: 6px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hud-btn-pill {
  border: 2px solid var(--glass-border);
  background: var(--glass-bg);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 24px;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hud-btn-pill:hover, .hud-btn-pill:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ── Win Screen ── */
#winScreen {
  background: linear-gradient(160deg, rgba(8,10,16,0.95) 0%, rgba(13,15,20,0.97) 100%);
  z-index: 30;
}

#confettiCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.win-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 1;
  width: min(92vw, 400px);
}

.win-emoji {
  font-size: clamp(3.5rem, 14vw, 6rem);
  animation: winPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes winPop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.win-title {
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 900;
  color: var(--accent-gold);
  text-shadow: 0 4px 16px rgba(245,200,66,0.4);
}

.win-sub {
  font-size: clamp(1rem, 4vw, 1.3rem);
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}

.win-stars {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  letter-spacing: 6px;
  animation: starsIn 0.7s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes starsIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.win-buttons {
  display: flex;
  gap: 14px;
  width: 100%;
}

.win-btn {
  flex: 1;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s;
  letter-spacing: 0.5px;
}

.win-btn.primary {
  background: linear-gradient(135deg, var(--accent-green) 0%, #2ba355 100%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(62,207,110,0.35);
}

.win-btn.secondary {
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  color: var(--text-muted);
}

.win-btn:hover, .win-btn:active {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.4);
}

/* ── Keyboard hint (desktop) ── */
.keyboard-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.5s;
  white-space: nowrap;
}

.keyboard-hint.visible {
  opacity: 1;
}

/* ── Responsive tweaks ── */
@media (max-height: 560px) {
  .logo-ball { width: 52px; height: 52px; }
  .logo-title { font-size: 2rem; }
  .screen-content { gap: 18px; }
  .level-btn { padding: 10px 6px; }
  .level-icon { font-size: 1.5rem; }
}

@media (min-width: 768px) {
  .level-buttons { gap: 20px; }
  .level-btn { max-width: 160px; }
}

/* ══════════════════════════════════════════════════════
   HOME SCREEN
   ══════════════════════════════════════════════════════ */

#homeScreen {
  background: linear-gradient(160deg, rgba(13,15,20,0.97) 0%, rgba(8,10,16,0.99) 100%);
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 0 32px;
}

.home-content {
  width: min(92vw, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.home-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.home-title {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 900;
  color: var(--accent-gold);
  letter-spacing: 2px;
  text-shadow: 0 3px 12px rgba(0,0,0,0.5);
}

.home-sub {
  font-size: clamp(0.95rem, 3.5vw, 1.2rem);
  color: var(--text-muted);
  font-weight: 600;
}

.home-games {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lang-switcher {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.lang-flag-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s, color 0.16s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lang-flag-btn .fi {
  width: 1.4em;
  height: 1.4em;
  border-radius: 3px;
  flex-shrink: 0;
}

.lang-flag-btn.active {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(245,200,66,0.3);
}

.lang-flag-btn:hover, .lang-flag-btn:active {
  transform: scale(1.05);
}

.game-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--glass-bg);
  color: #fff;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.game-card:hover, .game-card:active {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.game-card-icon {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.game-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.game-card-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.game-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Compact cards on small phones */
@media (max-height: 700px) {
  .home-content { gap: 14px; }
  .home-games   { gap: 9px; }
  .game-card    { padding: 13px 18px; }
  .game-card-icon { font-size: 1.9rem; }
  .game-card-name { font-size: 1.05rem; }
  .game-card-desc { font-size: 0.78rem; }
  .home-logo    { gap: 2px; }
}

@media (max-height: 580px) {
  .home-content { gap: 10px; padding: 12px 0 20px; }
  .home-games   { gap: 7px; }
  .game-card    { padding: 10px 14px; gap: 14px; }
  .game-card-icon { font-size: 1.6rem; }
}

.labyrinth-card { border-color: rgba(245,200,66,0.5); }
.labyrinth-card:hover { box-shadow: 0 8px 32px rgba(245,200,66,0.3); }
.labyrinth-card .game-card-name { color: var(--accent-gold); }

.snake-card { border-color: rgba(62,207,110,0.5); }
.snake-card:hover { box-shadow: 0 8px 32px rgba(62,207,110,0.3); }
.snake-card .game-card-name { color: var(--easy-clr); }

.colorbook-card { border-color: rgba(255,160,30,0.5); }
.colorbook-card:hover { box-shadow: 0 8px 32px rgba(255,160,30,0.3); }
.colorbook-card .game-card-name { color: #ff9f2e; }

/* ══════════════════════════════════════════════════════
   COLOR BOOK
   ══════════════════════════════════════════════════════ */

/* Color Book + Snake buttons row on start screen */
.game-teasers {
  width: 100%;
  display: flex;
  gap: 12px;
}

.game-teasers .colorbook-btn {
  flex: 1;
}

.snake-teaser-btn {
  flex: 1;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(62,207,110,0.45);
  background: linear-gradient(135deg, rgba(62,207,110,0.12) 0%, rgba(62,207,110,0.08) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.snake-teaser-btn:hover, .snake-teaser-btn:active {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(62,207,110,0.35);
}

.colorbook-btn {
  width: 100%;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(255,200,80,0.45);
  background: linear-gradient(135deg, rgba(255,160,30,0.18) 0%, rgba(255,80,180,0.14) 100%);
  color: #fff;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.colorbook-btn:hover, .colorbook-btn:active {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(255,160,30,0.35);
}

/* Shared coloring screens */
.cb-screen {
  background: var(--bg-light);
  z-index: 15;
}

/* Override .screen centering — stack header + content vertically */
#galleryScreen,
#coloringScreen {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-darkest);
  gap: 8px;
}

.cb-back-btn {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s;
}
.cb-back-btn:hover { background: rgba(255,255,255,0.22); }

.cb-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-gold);
  text-align: center;
  flex: 1;
}

.cb-header-actions { display: flex; gap: 8px; }

.cb-action-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.16s;
}
.cb-action-btn:hover { background: rgba(255,255,255,0.28); }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 28vw), 1fr));
  gap: 16px;
  padding: 20px;
  align-content: start;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--bg-mid);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  transition: transform 0.18s, box-shadow 0.18s;
  border: 3px solid transparent;
}
.gallery-card:hover, .gallery-card:active {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  border-color: var(--accent-gold);
}
.gallery-card canvas { border-radius: 8px; background: #f0f2f5; }
.gallery-label {
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Coloring screen layout */
.coloring-canvas-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  background: var(--bg-dark);
}

.coloring-canvas-wrap canvas {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.22);
  cursor: crosshair;
  touch-action: none;
  display: block;
}

/* Tools panel */
.coloring-panel {
  background: var(--bg-darkest);
  padding: 10px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.tools-row {
  display: flex;
  gap: 6px;
}

.tool-btn {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.tool-btn:hover  { background: rgba(255,255,255,0.18); transform: scale(1.08); }
.tool-btn.active {
  background: rgba(245,200,66,0.25);
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(245,200,66,0.4);
}

.sizes-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.size-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.size-btn:hover  { background: rgba(255,255,255,0.18); }
.size-btn.active { border-color: var(--accent-gold); background: rgba(245,200,66,0.2); }

/* Color palette — single scrollable row on mobile */
.palette-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.palette-grid::-webkit-scrollbar { display: none; }

.color-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.14s, border-color 0.14s;
  flex-shrink: 0;
}
.color-swatch:hover  { transform: scale(1.2); }
.color-swatch.active {
  border-color: #fff;
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--accent-gold);
}

/* Landscape tablet: canvas left, panel right, header spans full width */
@media (min-aspect-ratio: 4/3) and (min-width: 768px) {
  #coloringScreen {
    display: grid !important;
    grid-template-columns: 1fr 200px;
    grid-template-rows: auto 1fr;
    flex-direction: unset;
  }
  #coloringScreen .cb-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #coloringScreen .coloring-canvas-wrap {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
  }
  #coloringScreen .coloring-panel {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .panel-row   { flex-direction: column; align-items: flex-start; }
  .tools-row   { flex-wrap: wrap; }
  .palette-grid { flex-wrap: wrap; overflow-x: unset; }
}

/* ══════════════════════════════════════════════════════
   SNAKE GAME
   ══════════════════════════════════════════════════════ */

.snake-screen {
  background: #0a160a;
}

#snakeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Snake HUD */
.snake-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  z-index: 5;
  pointer-events: all;
}

.snake-hud-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(62,207,110,0.35);
  border-radius: var(--radius-sm);
  padding: 6px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.snake-hud-score span {
  color: #3ecf6e;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* Game Over overlay */
.snake-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.snake-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.snake-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--glass-bg);
  border: 2px solid rgba(62,207,110,0.4);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 380px);
}

.snake-over-emoji  { font-size: 3rem; }

.snake-over-title {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 900;
  color: var(--accent-gold);
}

.snake-over-score {
  font-size: 1.3rem;
  color: #3ecf6e;
  font-weight: 700;
}

.snake-new-best {
  font-size: 1.1rem;
  color: var(--accent-gold);
  font-weight: 700;
}

.snake-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   TETRIS GAME
   ══════════════════════════════════════════════════════ */

.tetris-card { border-color: rgba(170,68,255,0.5); }
.tetris-card:hover { box-shadow: 0 8px 32px rgba(170,68,255,0.3); }
.tetris-card .game-card-name { color: #aa44ff; }

.tetris-screen {
  background: #0d0f14;
}

#tetrisCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Tetris HUD — top bar */
.tetris-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  z-index: 5;
  pointer-events: all;
  background: rgba(13,15,20,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(170,68,255,0.3);
}

.tetris-hud-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.tetris-hud-info span {
  color: #aa44ff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

/* Next-piece preview — top-right corner */
.tetris-next-wrap {
  position: absolute;
  top: 60px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 5;
}

.tetris-next-label {
  color: rgba(170,68,255,0.8);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#tetrisNextCanvas {
  border-radius: 8px;
  border: 1px solid rgba(170,68,255,0.35);
  background: #13161e;
}

/* Game Over overlay */
.tetris-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  z-index: 10;
}

.tetris-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--glass-bg);
  border: 2px solid rgba(170,68,255,0.45);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 380px);
}

.tetris-over-emoji { font-size: 3rem; }

.tetris-over-title {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 900;
  color: var(--accent-gold);
}

.tetris-over-score {
  font-size: 1.8rem;
  color: #aa44ff;
  font-weight: 800;
}

.tetris-new-best {
  font-size: 1.1rem;
  color: var(--accent-gold);
  font-weight: 700;
}

.tetris-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* Mobile: hide lines/level on very narrow screens */
@media (max-width: 420px) {
  .tetris-hud-info span:nth-child(3) { display: none; }
  .tetris-next-wrap { top: 56px; right: 6px; }
}

/* ══════════════════════════════════════════════════════
   BREAKOUT GAME
   ══════════════════════════════════════════════════════ */

.breakout-card { border-color: rgba(77,184,255,0.5); }
.breakout-card:hover { box-shadow: 0 8px 32px rgba(77,184,255,0.3); }
.breakout-card .game-card-name { color: #4db8ff; }

.breakout-screen {
  background: #0d0f14;
}

#breakoutCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.breakout-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  z-index: 5;
  pointer-events: all;
  background: rgba(13,15,20,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(77,184,255,0.3);
}

.breakout-hud-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.breakout-hud-info span {
  color: #4db8ff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.breakout-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  z-index: 10;
}

.breakout-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--glass-bg);
  border: 2px solid rgba(77,184,255,0.45);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 380px);
}

.breakout-over-emoji { font-size: 3rem; }

.breakout-over-title {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 900;
  color: var(--accent-gold);
}

.breakout-over-score {
  font-size: 1.8rem;
  color: #4db8ff;
  font-weight: 800;
}

.breakout-new-best {
  font-size: 1.1rem;
  color: var(--accent-gold);
  font-weight: 700;
}

.breakout-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

@media (max-width: 420px) {
  .breakout-hud-info span:nth-child(4) { display: none; }
}

/* ══════════════════════════════════════════════════════
   SPACE INVADERS
   ══════════════════════════════════════════════════════ */

.si-card { border-color: rgba(170,255,100,0.5); }
.si-card:hover { box-shadow: 0 8px 32px rgba(170,255,100,0.3); }
.si-card .game-card-name { color: #aaff64; }

.si-screen {
  background: #0d0f14;
}

#siCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.si-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  z-index: 5;
  pointer-events: all;
  background: rgba(13,15,20,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(170,255,100,0.3);
}

.si-hud-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.si-hud-info span {
  color: #aaff64;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.si-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  z-index: 10;
}

.si-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--glass-bg);
  border: 2px solid rgba(170,255,100,0.45);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 380px);
}

.si-over-emoji { font-size: 3rem; }

.si-over-title {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 900;
  color: var(--accent-gold);
}

.si-over-score {
  font-size: 1.8rem;
  color: #aaff64;
  font-weight: 800;
}

.si-new-best {
  font-size: 1.1rem;
  color: var(--accent-gold);
  font-weight: 700;
}

.si-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

@media (max-width: 420px) {
  .si-hud-info span:nth-child(4) { display: none; }
}

/* ══════════════════════════════════════════════════════
   RACER
   ══════════════════════════════════════════════════════ */

.racer-card { border-color: rgba(255,140,0,0.5); }
.racer-card:hover { box-shadow: 0 8px 32px rgba(255,140,0,0.3); }
.racer-card .game-card-name { color: #ff8c00; }

.racer-screen { overflow: hidden; }

.racer-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.racer-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  z-index: 5;
  pointer-events: all;
  background: rgba(13,15,20,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,140,0,0.35);
}

.racer-hud-info {
  display: flex;
  gap: 18px;
  align-items: center;
}

.racer-hud-info span {
  color: #ff8c00;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.racer-health {
  font-size: 1.1rem;
  letter-spacing: 2px;
  user-select: none;
  filter: drop-shadow(0 0 3px rgba(231,76,60,0.7));
}

.racer-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  z-index: 10;
}

.racer-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--glass-bg);
  border: 2px solid rgba(255,140,0,0.45);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 380px);
}

.racer-over-emoji { font-size: 3rem; }

.racer-over-title {
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 900;
  color: var(--accent-gold);
  text-align: center;
}

.racer-over-score {
  font-size: 1.8rem;
  color: #ff8c00;
  font-weight: 800;
}

.racer-new-best {
  font-size: 1.1rem;
  color: var(--accent-gold);
  font-weight: 700;
}

.racer-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

@media (max-width: 420px) {
  .racer-hud-info span:nth-child(3) { display: none; }
}

/* ══════════════════════════════════════════════════════
   SOLITAIRE
   ══════════════════════════════════════════════════════ */

:root {
  --sol-card-bg:    #fff;
  --sol-card-back:  #1a4fa0;
  --sol-card-radius: 6px;
  --sol-red:        #cc2222;
  --sol-black:      #111;
  --sol-accent:     #2ecc71;
}

.sol-card { border-color: rgba(46,204,113,0.5); }
.sol-card:hover { box-shadow: 0 8px 32px rgba(46,204,113,0.3); }
.sol-card .game-card-name { color: #2ecc71; }

/* ── Screen ── */
.sol-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0d5e2a;
  align-items: stretch;       /* override base .screen { align-items: center } */
  justify-content: flex-start;
}

/* ── HUD ── */
.sol-hud {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(46,204,113,0.35);
  z-index: 5;
}

.sol-hud-info {
  display: flex;
  gap: 14px;
  align-items: center;
}

.sol-hud-info span {
  color: #2ecc71;
  font-weight: 700;
  font-size: 0.88rem;
}

/* ── Board ── */
.sol-board {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 6px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Top row & tableau row ── */
.sol-top-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.sol-spacer { /* fills middle gap between waste and foundations */ }

.sol-tab-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  flex: 1;
}

/* ── Pile slot ── */
.sol-pile {
  position: relative;
  aspect-ratio: 5/7;
  border-radius: var(--sol-card-radius);
  border: 2px dashed rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.18);
  cursor: pointer;
  overflow: visible;
}

.sol-pile-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
  user-select: none;
}

/* tableau piles grow to hold stacked cards */
.sol-tab {
  aspect-ratio: unset;
  min-height: calc(100vw / 7 * 1.4);
  overflow: visible;
}

/* ── Card face ── */
.sol-face-card {
  position: relative;
  width: 100%;
  aspect-ratio: 5/7;
  background: var(--sol-card-bg);
  border-radius: var(--sol-card-radius);
  border: 1.5px solid #bbb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 3px;
  user-select: none;
  cursor: grab;
  box-sizing: border-box;
  /* override .sol-card (home card) */
  color: unset;
  font-size: unset;
}

.sol-face-card:active { cursor: grabbing; }

.sol-face-card.sol-red { color: var(--sol-red); }
.sol-face-card.sol-black { color: var(--sol-black); }

.sol-card-back {
  background: var(--sol-card-back);
  cursor: default;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 2px,
    transparent 2px,
    transparent 8px
  );
}

.sol-card-rank-top {
  font-size: clamp(0.48rem, 1.5vw, 0.78rem);
  font-weight: 800;
  line-height: 1;
  align-self: flex-start;
}

.sol-card-suit-mid {
  font-size: clamp(0.8rem, 2.5vw, 1.4rem);
  text-align: center;
  align-self: center;
  line-height: 1;
}

.sol-card-rank-bot {
  font-size: clamp(0.48rem, 1.5vw, 0.78rem);
  font-weight: 800;
  line-height: 1;
  align-self: flex-end;
  transform: rotate(180deg);
}

/* ── Drag ghost ── */
.sol-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 999;
}

.sol-drag-ghost .sol-face-card {
  position: absolute;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}

/* ── Overlay ── */
.sol-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  z-index: 10;
}

.sol-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--glass-bg);
  border: 2px solid rgba(46,204,113,0.45);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 360px);
}

.sol-over-emoji { font-size: 3rem; }

.sol-over-title {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 900;
  color: #2ecc71;
  text-align: center;
}

.sol-over-score {
  font-size: 1rem;
  color: #aaa;
  text-align: center;
}

.sol-new-best {
  font-size: 1.1rem;
  color: var(--accent-gold);
  font-weight: 700;
}

.sol-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

@media (max-width: 380px) {
  .sol-hud-info span:last-child { display: none; }
}

/* ══════════════════════════════════════════════════════
   WORD GAME (Orðaleikurinn)
   ══════════════════════════════════════════════════════ */

.wg-card { border-color: rgba(52,152,219,0.5); }
.wg-card:hover { box-shadow: 0 8px 32px rgba(52,152,219,0.3); }
.wg-card .game-card-name { color: #3498db; }

/* ── Screen ── */
.wg-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
  overflow: hidden;
}

/* ── HUD ── */
.wg-hud {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(52,152,219,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}

.wg-hearts { display: flex; gap: 2px; font-size: 1.15rem; }
.wg-score  { color: #f39c12; font-weight: 800; font-size: 1rem; }

/* ── Main game area ── */
.wg-main {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 8px 14px 14px;
  overflow: hidden;
}

/* ── Emoji clue ── */
.wg-emoji {
  font-size: clamp(5.5rem, 24vw, 9rem);
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
}

@keyframes wg-bounce {
  0%   { transform: scale(0.6) translateY(12px); opacity: 0; }
  65%  { transform: scale(1.18) translateY(-5px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes wg-spin {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.2) rotate(14deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.wg-emoji-bounce { animation: wg-bounce 0.42s ease forwards; }
.wg-emoji-spin   { animation: wg-spin   0.48s ease; }

/* ── Category + progress ── */
.wg-category {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  letter-spacing: 0.4px;
}

.wg-progress {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

/* ── Answer slots ── */
.wg-answer {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.wg-slot {
  /* Shrink for long words using CSS custom property set from JS */
  width:  min(calc((90vw - 5px * (var(--wg-word-len, 4) - 1)) / var(--wg-word-len, 4)), 56px);
  height: calc(min(calc((90vw - 5px * (var(--wg-word-len, 4) - 1)) / var(--wg-word-len, 4)), 56px) * 1.3);
  border-radius: 10px;
  border: 2.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.9rem, calc(4.5vw / (var(--wg-word-len, 4) * 0.5)), 2rem);
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  flex-shrink: 0;
}

.wg-slot-filled {
  background: rgba(52,152,219,0.22);
  border-color: #3498db;
}

.wg-slot-correct {
  background: rgba(46,204,113,0.32) !important;
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
}

.wg-slot-hint {
  background: rgba(243,156,18,0.22) !important;
  border-color: #f39c12 !important;
  color: #f39c12 !important;
}

@keyframes wg-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-9px); }
  40%     { transform: translateX(9px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}

.wg-shake { animation: wg-shake 0.42s ease; }

/* ── Letter tiles ── */
.wg-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.wg-tile {
  width:  min(calc((90vw - 8px * (var(--wg-word-len, 4) - 1)) / var(--wg-word-len, 4)), 64px);
  height: calc(min(calc((90vw - 8px * (var(--wg-word-len, 4) - 1)) / var(--wg-word-len, 4)), 64px) * 1.2);
  border-radius: 12px;
  border: none;
  background: #f5f0e8;
  color: #1a1a2e;
  font-size: clamp(1rem, calc(5vw / (var(--wg-word-len, 4) * 0.45)), 2.2rem);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #c4b89a, 0 6px 14px rgba(0,0,0,0.45);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.15s;
  user-select: none;
  flex-shrink: 0;
}

.wg-tile:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c4b89a, 0 2px 6px rgba(0,0,0,0.3);
}

.wg-tile-used {
  opacity: 0.15;
  pointer-events: none;
}

/* ── Feedback emoji pop ── */
.wg-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 5rem;
  pointer-events: none;
  z-index: 20;
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1);
}

.wg-feedback-show { transform: translate(-50%, -50%) scale(1); }

/* ── Overlay ── */
.wg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  z-index: 10;
}

.wg-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--glass-bg);
  border: 2px solid rgba(52,152,219,0.45);
  border-radius: var(--radius-lg);
  padding: 30px 38px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 360px);
  text-align: center;
}

.wg-over-emoji { font-size: 3rem; }

.wg-over-title {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 900;
  color: #3498db;
}

.wg-over-score {
  font-size: 1rem;
  color: #aaa;
}

.wg-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   MATH GAME
   ══════════════════════════════════════════════════════ */

.mg-card { border-color: rgba(231,76,60,0.5); }
.mg-card:hover { box-shadow: 0 8px 32px rgba(231,76,60,0.3); }
.mg-card .game-card-name { color: #e74c3c; }

/* ── Screen ── */
.mg-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: linear-gradient(160deg, #0f0c29 0%, #302b63 55%, #24243e 100%);
  overflow: hidden;
}

/* ── HUD ── */
.mg-hud {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(231,76,60,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mg-streak      { color: #f39c12; font-weight: 900; font-size: 1rem; min-width: 48px; text-align: center; }
.mg-score-hud   { color: #e74c3c; font-weight: 800; font-size: 1rem; }

/* ── Timer bar ── */
.mg-timer-wrap {
  height: 5px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.mg-timer-bar {
  height: 100%;
  width: 100%;
  background: #2ecc71;
  transition: background 0.3s;
}

/* ── Main area ── */
.mg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 12px 20px 20px;
}

/* ── Progress ── */
.mg-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.mg-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.mg-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e74c3c, #f39c12);
  transition: width 0.35s ease;
}
.mg-progress-txt {
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Question ── */
.mg-question {
  font-size: clamp(2.2rem, 11vw, 4.5rem);
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

@keyframes mg-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.mg-q-pop    { animation: mg-pop 0.3s ease forwards; }
.mg-q-solved { color: #2ecc71; text-shadow: 0 0 20px rgba(46,204,113,0.6); }

/* ── Choices grid: 2×2 ── */
.mg-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}

.mg-choice {
  padding: clamp(14px, 4vw, 22px) 10px;
  border-radius: 18px;
  border: 2.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-family: var(--font);
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s, border-color 0.1s;
  user-select: none;
}

.mg-choice:hover { background: rgba(255,255,255,0.14); transform: scale(1.04); }
.mg-choice:active { transform: scale(0.96); }

.mg-correct {
  background: rgba(46,204,113,0.35) !important;
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
  transform: scale(1.06) !important;
}

.mg-wrong {
  background: rgba(231,76,60,0.35) !important;
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}

.mg-correct-reveal {
  background: rgba(243,156,18,0.35) !important;
  border-color: #f39c12 !important;
  color: #f39c12 !important;
}

/* ── Overlay ── */
.mg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
  z-index: 10;
}

.mg-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--glass-bg);
  border: 2px solid rgba(231,76,60,0.45);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 360px);
  text-align: center;
}

.mg-over-emoji { font-size: 2.8rem; }

.mg-over-title {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 900;
  color: #e74c3c;
}

.mg-over-score {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
}

.mg-over-best {
  font-size: 0.88rem;
  color: var(--accent-gold);
  font-weight: 600;
  min-height: 1.2em;
}

/* ── Category selector ── */
.mg-cat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

/* Mixed button spans both columns */
.mg-cat-btn[data-cat="mixed"] {
  grid-column: 1 / -1;
}

.mg-cat-btn {
  padding: 14px 8px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-family: var(--font);
  font-size: clamp(0.62rem, 2.8vw, 0.88rem);
  font-weight: 800;
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.14s, border-color 0.14s, transform 0.12s;
}

.mg-cat-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.04); }

.mg-cat-active {
  border-color: #e74c3c !important;
  background: rgba(231,76,60,0.25) !important;
  box-shadow: 0 0 12px rgba(231,76,60,0.4);
}

.mg-over-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   TIME GAME
   ══════════════════════════════════════════════════════ */

.tg-card { border-color: rgba(52,152,219,0.5); }
.tg-card:hover { box-shadow: 0 8px 32px rgba(52,152,219,0.3); }
.tg-card .game-card-name { color: #3498db; }

/* ── Screen ── */
.tg-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: linear-gradient(160deg, #0d1b2a 0%, #1a2a4a 55%, #0d2035 100%);
  overflow: hidden;
}

/* ── HUD ── */
.tg-hud {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(52,152,219,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tg-streak      { color: #f39c12; font-weight: 900; font-size: 1rem; min-width: 48px; text-align: center; }
.tg-score-hud   { color: #3498db; font-weight: 800; font-size: 1rem; }

/* ── Timer ── */
.tg-timer-wrap { display: none; }

/* ── Main area ── */
.tg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px 20px 16px;
  overflow: hidden;
}

/* ── Progress ── */
.tg-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.tg-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.tg-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  transition: width 0.35s ease;
}
.tg-progress-txt {
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Clock ── */
.tg-clock-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#tgClock {
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 32px rgba(0,0,0,0.55), 0 0 0 3px rgba(52,152,219,0.35);
}

/* ── Choices 2×2 grid ── */
.tg-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}

.tg-choice {
  padding: clamp(12px, 3.5vw, 18px) 8px;
  border-radius: 18px;
  border: 2.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-family: var(--font);
  font-size: clamp(0.9rem, 3.8vw, 1.2rem);
  font-weight: 800;
  cursor: pointer;
  line-height: 1.4;
  transition: transform 0.1s, background 0.1s, border-color 0.1s;
  user-select: none;
}
.tg-choice:hover  { background: rgba(255,255,255,0.14); transform: scale(1.04); }
.tg-choice:active { transform: scale(0.96); }

.tg-correct {
  background: rgba(46,204,113,0.35) !important;
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
  transform: scale(1.06) !important;
}
.tg-wrong {
  background: rgba(231,76,60,0.35) !important;
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}
.tg-correct-reveal {
  background: rgba(243,156,18,0.35) !important;
  border-color: #f39c12 !important;
  color: #f39c12 !important;
}

/* ── Overlay ── */
.tg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
  z-index: 10;
}
.tg-over-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--glass-bg);
  border: 2px solid rgba(52,152,219,0.45);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  box-shadow: var(--shadow-lg);
  width: min(92vw, 360px);
  text-align: center;
}
.tg-over-emoji  { font-size: 2.8rem; }
.tg-over-title  { font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 900; color: #3498db; }
.tg-over-score  { font-size: 1.8rem; font-weight: 800; color: #fff; min-height: 2rem; }
.tg-over-best   { font-size: 0.88rem; color: var(--accent-gold); font-weight: 600; min-height: 1.2em; }
.tg-over-buttons { display: flex; gap: 12px; width: 100%; }