/* ==========================================================================
   SPRYTNE DZIECI — ULTRA-PREMIUM GAME 1 REDESIGN
   Orbitron HUD · Glassmorphic Neon · Warp-Trail Canvas
   ========================================================================== */

/* ------------------------------------------------------------------
   GLOBAL GAME VARIABLES
   ------------------------------------------------------------------ */
:root {
  --neon-cyan: #22d3ee;
  --neon-purple: #c084fc;
  --neon-pink: #f472b6;
  --neon-green: #34d399;
  --neon-orange: #fb923c;
  --neon-red: #f87171;
  --neon-yellow: #facc15;
  --neon-blue: #60a5fa;
  --neon-rose: #f43f5e;
  --game-glass-bg: rgba(10, 8, 30, 0.6);
  --game-glass-border: rgba(255, 255, 255, 0.07);
  --game-glass-btn: rgba(18, 12, 50, 0.7);
  --hud-font: 'Orbitron', 'Outfit', sans-serif;
  --ui-font: 'Nunito', 'Outfit', sans-serif;
}

/* ------------------------------------------------------------------
   LANDING PAGE: Premium Nebula Background
   ------------------------------------------------------------------ */
.main-bg {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.06) 0%, transparent 60%),
    radial-gradient(circle at center, #1b0a33 0%, #05010f 100%) !important;
}

/* ------------------------------------------------------------------
   GAME 1: Global Space Background & Layouts
   ------------------------------------------------------------------ */
#game1-wrapper,
#game3-wrapper {
  position: relative !important;
  background: url('../img/nebula-bg.png') center/cover no-repeat fixed !important;
  color: #f1f5f9 !important;
  font-family: var(--ui-font) !important;
  overflow: hidden !important;
}

#game1-wrapper::before,
#game3-wrapper::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at center, rgba(13, 9, 39, 0.4) 0%, rgba(5, 1, 15, 0.78) 100%),
    linear-gradient(180deg, rgba(5, 1, 15, 0.25) 0%, rgba(5, 1, 15, 0.65) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#game1-wrapper #g1-starfield,
#game3-wrapper #g3-starfield {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#game1-wrapper #app-container,
#game3-wrapper #root {
  position: relative !important;
  z-index: 2 !important;
}

/* ------------------------------------------------------------------
   GAME 1: ORBITRON HEADINGS (HUD Instrument Style)
   ------------------------------------------------------------------ */
#game1-wrapper h1,
#game1-wrapper h2,
#game1-wrapper h3,
#game3-wrapper h1,
#game3-wrapper h2,
#game3-wrapper h3 {
  font-family: var(--ui-font) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ------------------------------------------------------------------
   GAME 1: HOLOGRAPHIC GRADIENT ICONS
   All FontAwesome icons get a cyan→purple gradient with neon glow
   ------------------------------------------------------------------ */
#game1-wrapper i.fa-solid,
#game1-wrapper i.fas,
#game1-wrapper i.far,
#game1-wrapper i.fab {
  background: linear-gradient(135deg, #22d3ee 0%, #a855f7 50%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45)) !important;
  transition: filter 0.3s ease !important;
}

#game1-wrapper *:hover > i.fa-solid,
#game1-wrapper *:hover > i.fas {
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.7)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.4)) !important;
}

/* ------------------------------------------------------------------
   GAME 1 & 3: Glass Panel Premium Design
   ------------------------------------------------------------------ */
#game1-wrapper .glass-panel,
#game3-wrapper .glass-panel {
  background: var(--game-glass-bg) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(168, 85, 247, 0.18) !important;
  border-radius: 28px !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 50px rgba(168, 85, 247, 0.06) !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease !important;
}

#game1-wrapper .glass-panel:hover,
#game3-wrapper .glass-panel:hover {
  border-color: rgba(168, 85, 247, 0.28) !important;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 60px rgba(168, 85, 247, 0.14) !important;
}

/* ------------------------------------------------------------------
   GAME 1: Astronaut Credentials / Select Player Screen
   ------------------------------------------------------------------ */
#game1-wrapper #players-grid > div {
  background: rgba(15, 10, 40, 0.65) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 2px solid rgba(168, 85, 247, 0.22) !important;
  border-radius: 24px !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#game1-wrapper #players-grid > div:hover {
  transform: translateY(-8px) scale(1.03) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow:
    0 20px 55px rgba(168, 85, 247, 0.3),
    0 0 30px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Icon holder inside player card */
#game1-wrapper #players-grid > div div.w-16.h-16 {
  background: radial-gradient(circle at center, rgba(30, 20, 70, 0.6) 0%, rgba(10, 5, 25, 0.9) 100%) !important;
  border: 2px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.25) !important;
  transition: all 0.35s ease !important;
}

#game1-wrapper #players-grid > div:hover div.w-16.h-16 {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.5) !important;
  transform: rotate(-10deg) scale(1.12) !important;
}

/* Edit profile input */
#game1-wrapper #players-grid > div input[type="text"] {
  background: rgba(8, 4, 22, 0.75) !important;
  border: 2px solid rgba(168, 85, 247, 0.35) !important;
  color: #e2e8f0 !important;
  border-radius: 50px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
  transition: all 0.3s ease !important;
  font-family: var(--ui-font) !important;
}

#game1-wrapper #players-grid > div input[type="text"]:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 18px rgba(34, 211, 238, 0.45) !important;
  outline: none !important;
}

/* Add player card style */
#game1-wrapper #players-grid > div.border-dashed {
  border: 2px dashed rgba(168, 85, 247, 0.35) !important;
  background: rgba(15, 10, 45, 0.25) !important;
}

#game1-wrapper #players-grid > div.border-dashed:hover {
  border-style: solid !important;
  border-color: var(--neon-cyan) !important;
  background: rgba(34, 211, 238, 0.06) !important;
}

/* ------------------------------------------------------------------
   GAME 1: Menu Screen Cockpit Panel
   ------------------------------------------------------------------ */
#game1-wrapper #menu-screen > div:first-child {
  background: rgba(5, 2, 20, 0.45) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-radius: 24px !important;
  padding: 1.25rem 1.75rem !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5) !important;
}

#game1-wrapper #menu-screen .w-16.h-16 {
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.2) 0%, rgba(99, 102, 241, 0.12) 100%) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.4) !important;
}

#game1-wrapper #menu-screen #current-player-name-display {
  font-family: var(--ui-font) !important;
  background: linear-gradient(90deg, #ffffff, var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* ------------------------------------------------------------------
   GAME 1: FIX — Non-.btn Buttons (Wróć, Power Off, etc.)
   Reset browser default backgrounds to transparent with neon glow
   ------------------------------------------------------------------ */
#game1-wrapper button:not(.btn):not(.block-btn) {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
}

#game1-wrapper button:not(.btn):not(.block-btn):hover {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.6) !important;
  transform: scale(1.08) !important;
}

/* Also fix the "Zmień" player-change button */
#game1-wrapper #menu-screen button[onclick="showPlayerScreen()"] {
  background: rgba(15, 10, 45, 0.6) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  border-radius: 14px !important;
  color: #c4b5fd !important;
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15) !important;
}

#game1-wrapper #menu-screen button[onclick="showPlayerScreen()"]:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: #818cf8 !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(99, 102, 241, 0.35) !important;
}

/* ------------------------------------------------------------------
   GAME 1: ULTRA-PREMIUM BUTTON SYSTEM (.btn)
   Glassmorphic fill + neon borders + Orbitron shimmer
   ------------------------------------------------------------------ */
#game1-wrapper .btn,
#game3-wrapper .btn {
  background: var(--game-glass-btn) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: #cbd5e1 !important;
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  min-height: 58px !important;
  height: auto !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}

#game1-wrapper .btn:hover,
#game3-wrapper .btn:hover {
  transform: translateY(-4px) scale(1.02) !important;
}

#game1-wrapper .btn:active,
#game3-wrapper .btn:active {
  transform: translateY(1px) scale(0.99) !important;
}

#game1-wrapper .btn:disabled,
#game3-wrapper .btn:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  transform: none !important;
  color: #475569 !important;
}

/* Shimmer sweep on hover */
#game1-wrapper .btn::after,
#game3-wrapper .btn::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) !important;
  transition: all 0.6s ease !important;
}

#game1-wrapper .btn:hover::after,
#game3-wrapper .btn:hover::after {
  left: 100% !important;
}

/* ---- Blue (Dodawanie) ---- */
#game1-wrapper .btn-blue,
#game3-wrapper .btn-blue {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
}
#game1-wrapper .btn-blue:hover,
#game3-wrapper .btn-blue:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow:
    0 0 30px rgba(56, 189, 248, 0.35),
    inset 0 0 18px rgba(56, 189, 248, 0.08) !important;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.6) !important;
}

/* ---- Green (Odejmowanie) ---- */
#game1-wrapper .btn-green,
#game3-wrapper .btn-green {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.3) !important;
}
#game1-wrapper .btn-green:hover,
#game3-wrapper .btn-green:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: #34d399 !important;
  box-shadow:
    0 0 30px rgba(52, 211, 153, 0.35),
    inset 0 0 18px rgba(52, 211, 153, 0.08) !important;
  text-shadow: 0 0 14px rgba(52, 211, 153, 0.6) !important;
}

/* ---- Orange (Mnożenie) ---- */
#game1-wrapper .btn-orange,
#game3-wrapper .btn-orange {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.3) !important;
}
#game1-wrapper .btn-orange:hover,
#game3-wrapper .btn-orange:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: #fbbf24 !important;
  box-shadow:
    0 0 30px rgba(251, 191, 36, 0.35),
    inset 0 0 18px rgba(251, 191, 36, 0.08) !important;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.6) !important;
}

/* ---- Red (Dzielenie) ---- */
#game1-wrapper .btn-red,
#game3-wrapper .btn-red {
  color: var(--neon-rose) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  text-shadow: 0 0 8px rgba(244, 63, 94, 0.3) !important;
}
#game1-wrapper .btn-red:hover,
#game3-wrapper .btn-red:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: var(--neon-rose) !important;
  box-shadow:
    0 0 30px rgba(244, 63, 94, 0.35),
    inset 0 0 18px rgba(244, 63, 94, 0.08) !important;
  text-shadow: 0 0 14px rgba(244, 63, 94, 0.6) !important;
}

/* ---- Purple (Porównywanie / Sprawdź) ---- */
#game1-wrapper .btn-purple,
#game3-wrapper .btn-purple {
  color: var(--neon-purple) !important;
  border-color: rgba(192, 132, 252, 0.3) !important;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.08) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.3) !important;
}
#game1-wrapper .btn-purple:hover,
#game3-wrapper .btn-purple:hover {
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.18) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: var(--neon-purple) !important;
  box-shadow:
    0 0 30px rgba(192, 132, 252, 0.35),
    inset 0 0 18px rgba(192, 132, 252, 0.08) !important;
  text-shadow: 0 0 14px rgba(192, 132, 252, 0.6) !important;
}

/* ---- Pink (Dopełnianie) ---- */
#game1-wrapper .btn-pink,
#game3-wrapper .btn-pink {
  color: var(--neon-pink) !important;
  border-color: rgba(244, 114, 182, 0.3) !important;
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.08) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.3) !important;
}
#game1-wrapper .btn-pink:hover,
#game3-wrapper .btn-pink:hover {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.18) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: var(--neon-pink) !important;
  box-shadow:
    0 0 30px rgba(244, 114, 182, 0.35),
    inset 0 0 18px rgba(244, 114, 182, 0.08) !important;
  text-shadow: 0 0 14px rgba(244, 114, 182, 0.6) !important;
}

/* ---- Dark Blue & Gray secondary buttons (Dziennik, Zasady, Wróć) ---- */
#game1-wrapper .btn-dark-blue,
#game3-wrapper .btn-dark-blue {
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.05) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  text-shadow: 0 0 6px rgba(203, 213, 225, 0.2) !important;
}
#game1-wrapper .btn-dark-blue:hover,
#game3-wrapper .btn-dark-blue:hover {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.12) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: #cbd5e1 !important;
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.15),
    inset 0 0 12px rgba(255, 255, 255, 0.04) !important;
}

#game1-wrapper .btn-gray,
#game3-wrapper .btn-gray {
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.04) 0%, rgba(18, 12, 50, 0.65) 100%) !important;
}
#game1-wrapper .btn-gray:hover,
#game3-wrapper .btn-gray:hover {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(18, 12, 50, 0.65) 100%) !important;
  border-color: #94a3b8 !important;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.1),
    inset 0 0 10px rgba(255, 255, 255, 0.03) !important;
}

/* Also fix inline bg-red-500 / bg-slate-600 buttons (error log, delete modal) */
#game1-wrapper .btn.bg-red-500,
#game1-wrapper .btn.bg-red-600,
#game3-wrapper .btn.bg-red-500,
#game3-wrapper .btn.bg-red-600 {
  color: var(--neon-rose) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
}

#game1-wrapper .btn.bg-slate-600,
#game3-wrapper .btn.bg-slate-600 {
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.06) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
}

/* ------------------------------------------------------------------
   GAME 1: Difficulty Screen Styles
   ------------------------------------------------------------------ */
#game1-wrapper #difficulty-screen div.bg-indigo-900\/30 {
  background: rgba(10, 6, 35, 0.65) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.08) !important;
  border-radius: 20px !important;
}

#game1-wrapper #difficulty-screen input:checked + div {
  background-color: #a855f7 !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.65) !important;
}

/* Premium toggle switch for timed mode */
#game1-wrapper #difficulty-screen .peer {
  transition: all 0.3s ease !important;
}

#game1-wrapper #difficulty-screen .peer:checked {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.5) !important;
}

/* ------------------------------------------------------------------
   GAME 1: Rules Screen Styles
   ------------------------------------------------------------------ */
#game1-wrapper #rules-screen div.space-y-5 {
  background: rgba(5, 2, 20, 0.5) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6) !important;
  padding: 1.75rem !important;
  border-radius: 24px !important;
}

#game1-wrapper #rules-screen div.space-y-5 p {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 0.85rem;
}

#game1-wrapper #rules-screen div.space-y-5 p:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ------------------------------------------------------------------
   GAME 1: Main Gameplay UI
   ------------------------------------------------------------------ */
/* Header Badges — Orbitron font for stats */
#game1-wrapper #timer-wrapper {
  background: rgba(180, 28, 28, 0.55) !important;
  border: 2px solid rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.35) !important;
  border-radius: 50px !important;
  font-family: var(--hud-font) !important;
  backdrop-filter: blur(8px) !important;
}

#game1-wrapper #timer-text {
  font-family: var(--hud-font) !important;
  letter-spacing: 1px !important;
}

#game1-wrapper #streak-wrapper {
  background: rgba(160, 28, 90, 0.45) !important;
  border: 1px solid rgba(244, 114, 182, 0.4) !important;
  box-shadow: 0 0 18px rgba(244, 114, 182, 0.25) !important;
  border-radius: 50px !important;
  font-family: var(--hud-font) !important;
  backdrop-filter: blur(8px) !important;
}

#game1-wrapper #solved-wrapper {
  background: rgba(13, 120, 110, 0.45) !important;
  border: 2px solid rgba(20, 184, 166, 0.5) !important;
  box-shadow: 0 0 18px rgba(20, 184, 166, 0.25) !important;
  font-family: var(--hud-font) !important;
  backdrop-filter: blur(8px) !important;
}

#game1-wrapper #score-wrapper {
  background: rgba(55, 48, 180, 0.45) !important;
  border: 2px solid rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.25) !important;
  font-family: var(--hud-font) !important;
  backdrop-filter: blur(8px) !important;
}

#game1-wrapper #score,
#game1-wrapper #solved-count,
#game1-wrapper #streak-count {
  font-family: var(--hud-font) !important;
  letter-spacing: 1px !important;
}

/* Question Display — holographic projection frame */
#game1-wrapper #problem {
  background: rgba(5, 2, 20, 0.7) !important;
  border: 3px solid rgba(168, 85, 247, 0.55) !important;
  border-radius: 32px !important;
  box-shadow:
    0 0 40px rgba(168, 85, 247, 0.3),
    inset 0 0 35px rgba(0, 0, 0, 0.85) !important;
  font-family: var(--hud-font) !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}

#game1-wrapper #problem:hover {
  border-color: var(--neon-cyan) !important;
  box-shadow:
    0 0 50px rgba(34, 211, 238, 0.4),
    inset 0 0 35px rgba(0, 0, 0, 0.85) !important;
}

/* Grid overlay inside question */
#game1-wrapper #problem::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 18px 18px !important;
  pointer-events: none !important;
}

#game1-wrapper #problem #operator {
  color: var(--neon-cyan) !important;
  -webkit-text-fill-color: var(--neon-cyan) !important;
  background: none !important;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.85) !important;
  filter: none !important;
}

/* Numeric Answer Input */
#game1-wrapper #answer-input {
  background: rgba(5, 2, 20, 0.55) !important;
  border: 3px solid rgba(99, 102, 241, 0.4) !important;
  border-radius: 50px !important;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 15px rgba(34, 211, 238, 0.6) !important;
  font-family: var(--hud-font) !important;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(99, 102, 241, 0.1) !important;
  transition: all 0.3s ease !important;
}

#game1-wrapper #answer-input:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(34, 211, 238, 0.45) !important;
}

/* Hide number input spinners for premium aesthetic */
#game1-wrapper input[type=number]::-webkit-outer-spin-button,
#game1-wrapper input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

#game1-wrapper input[type=number] {
  -moz-appearance: textfield !important;
}

/* Comparison game buttons */
#game1-wrapper #comparison-buttons button {
  border-radius: 20px !important;
  font-size: 1.75rem !important;
  font-family: var(--hud-font) !important;
}

/* Feedback messages style */
#game1-wrapper #message {
  font-family: var(--ui-font) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
}

#game1-wrapper #message .text-green-400,
#game1-wrapper #message .text-emerald-400 {
  color: var(--neon-green) !important;
  text-shadow: 0 0 18px rgba(52, 211, 153, 0.7) !important;
}

#game1-wrapper #message .text-red-400 {
  color: var(--neon-red) !important;
  text-shadow: 0 0 18px rgba(248, 113, 113, 0.7) !important;
}

/* ------------------------------------------------------------------
   GAME 1: Interactive Blocks (Kosmiczna Energia) — PLASMA DESIGN
   ------------------------------------------------------------------ */
#game1-wrapper #blocks-wrapper > div.border-dashed {
  background: rgba(5, 2, 20, 0.55) !important;
  border: 2px dashed rgba(34, 211, 238, 0.4) !important;
  border-radius: 24px !important;
  box-shadow:
    inset 0 5px 18px rgba(0, 0, 0, 0.7),
    0 0 22px rgba(34, 211, 238, 0.07) !important;
  position: relative !important;
}

#game1-wrapper #blocks-wrapper > div.border-dashed::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.04) 0%, transparent 80%) !important;
  pointer-events: none !important;
}

/* Plasma rods (tens) */
#game1-wrapper .block-ten {
  width: 20px !important;
  height: 120px !important;
  background: linear-gradient(180deg, #06b6d4, #7c3aed) !important;
  border: 2px solid rgba(34, 211, 238, 0.7) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.6),
    0 0 35px rgba(124, 58, 237, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
}

#game1-wrapper .block-ten::after {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0 !important;
  background: repeating-linear-gradient(transparent, transparent 11px, rgba(255, 255, 255, 0.25) 11px, rgba(255, 255, 255, 0.25) 12px) !important;
}

/* Plasma orbs (ones) */
#game1-wrapper .block-one {
  width: 24px !important;
  height: 24px !important;
  background: radial-gradient(circle at 35% 35%, #e879f9 0%, #a855f7 60%, #7c3aed 100%) !important;
  border: 2px solid rgba(232, 121, 249, 0.6) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 16px rgba(168, 85, 247, 0.7),
    0 0 30px rgba(232, 121, 249, 0.3),
    inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

/* Block control buttons — glass panels */
#game1-wrapper .block-btn {
  background: var(--game-glass-btn) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #94a3b8 !important;
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

#game1-wrapper .block-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

#game1-wrapper .block-btn:active {
  transform: translateY(1px) scale(0.99) !important;
}

#game1-wrapper .block-btn.bg-blue-500 {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.3) !important;
}
#game1-wrapper .block-btn.bg-blue-500:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, var(--game-glass-btn) 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.3) !important;
}

#game1-wrapper .block-btn.bg-red-500 {
  color: var(--neon-rose) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
  text-shadow: 0 0 6px rgba(244, 63, 94, 0.3) !important;
}
#game1-wrapper .block-btn.bg-red-500:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, var(--game-glass-btn) 100%) !important;
  border-color: var(--neon-rose) !important;
  box-shadow: 0 0 22px rgba(244, 63, 94, 0.3) !important;
}

#game1-wrapper .block-btn.bg-green-500 {
  color: var(--neon-green) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  text-shadow: 0 0 6px rgba(52, 211, 153, 0.3) !important;
}
#game1-wrapper .block-btn.bg-green-500:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, var(--game-glass-btn) 100%) !important;
  border-color: var(--neon-green) !important;
  box-shadow: 0 0 22px rgba(52, 211, 153, 0.3) !important;
}

#game1-wrapper .block-btn.bg-orange-500 {
  color: var(--neon-yellow) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.3) !important;
}
#game1-wrapper .block-btn.bg-orange-500:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, var(--game-glass-btn) 100%) !important;
  border-color: var(--neon-yellow) !important;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.3) !important;
}

#game1-wrapper #blocks-total {
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.6) !important;
  font-family: var(--hud-font) !important;
  font-weight: 900 !important;
}

/* ------------------------------------------------------------------
   GAME 1: Flight Log screen (Dziennik Pokładowy)
   ------------------------------------------------------------------ */
#game1-wrapper #error-summary-screen input[type="text"] {
  background: rgba(5, 2, 20, 0.65) !important;
  border: 2px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-weight: bold !important;
  font-family: var(--ui-font) !important;
  transition: all 0.3s ease !important;
}

#game1-wrapper #error-summary-screen input[type="text"]:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.45) !important;
  outline: none !important;
}

#game1-wrapper #error-list {
  background: rgba(5, 2, 20, 0.5) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  border-radius: 20px !important;
  padding: 1.25rem !important;
}

#game1-wrapper #error-list::-webkit-scrollbar {
  width: 6px !important;
}

#game1-wrapper #error-list::-webkit-scrollbar-thumb {
  background: var(--neon-purple) !important;
  border-radius: 4px !important;
}

/* ------------------------------------------------------------------
   GAME 1: Modals
   ------------------------------------------------------------------ */
#game1-wrapper #delete-modal .glass-panel {
  border-color: rgba(244, 63, 94, 0.4) !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(244, 63, 94, 0.2) !important;
}

/* ------------------------------------------------------------------
   GAME 2: Space Academy (Algebra/Challenges) Redesign
   ================================================================== */
#g2-game-wrapper {
  position: relative !important;
  background: url('../img/nebula-bg.png') center/cover no-repeat fixed !important;
  color: #f1f5f9 !important;
  font-family: var(--ui-font) !important;
  overflow-x: hidden !important;
}

#g2-game-wrapper::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at center, rgba(13, 9, 39, 0.4) 0%, rgba(5, 1, 15, 0.78) 100%),
    linear-gradient(180deg, rgba(5, 1, 15, 0.25) 0%, rgba(5, 1, 15, 0.65) 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Hide flat background gradient from Tailwind on index pages */
#g2-game-wrapper div.fixed.inset-0.z-\[-2\] {
  background: none !important;
  display: none !important;
}

#g2-game-wrapper #g2-starfield {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#g2-game-wrapper .g2-star {
  position: absolute !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px #ffffff, 0 0 12px var(--neon-cyan) !important;
  pointer-events: none !important;
}

#g2-game-wrapper > div.min-h-\[100dvh\].flex.flex-col {
  position: relative !important;
  z-index: 2 !important;
}

/* Universal Premium Back Button style for Game 2 */
#g2-game-wrapper .back-to-base-btn,
#g2-game-wrapper > button[onclick="closeAllGames()"] {
  background: rgba(10, 8, 30, 0.6) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(34, 211, 238, 0.5) !important;
  border-radius: 50px !important;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.3) !important;
  transition: all 0.3s ease !important;
  z-index: 9999 !important;
}

#g2-game-wrapper .back-to-base-btn:hover,
#g2-game-wrapper > button[onclick="closeAllGames()"]:hover {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.5) !important;
  transform: scale(1.05) !important;
}

#g2-game-wrapper h1,
#g2-game-wrapper h2,
#g2-game-wrapper h3 {
  font-family: var(--ui-font) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

#g2-game-wrapper svg[data-lucide],
#g2-game-wrapper svg.lucide {
  stroke: var(--neon-cyan) !important;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5)) !important;
}

#g2-game-wrapper *:hover > svg[data-lucide],
#g2-game-wrapper *:hover > svg.lucide {
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.8)) !important;
}

/* Glass Panels */
#g2-menu-screen,
#g2-game-screen,
#g2-result-screen,
#g2-certificate-screen,
#g2-reset-modal > div,
#g2-tutorial-modal > div {
  background: var(--game-glass-bg) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(168, 85, 247, 0.18) !important;
  border-radius: 28px !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 50px rgba(168, 85, 247, 0.06) !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease !important;
}

#g2-menu-screen:hover,
#g2-game-screen:hover,
#g2-result-screen:hover,
#g2-certificate-screen:hover {
  border-color: rgba(168, 85, 247, 0.28) !important;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 60px rgba(168, 85, 247, 0.14) !important;
}

/* Header in Menu */
#g2-menu-screen .bg-gradient-to-r {
  background: rgba(5, 2, 20, 0.45) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5) !important;
}

#g2-menu-screen button[onclick="g2_showScreen('g2-profile-screen')"] {
  background: rgba(15, 10, 45, 0.6) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  border-radius: 14px !important;
  color: #c4b5fd !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15) !important;
}

#g2-menu-screen button[onclick="g2_showScreen('g2-profile-screen')"]:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: #818cf8 !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(99, 102, 241, 0.35) !important;
}

#g2-menu-screen .bg-black\/30 {
  background: rgba(10, 6, 35, 0.65) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.08) !important;
  border-radius: 20px !important;
}

#g2-menu-screen .bg-slate-900\/80 {
  background: rgba(5, 2, 20, 0.8) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

/* Profiles Grid */
#g2-profile-list > div {
  background: rgba(15, 10, 40, 0.65) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 2px solid rgba(168, 85, 247, 0.22) !important;
  border-radius: 24px !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#g2-profile-list > div:hover {
  transform: translateY(-8px) scale(1.03) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow:
    0 20px 55px rgba(168, 85, 247, 0.3),
    0 0 30px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#g2-profile-list > div div.bg-slate-900 {
  background: radial-gradient(circle at center, rgba(30, 20, 70, 0.6) 0%, rgba(10, 5, 25, 0.9) 100%) !important;
  border: 2px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.25) !important;
  transition: all 0.35s ease !important;
}

#g2-profile-list > div:hover div.bg-slate-900 {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.5) !important;
  transform: rotate(-10deg) scale(1.12) !important;
}

/* Edit profile input in Game 2 */
#g2-profile-list > div input[type="text"] {
  background: rgba(8, 4, 22, 0.75) !important;
  border: 2px solid rgba(168, 85, 247, 0.35) !important;
  color: #e2e8f0 !important;
  border-radius: 50px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
  transition: all 0.3s ease !important;
  font-family: var(--ui-font) !important;
}

#g2-profile-list > div input[type="text"]:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 18px rgba(34, 211, 238, 0.45) !important;
  outline: none !important;
}

/* Dash border Add Pilot button in Game 2 */
#g2-profile-list > div.border-dashed {
  border: 2px dashed rgba(168, 85, 247, 0.35) !important;
  background: rgba(15, 10, 45, 0.25) !important;
  box-shadow: none !important;
}

#g2-profile-list > div.border-dashed:hover {
  border-style: solid !important;
  border-color: var(--neon-cyan) !important;
  background: rgba(34, 211, 238, 0.06) !important;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.2) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

/* Category menu buttons */
#g2-menu-screen button[onclick^="g2_startGame"] {
  background: var(--game-glass-btn) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  color: #f1f5f9 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  cursor: pointer !important;
}

#g2-menu-screen button[onclick^="g2_startGame"]:hover {
  transform: translateY(-4px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 20px rgba(168, 85, 247, 0.1) !important;
}

#g2-menu-screen button[onclick^="g2_startGame"] .bg-blue-600 {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
}

#g2-menu-screen button[onclick^="g2_startGame"] .bg-fuchsia-600 {
  background: linear-gradient(135deg, #d946ef 0%, #a21caf 100%) !important;
  box-shadow: 0 0 15px rgba(217, 70, 239, 0.4) !important;
}

#g2-menu-screen button[onclick^="g2_startGame"] .bg-amber-600 {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important;
}

#g2-menu-screen button[onclick^="g2_startGame"] .bg-violet-700 {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4) !important;
}

#g2-menu-screen button[onclick^="g2_startGame"] .bg-teal-600 {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  box-shadow: 0 0 15px rgba(13, 148, 136, 0.4) !important;
}

#g2-menu-screen button[onclick^="g2_startGame"] .bg-cyan-600 {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.4) !important;
}

#g2-menu-screen button[onclick^="g2_startGame"] .bg-pink-600 {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4) !important;
}

#g2-menu-screen button[onclick^="g2_prepareCertificate"] {
  background: linear-gradient(to bottom, #f59e0b, #d97706) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: white !important;
  border-radius: 16px !important;
}

#g2-menu-screen button[onclick^="g2_prepareCertificate"]:hover {
  background: linear-gradient(to bottom, #d97706, #b45309) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.55) !important;
}

/* Numpad Keyboard Buttons */
#g2-game-screen button[onclick^="g2_handleNumpad"],
#g2-game-screen button[onclick^="g2_handleBackspace"],
#g2-game-screen button#g2-submit-btn {
  background: var(--game-glass-btn) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 4px solid rgba(0, 0, 0, 0.4) !important;
  border-radius: 16px !important;
  font-family: var(--hud-font) !important;
  color: #f1f5f9 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}

#g2-game-screen button[onclick^="g2_handleNumpad"]:hover,
#g2-game-screen button[onclick^="g2_handleBackspace"]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.25) !important;
}

#g2-game-screen button[onclick^="g2_handleNumpad"]:active,
#g2-game-screen button[onclick^="g2_handleBackspace"]:active {
  transform: translateY(3px) !important;
  border-bottom-width: 1px !important;
}

#g2-game-screen button#g2-submit-btn {
  background: linear-gradient(to bottom, #10b981, #059669) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: white !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

#g2-game-screen button#g2-submit-btn:hover:not(:disabled) {
  background: linear-gradient(to bottom, #059669, #047857) !important;
  box-shadow: 0 0 25px rgba(52, 211, 153, 0.55) !important;
}

#g2-game-screen button#g2-submit-btn:active:not(:disabled) {
  transform: translateY(3px) !important;
  border-bottom-width: 1px !important;
}

/* Modals & Screens */
#g2-game-wrapper .g2-modal-overlay {
  background: rgba(3, 4, 15, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#g2-reset-modal > div,
#g2-tutorial-modal > div {
  background: var(--game-glass-bg) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* Modals buttons */
#g2-reset-modal button,
#g2-tutorial-modal button {
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
#g2-reset-modal button:hover,
#g2-tutorial-modal button:hover {
  transform: translateY(-2px) scale(1.03) !important;
}
#g2-reset-modal button:active,
#g2-tutorial-modal button:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* "Nie" (Cancel) button */
#g2-reset-modal button[onclick="g2_closeResetModal()"] {
  background: rgba(148, 163, 184, 0.08) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.25) !important;
  color: #cbd5e1 !important;
  border-radius: 14px !important;
}
#g2-reset-modal button[onclick="g2_closeResetModal()"]:hover {
  background: rgba(148, 163, 184, 0.18) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
}

/* "Tak" (Confirm) button */
#g2-reset-modal button[onclick="g2_resetProgress()"] {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.4) !important;
  color: var(--neon-rose) !important;
  text-shadow: 0 0 8px rgba(244, 63, 94, 0.4) !important;
  border-radius: 14px !important;
}
#g2-reset-modal button[onclick="g2_resetProgress()"]:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.3) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: var(--neon-rose) !important;
  box-shadow: 0 0 25px rgba(244, 63, 94, 0.45) !important;
}

/* Tutorial confirm button */
#g2-tutorial-modal button[onclick="g2_closeTutorialModal()"] {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border: 1.5px solid rgba(124, 58, 237, 0.4) !important;
  color: var(--neon-purple) !important;
  text-shadow: 0 0 8px rgba(124, 58, 237, 0.4) !important;
  border-radius: 14px !important;
}
#g2-tutorial-modal button[onclick="g2_closeTutorialModal()"]:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: var(--neon-purple) !important;
  box-shadow: 0 0 25px rgba(124, 58, 237, 0.45) !important;
}

/* Question panel custom styling */
#g2-question-container {
  font-family: var(--hud-font) !important;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important;
}

#g2-question-container .font-mono {
  font-family: var(--hud-font) !important;
}

#g2-question-container .text-cyan-400 {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.85) !important;
}

#g2-question-container .border-b-4 {
  border-color: rgba(99, 102, 241, 0.5) !important;
}

/* Hint / Helper buttons inside question */
#g2-question-container button {
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

#g2-question-container button:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

#g2-question-container button.border-emerald-500 {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: var(--neon-green) !important;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
}
#g2-question-container button.border-emerald-500:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: var(--neon-green) !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.35) !important;
}

#g2-question-container button.border-violet-500 {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  color: var(--neon-purple) !important;
  text-shadow: 0 0 8px rgba(124, 58, 237, 0.5) !important;
}
#g2-question-container button.border-violet-500:hover {
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: var(--neon-purple) !important;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.35) !important;
}

#g2-question-explanation {
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

/* Feedback correct/incorrect */
#g2-feedback-correct > div {
  background: rgba(52, 211, 153, 0.15) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  color: var(--neon-green) !important;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.2) !important;
  backdrop-filter: blur(8px) !important;
}

#g2-feedback-incorrect > div {
  background: rgba(244, 63, 94, 0.15) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.4) !important;
  color: var(--neon-rose) !important;
  text-shadow: 0 0 8px rgba(244, 63, 94, 0.5) !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.2) !important;
  backdrop-filter: blur(8px) !important;
}

/* Difficulty buttons in Menu */
#g2-menu-screen button[id^="g2-btn-diff-"] {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #94a3b8 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

#g2-menu-screen button[id^="g2-btn-diff-"]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* Active Easy (Łatwy) button in Game 2 gets Green glow */
#g2-menu-screen button#g2-btn-diff-1.bg-slate-700\/80 {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: var(--neon-green) !important;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 0 15px rgba(52, 211, 153, 0.2) !important;
}

/* Active Medium (Średni) button in Game 2 gets Cyan glow */
#g2-menu-screen button#g2-btn-diff-2.bg-slate-700\/80 {
  background: rgba(34, 211, 238, 0.15) !important;
  border-color: rgba(34, 211, 238, 0.4) !important;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.5) !important;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.2) !important;
}

/* Active Hard (Trudny) button in Game 2 gets Rose/Red glow */
#g2-menu-screen button#g2-btn-diff-3.bg-slate-700\/80 {
  background: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
  color: var(--neon-rose) !important;
  text-shadow: 0 0 8px rgba(244, 63, 94, 0.5) !important;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.2) !important;
}

/* Game Header bar & stats elements */
#g2-game-screen > div.flex.justify-between {
  background: rgba(5, 2, 20, 0.45) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5) !important;
}

#g2-game-screen button[onclick="g2_showScreen('g2-menu-screen')"] {
  background: rgba(15, 10, 45, 0.6) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #c4b5fd !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15) !important;
}
#g2-game-screen button[onclick="g2_showScreen('g2-menu-screen')"]:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: #818cf8 !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(99, 102, 241, 0.35) !important;
}

#g2-game-screen button[onclick="g2_toggleVisualHelpers()"] {
  background: rgba(15, 10, 45, 0.6) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #c4b5fd !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  font-family: var(--ui-font) !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15) !important;
}
#g2-game-screen button[onclick="g2_toggleVisualHelpers()"]:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: #818cf8 !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(99, 102, 241, 0.35) !important;
}

#g2-game-screen #g2-tutorial-btn {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1px solid rgba(124, 58, 237, 0.4) !important;
  color: var(--neon-purple) !important;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.5) !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.15) !important;
}
#g2-game-screen #g2-tutorial-btn:hover {
  background: rgba(124, 58, 237, 0.25) !important;
  border-color: var(--neon-purple) !important;
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.35) !important;
}

#g2-combo-container {
  background: rgba(251, 146, 60, 0.15) !important;
  border: 1.5px solid rgba(251, 146, 60, 0.4) !important;
  color: var(--neon-orange) !important;
  text-shadow: 0 0 8px rgba(251, 146, 60, 0.5) !important;
  border-radius: 50px !important;
  box-shadow: 0 0 15px rgba(251, 146, 60, 0.15) !important;
}

#g2-game-screen div.text-yellow-400.bg-black\/40 {
  background: rgba(250, 204, 21, 0.08) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.35) !important;
  color: var(--neon-yellow) !important;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.5) !important;
  border-radius: 50px !important;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.15) !important;
}

/* Progress bar styling */
#g2-game-screen > div.w-full.bg-slate-800.h-1\.5 {
  background: rgba(5, 2, 20, 0.8) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#g2-game-progress-bar {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue)) !important;
  box-shadow: 0 0 12px var(--neon-cyan) !important;
}

/* Result screen base buttons override */
#g2-result-screen button[onclick="g2_showScreen('g2-menu-screen')"] {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
  border-radius: 16px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
#g2-result-screen button[onclick="g2_showScreen('g2-menu-screen')"]:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(18, 12, 50, 0.7) 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-4px) scale(1.02) !important;
}
#g2-result-screen button[onclick="g2_showScreen('g2-menu-screen')"]:active {
  transform: translateY(1px) scale(0.99) !important;
}

/* Certificate Screen UI styles */
#g2-certificate-screen button[onclick="g2_showScreen('g2-menu-screen')"] {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  transition: all 0.3s ease !important;
}
#g2-certificate-screen button[onclick="g2_showScreen('g2-menu-screen')"]:hover {
  color: #fff !important;
  transform: scale(1.1) !important;
}

#g2-certificate-screen input[type="text"] {
  background: rgba(5, 2, 20, 0.65) !important;
  border: 2px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-weight: bold !important;
  font-family: var(--ui-font) !important;
  transition: all 0.3s ease !important;
}
#g2-certificate-screen input[type="text"]:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.45) !important;
  outline: none !important;
}

#g2-certificate-screen button[onclick^="g2_handlePrint"] {
  background: linear-gradient(to bottom, #10b981, #059669) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  color: white !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
  border-radius: 16px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
#g2-certificate-screen button[onclick^="g2_handlePrint"]:hover {
  background: linear-gradient(to bottom, #059669, #047857) !important;
  box-shadow: 0 0 25px rgba(52, 211, 153, 0.55) !important;
  transform: translateY(-4px) scale(1.02) !important;
}
#g2-certificate-screen button[onclick^="g2_handlePrint"]:active {
  transform: translateY(1px) scale(0.99) !important;
}

/* ------------------------------------------------------------------
   GAME 9: Tabliczka Mnożenia Enhancement
   ------------------------------------------------------------------ */
#game9-wrapper .g9-outer-frame {
  transition: box-shadow 0.3s ease !important;
}

#game9-wrapper .g9-outer-frame:hover {
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.3), inset 0 0 30px rgba(34, 211, 238, 0.05) !important;
}

/* ------------------------------------------------------------------
   BACK BUTTON: Universal Premium Back Style
   ------------------------------------------------------------------ */
.back-to-base-btn {
  color: #f1f5f9 !important;
}

.back-to-base-btn:hover {
  color: #ffffff !important;
}

#game1-wrapper .back-to-base-btn,
#game3-wrapper .back-to-base-btn {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: all 0.3s ease !important;
  border-radius: 50px !important;
  background: rgba(10, 8, 30, 0.6) !important;
}

#game1-wrapper .back-to-base-btn:hover,
#game3-wrapper .back-to-base-btn:hover {
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.4) !important;
}

/* ------------------------------------------------------------------
   RESPONSIVE: TABLETS (max-width: 1024px)
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  #game1-wrapper #game-and-blocks-wrapper {
    flex-direction: column !important;
  }

  #game1-wrapper #game-screen,
  #game1-wrapper #blocks-wrapper {
    width: 100% !important;
  }

  #game1-wrapper #menu-screen .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #g2-game-wrapper #g2-game-screen {
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   RESPONSIVE: PHONES (max-width: 640px)
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  #game1-wrapper,
  #game3-wrapper {
    padding: 0.75rem !important;
  }

  #game1-wrapper #app-container {
    gap: 1rem !important;
    margin-top: 4rem !important;
  }

  #game1-wrapper .glass-panel,
  #game3-wrapper .glass-panel {
    padding: 1.25rem !important;
    border-radius: 1.5rem !important;
  }

  #game1-wrapper #problem {
    font-size: 3rem !important;
    padding: 1rem !important;
    border-radius: 1.5rem !important;
    gap: 0.5rem !important;
  }

  #game1-wrapper #answer-input {
    font-size: 2.5rem !important;
    padding: 0.75rem !important;
    -webkit-appearance: none !important;
  }

  #game1-wrapper .btn {
    min-height: 48px !important;
    font-size: 0.9rem !important;
  }

  #game1-wrapper .block-btn {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  #game1-wrapper #menu-screen .grid {
    grid-template-columns: 1fr !important;
  }

  #game1-wrapper #difficulty-screen .grid {
    grid-template-columns: 1fr !important;
  }

  #game1-wrapper #current-player-name-display {
    font-size: 1.5rem !important;
  }

  #game1-wrapper > button:first-child,
  #game3-wrapper > button:first-child {
    padding: 0.5rem !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
  }

  #g2-game-wrapper button[onclick^="g2_handleNumpad"] {
    min-height: 56px !important;
    font-size: 1.5rem !important;
  }

  #g2-game-wrapper #g2-menu-screen {
    max-width: 100% !important;
  }

  #game1-wrapper #blocks-wrapper .min-h-\[160px\] {
    min-height: 120px !important;
  }
}

/* ------------------------------------------------------------------
   RESPONSIVE: VERY SMALL PHONES (max-width: 380px)
   ------------------------------------------------------------------ */
@media (max-width: 380px) {
  #game1-wrapper #problem {
    font-size: 2.5rem !important;
    padding: 0.75rem !important;
  }

  #game1-wrapper #answer-input {
    font-size: 2rem !important;
  }

  #game1-wrapper #menu-screen h1 {
    font-size: 1.75rem !important;
  }
}

/* ------------------------------------------------------------------
   ANIMATIONS: Subtle enhancements
   ------------------------------------------------------------------ */
@keyframes score-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#game1-wrapper #score-wrapper.animate-pulse,
#game1-wrapper #solved-wrapper.animate-pulse {
  animation: score-pop 0.4s ease-in-out !important;
}

/* Smooth transitions for game screens appearing/disappearing */
#game1-wrapper #player-screen,
#game1-wrapper #menu-screen,
#game1-wrapper #difficulty-screen,
#game1-wrapper #rules-screen,
#game1-wrapper #game-and-blocks-wrapper,
#game1-wrapper #error-summary-screen {
  transition: opacity 0.3s ease !important;
}

/* ------------------------------------------------------------------
   PRINT: Ensure games don't interfere with diploma printing
   ------------------------------------------------------------------ */
@media print {
  #game9-wrapper {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   FIX: hero-bg image path (relative to CSS file location)
   ------------------------------------------------------------------ */
.hero-bg {
  background: url('../img/nebula-bg.png') center/cover no-repeat !important;
}

/* ==========================================================================
   GAME 3: KOSMICZNE UŁAMKI OVERHAUL
   ========================================================================== */
#game3-wrapper .sub-panel {
  background: rgba(5, 2, 20, 0.45) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5) !important;
}

#game3-wrapper .counter-input {
  background: rgba(5, 2, 20, 0.55) !important;
  border: 2px solid rgba(99, 102, 241, 0.4) !important;
  border-radius: 50px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#game3-wrapper .counter-input span {
  font-family: var(--hud-font) !important;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 15px rgba(34, 211, 238, 0.6) !important;
  font-weight: 900 !important;
}

#game3-wrapper .counter-input button {
  background: transparent !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

#game3-wrapper .counter-input button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

#game3-wrapper .counter-input button:active {
  transform: scale(0.9) !important;
}

#game3-wrapper .type-selector {
  background: rgba(5, 2, 20, 0.45) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 4px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
  display: flex !important;
}

#game3-wrapper .type-selector button {
  border-radius: 12px !important;
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  flex: 1 !important;
  padding: 10px 16px !important;
}

#game3-wrapper .type-selector button.active {
  background: rgba(168, 85, 247, 0.25) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  color: var(--neon-purple) !important;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.5) !important;
}

#game3-wrapper .type-selector button:not(.active) {
  background: transparent !important;
  color: #94a3b8 !important;
  border: 1px solid transparent !important;
}

#game3-wrapper .type-selector button:not(.active):hover {
  color: #fff !important;
}

#game3-wrapper .diff-selector {
  background: rgba(5, 2, 20, 0.45) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50px !important;
  padding: 4px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px) !important;
  display: flex !important;
}

#game3-wrapper .diff-selector button {
  border-radius: 50px !important;
  font-family: var(--ui-font) !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  padding: 8px 16px !important;
}

#game3-wrapper .diff-selector button:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

#game3-wrapper .diff-selector button.active-easy {
  background: rgba(52, 211, 153, 0.15) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  color: var(--neon-green) !important;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.5) !important;
}

#game3-wrapper .diff-selector button.active-medium {
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}

#game3-wrapper .diff-selector button.active-survival {
  background: rgba(244, 63, 94, 0.15) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.4) !important;
  color: var(--neon-rose) !important;
  text-shadow: 0 0 8px rgba(244, 63, 94, 0.5) !important;
}

#game3-wrapper .diff-selector button.active-hardcore {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

#game3-wrapper .quiz-btn {
  background: var(--game-glass-btn) !important;
  border: 2.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
  transition: all 0.3s ease !important;
}

#game3-wrapper .quiz-btn:hover {
  transform: translateY(-4px) scale(1.03) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.35) !important;
}

#game3-wrapper .feedback-overlay {
  background: rgba(5, 2, 20, 0.92) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-radius: 28px !important;
  border: 2.5px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.2) !important;
}

#game3-wrapper .hud-badge {
  background: rgba(18, 12, 50, 0.5) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.15) !important;
  font-family: var(--hud-font) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#game3-wrapper .hud-badge-yellow {
  background: rgba(251, 191, 36, 0.08) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  color: var(--neon-yellow) !important;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.15) !important;
}

#game3-wrapper .hud-badge-purple {
  background: rgba(168, 85, 247, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: var(--neon-purple) !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.15) !important;
}

#game3-wrapper .hud-badge-indigo {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: var(--neon-blue) !important;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.15) !important;
}

#game3-wrapper input[type="text"] {
  background: rgba(5, 2, 20, 0.65) !important;
  border: 2px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-weight: bold !important;
  font-family: var(--ui-font) !important;
  transition: all 0.3s ease !important;
}

#game3-wrapper input[type="text"]:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.45) !important;
  outline: none !important;
}

/* ------------------------------------------------------------------
   GAME 2: Trash Bin (Reset Progress) & Pilot Removal Buttons styling
   ------------------------------------------------------------------ */
#g2-game-wrapper button[onclick^="g2_openResetModal"],
#g2-game-wrapper button[onclick^="g2_removePilot"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#g2-game-wrapper button[onclick^="g2_openResetModal"] svg,
#g2-game-wrapper button[onclick^="g2_removePilot"] svg {
  stroke: #94a3b8 !important;
  filter: drop-shadow(0 0 2px rgba(148, 163, 184, 0.3)) !important;
  transition: all 0.3s ease !important;
}

#g2-game-wrapper button[onclick^="g2_openResetModal"]:hover svg,
#g2-game-wrapper button[onclick^="g2_removePilot"]:hover svg {
  stroke: var(--neon-rose) !important;
  filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.8)) !important;
  transform: scale(1.2) !important;
}