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

/* APP UNIFIED HEADER STYLES */
#app-header {
  position: relative;
  z-index: 100;
  height: 65px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  padding: 0 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-main);
  z-index: 2;
}

.gov-emblem {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.header-logo-divider {
  width: 1.5px;
  height: 26px;
  background-color: rgba(0, 0, 0, 0.15);
}

.header-spectacles {
  width: 65px;
  height: auto;
  color: var(--wet-green-dark);
}

.header-title-text {
  font-family: var(--font-game);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--wet-green-dark);
  background: linear-gradient(135deg, var(--accent-saffron) 0%, var(--wet-green-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.btn-setting-control {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-game);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-setting-control.active {
  background: var(--dry-blue);
  color: white;
  border-color: var(--dry-blue-dark);
}

.btn-setting-control:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:root {
  /* Swachh Bharat color palette tailored in HSL */
  --wet-green: hsl(142, 70%, 42%);
  --wet-green-dark: hsl(142, 76%, 29%);
  --dry-blue: hsl(207, 90%, 54%);
  --dry-blue-dark: hsl(207, 95%, 38%);
  --haz-red: hsl(354, 76%, 50%);
  --haz-red-dark: hsl(354, 82%, 37%);
  
  --bg-primary: hsl(210, 20%, 98%);
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(255, 255, 255, 0.5);
  
  --text-main: hsl(220, 25%, 15%);
  --text-muted: hsl(220, 15%, 45%);
  --accent-saffron: hsl(24, 100%, 55%);
  
  /* Fonts */
  --font-game: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  
  /* Shadows */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow-green: 0 0 25px rgba(76, 175, 80, 0.6);
  --shadow-glow-blue: 0 0 25px rgba(33, 150, 243, 0.6);
  --shadow-glow-red: 0 0 25px rgba(244, 67, 54, 0.6);
  
  --safe-area-inset: 20px;
}

/* RESET & BASE */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  font-family: var(--font-body);
  background-color: #0d1117;
  color: var(--text-main);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* APP MAIN WRAPPER (Fits all displays like a tablet console) */
#app-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 1280px;
  max-height: 800px;
  aspect-ratio: 16 / 10;
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-lg);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 4px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1280px), (max-height: 800px) {
  #app-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
  }
}

/* GAME SCREENS GENERAL */
.game-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--safe-area-inset);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: scale(0.98);
  z-index: 10;
}

.game-screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  z-index: 20;
}

/* BACKGROUND DYNAMICS */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, hsl(200, 100%, 85%) 0%, hsl(140, 100%, 85%) 50%, hsl(40, 100%, 85%) 100%);
  background-size: 400% 400%;
  animation: backgroundMove 15s ease infinite;
  z-index: 1;
}

@keyframes backgroundMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* SCREEN 1: WELCOME SCREEN */
#welcome-screen {
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-image: url('assets/welcome_bg.png');
  background-size: cover;
  background-position: center;
}

.logo-container {
  text-align: center;
  margin-bottom: 20px;
  animation: floatWelcome 4s ease-in-out infinite;
  z-index: 2;
  background: rgba(255, 255, 255, 0.7);
  padding: 15px 30px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-md);
}

.welcome-mascots {
  display: none; /* Hidden because they are now beautifully illustrated in the background */
}

.mascot-svg {
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

#boy-mascot {
  animation: swingMascot 3s ease-in-out infinite alternate;
}

#girl-mascot {
  animation: swingMascot 3s ease-in-out infinite alternate-reverse;
}

.logo-main {
  font-family: var(--font-game);
  font-size: 4.2rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 1.0;
  background: linear-gradient(135deg, var(--accent-saffron) 0%, hsl(0, 0%, 20%) 50%, var(--wet-green-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  margin-bottom: 5px;
}

.logo-sub {
  font-family: var(--font-game);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dry-blue-dark);
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 320px;
  z-index: 2;
}

/* BUTTONS SYSTEM */
.btn-game {
  font-family: var(--font-game);
  font-size: 1.4rem;
  font-weight: 800;
  padding: 16px 28px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 60px; /* touch friendly */
}

.btn-game:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-lg);
}

.btn-game:active {
  transform: translateY(1px) scale(0.99);
}

.btn-start {
  background: linear-gradient(135deg, hsl(35, 100%, 50%) 0%, var(--accent-saffron) 100%);
  border-bottom: 5px solid hsl(24, 100%, 35%);
  font-size: 1.6rem;
  animation: pulseButton 2s infinite;
}

.btn-start:hover {
  background: linear-gradient(135deg, hsl(35, 100%, 55%) 0%, hsl(24, 100%, 60%) 100%);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--dry-blue) 0%, var(--dry-blue-dark) 100%);
  border-bottom: 5px solid hsl(207, 95%, 28%);
}

.btn-accent {
  background: linear-gradient(135deg, var(--wet-green) 0%, var(--wet-green-dark) 100%);
  border-bottom: 5px solid hsl(142, 76%, 20%);
}

.btn-exit {
  background: linear-gradient(135deg, hsl(0, 0%, 40%) 0%, hsl(0, 0%, 25%) 100%);
  border-bottom: 5px solid hsl(0, 0%, 15%);
}

/* SCREEN 2: SCENE SELECTION */
.screen-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  z-index: 2;
}

.screen-title {
  font-family: var(--font-game);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-main);
  text-shadow: 0 1px 2px white;
}

.scenes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  flex-grow: 1;
  z-index: 2;
  align-items: center;
}

.scene-card {
  height: 100%;
  max-height: 480px;
  background: var(--card-bg);
  border: 3px solid var(--card-border);
  border-radius: 24px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scene-card:hover {
  transform: translateY(-8px);
  border-color: var(--dry-blue);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(33, 150, 243, 0.2);
}

.scene-preview-art {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.difficulty-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: white;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
}

.diff-easy { background-color: var(--wet-green-dark); }
.diff-medium { background-color: var(--dry-blue-dark); }
.diff-hard { background-color: var(--haz-red-dark); }

.scene-card h3 {
  font-family: var(--font-game);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.scene-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 15px;
  flex-grow: 1;
}

.scene-card .btn-play-scene {
  width: 100%;
  font-size: 1.1rem;
  padding: 10px 15px;
  min-height: 44px;
}

/* SCREEN 3: HOW TO PLAY */
.tutorial-container {
  display: flex;
  gap: 30px;
  flex-grow: 1;
  z-index: 2;
}

.tutorial-text {
  flex: 1;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 24px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}

.tutorial-rules {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.rule-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
}

.rule-color-box {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  flex-shrink: 0;
}

.rule-green { background-color: var(--wet-green); border: 2px solid var(--wet-green-dark); }
.rule-blue { background-color: var(--dry-blue); border: 2px solid var(--dry-blue-dark); }
.rule-red { background-color: var(--haz-red); border: 2px solid var(--haz-red-dark); }

.rule-item-content h4 {
  font-family: var(--font-game);
  font-size: 1.1rem;
  font-weight: 800;
}

.rule-item-content p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.tutorial-demo {
  flex: 1.2;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-md);
  position: relative;
}

/* SCREEN 4: GAMEPLAY */
#gameplay-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 20;
}

.game-hud {
  height: 80px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 3px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.hud-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hud-panel {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(0,0,0,0.06);
  padding: 6px 16px;
  border-radius: 12px;
  font-family: var(--font-game);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-box {
  background: hsl(0, 80%, 95%);
  border: 2px solid hsl(0, 80%, 80%);
  color: var(--haz-red-dark);
}

.timer-box.hurry {
  animation: pulseHurry 0.5s infinite alternate;
  background: var(--haz-red);
  color: white;
  border-color: var(--haz-red-dark);
}

.score-box {
  background: hsl(207, 85%, 95%);
  border: 2px solid hsl(207, 80%, 80%);
  color: var(--dry-blue-dark);
}

/* COMBO MULTIPLIER POPUP & COMBO METER */
.combo-badge {
  background: linear-gradient(135deg, hsl(35, 100%, 50%) 0%, var(--accent-saffron) 100%);
  border: 2px solid hsl(24, 100%, 40%);
  color: white;
  padding: 6px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-family: var(--font-game);
  box-shadow: var(--shadow-sm);
  display: none;
  animation: bounceCombo 0.4s ease-out;
}

.combo-badge.active {
  display: flex;
}

/* PLAY FIELD CANVAS CONTAINER */
.play-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

/* SCENE BACKDROP OVERLAYS */
.scene-classroom {
  background-image: url('assets/classroom_bg.png');
}

.scene-park {
  background-image: url('assets/park_bg.png');
}

.scene-street {
  background-image: url('assets/street_bg.png');
}

.scene-campus {
  background-image: url('assets/campus_bg.png');
}

/* CLASSROOM ILLUSTRATIVE STUFF VIA VECTOR DECOR */
.vector-decor {
  position: absolute;
  pointer-events: none;
  opacity: 0.15;
}

/* DRAGGABLE WASTE ITEMS */
.waste-wrapper {
  position: absolute;
  width: 140px;
  height: 140px;
  z-index: 40;
  touch-action: none;
  will-change: transform;
  pointer-events: auto;
}

.ground-shadow {
  position: absolute;
  bottom: 0;
  left: 20px;
  width: 100px;
  height: 16px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  filter: blur(3.5px);
  opacity: 0.7;
  z-index: 5;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

.waste-item {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 120px;
  height: 120px;
  cursor: grab;
  z-index: 10;
  touch-action: none;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  transform-origin: bottom center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
}

.waste-item:active {
  cursor: grabbing;
}

.waste-svg, .waste-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.waste-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 0 0 #1a1a1a) drop-shadow(-2px 0 0 #1a1a1a) drop-shadow(0 2px 0 #1a1a1a) drop-shadow(0 -2px 0 #1a1a1a);
}

/* BINS CONTAINER & BINS AT BOTTOM */
.bins-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: transparent;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 45px 15px 45px;
  z-index: 30;
  pointer-events: none; /* Let drag events pass through to the play field */
}

.bin {
  width: 27%;
  max-width: 210px;
  height: 175px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.25s ease;
  /* Thick black cartoon border surrounding both lid and body */
  filter: drop-shadow(4px 0 0 #1a1a1a) drop-shadow(-4px 0 0 #1a1a1a) drop-shadow(0 4px 0 #1a1a1a) drop-shadow(0 -4px 0 #1a1a1a);
  pointer-events: auto; /* Re-enable pointer events for the interactive bin itself */
}

.bin::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 15%;
  width: 70%;
  height: 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.bin-lid {
  width: 104%;
  height: 28px;
  border-radius: 12px 12px 3px 3px;
  background: var(--bin-dark);
  position: absolute;
  bottom: 125px;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: bottom center;
  z-index: 10;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.15);
}

.bin-body {
  width: 90%;
  height: 135px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 50%, transparent 50%), var(--bin-color);
  /* Tapered shape using clip path */
  clip-path: polygon(6% 0%, 94% 0%, 82% 100%, 18% 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  color: white;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

/* COLOR-BLIND ACCESSIBILITY OVERLAYS (DIFFERENT PATTERNS FOR BINS) */
.bin-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
}

/* GREEN BIN */
.bin-green {
  --bin-color: var(--wet-green);
  --bin-dark: var(--wet-green-dark);
}
.bin-green .bin-body::before {
  background-image: repeating-linear-gradient(45deg, #000 0, #000 4px, transparent 0, transparent 12px);
}

/* BLUE BIN */
.bin-blue {
  --bin-color: var(--dry-blue);
  --bin-dark: var(--dry-blue-dark);
}
.bin-blue .bin-body::before {
  background-image: repeating-linear-gradient(90deg, #000 0, #000 4px, transparent 0, transparent 16px);
}

/* RED BIN */
.bin-red {
  --bin-color: var(--haz-red);
  --bin-dark: var(--haz-red-dark);
}
.bin-red .bin-body::before {
  background-image: radial-gradient(#000 20%, transparent 20%);
  background-size: 12px 12px;
}

/* HOVER / HIGHLIGHTS DURING DRAGGING */
.bin.drag-over {
  transform: translateY(-12px) scale(1.08);
  filter: drop-shadow(5px 0 0 #1a1a1a) drop-shadow(-5px 0 0 #1a1a1a) drop-shadow(0 5px 0 #1a1a1a) drop-shadow(0 -5px 0 #1a1a1a)
          drop-shadow(0 0 20px var(--bin-color));
}

.bin.drag-over::after {
  transform: scale(0.8);
  opacity: 0.5;
}

.bin.drag-over .bin-lid {
  transform: translateY(-16px) rotate(-4deg) scaleY(0.95);
}

.bin-label {
  font-family: var(--font-game);
  font-size: 1.5rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
}

.bin-sublabel {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 3px 10px;
  border-radius: 8px;
  margin-top: 4px;
  letter-spacing: 0.5px;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.bin-icon {
  width: 44px;
  height: 44px;
  fill: currentColor;
  margin-bottom: 4px;
  opacity: 0.95;
  z-index: 5;
  filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.3));
}

/* FLOATING SCORE POPUPS */
.points-popup {
  position: absolute;
  font-family: var(--font-game);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--wet-green);
  text-shadow: 0 2px 4px white, 0 -2px 4px white, 2px 0 4px white, -2px 0 4px white;
  pointer-events: none;
  animation: floatUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  z-index: 120;
}

.points-popup.minus {
  color: var(--haz-red);
}

/* SCREEN 5: GAME OVER SCREEN */
#gameover-screen {
  overflow-y: auto;
  align-items: center;
  padding: 30px var(--safe-area-inset);
}

.gameover-layout {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 960px;
  margin-top: 15px;
}

.scorecard-panel {
  flex: 1;
  background: var(--card-bg);
  border: 3px solid var(--card-border);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.scorecard-title {
  font-family: var(--font-game);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 15px;
}

.stars-rating {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.star-icon {
  width: 48px;
  height: 48px;
  fill: #E0E0E0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.star-icon.earned {
  fill: #FFD54F;
  filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.4));
  transform: scale(1.1) rotate(15deg);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 12px;
}

.stat-val {
  font-family: var(--font-game);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text-main);
}

.stat-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

.review-panel {
  flex: 1.2;
  background: var(--card-bg);
  border: 3px solid var(--card-border);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  max-height: 420px;
}

.review-title {
  font-family: var(--font-game);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 12px;
}

.mistake-list-container {
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 8px;
}

.mistake-card {
  background: white;
  border-left: 5px solid var(--haz-red);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.mistake-info h4 {
  font-family: var(--font-game);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.mistake-info p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.btn-why {
  background: hsl(207, 90%, 95%);
  color: var(--dry-blue-dark);
  border: 1px solid hsl(207, 80%, 85%);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-why:hover {
  background: var(--dry-blue);
  color: white;
}

.review-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--wet-green-dark);
  font-weight: 700;
  gap: 10px;
}

.review-empty-icon {
  width: 64px;
  height: 64px;
  fill: var(--wet-green);
}

/* BUTTONS FOOTER */
.gameover-buttons {
  display: flex;
  gap: 15px;
  width: 100%;
  max-width: 800px;
  margin-top: 25px;
}

.gameover-buttons .btn-game {
  flex: 1;
}

/* FUN FACTS CORNER */
.fact-ticker {
  background: rgba(255, 255, 255, 0.9);
  border: 2px dashed var(--accent-saffron);
  border-radius: 16px;
  padding: 15px 20px;
  width: 100%;
  max-width: 960px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: var(--shadow-sm);
}

.fact-ticker-title {
  font-family: var(--font-game);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent-saffron);
  text-transform: uppercase;
  white-space: nowrap;
}

.fact-ticker-text {
  font-size: 0.9rem;
  color: var(--text-main);
  line-height: 1.4;
}

/* MODALS SYSTEM (INSTRUCTIONS, HIGH SCORES, WHY EXPLANATION) */
.game-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 17, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

.modal-content {
  background: white;
  border-radius: 28px;
  width: 90%;
  max-width: 580px;
  max-height: 85%;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--dry-blue-dark);
  padding: 30px;
  position: relative;
  transform: translateY(30px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.game-modal.active .modal-content {
  transform: translateY(0);
}

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

.modal-title {
  font-family: var(--font-game);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text-main);
}

.btn-close-modal {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  color: var(--text-muted);
  line-height: 1;
  transition: color 0.2s;
}

.btn-close-modal:hover {
  color: var(--haz-red);
}

.modal-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-main);
}

/* CUSTOM HIGH SCORE LEADERBOARD TABLE */
.high-score-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.high-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: hsl(210, 20%, 96%);
  border-radius: 12px;
  font-family: var(--font-game);
  font-weight: 700;
}

.high-score-row.first {
  background: linear-gradient(90deg, #FFF9C4, #FFF59D);
  border: 1px solid #FFD54F;
  font-size: 1.15rem;
}

.high-score-row .scene-lbl {
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.high-score-row .score-lbl {
  color: var(--dry-blue-dark);
}

/* CONFETTI/PARTICLE EFFECTS */
.particle {
  position: absolute;
  pointer-events: none;
  z-index: 80;
  border-radius: 50%;
  animation: explode 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* KEYFRAMES ANIMATIONS */
@keyframes floatWelcome {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

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

@keyframes pulseButton {
  0% { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.5); }
  70% { box-shadow: 0 0 0 15px rgba(230, 81, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0); }
}

@keyframes pulseHurry {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.08); }
}

@keyframes floatUp {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-80px) scale(1.1); opacity: 0; }
}

@keyframes explode {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(0.1); opacity: 0; }
}

@keyframes bounceCombo {
  0% { transform: scale(0.4); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1.0); }
}

/* SCREEN SHAKE FOR INCORRECT SORT */
.shake {
  animation: shakeEffect 0.3s ease-in-out;
}

@keyframes shakeEffect {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* STARTUP LANGUAGE SELECTION SCREEN */
#language-select-screen {
  justify-content: center;
  align-items: center;
  gap: 30px;
  background-image: url('assets/welcome_bg.png');
  background-size: cover;
  background-position: center;
}

.lang-selection-cards {
  display: flex;
  gap: 25px;
  width: 100%;
  max-width: 800px;
  justify-content: center;
  z-index: 2;
}

.btn-lang-card {
  flex: 1;
  max-width: 200px;
  height: 240px;
  background: rgba(255, 255, 255, 0.85);
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-lang-card:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: var(--shadow-lg), 0 10px 20px rgba(0,0,0,0.08);
}

.btn-lang-card:active {
  transform: translateY(-4px);
}

.btn-lang-en { border-bottom: 6px solid var(--dry-blue); }
.btn-lang-hi { border-bottom: 6px solid var(--accent-saffron); }
.btn-lang-gu { border-bottom: 6px solid var(--wet-green); }

.lang-flag {
  font-size: 3rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.lang-title {
  font-family: var(--font-game);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text-main);
}

.lang-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* DIFFICULTY SELECTION BAR IN SCENE SELECT */
.difficulty-select-bar {
  display: flex;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  padding: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-diff-toggle {
  background: none;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-family: var(--font-game);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.btn-diff-toggle.active[data-diff="easy"] {
  background: var(--wet-green);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-diff-toggle.active[data-diff="medium"] {
  background: var(--dry-blue);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-diff-toggle.active[data-diff="hard"] {
  background: var(--haz-red);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-diff-toggle:hover:not(.active) {
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.05);
}

/* DIFFICULTY OUTLINE EFFECTS & ANIMATIONS */
.waste-item {
  animation: bobIdle 2.5s ease-in-out infinite alternate;
}

.waste-item.glow-easy {
  animation: pulseEasy 2s ease-in-out infinite alternate, bobIdle 2.5s ease-in-out infinite alternate;
}

.waste-item.glow-medium {
  animation: pulseMedium 2s ease-in-out infinite alternate, bobIdle 2.5s ease-in-out infinite alternate;
}

@keyframes bobIdle {
  0% {
    bottom: 6px;
  }
  100% {
    bottom: 14px;
  }
}

@keyframes pulseEasy {
  0% {
    filter: drop-shadow(0 0 3px rgba(255, 235, 59, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(255, 235, 59, 1)) drop-shadow(0 0 4px rgba(255, 235, 59, 0.9)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  }
}

@keyframes pulseMedium {
  0% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }
  100% {
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }
}

/* VIGNETTE OVERLAY FOR PREMIUM STYLING */
.vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
  z-index: 45;
  pointer-events: none;
}

/* HUD PROGRESS BAR & STARS TRACK SYSTEM */
.hud-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  max-width: 280px;
  margin: 0 15px;
  position: relative;
  height: 100%;
  padding-top: 5px;
}

.hud-stars-track {
  width: 100%;
  height: 22px;
  margin-bottom: 2px;
  position: relative;
}

.hud-star-indicator {
  position: absolute;
  top: 0;
  font-size: 1.4rem;
  color: #ccc;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateX(-50%) scale(0.9);
  cursor: default;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.hud-star-indicator.active {
  color: #ffc107;
  transform: translateX(-50%) scale(1.3);
  text-shadow: 0 2px 5px rgba(255, 193, 7, 0.6);
  animation: popStar 0.4s ease-out forwards;
}

#hud-star-1 { left: 33%; }
#hud-star-2 { left: 66%; }
#hud-star-3 { left: 100%; }

@keyframes popStar {
  0% { transform: translateX(-50%) scale(0.9); }
  50% { transform: translateX(-50%) scale(1.7); }
  100% { transform: translateX(-50%) scale(1.3); }
}

.hud-progress-track {
  width: 100%;
  height: 14px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.hud-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--wet-green) 0%, #ffc107 100%);
  border-radius: 6px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

/* CONFETTI CELEBRATION STYLES */
.confetti-piece {
  transform-origin: center;
  pointer-events: none;
}

@keyframes fall {
  0% {
    top: -20px;
    transform: translateX(0) rotate(0deg);
  }
  100% {
    top: 105%;
    transform: translateX(120px) rotate(1080deg);
  }
}

/* TRY AGAIN FAILURE SCORECARD STYLES */
#gameover-screen.try-again-mode .scorecard-panel {
  border-color: var(--haz-red-dark);
  background: rgba(253, 242, 242, 0.95);
  box-shadow: 0 0 25px rgba(244, 67, 54, 0.35);
  border-width: 4px;
}

#gameover-screen.try-again-mode #gameover-title {
  color: var(--haz-red-dark) !important;
}

#gameover-screen.try-again-mode #badge-certificate {
  background-color: hsl(354, 76%, 92%) !important;
  color: var(--haz-red-dark) !important;
  border: 1.5px dashed var(--haz-red);
}

/* Pad all screens except gameplay-screen to push content below the header */
.game-screen:not(#gameplay-screen) {
  padding-top: 85px !important;
}

/* GOVERNMENT INITIATIVE FOOTER STYLES */
.gameover-initiative-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 18px;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  max-width: 620px;
  align-self: center;
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

.footer-gov-emblem {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.footer-initiative-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
  text-align: left;
  font-family: var(--font-body);
}