/* Import Google Fonts for Kid-Friendly UI */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Comic+Neue:wght@300;400;700&display=swap');

/* Color Variables and Design System */
:root {
  --color-pink: #FF6B8B;
  --color-pink-light: #FCE7F3;
  --color-blue: #3B82F6;
  --color-blue-light: #EFF6FF;
  --color-yellow: #FFB300;
  --color-yellow-light: #FFFDE7;
  --color-green: #4ECDC4;
  --color-green-light: #E0F2F1;
  --color-purple: #8A4FFF;
  --color-purple-light: #F3E8FF;
  --color-chocolate: #3F2E2B;
  --color-chocolate-light: #EFEBE9;
  
  --font-title: 'Baloo 2', cursive;
  --font-body: 'Comic Neue', sans-serif;
  
  --shadow-primary: 0 10px 25px rgba(255, 107, 139, 0.2);
  --shadow-hover: 0 16px 36px rgba(255, 107, 139, 0.35);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(135deg, #FDE2E4 0%, #D8B4F8 50%, #B5F2EA 100%);
  background-size: 400% 400%;
  animation: backgroundShift 20s ease infinite;
  color: var(--color-chocolate);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

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

/* Base App Wrapper (Optimized for iPad Landscape proportions) */
#app-container {
  width: 1024px;
  height: 768px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 8px solid rgba(255, 255, 255, 0.6);
  border-radius: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Resize for smaller desktop viewports while maintaining aspect ratio */
@media (max-width: 1050px) or (max-height: 790px) {
  #app-container {
    transform: scale(0.85);
  }
}
@media (max-width: 900px) or (max-height: 680px) {
  #app-container {
    transform: scale(0.7);
  }
}
@media (max-width: 750px) or (max-height: 550px) {
  #app-container {
    transform: scale(0.55);
  }
}

/* Screen Transitions */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 10;
}

/* ------------------ PROFILE SCREEN ------------------ */
#profile-screen {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.candy-logo {
  font-family: var(--font-title);
  font-size: 56px;
  font-weight: 800;
  color: var(--color-pink);
  text-shadow: 4px 4px 0 #FFF, 6px 6px 0 rgba(0,0,0,0.05), 0 0 20px rgba(255,107,139,0.3);
  margin-bottom: 20px;
  animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}

.subtitle {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-purple);
  margin-bottom: 40px;
}

/* Avatar Choice Area */
.profile-selection-container {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  padding: 30px;
  width: 600px;
  box-shadow: var(--shadow-glass);
}

.avatar-grid {
  display: flex;
  justify-content: space-around;
  margin-bottom: 25px;
}

.avatar-option {
  width: 90px;
  height: 90px;
  border-radius: 50px;
  background: var(--color-purple-light);
  border: 4px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-option img, .avatar-option svg {
  width: 65px;
  height: 65px;
  transition: transform 0.3s ease;
}

.avatar-option.selected {
  border-color: var(--color-pink);
  background: var(--color-pink-light);
  transform: scale(1.15);
  box-shadow: var(--shadow-primary);
}

.avatar-option:hover {
  transform: scale(1.08);
}

.avatar-option.selected img, .avatar-option.selected svg {
  transform: rotate(5deg);
}

.name-input-wrapper {
  margin-bottom: 25px;
}

.name-input {
  width: 80%;
  padding: 12px 24px;
  border-radius: 20px;
  border: 3px solid var(--color-purple-light);
  font-family: var(--font-title);
  font-size: 22px;
  text-align: center;
  color: var(--color-chocolate);
  outline: none;
  background: white;
  transition: all 0.3s ease;
}

.name-input:focus {
  border-color: var(--color-purple);
  box-shadow: 0 0 15px rgba(138, 79, 255, 0.3);
}

/* Cute Buttons */
.btn-candy {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--color-pink) 0%, #FF8da1 100%);
  border: none;
  padding: 12px 40px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-candy:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-candy:active {
  transform: scale(0.98) translateY(0);
}

/* Profile List Panel */
.saved-profiles-list {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.profile-card {
  background: white;
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.profile-card.active {
  border-color: var(--color-purple);
  background: var(--color-purple-light);
}

.profile-card img, .profile-card svg {
  width: 35px;
  height: 35px;
}

.profile-card span {
  font-family: var(--font-title);
  font-weight: bold;
  font-size: 16px;
}

/* ------------------ MAP SCREEN ------------------ */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.player-info-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 20px;
  border-radius: 25px;
  box-shadow: var(--shadow-glass);
}

.player-info-badge img, .player-info-badge svg {
  width: 45px;
  height: 45px;
}

.player-name-text {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-chocolate);
}

.player-stars-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-yellow);
}

.player-stars-count svg {
  width: 24px;
  height: 24px;
  fill: var(--color-yellow);
}

.header-title {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 800;
  color: var(--color-purple);
  text-shadow: 2px 2px 0 white;
}

/* Interactive Map Canvas Grid */
.map-scroll-area {
  flex-grow: 1;
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 30px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-grid {
  width: 900px;
  height: 520px;
  position: relative;
  background-image: radial-gradient(circle, rgba(255,107,139,0.06) 10%, transparent 10.5%);
  background-size: 30px 30px;
}

/* Floating Candy Islands */
.map-island {
  position: absolute;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map-island:hover {
  transform: translateY(-8px) scale(1.08);
}

.map-island.locked {
  filter: grayscale(85%) opacity(70%);
  cursor: not-allowed;
}

.map-island-graphic {
  width: 90px;
  height: 90px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
  animation: islandFloat 3s ease-in-out infinite;
}

.map-island.locked .map-island-graphic {
  animation: none;
}

@keyframes islandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.map-island-name {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-chocolate);
  background: white;
  padding: 2px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
}

.map-island-stars {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}

.map-island-stars svg {
  width: 14px;
  height: 14px;
}

/* Draw connecting map path lines using CSS SVG overlay */
.map-path-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  stroke-dasharray: 8 8;
  animation: dashShift 1s linear infinite;
}

@keyframes dashShift {
  to {
    stroke-dashoffset: -16;
  }
}

/* ------------------ GAMEPLAY SCREEN ------------------ */
.game-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn-circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.btn-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.btn-circle svg {
  width: 24px;
  height: 24px;
  fill: var(--color-chocolate);
}

.game-progress-indicator {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-purple);
}

/* Game Stage Layout */
.game-layout {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  height: 580px;
}

/* Sidebar: Picture & Translation Display */
.word-hint-card {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 30px;
  box-shadow: var(--shadow-glass);
  border: 4px solid rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.word-illustration {
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 24px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  position: relative;
}

/* Floating Speaker Button */
.btn-speak {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: var(--color-purple);
  border: 3px solid white;
  box-shadow: 0 4px 10px rgba(138, 79, 255, 0.3);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 12;
}

.btn-speak:hover {
  transform: scale(1.15);
  background: var(--color-pink);
  box-shadow: 0 6px 14px rgba(255, 107, 139, 0.4);
}

.btn-speak:active {
  transform: scale(0.95);
}

.btn-speak svg {
  width: 22px;
  height: 22px;
  fill: white;
}

.word-illustration svg, .word-illustration img {
  width: 110px;
  height: 110px;
}

.thai-translation-text {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-pink);
  margin-bottom: 15px;
}

.example-sentence-text {
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-slate);
  padding: 10px;
  background: rgba(255,255,255,0.4);
  border-radius: 12px;
}

/* Main Interactive Play Zone */
.play-zone-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  box-shadow: var(--shadow-glass);
  border: 4px solid rgba(255, 255, 255, 0.8);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Cookie Lives Display */
.cookie-lives-container {
  position: absolute;
  top: 15px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.cookie-life-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 3px 6px rgba(139, 69, 19, 0.15));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
}

.cookie-life-icon.bitten {
  animation: cookieBiteAnim 0.5s ease;
}

@keyframes cookieBiteAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(-15deg); }
  100% { transform: scale(1); }
}

/* 1. Puzzle Mode: Drag & Drop */
.puzzle-slots-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
  min-height: 70px;
}

.letter-slot {
  width: 64px;
  height: 68px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 3px dashed var(--color-blue-light);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.2s ease;
}

.letter-slot.filled {
  border-style: solid;
  border-color: var(--color-green);
  background: var(--color-green-light);
}

.letter-slot.target-highlight {
  border-color: var(--color-pink);
  background: var(--color-pink-light);
}

/* Loose Letter Tiles Tray */
.letter-tiles-tray {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  min-height: 90px;
}

/* Kid-Friendly Letter Tile Component */
.letter-tile {
  width: 60px;
  height: 64px;
  border-radius: 16px;
  background: white;
  border: 3px solid var(--color-purple);
  box-shadow: 0 6px 12px rgba(138, 79, 255, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-purple);
  cursor: grab;
  touch-action: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.letter-tile:active {
  cursor: grabbing;
  transform: scale(1.15) rotate(3deg);
  box-shadow: 0 10px 20px rgba(138, 79, 255, 0.25);
  z-index: 100;
}

.letter-tile.placed {
  width: 58px;
  height: 62px;
  border-color: var(--color-green);
  color: var(--color-green);
  box-shadow: none;
  cursor: default;
}

/* 2. Candy Gumball Machine Mode */
.gumball-game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.gumball-word-slots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.gumball-slot {
  width: 54px;
  height: 58px;
  border-radius: 14px;
  background: white;
  border: 3px dashed var(--color-blue-light);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-blue);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.gumball-slot.filled {
  border-style: solid;
  border-color: var(--color-green);
  background: var(--color-green-light);
  color: var(--color-green);
  box-shadow: none;
}

/* The Machine wrapper */
.gumball-machine-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 320px;
  height: 380px;
}

/* Glass bowl top */
.gumball-globe {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 4px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset -15px -15px 30px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  z-index: 2;
  backdrop-filter: blur(2px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding: 20px;
  gap: 6px;
}

/* Decorative gumballs inside globe (background static candies) */
.gumball-bg-candy {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
  opacity: 0.85;
}

/* Red machine body bottom */
.gumball-body {
  width: 170px;
  height: 180px;
  background: linear-gradient(135deg, var(--color-pink) 0%, #E11D48 100%);
  border: 4px solid white;
  border-radius: 0 0 35px 35px;
  box-shadow: 0 10px 25px rgba(225, 29, 72, 0.3);
  position: relative;
  top: -20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

/* Dial mechanism */
.gumball-handle-plate {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #FFF5F5;
  border: 3px solid #FDA4AF;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
  cursor: pointer;
}

.gumball-handle {
  width: 50px;
  height: 16px;
  background: linear-gradient(180deg, #94A3B8 0%, #475569 100%);
  border-radius: 8px;
  position: relative;
  transition: transform 0.4s ease;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.gumball-handle::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 17px;
  width: 16px;
  height: 40px;
  background: linear-gradient(90deg, #94A3B8 0%, #475569 100%);
  border-radius: 8px;
}

/* Highlight flashing handle when ready */
.gumball-handle-plate.ready {
  animation: handleFlash 1.5s infinite alternate;
  box-shadow: 0 0 12px var(--color-purple);
}

@keyframes handleFlash {
  0% { transform: scale(1); border-color: var(--color-purple); }
  100% { transform: scale(1.08); border-color: var(--color-pink); }
}

.gumball-handle.rotate {
  transform: rotate(180deg);
}

/* Tray at the bottom */
.gumball-tray {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 80px;
  background: rgba(255, 255, 255, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px;
  box-shadow: var(--shadow-glass);
  z-index: 3;
}

/* Individual Gumball Candy */
.gumball {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: inset -4px -4px 8px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  animation: gumballDrop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
  position: relative;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.gumball:active {
  transform: scale(0.9);
}

/* Wrong choice crumbles and turns gray */
.gumball.cracked {
  background: #B0BEC5 !important;
  color: #78909C;
  animation: gumballCrack 0.5s ease forwards;
  box-shadow: none;
  cursor: not-allowed;
}

.gumball.cracked::after {
  content: "⚡";
  position: absolute;
  font-size: 20px;
  color: #CFD8DC;
  opacity: 0.7;
}

@keyframes gumballDrop {
  0% {
    transform: translateY(-240px) scale(0.4);
    opacity: 0;
  }
  50% {
    transform: translateY(10px) scale(1.1);
  }
  75% {
    transform: translateY(-8px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes gumballCrack {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-5deg); }
  40% { transform: translateX(6px) rotate(5deg); }
  60% { transform: translateX(-4px) rotate(-3deg); }
  80% { transform: translateX(4px) rotate(3deg); }
  100% { transform: translateX(0) scale(0.9); }
}

.gumball-prompt-text {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-purple);
  margin-top: 10px;
  text-align: center;
  min-height: 30px;
  animation: promptFloat 2s ease-in-out infinite;
}

@keyframes promptFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 3. Spelling Bee Option Match Mode */
.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  width: 80%;
  max-width: 450px;
}

.cupcake-option-card {
  background: white;
  border-radius: 24px;
  border: 3px solid var(--color-purple-light);
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cupcake-option-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-purple);
  box-shadow: 0 8px 20px rgba(138,79,255,0.1);
}

.cupcake-option-card.correct {
  border-color: var(--color-green);
  background: var(--color-green-light);
  box-shadow: 0 8px 20px rgba(78,205,196,0.2);
}

.cupcake-option-card.incorrect {
  border-color: var(--color-pink);
  background: var(--color-pink-light);
  box-shadow: 0 8px 20px rgba(255,107,139,0.2);
}

.cupcake-option-text {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-chocolate);
}

.cupcake-mini-icon {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.1));
}

/* ------------------ REWARD / OVERLAY ------------------ */
.overlay-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 27, 75, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

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

.victory-box {
  background: white;
  border-radius: 36px;
  padding: 40px;
  width: 480px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  transform: scale(0.7);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.overlay-panel.active .victory-box {
  transform: scale(1);
}

.victory-title {
  font-family: var(--font-title);
  font-size: 38px;
  font-weight: 800;
  color: var(--color-pink);
  margin-bottom: 15px;
}

.victory-stars-tray {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

.victory-star {
  width: 65px;
  height: 65px;
  fill: var(--color-chocolate-light);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.victory-star.active {
  fill: var(--color-yellow);
  transform: scale(1) rotate(10deg);
}

/* Stagger star pops */
.victory-star:nth-child(1) { transition-delay: 0.2s; }
.victory-star:nth-child(2) { transition-delay: 0.4s; }
.victory-star:nth-child(3) { transition-delay: 0.6s; }

.victory-candy-reward {
  width: 120px;
  height: 120px;
  margin: 0 auto 25px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
  animation: bounceReward 2s ease-in-out infinite;
}

@keyframes bounceReward {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

.victory-reward-name {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: bold;
  color: var(--color-purple);
  margin-bottom: 25px;
}

/* Confetti overlay canvas */
#confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 101;
}

/* ------------------ CANDY JAR OVERLAY PANEL ------------------ */
#candy-jar-screen {
  background: linear-gradient(135deg, #FFF5F7 0%, #F3E8FF 100%);
}

.jar-layout {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  height: 580px;
}

.jar-display-side {
  background: white;
  border-radius: 30px;
  box-shadow: var(--shadow-glass);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
}

.candy-jar-svg-container {
  width: 220px;
  height: 300px;
  position: relative;
}

.jar-svg {
  width: 100%;
  height: 100%;
}

/* Candies placed inside the jar glass area */
.jar-candies-layer {
  position: absolute;
  top: 80px;
  left: 30px;
  width: 160px;
  height: 190px;
  position: relative;
  overflow: hidden;
}

.jar-candy-item-element {
  position: absolute;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

.jar-stats {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: bold;
  color: var(--color-purple);
  margin-top: 20px;
}

/* Candies collection inventory grid */
.candies-grid-side {
  background: rgba(255,255,255,0.4);
  border-radius: 30px;
  padding: 25px;
  overflow-y: auto;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

.candies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 20px;
}

.candy-unlock-slot {
  background: white;
  aspect-ratio: 1;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: 3px solid transparent;
  box-shadow: 0 4px 8px rgba(0,0,0,0.03);
}

.candy-unlock-slot.locked {
  background: rgba(255,255,255,0.4);
  border: 3px dashed var(--color-chocolate-light);
}

.candy-unlock-slot.locked svg, .candy-unlock-slot.locked img {
  filter: grayscale(1) opacity(0.3);
}

.candy-unlock-slot img, .candy-unlock-slot svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.candy-unlock-label {
  font-size: 11px;
  font-weight: bold;
  margin-top: 6px;
  text-align: center;
  color: var(--color-slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* 4. Whack-a-Monster Spelling Mode */
.monster-game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.monster-word-slots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.monster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 380px;
  justify-content: center;
  margin: 0 auto;
}

.monster-jar-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The jar container acts as a mask */
.monster-jar {
  width: 120px;
  height: 120px;
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 10px 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 8px 15px rgba(255, 255, 255, 0.3), 0 8px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(1px);
  z-index: 2;
}

/* Lid/rim of the jar to make it look like a nice sweet pot */
.monster-jar-rim {
  width: 130px;
  height: 12px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  position: absolute;
  bottom: 0;
  z-index: 3;
}

/* Cute Monster Character */
.monster-character {
  width: 76px;
  height: 90px;
  border-radius: 38px 38px 12px 12px;
  position: absolute;
  bottom: -95px; /* hidden inside jar */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: bottom 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.2s ease, opacity 0.2s ease;
  box-shadow: inset -5px -5px 12px rgba(0,0,0,0.15);
}

.monster-character.popped {
  bottom: 12px; /* Popped up! */
}

/* Sign holding the letter */
.monster-sign {
  position: absolute;
  top: -15px;
  background: white;
  border: 3px solid var(--color-purple);
  border-radius: 12px;
  padding: 3px 10px;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-purple);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: rotate(-3deg);
  transition: transform 0.15s ease;
  pointer-events: none; /* Let clicks pass to the monster */
}

.monster-character:active .monster-sign {
  transform: rotate(5deg) scale(1.1);
}

/* Animated eyes */
.monster-eye {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monster-eye.left {
  left: 18px;
}

.monster-eye.right {
  right: 18px;
}

.monster-pupil {
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
  position: relative;
  top: -1px;
}

/* Cute mouth */
.monster-mouth {
  width: 24px;
  height: 10px;
  background: #440022;
  border-radius: 0 0 12px 12px;
  position: absolute;
  top: 52px;
  overflow: hidden;
}

/* Tiny fangs inside mouth */
.monster-mouth::before, .monster-mouth::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid white;
}
.monster-mouth::before { left: 4px; }
.monster-mouth::after { right: 4px; }

/* Prompt instructions text */
.monster-prompt-text {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-purple);
  margin-top: 15px;
  text-align: center;
  height: 24px;
}

/* Animations */
.monster-character.squished {
  transform: translateX(-50%) scale(1.3, 0.3);
  opacity: 0;
}

.monster-character.shake {
  animation: monsterShake 0.4s ease;
}

@keyframes monsterShake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20%, 60% { transform: translateX(-55%) rotate(-8deg); }
  40%, 80% { transform: translateX(-45%) rotate(8deg); }
}