/* ==============================================
   Animal Speller — Game-specific styles
   Theme: Safari / nature journey (deep greens, earth tones, foliage)
   ============================================== */

/* ---------- NATURE BACKGROUND (full page) ---------- */
body {
  background:
    /* Main gradient — lush forest clearing */
    linear-gradient(180deg,
      #a8d5a2 0%,
      #8cc883 8%,
      #b5deb0 20%,
      #d4edcf 35%,
      #e4f3e0 50%,
      #d9ebd4 70%,
      #c8dfc2 85%,
      #a8c89e 100%
    ) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Scenery layer — trees, hills, grass (behind everything) */
body::before {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background:
    /* Foreground grass tufts */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 80'%3E%3Cpath d='M0 80 Q20 30 40 80 Q55 20 70 80 Q90 35 110 80 Q125 15 140 80 Q160 40 180 80 Q195 25 210 80 Q230 35 250 80 Q265 10 280 80 Q300 45 320 80 Q335 20 350 80 Q370 40 390 80 Q405 15 420 80 Q440 30 460 80 Q475 25 490 80 Q510 40 530 80 Q545 20 560 80 Q580 35 600 80 Q615 10 630 80 Q650 45 670 80 Q685 25 700 80 Q720 30 740 80 Q755 20 770 80 Q790 40 810 80 Q825 15 840 80 Q860 35 880 80 Q895 25 910 80 Q930 40 950 80 Q965 10 980 80 Q1000 45 1020 80 Q1035 20 1050 80 Q1070 35 1090 80 Q1105 25 1120 80 Q1140 40 1160 80 Q1175 15 1190 80 Q1210 30 1230 80 Q1245 25 1260 80 Q1280 40 1300 80 Q1320 20 1340 80 Q1360 35 1380 80 L1400 80 L0 80Z' fill='%233a8f3e' opacity='0.6'/%3E%3C/svg%3E") bottom/100% 80px no-repeat,
    /* Rolling hills - back layer */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 200'%3E%3Cellipse cx='250' cy='200' rx='400' ry='120' fill='%2368a86b' opacity='0.35'/%3E%3Cellipse cx='800' cy='200' rx='350' ry='100' fill='%235a9e5e' opacity='0.3'/%3E%3Cellipse cx='1200' cy='200' rx='380' ry='130' fill='%2360a464' opacity='0.32'/%3E%3C/svg%3E") bottom/100% 200px no-repeat,
    /* Trees — left side */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect x='90' y='180' width='20' height='120' rx='4' fill='%236d4c2e' opacity='0.5'/%3E%3Cellipse cx='100' cy='160' rx='65' ry='80' fill='%232d7a2f' opacity='0.4'/%3E%3Cellipse cx='85' cy='140' rx='50' ry='65' fill='%2338923b' opacity='0.35'/%3E%3Cellipse cx='110' cy='150' rx='45' ry='60' fill='%2343a046' opacity='0.3'/%3E%3C/svg%3E") bottom left/200px 300px no-repeat,
    /* Trees — right side */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 280'%3E%3Crect x='80' y='170' width='18' height='110' rx='4' fill='%236d4c2e' opacity='0.5'/%3E%3Cellipse cx='90' cy='150' rx='60' ry='75' fill='%232d7a2f' opacity='0.35'/%3E%3Cellipse cx='75' cy='135' rx='45' ry='55' fill='%2338923b' opacity='0.3'/%3E%3C/svg%3E") bottom right/180px 280px no-repeat;
}

/* Floating leaves */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 8 Q42 20 30 32 Q18 20 30 8Z' fill='%234CAF50' opacity='0.07'/%3E%3C/svg%3E") repeat;
  animation: leafDrift 40s linear infinite;
}
@keyframes leafDrift {
  from { background-position: 0 0, 200px 100px; }
  to { background-position: 60px 60px, 260px 160px; }
}

#game-container {
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}

/* Floating nature emojis */
#game-container::before {
  content: '🍃';
  position: fixed;
  top: 15%;
  left: 4%;
  font-size: 1.8rem;
  opacity: 0.3;
  animation: floatLeaf 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
#game-container::after {
  content: '🦋';
  position: fixed;
  top: 25%;
  right: 6%;
  font-size: 1.4rem;
  opacity: 0.25;
  animation: floatLeaf 16s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}
@keyframes floatLeaf {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15px, -20px) rotate(15deg); }
  50% { transform: translate(-10px, -35px) rotate(-10deg); }
  75% { transform: translate(20px, -15px) rotate(20deg); }
}

/* Tree canopy top decoration */
.menu-screen::before,
.level-select::before,
.results-screen::before {
  content: '🌿🌳🌿🌴🌿🌳🌿';
  display: block;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 12px;
  margin-bottom: 8px;
  opacity: 0.5;
  filter: hue-rotate(-10deg);
}

/* ---------- MENU SCREEN ---------- */
.menu-screen {
  text-align: center;
  padding: 24px 20px 40px;
  position: relative;
  z-index: 1;
}

.menu-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  color: #1B5E20;
  text-shadow: 0 2px 8px rgba(27,94,32,0.15);
  margin-bottom: 4px;
}

.menu-subtitle {
  font-size: 1rem;
  color: #5D4037;
  margin-bottom: 8px;
  font-style: italic;
}

.menu-emoji-row {
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 6px;
  margin-bottom: 24px;
  display: block;
}

.menu-play-btn {
  display: inline-block;
  padding: 16px 56px;
  background: linear-gradient(135deg, #2E7D32, #1B5E20);
  color: #fff;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 2px;
  box-shadow: 0 6px 24px rgba(27,94,32,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 52px;
  min-width: 44px;
  position: relative;
  overflow: hidden;
}
.menu-play-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s;
}
.menu-play-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(27,94,32,0.5); }
.menu-play-btn:hover::after { left: 100%; }
.menu-play-btn:active { transform: translateY(0); }

.menu-player-name {
  display: block;
  margin-top: 16px;
  font-size: 0.9rem;
  color: #795548;
}

/* ---------- LEVEL SELECT ---------- */
.level-select {
  padding: 16px 20px;
  position: relative;
  z-index: 1;
}

.level-select h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.6rem;
  color: #1B5E20;
  text-align: center;
  margin-bottom: 20px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.level-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.88) 0%, rgba(241,248,233,0.85) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid #a5d6a7;
  border-radius: 16px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  position: relative;
  box-shadow: 0 2px 8px rgba(27,94,32,0.1);
}
.level-card:hover:not(.locked) {
  border-color: #2E7D32;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(27,94,32,0.18);
}
.level-card.locked {
  opacity: 0.45;
  cursor: default;
  background: linear-gradient(165deg, #f5f5f5 0%, #e8e8e8 100%);
  border-color: #ccc;
}
.level-card.locked .level-lock {
  display: block;
}
.level-lock {
  display: none;
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.level-card-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 4px;
}
.level-card-name {
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  color: #2E7D32;
  display: block;
  margin-bottom: 2px;
}
.level-card-stars {
  font-size: 0.9rem;
  letter-spacing: 2px;
  display: block;
  min-height: 1.2em;
}
.level-card-difficulty {
  font-size: 0.65rem;
  color: #795548;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- GAMEPLAY HUD BAR ---------- */
.gameplay-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(27,94,32,0.12), rgba(46,125,50,0.08));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(27,94,32,0.15);
  border-radius: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.hud-item {
  text-align: center;
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: #1B5E20;
}
.hud-item label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: #795548;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hud-progress {
  flex: 1;
  min-width: 60px;
  margin: 0 12px;
}
.progress-bar-bg {
  height: 8px;
  background: rgba(27,94,32,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2E7D32, #66BB6A, #FFD700);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.hud-lives {
  font-size: 1.2rem;
  letter-spacing: 2px;
}

/* ---------- QUESTION CARD ---------- */
.question-card {
  background: linear-gradient(170deg, rgba(255,255,255,0.92) 0%, rgba(249,251,231,0.9) 60%, rgba(241,248,233,0.88) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 8px 32px rgba(27,94,32,0.12), 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 1px solid rgba(165,214,167,0.5);
}
.question-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #1B5E20, #4CAF50, #81C784, #FFD700);
}

/* Subtle vine decoration on card edges */
.question-card::after {
  content: '🌿';
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.2rem;
  opacity: 0.2;
}

.question-type-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.badge-spell { background: #e8f5e9; color: #1B5E20; border: 1px solid #a5d6a7; }
.badge-unscramble { background: #fff8e1; color: #E65100; border: 1px solid #ffe082; }
.badge-fillblank { background: #e3f2fd; color: #1565C0; border: 1px solid #90caf9; }
.badge-multiplechoice { background: #fce4ec; color: #c62828; border: 1px solid #f48fb1; }

.animal-emoji {
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  text-align: center;
  display: block;
  margin: 8px 0 12px;
  filter: drop-shadow(0 4px 12px rgba(27,94,32,0.15));
  animation: emojiPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes emojiPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.question-hint {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #5D4037;
  margin-bottom: 20px;
  font-style: italic;
  background: rgba(255,248,225,0.6);
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-block;
}

/* ---------- SPELL IT ---------- */
.spell-input-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.letter-box {
  width: 46px;
  height: 54px;
  border: 3px solid #a5d6a7;
  border-radius: 12px;
  text-align: center;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: #1B5E20;
  background: #fff;
  outline: none;
  transition: all 0.2s;
  caret-color: #2E7D32;
  text-transform: uppercase;
}
.letter-box:focus {
  border-color: #2E7D32;
  box-shadow: 0 0 0 3px rgba(46,125,50,0.2);
  transform: scale(1.05);
}
.letter-box.correct { background: #c8e6c9; border-color: #2E7D32; }
.letter-box.wrong { background: #ffcdd2; border-color: #ef5350; }

/* ---------- UNSCRAMBLE ---------- */
.scramble-tiles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tile {
  width: 46px;
  height: 54px;
  background: linear-gradient(145deg, #2E7D32, #1B5E20);
  color: #FFD700;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid rgba(255,215,0,0.3);
  user-select: none;
  min-width: 44px;
  min-height: 44px;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(27,94,32,0.3);
}
.tile:hover:not(.used) { transform: translateY(-4px); background: linear-gradient(145deg, #388E3C, #2E7D32); box-shadow: 0 6px 16px rgba(27,94,32,0.4); }
.tile.used { opacity: 0.15; cursor: default; transform: none; box-shadow: none; }

.answer-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 54px;
  flex-wrap: wrap;
}
.answer-slot {
  width: 46px;
  height: 54px;
  border: 2px dashed #a5d6a7;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: #1B5E20;
  background: rgba(200,230,201,0.2);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  min-width: 44px;
  min-height: 44px;
}
.answer-slot.filled { border-style: solid; border-color: #2E7D32; background: #fff; }
.answer-slot.filled:hover { background: #ffebee; border-color: #ef5350; }
.answer-slot.correct { background: #c8e6c9; border-color: #2E7D32; }
.answer-slot.wrong { background: #ffcdd2; border-color: #ef5350; }

/* ---------- FILL THE BLANK ---------- */
.missing-word {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.letter-fixed {
  width: 42px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: #1B5E20;
  background: #c8e6c9;
  border-radius: 10px;
  text-transform: uppercase;
  border: 2px solid transparent;
}
.letter-blank {
  width: 42px;
  height: 50px;
  border: 3px solid #2E7D32;
  border-radius: 10px;
  text-align: center;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: #1B5E20;
  background: #fff;
  outline: none;
  transition: all 0.2s;
  text-transform: uppercase;
}
.letter-blank:focus {
  box-shadow: 0 0 0 3px rgba(46,125,50,0.2);
  transform: scale(1.05);
}
.letter-blank.correct { background: #c8e6c9; border-color: #2E7D32; }
.letter-blank.wrong { background: #ffcdd2; border-color: #ef5350; }

/* ---------- MULTIPLE CHOICE ---------- */
.choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.choice-btn {
  padding: 14px 12px;
  border-radius: 16px;
  border: 2px solid #a5d6a7;
  background: linear-gradient(165deg, #fff, #f1f8e9);
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1B5E20;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  min-width: 44px;
  text-transform: capitalize;
}
.choice-btn:hover:not(:disabled) {
  border-color: #2E7D32;
  background: linear-gradient(165deg, #f1f8e9, #c8e6c9);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(27,94,32,0.15);
}
.choice-btn .choice-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(46,125,50,0.1);
  font-size: 0.75rem;
  font-weight: 800;
  color: #2E7D32;
  flex-shrink: 0;
}
.choice-btn.correct-choice { border-color: #2E7D32; background: #c8e6c9; color: #1B5E20; }
.choice-btn.wrong-choice { border-color: #ef5350; background: #ffcdd2; color: #c62828; }

/* ---------- ACTION BUTTONS ---------- */
.btn-check {
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  border: none;
  background: linear-gradient(135deg, #2E7D32, #1B5E20);
  color: #fff;
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(27,94,32,0.35);
  letter-spacing: 1px;
  min-height: 52px;
}
.btn-check:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(27,94,32,0.5); }
.btn-check:disabled { opacity: 0.45; cursor: default; transform: none; }

.btn-clear {
  background: none;
  border: 1px solid #a5d6a7;
  color: #5D4037;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  margin-top: 8px;
  transition: all 0.2s;
  min-height: 44px;
}
.btn-clear:hover { background: rgba(200,230,201,0.3); }

/* ---------- FEEDBACK ---------- */
.feedback-bar {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 12px;
  border-radius: 14px;
  margin-top: 16px;
  border: 1px solid transparent;
}
.feedback-bar.correct {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #1B5E20;
  border-color: #a5d6a7;
}
.feedback-bar.wrong {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #c62828;
  border-color: #ef9a9a;
}

/* ---------- RESULTS SCREEN ---------- */
.results-screen {
  text-align: center;
  padding: 24px 20px 40px;
  position: relative;
  z-index: 1;
}
.results-emoji {
  font-size: 4.5rem;
  display: block;
  margin-bottom: 8px;
}
.results-screen h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  color: #1B5E20;
  margin-bottom: 8px;
}
.results-screen .star-rating {
  font-size: 2.4rem;
  letter-spacing: 4px;
  margin-bottom: 12px;
  display: block;
}
.results-summary {
  font-size: 1rem;
  color: #5D4037;
  margin-bottom: 24px;
}
.results-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.results-btn {
  display: inline-block;
  padding: 14px 40px;
  border-radius: 50px;
  border: none;
  font-family: 'Fredoka One', cursive;
  font-size: 1.05rem;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.2s;
  min-height: 48px;
  min-width: 44px;
}
.results-btn.primary {
  background: linear-gradient(135deg, #2E7D32, #1B5E20);
  color: #fff;
  box-shadow: 0 4px 16px rgba(27,94,32,0.35);
}
.results-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,94,32,0.45); }
.results-btn.secondary {
  background: linear-gradient(135deg, #f1f8e9, #e8f5e9);
  color: #2E7D32;
  border: 1px solid #a5d6a7;
}
.results-btn.secondary:hover { background: #c8e6c9; transform: translateY(-1px); }
.results-btn.accent {
  background: linear-gradient(135deg, #FFD700, #FFC107);
  color: #1B5E20;
  box-shadow: 0 4px 16px rgba(255,215,0,0.35);
}
.results-btn.accent:hover { transform: translateY(-2px); }

/* ---------- ANIMATION CLASSES ---------- */
.slide-in {
  animation: slideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.shake { animation: shake 0.3s; }

/* ---------- HIGH CONTRAST ---------- */
body.high-contrast {
  background: #000 !important;
}
body.high-contrast .question-card {
  border: 2px solid #fff;
  background: #111;
  color: #fff;
}
body.high-contrast .question-card::after { display: none; }
body.high-contrast .letter-box,
body.high-contrast .letter-blank { border-color: #fff; color: #fff; background: #222; }
body.high-contrast .letter-fixed { background: #333; color: #fff; }
body.high-contrast .tile { background: #fff; color: #000; border-color: #fff; }
body.high-contrast .choice-btn { border-color: #fff; color: #fff; background: #222; }
body.high-contrast .answer-slot { border-color: #aaa; background: #111; color: #fff; }
body.high-contrast .level-card { border-color: #fff; background: #111; }
body.high-contrast .level-card-name { color: #fff; }
body.high-contrast .question-hint { color: #FFD700; background: rgba(255,215,0,0.1); }
body.high-contrast .hud-item { color: #fff; }
body.high-contrast .hud-item label { color: #aaa; }
body.high-contrast .gameplay-hud { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
body.high-contrast .feedback-bar.correct { background: #1B5E20; color: #fff; }
body.high-contrast .feedback-bar.wrong { background: #b71c1c; color: #fff; }
body.high-contrast .menu-title,
body.high-contrast .level-select h2,
body.high-contrast .results-screen h2 { color: #FFD700; }
body.high-contrast .menu-subtitle,
body.high-contrast .menu-player-name,
body.high-contrast .results-summary { color: #ccc; }

/* ---------- REDUCED MOTION ---------- */
body.reduced-motion .slide-in,
body.reduced-motion .shake,
body.reduced-motion .animal-emoji,
body.reduced-motion .results-emoji {
  animation: none !important;
}
body.reduced-motion #game-container::before,
body.reduced-motion #game-container::after {
  animation: none !important;
  display: none;
}
body.reduced-motion .menu-play-btn::after { display: none; }

/* ---------- FONT SIZE SCALING ---------- */
body.font-large .question-hint { font-size: 1.15rem; }
body.font-large .letter-box,
body.font-large .letter-blank,
body.font-large .letter-fixed,
body.font-large .tile,
body.font-large .answer-slot { font-size: 1.6rem; }
body.font-large .choice-btn { font-size: 1.2rem; }

body.font-xl .question-hint { font-size: 1.3rem; }
body.font-xl .letter-box,
body.font-xl .letter-blank,
body.font-xl .letter-fixed,
body.font-xl .tile,
body.font-xl .answer-slot { font-size: 1.8rem; width: 52px; height: 60px; }
body.font-xl .choice-btn { font-size: 1.35rem; padding: 18px 16px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
  .choices-grid { grid-template-columns: 1fr; }
  .letter-box, .letter-blank, .letter-fixed, .tile, .answer-slot {
    width: 38px; height: 46px; font-size: 1.2rem;
  }
  .gameplay-hud { padding: 8px 12px; }
}