:root {
  --bg-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
  --app-bg: rgba(255, 255, 255, 0.95);
  --text-color: #2d3436;
  --accent-color: #ff6b6b;
  --panel-bg: #fff0f5;
  --title-color: #ff6b6b;
  --card-bg: white;
  --card-hover-bg: #ffe4e1;
}

body.theme-space {
  background: radial-gradient(circle, #1a1a3a 0%, #0a0a1a 100%) !important;
  --app-bg: rgba(15, 15, 35, 0.9);
  --text-color: #dfe6e9;
  --accent-color: #a29bfe;
  --panel-bg: #1c1c3c;
  --title-color: #74b9ff;
  --card-bg: #2a2a4a;
  --card-hover-bg: #3b3b5c;
}

body.theme-jungle {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
  --app-bg: rgba(255, 255, 255, 0.95);
  --text-color: #1b5e20;
  --accent-color: #2ecc71;
  --panel-bg: #e8f5e9;
  --title-color: #2e7d32;
  --card-bg: white;
  --card-hover-bg: #c8e6c9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: var(--bg-gradient);
  transition: background 0.5s ease, color 0.5s ease;
  font-family: "Comic Sans MS", cursive, sans-serif !important;
  padding: 0;
  margin: 0;
}

body > header, body > footer, header:not(.app-header-bar), footer {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

main {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 10px;
}

.container {
  max-width: 1400px;
  margin: 10px auto 20px auto;
  background: var(--app-bg);
  color: var(--text-color);
  border-radius: 28px;
  padding: 16px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==================== COMPACT APP HEADER BAR ==================== */
.app-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.04);
  border: 2px solid rgba(255, 107, 107, 0.2);
  border-radius: 20px;
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

.brand-title {
  font-size: 1.5em;
  font-weight: 900;
  color: var(--title-color);
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-pills {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.05);
  padding: 3px;
  border-radius: 14px;
  gap: 4px;
}

.theme-pill-btn {
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--text-color) !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Comic Sans MS", cursive, sans-serif !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.theme-pill-btn:hover {
  background: var(--card-bg) !important;
  transform: translateY(-1px) !important;
}

.theme-pill-btn.active {
  background: var(--accent-color) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.script-toggle-btn {
  background: linear-gradient(135deg, #ff9933 0%, #fff 50%, #138808 100%);
  color: #333;
  border: 1.5px solid #ff9933;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 153, 51, 0.25);
}

.script-toggle-btn:hover {
  transform: scale(1.05);
}

.streak-pill {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: #d63031;
  box-shadow: 0 2px 6px rgba(214, 48, 49, 0.2);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-header-action {
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: "Comic Sans MS", cursive, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btn-tools-nav {
  background: linear-gradient(135deg, #ffeaa7, #fdcb6e) !important;
  color: #2d3436 !important;
  box-shadow: 0 3px 8px rgba(253, 203, 110, 0.4) !important;
}

.btn-games-nav {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7) !important;
  color: white !important;
  box-shadow: 0 3px 10px rgba(108, 92, 231, 0.4) !important;
}

.btn-header-action:hover {
  transform: translateY(-2px) scale(1.04) !important;
}

/* ==================== TOOLS DROPDOWN PANEL ==================== */
.tools-dropdown-panel {
  background: var(--card-bg);
  border: 2px solid var(--accent-color);
  border-radius: 18px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tools-grid-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tools-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tools-group-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-color);
  opacity: 0.85;
  margin-right: 4px;
}

.btn-tool-chip {
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-color) !important;
  cursor: pointer !important;
  font-family: "Comic Sans MS", cursive, sans-serif !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

.btn-tool-chip:hover {
  background: var(--accent-color) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* ==================== SLIM CATEGORY RIBBON ==================== */
.category-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.025);
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  flex-wrap: wrap;
}

.category-ribbon-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-color);
  opacity: 0.85;
}

.category-chips-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: bold;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.category-chip input {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--accent-color);
}

.category-more-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px dashed rgba(0, 0, 0, 0.2) !important;
  color: var(--text-color) !important;
  cursor: pointer !important;
  font-family: "Comic Sans MS", cursive, sans-serif !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.category-more-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ==================== ALL GAMES LAUNCHER MODAL ==================== */
.modal-games-launcher {
  max-width: 840px !important;
  width: 92% !important;
  max-height: 88vh !important;
  border-radius: 28px !important;
  padding: 24px !important;
  background: var(--app-bg) !important;
  border: 4px solid #6c5ce7 !important;
}

.games-launcher-header {
  text-align: center;
  margin-bottom: 16px;
}

.games-launcher-header h2 {
  font-size: 1.8em;
  color: #6c5ce7;
  margin-bottom: 4px;
}

.games-launcher-header p {
  color: var(--text-color);
  opacity: 0.8;
  margin: 0;
  font-size: 14px;
}

.games-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px;
}

.game-launch-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 2px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.game-launch-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 18px rgba(108, 92, 231, 0.2);
  border-color: #6c5ce7;
}

.game-card-icon {
  font-size: 26px;
  flex-shrink: 0;
}

.game-card-info h3 {
  font-size: 13px;
  margin: 0;
  color: var(--text-color);
  font-weight: bold;
}

.game-card-info p {
  font-size: 11px;
  margin: 3px 0 0 0;
  color: var(--text-color);
  opacity: 0.75;
  line-height: 1.3;
}

.btn-color { background: #ff6b6b !important; color: white !important; }
.btn-increase { background: #4ecdc4 !important; color: white !important; }
.btn-decrease { background: #95e1d3 !important; color: #333 !important; }
.btn-reset { background: #ffe66d !important; color: #333 !important; }
.btn-creative { background: #ff6348 !important; color: white !important; }
.btn-quiz { background: #a29bfe !important; color: white !important; }


/* Characters Grid */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.characters-grid.keyboard-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 30px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}

.keyboard-mode .char-item {
  width: clamp(55px, 7.8vw, 95px);
  height: clamp(55px, 7.8vw, 95px);
  font-size: clamp(1.8em, 2.8vw, 2.8em);
  flex: 0 0 auto;
}

.char-item {
  aspect-ratio: 1;
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 2.8em;
  font-weight: 900;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
  border: 3px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 0 var(--accent-color), 0 15px 20px rgba(0, 0, 0, 0.15);
  color: white;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.char-item:hover {
  transform: translateY(-8px) scale(1.12) rotate(3deg);
  box-shadow: 0 14px 0 var(--accent-color), 0 20px 25px rgba(0, 0, 0, 0.25);
}

.char-item:active {
  transform: translateY(4px) scale(0.96);
  box-shadow: 0 2px 0 var(--accent-color), 0 5px 10px rgba(0, 0, 0, 0.15);
}

.char-item.visited {
  border-color: #00b894;
  box-shadow: 0 8px 0 #00b894, 0 15px 20px rgba(0, 0, 0, 0.15);
}

.char-item.hindi-char {
  font-family: "Noto Sans Devanagari", "Mangal", "Arial Unicode MS", sans-serif;
  font-weight: 700;
}

/* Words Panel */
.words-panel {
  margin-top: 35px;
  padding: 25px;
  background: var(--panel-bg);
  border-radius: 25px;
  min-height: 150px;
  display: none;
  box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.04);
  transition: all 0.5s ease;
}

.words-panel.active {
  display: block;
  animation: slideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-25px); }
  to { opacity: 1; transform: translateY(0); }
}

.words-panel h2 {
  color: var(--accent-color);
  font-size: 1.8em;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

.words-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  justify-content: center;
}

.word-card {
  padding: 20px;
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 3px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.word-card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
  background: var(--card-hover-bg);
  border-color: var(--accent-color);
}

.word-card .english {
  font-size: 1.4em;
  font-weight: 900;
  color: var(--text-color);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.word-audio {
  font-size: 1.1em;
  background: var(--accent-color);
  color: white;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.word-audio:hover {
  transform: scale(1.2);
}

.word-card .translation {
  font-size: 1.1em;
  color: var(--text-color);
  margin: 4px 0;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 12px;
  border-radius: 10px;
  width: 100%;
  text-align: center;
}

.word-card .significance {
  font-size: 0.95em;
  color: var(--text-color);
  opacity: 0.85;
  text-align: center;
  margin-top: 12px;
  line-height: 1.4;
  border-top: 1px dotted rgba(0, 0, 0, 0.1);
  padding-top: 10px;
}

.word-card .image {
  margin-top: 15px;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.word-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.word-card:hover img {
  transform: scale(1.08);
}

/* ==================== QUIZ MODAL BANNER ==================== */
.quiz-modal {
  display: none;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) !important;
  z-index: 2500;
  pointer-events: none;
  width: 94%;
  max-width: 860px;
  background: transparent;
  backdrop-filter: none;
}

.quiz-modal.active {
  display: flex;
  justify-content: center;
}

.quiz-content {
  pointer-events: auto;
  width: 100%;
  background: var(--app-bg);
  color: var(--text-color);
  padding: 14px 24px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.3);
  border: 4px solid var(--accent-color);
  animation: slideDownQuiz 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-wrap: wrap;
}

@keyframes slideDownQuiz {
  from { transform: translateY(-40px) scale(0.85); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.quiz-left-section {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.quiz-prompt-label {
  font-size: 1.15em;
  font-weight: 900;
  color: var(--text-color);
}

.quiz-target-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiz-target {
  font-size: 2.6em !important;
  color: white !important;
  background: linear-gradient(135deg, var(--accent-color), #fd79a8);
  font-weight: 900;
  padding: 2px 22px;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
  animation: pulseTarget 1.5s infinite;
  display: inline-block;
}

@keyframes pulseTarget {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.quiz-audio-btn {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fdcb6e !important;
  border: none !important;
  font-size: 1.3em !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(253, 203, 110, 0.4) !important;
  transition: transform 0.2s ease !important;
}

.quiz-audio-btn:hover {
  transform: scale(1.18) !important;
}

.quiz-right-section {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.score-board {
  display: flex;
  gap: 12px;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.05);
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 1.1em !important;
  font-weight: 900;
}

.score-badge.correct, .correct { color: #00b894; }
.score-badge.incorrect, .incorrect { color: #d63031; }

.btn-close-quiz {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #ff7675, #d63031) !important;
  color: white !important;
  border: none !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(214, 48, 49, 0.4) !important;
  transition: transform 0.2s ease !important;
}

.btn-close-quiz:hover {
  transform: scale(1.06) !important;
}

/* Celebration Particles */
.celebration-particle {
  position: fixed;
  pointer-events: none;
  font-size: 2.2em;
  animation: explode 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  z-index: 2000;
}

@keyframes explode {
  0% { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.3) rotate(360deg); opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* Game Modals */
.game-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 3000;
  justify-content: center;
  align-items: flex-start;
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 24px 10px;
  box-sizing: border-box;
}

.game-modal.active {
  display: flex;
}

.modal-content {
  background: var(--app-bg);
  color: var(--text-color);
  border-radius: 28px;
  padding: 24px 26px;
  max-width: 620px;
  width: 94%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  margin: auto;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.35);
  border: 4px solid var(--accent-color);
  animation: slideDown 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  box-sizing: border-box;
}

.modal-wide {
  max-width: 820px;
}

.modal-content h2 {
  color: var(--accent-color);
  font-size: 2em;
  margin-bottom: 20px;
}

/* Shared Game Buttons */
.btn-listen {
  background: #0984e3;
  color: white;
  font-size: 1.2em;
  padding: 12px 30px;
  margin: 10px;
}

.btn-submit {
  background: #00b894;
  color: white;
  padding: 12px 30px;
  margin: 10px;
}

.btn-hint {
  background: #fdcb6e;
  color: #333;
  padding: 12px 30px;
  margin: 10px;
}

.btn-next {
  background: #6c5ce7;
  color: white;
  padding: 12px 30px;
  margin: 10px;
}

.btn-close-game {
  background: #d63031;
  color: white;
  padding: 12px 30px;
  margin-top: 20px;
}

.btn-pause {
  background: #e17055;
  color: white;
  padding: 12px 30px;
  margin: 10px;
}

/* Spelling Bee */
.spelling-image {
  margin: 15px auto;
  max-width: 250px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.spelling-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.spelling-input-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.spelling-input-area input {
  padding: 12px 20px;
  font-size: 1.3em;
  border: 3px solid var(--accent-color);
  border-radius: 15px;
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  background: var(--card-bg);
  color: var(--text-color);
  outline: none;
}

.spelling-input-area input:focus {
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

.spelling-feedback {
  font-size: 1.3em;
  font-weight: bold;
  margin: 10px;
  min-height: 40px;
}

.spelling-feedback.correct {
  color: #00b894;
}

.spelling-feedback.incorrect {
  color: #d63031;
}

/* Memory Match */
.memory-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--accent-color);
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 450px;
  margin: 0 auto 20px;
}

.memory-card {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  font-weight: 900;
  color: white;
  transition: transform 0.4s;
  transform-style: preserve-3d;
  position: relative;
}

.memory-card.flipped {
  transform: rotateY(180deg);
}

.memory-card .card-front,
.memory-card .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5px;
}

.memory-card .card-front {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  font-size: 2em;
}

.memory-card .card-back {
  background: var(--card-bg);
  color: var(--text-color);
  transform: rotateY(180deg);
  font-size: 1em;
  border: 3px solid var(--accent-color);
}

.memory-card .card-back img {
  width: 80%;
  height: 60%;
  object-fit: cover;
  border-radius: 8px;
}

.memory-card.matched {
  background: #00b894 !important;
  animation: matchBounce 0.5s ease;
}

.memory-card.matched .card-front {
  background: #00b894;
}

@keyframes matchBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Audio Race */
.audio-race-timer {
  height: 8px;
  background: #dfe6e9;
  border-radius: 4px;
  margin: 15px 0;
  overflow: hidden;
}

.audio-race-timer .timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #00b894, #00cec9, #fdcb6e, #e17055, #d63031);
  border-radius: 4px;
  transition: width 0.1s linear;
}

.audio-race-instruction {
  font-size: 1.2em;
  margin: 10px 0;
  color: var(--text-color);
}

.audio-race-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 20px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.audio-race-options button {
  padding: 20px;
  font-size: 2em;
  font-weight: 900;
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text-color);
  border: 3px solid var(--accent-color);
  transition: all 0.3s;
}

.audio-race-options button:hover {
  transform: scale(1.08);
  background: var(--accent-color);
  color: white;
}

.audio-race-options button.correct-answer {
  background: #00b894 !important;
  color: white !important;
  border-color: #00b894 !important;
  animation: matchBounce 0.5s ease;
}

.audio-race-options button.wrong-answer {
  background: #d63031 !important;
  color: white !important;
  border-color: #d63031 !important;
  animation: shake 0.5s ease;
}

/* Daily Challenge */
#dailyContent {
  margin: 15px 0;
}

.daily-question {
  font-size: 1.4em;
  margin: 15px 0;
  color: var(--accent-color);
  font-weight: bold;
}

.daily-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 400px;
  margin: 15px auto;
}

.daily-options button {
  padding: 15px;
  font-size: 1.3em;
  font-weight: bold;
  border-radius: 15px;
  background: var(--card-bg);
  color: var(--text-color);
  border: 2px solid var(--accent-color);
}

.daily-options button.correct-answer {
  background: #00b894 !important;
  color: white !important;
  border-color: #00b894 !important;
}

.daily-options button.wrong-answer {
  background: #d63031 !important;
  color: white !important;
  border-color: #d63031 !important;
}

.daily-complete {
  font-size: 1.5em;
  color: #00b894;
  font-weight: bold;
  margin: 20px 0;
}

.daily-comeback {
  font-size: 1.3em;
  color: var(--accent-color);
  margin: 20px 0;
}

/* Letter Tracing */
.tracing-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.tracing-controls select {
  padding: 10px 20px;
  font-size: 1.2em;
  border-radius: 15px;
  border: 3px solid var(--accent-color);
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  background: var(--card-bg);
  color: var(--text-color);
}

.pen-colors {
  display: flex;
  gap: 8px;
}

.pen-color {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  font-size: 1.2em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.pen-color:hover {
  transform: scale(1.2);
}

.pen-color.active {
  border-color: #333;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#tracingCanvas, #coloringCanvas {
  border: 3px solid var(--accent-color);
  border-radius: 20px;
  background: white;
  cursor: crosshair;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  touch-action: none;
}

/* Coloring Pages */
.coloring-palette {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.coloring-palette .palette-color {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.2s;
}

.coloring-palette .palette-color:hover {
  transform: scale(1.2);
}

.coloring-palette .palette-color.active {
  border-color: #333;
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.coloring-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

/* Story Mode */
.story-nav, .rhyme-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.story-nav span, .rhyme-nav span {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--accent-color);
}

.story-image {
  max-width: 300px;
  margin: 0 auto 15px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.story-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.story-text {
  text-align: left;
  padding: 15px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 15px;
  margin: 15px 0;
  font-size: 1.15em;
  line-height: 1.8;
}

.story-text .story-sentence {
  padding: 8px 0;
  transition: background 0.3s;
  border-radius: 8px;
}

.story-text .story-sentence.highlighted {
  background: rgba(255, 107, 107, 0.2);
  font-weight: bold;
}

.story-controls, .rhyme-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}

/* Rhymes */
.rhyme-lines {
  text-align: left;
  padding: 15px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 15px;
  margin: 15px 0;
  font-size: 1.2em;
  line-height: 2;
}

.rhyme-lines .rhyme-line {
  padding: 6px 0;
  transition: background 0.3s;
  border-radius: 8px;
}

.rhyme-lines .rhyme-line.highlighted {
  background: rgba(232, 67, 147, 0.2);
  font-weight: bold;
}

/* Festival Mode */
#festivalDescription {
  font-size: 1.1em;
  margin-bottom: 15px;
  color: var(--text-color);
}

.festival-words {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}

.festival-word-badge {
  padding: 8px 16px;
  background: var(--accent-color);
  color: white;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1em;
}

.festival-question {
  font-size: 1.2em;
  margin: 15px 0;
  font-weight: bold;
  color: var(--accent-color);
}

.festival-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 400px;
  margin: 15px auto;
}

.festival-options button {
  padding: 15px;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 15px;
  background: var(--card-bg);
  color: var(--text-color);
  border: 2px solid var(--accent-color);
}

.festival-options button.correct-answer {
  background: #00b894 !important;
  color: white !important;
  border-color: #00b894 !important;
}

.festival-options button.wrong-answer {
  background: #d63031 !important;
  color: white !important;
  border-color: #d63031 !important;
}

/* Badges Grid */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.badge-item {
  padding: 15px;
  background: var(--card-bg);
  border-radius: 20px;
  text-align: center;
  border: 3px solid transparent;
  transition: all 0.3s;
}

.badge-item.locked {
  opacity: 0.4;
  filter: grayscale(1);
}

.badge-item.unlocked {
  border-color: #00b894;
  box-shadow: 0 4px 15px rgba(0, 184, 148, 0.2);
}

.badge-item .badge-emoji {
  font-size: 2.5em;
  display: block;
  margin-bottom: 8px;
}

.badge-item .badge-name {
  font-size: 0.9em;
  font-weight: bold;
  color: var(--text-color);
}

.badge-item .badge-desc {
  font-size: 0.75em;
  color: var(--text-color);
  opacity: 0.7;
  margin-top: 4px;
}

/* Progress Dashboard */
.progress-dashboard {
  text-align: left;
}

.progress-section {
  margin: 15px 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 15px;
}

.progress-section h3 {
  color: var(--accent-color);
  margin-bottom: 10px;
  font-size: 1.2em;
}

.progress-bar-container {
  height: 20px;
  background: #dfe6e9;
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00b894, #00cec9);
  border-radius: 10px;
  transition: width 0.5s ease;
}

.progress-stat {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.letter-grid-mini {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 4px;
  margin: 10px 0;
}

.letter-mini {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: bold;
  border-radius: 6px;
  background: #dfe6e9;
  color: #636e72;
}

.letter-mini.visited {
  background: #00b894;
  color: white;
}

/* Badge Achievement Popup */
.badge-popup {
  position: fixed;
  top: 80px;
  right: 20px;
  background: var(--app-bg);
  color: var(--text-color);
  padding: 15px 25px;
  border-radius: 20px;
  border: 3px solid #00b894;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 5000;
  animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes slideInRight {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.badge-popup .badge-popup-emoji {
  font-size: 2em;
}

.badge-popup .badge-popup-text {
  font-weight: bold;
}

.badge-popup .badge-popup-text small {
  display: block;
  font-weight: normal;
  color: var(--text-color);
  opacity: 0.7;
}

.loading {
  text-align: center;
  color: var(--accent-color);
  font-size: 1.3em;
  margin: 25px 0;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
  .container {
    padding: 20px;
    border-radius: 25px;
  }
  h1 {
    font-size: 2em !important;
  }
  .char-item {
    font-size: 2.2em;
  }
  .characters-grid {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 12px;
  }
  .modal-content {
    padding: 20px;
    border-radius: 20px;
  }
  .memory-grid {
    gap: 8px;
  }
  .badges-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  .letter-grid-mini {
    grid-template-columns: repeat(9, 1fr);
  }
}

.qwerty-layout {
  grid-column: 1;
}

/* ==================== QUANTUM PHYSICS ==================== */
.btn-quantum {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
  color: white !important;
  border: 2px solid #6c5ce7 !important;
}

.btn-quantum:hover {
  background: linear-gradient(135deg, #5a4bd1, #8c7ae6) !important;
  transform: translateY(-3px) scale(1.05) !important;
}
.quantum-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.quantum-tab-btn {
  padding: 8px 18px;
  border: 2px solid rgba(108, 92, 231, 0.3);
  border-radius: 18px;
  background: rgba(108, 92, 231, 0.08);
  color: var(--text-color);
  font-family: "Comic Sans MS", cursive;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
}

.quantum-tab-btn:hover {
  background: rgba(108, 92, 231, 0.2);
  transform: translateY(-2px);
}

.quantum-tab-btn.active {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
  color: white !important;
  border-color: #6c5ce7 !important;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
}

/* Concept Selector Pills */
.quantum-pills-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4px 4px 10px;
  margin-bottom: 12px;
}

.quantum-pill-btn {
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(108, 92, 231, 0.25);
  background: var(--card-bg);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.quantum-pill-btn:hover {
  background: rgba(108, 92, 231, 0.15);
  transform: scale(1.05);
}

.quantum-pill-btn.active {
  background: #6c5ce7;
  color: white;
  border-color: #6c5ce7;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4);
}

.quantum-concept-card {
  background: var(--card-bg);
  border: 2px solid rgba(108, 92, 231, 0.25);
  border-radius: 20px;
  padding: 16px 20px;
  margin: 0 auto 12px;
  max-width: 520px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.quantum-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.quantum-concept-emoji {
  font-size: 2.4em;
  line-height: 1;
}

.quantum-concept-name {
  font-size: 1.4em;
  font-weight: 900;
  color: #6c5ce7;
  font-family: "Comic Sans MS", cursive;
  margin: 0;
}

/* Mini Physics Simulations */
.quantum-atom-sim, .quantum-beam-sim, .quantum-photons-sim, 
.quantum-wave-sim, .quantum-super-sim, .quantum-tunnel-sim, 
.quantum-entangle-sim, .quantum-observe-sim {
  background: rgba(108, 92, 231, 0.08);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.quantum-concept-desc {
  font-size: 1.05em;
  line-height: 1.5;
  color: var(--text-color);
  margin-bottom: 10px;
}

.quantum-concept-analogy {
  background: rgba(255, 215, 0, 0.16);
  border-left: 4px solid #f1c40f;
  border-radius: 0 12px 12px 0;
  padding: 8px 12px;
  font-size: 0.95em;
  color: var(--text-color);
  margin-bottom: 8px;
  text-align: left;
}

.quantum-concept-fact {
  background: rgba(0, 200, 150, 0.12);
  border-left: 4px solid #00b894;
  border-radius: 0 12px 12px 0;
  padding: 8px 12px;
  font-size: 0.92em;
  color: var(--text-color);
  text-align: left;
}

.quantum-concept-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-quantum-nav {
  padding: 8px 18px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
}

.btn-quantum-nav:hover:not(:disabled) {
  transform: scale(1.06);
}

.btn-quantum-audio {
  padding: 8px 16px;
  border-radius: 16px;
  border: 1px solid #fdcb6e;
  background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
  color: #2d3436;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-quantum-audio:hover {
  transform: scale(1.06);
}

.quantum-counter {
  font-size: 14px;
  color: var(--text-color);
  font-weight: 900;
  padding: 0 4px;
}

.quantum-question {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 15px;
}

.quantum-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.quantum-options button {
  padding: 12px 24px;
  border-radius: 15px;
  font-size: 15px;
  min-width: 140px;
}

.quantum-question-count {
  text-align: center;
  margin-top: 15px;
  font-size: 0.9em;
  color: var(--text-color);
  opacity: 0.7;
}

.quantum-quiz-complete {
  text-align: center;
  padding: 30px;
}

.quantum-match-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.quantum-match-card {
  aspect-ratio: 1;
  perspective: 600px;
  cursor: pointer;
}

.quantum-match-card .card-front,
.quantum-match-card .card-back {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transition: transform 0.3s;
}

.quantum-match-card {
  position: relative;
}

.quantum-match-card .card-front {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-size: 2em;
  transform: rotateY(0deg);
}

.quantum-match-card .card-back {
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.15);
  color: var(--text-color);
  transform: rotateY(180deg);
}

.quantum-match-card.flipped .card-front {
  transform: rotateY(180deg);
}

.quantum-match-card.flipped .card-back {
  transform: rotateY(0deg);
}

.quantum-match-card.matched .card-front {
  background: #00b894;
  transform: rotateY(180deg);
}

.quantum-match-card.matched .card-back {
  background: #e8f5e9;
  border-color: #00b894;
  transform: rotateY(0deg);
}

.correct-answer {
  background: #00b894 !important;
  color: white !important;
  border-color: #00b894 !important;
}

.wrong-answer {
  background: #d63031 !important;
  color: white !important;
  border-color: #d63031 !important;
}

/* ==================== 108 TALES OF HINDU MYTHOLOGY ==================== */

.btn-tales {
  background: linear-gradient(135deg, #e84393, #fd79a8) !important;
  color: white !important;
  border: 2px solid #e84393 !important;
}

.btn-tales:hover {
  background: linear-gradient(135deg, #d63384, #e84393) !important;
  transform: translateY(-3px) scale(1.05) !important;
}

.btn-ayurveda {
  background: linear-gradient(135deg, #00b894, #55efc4) !important;
  color: white !important;
  border: 2px solid #00b894 !important;
}

.btn-ayurveda:hover {
  background: linear-gradient(135deg, #00a381, #00b894) !important;
  transform: translateY(-3px) scale(1.05) !important;
}

.modal-tales {
  width: 95%;
  height: 95%;
  max-width: 1200px;
}

.tales-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

.tales-header-title {
  font-size: 1em;
  font-weight: bold;
  color: var(--accent-color);
  white-space: nowrap;
}

.tales-header-progress {
  font-size: 0.85em;
  font-weight: bold;
  color: var(--text-color);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 10px;
  border-radius: 10px;
}

.tales-filter-select {
  padding: 5px 10px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  font-weight: bold;
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  max-width: 160px;
}

.tales-filter-select:focus {
  outline: none;
  border-color: #e84393;
}

.tales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 5px;
}

.tale-card {
  background: var(--card-bg);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tale-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.tale-card.read {
  border-color: #00b894;
  opacity: 0.85;
}

.tale-card-image {
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.tale-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tale-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(232, 67, 147, 0.85);
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: bold;
}

.tale-card-title {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: bold;
  color: var(--text-color);
  line-height: 1.3;
  min-height: 34px;
}

.tale-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tale-navigation {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 4px;
}

.tale-navigation .tale-script-bar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  margin-bottom: 0;
}

.tale-navigation .tale-script-label {
  font-size: 0.7em;
}

.tale-navigation .tale-script-btn {
  padding: 2px 6px;
  font-size: 10px;
}

.tale-back-btn {
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  color: var(--text-color);
}

.tale-back-btn:hover {
  background: var(--card-hover-bg);
}

.tale-nav-title {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--accent-color);
  text-align: center;
  flex: 1;
}

.tale-nav-arrows {
  display: flex;
  gap: 6px;
}

.tale-nav-arrows button {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--text-color);
}

.tale-nav-arrows button:hover {
  background: var(--card-hover-bg);
}

.tale-script-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.tale-script-label {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--text-color);
  opacity: 0.6;
}

.tale-script-btn {
  padding: 4px 10px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text-color);
  font-family: "Comic Sans MS", cursive;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tale-script-btn:hover {
  background: var(--card-hover-bg);
  transform: translateY(-1px);
}

.tale-script-btn.active {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: white;
  border-color: #6c5ce7;
}

.tale-script-transliterated {
  font-family: "Noto Sans Devanagari", "Mangal", "Arial Unicode MS", sans-serif;
  font-size: 1em;
  line-height: 1.7;
  opacity: 0.9;
}

.tale-detail-image {
  max-width: 300px;
  margin: 0 auto 12px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tale-detail-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.tale-detail-text {
  text-align: left;
  padding: 12px 15px;
  background: var(--card-bg);
  border-radius: 14px;
  margin: 10px 0;
  font-size: 1.05em;
  line-height: 1.7;
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tale-detail-text .tale-sentence {
  padding: 6px 0;
  transition: background 0.3s;
  border-radius: 6px;
}

.tale-detail-text .tale-sentence.highlighted {
  background: rgba(232, 67, 147, 0.15);
  font-weight: bold;
}

.tale-lessons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.tale-moral {
  background: rgba(255, 215, 0, 0.12);
  border-left: 4px solid #f9ca24;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95em;
  line-height: 1.5;
}

.tale-reallife {
  background: rgba(0, 200, 150, 0.1);
  border-left: 4px solid #00b894;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95em;
  line-height: 1.5;
}

.tale-words {
  background: rgba(116, 185, 255, 0.12);
  border-left: 4px solid #74b9ff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95em;
  line-height: 1.5;
}

.tale-significance {
  background: rgba(162, 155, 254, 0.12);
  border-left: 4px solid #a29bfe;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9em;
  line-height: 1.5;
}

.tale-lesson-icon {
  margin-right: 6px;
  font-size: 1.1em;
}

.tale-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
}

@media (max-width: 600px) {
  .tales-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tale-card-image {
    height: 90px;
  }
  .tale-card-title {
    font-size: 11px;
    padding: 6px 8px;
  }
  .tale-nav-title {
    font-size: 0.9em;
  }
  .tales-header {
    flex-wrap: wrap;
    justify-content: center;
  }
  .tale-script-btn {
    font-size: 10px;
    padding: 3px 7px;
  }
}

/* ==================== WORD EXPLORE & STORY MODAL ==================== */
.btn-word-explore {
  margin-top: 14px;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #6c5ce7, #fd79a8);
  color: white;
  border: none;
  border-radius: 16px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.35);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-word-explore:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(253, 121, 168, 0.45);
  background: linear-gradient(135deg, #fd79a8, #6c5ce7);
}

.modal-word-story {
  max-width: 680px !important;
  width: 92% !important;
  max-height: 90vh !important;
  border: 4px solid var(--accent-color);
  background: var(--app-bg);
  padding: 24px !important;
  border-radius: 30px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35) !important;
}

.word-story-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.word-story-banner {
  width: 100%;
  max-height: 180px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  margin-bottom: 6px;
}

.word-story-banner img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.word-story-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.word-story-title {
  font-size: 2em;
  font-weight: 900;
  color: var(--accent-color);
  margin: 0;
}

.word-story-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: bold;
  background: rgba(255, 107, 107, 0.15);
  color: var(--accent-color);
  text-transform: capitalize;
}

.word-story-translations-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.word-story-pill {
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  color: var(--text-color);
}

.word-story-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.word-tab-btn {
  padding: 8px 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: var(--card-bg);
  color: var(--text-color);
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.word-tab-btn:hover {
  transform: translateY(-2px);
  background: var(--card-hover-bg);
}

.word-tab-btn.active {
  background: linear-gradient(135deg, var(--accent-color), #fd79a8);
  color: white;
  border-color: var(--accent-color);
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.word-story-body {
  min-height: 180px;
  margin-bottom: 18px;
  text-align: left;
}

/* Rhyme Styling */
.word-rhyme-card {
  background: linear-gradient(135deg, rgba(255, 230, 109, 0.25), rgba(255, 107, 107, 0.15));
  border: 3px dashed #f9ca24;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}

.word-rhyme-card h3 {
  color: #e67e22;
  margin-bottom: 14px;
  font-size: 1.3em;
}

.word-rhyme-line {
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1.8;
  color: var(--text-color);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.3s;
}

.word-rhyme-line.highlighted {
  background: rgba(255, 230, 109, 0.7);
  color: #2d3436;
}

/* Story Styling */
.word-story-card {
  background: var(--card-bg);
  border: 2px solid rgba(108, 92, 231, 0.2);
  border-left: 6px solid #6c5ce7;
  border-radius: 18px;
  padding: 20px;
}

.word-story-card h3 {
  color: #6c5ce7;
  margin-bottom: 12px;
  font-size: 1.3em;
}

.word-story-sentence {
  font-size: 1.1em;
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.3s;
}

.word-story-sentence.highlighted {
  background: rgba(108, 92, 231, 0.15);
  font-weight: bold;
}

.word-story-moral {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(46, 204, 113, 0.15);
  border-radius: 12px;
  font-size: 0.95em;
  font-weight: bold;
  color: #27ae60;
  border-left: 4px solid #2ecc71;
}

/* Essay Styling */
.word-essay-card {
  background: var(--card-bg);
  border: 2px solid rgba(0, 184, 148, 0.2);
  border-left: 6px solid #00b894;
  border-radius: 18px;
  padding: 20px;
}

.word-essay-card h3 {
  color: #00b894;
  margin-bottom: 12px;
  font-size: 1.3em;
}

.word-essay-para {
  font-size: 1.05em;
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: 10px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.3s;
}

.word-essay-para.highlighted {
  background: rgba(0, 184, 148, 0.15);
  font-weight: bold;
}

.word-essay-points {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.word-essay-point {
  font-size: 0.95em;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  color: var(--text-color);
}

/* Facts Styling */
.word-fact-card {
  background: var(--card-bg);
  border: 2px solid rgba(253, 203, 110, 0.3);
  border-left: 6px solid #fdcb6e;
  border-radius: 18px;
  padding: 20px;
}

.word-fact-card h3 {
  color: #e17055;
  margin-bottom: 12px;
  font-size: 1.3em;
}

.word-fact-item {
  font-size: 1.05em;
  line-height: 1.6;
  color: var(--text-color);
  padding: 8px 12px;
  background: rgba(253, 203, 110, 0.12);
  border-radius: 12px;
  margin-bottom: 10px;
}

.word-story-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==================== VISITOR ANALYTICS & GEO MODAL ==================== */
.modal-analytics .modal-analytics-content {
  max-width: 1050px !important;
  width: 95% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 24px 30px !important;
  background: var(--app-bg) !important;
}

.analytics-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.analytics-modal-header h2 {
  font-size: 1.6em;
  color: var(--title-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-live-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.04);
  padding: 8px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 0.9em;
  color: var(--text-color);
  flex-wrap: wrap;
}

.status-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00b894;
  box-shadow: 0 0 8px #00b894;
  display: inline-block;
}

.status-indicator-dot.dev-mode {
  background: #fdcb6e;
  box-shadow: 0 0 8px #fdcb6e;
}

.syncing-badge {
  margin-left: auto;
  font-size: 0.85em;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(253, 203, 110, 0.3);
  color: #d63031;
}

.syncing-badge.synced {
  background: rgba(0, 184, 148, 0.15);
  color: #00b894;
}

.syncing-badge.dev {
  background: rgba(253, 203, 110, 0.2);
  color: #e17055;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border: 2px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-4px);
}

.kpi-icon {
  font-size: 2em;
  margin-bottom: 6px;
}

.kpi-val {
  font-size: 2em;
  font-weight: 900;
  color: var(--text-color);
  line-height: 1.1;
}

.kpi-lbl {
  font-size: 0.9em;
  color: var(--text-color);
  opacity: 0.75;
  margin-top: 4px;
  font-weight: bold;
}

.kpi-visits { border-top: 6px solid #0984e3; }
.kpi-uniques { border-top: 6px solid #00b894; }
.kpi-countries { border-top: 6px solid #6c5ce7; }
.kpi-devices { border-top: 6px solid #e17055; }

.analytics-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.analytics-card {
  background: var(--card-bg);
  padding: 20px 24px;
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  border: 2px solid rgba(0, 0, 0, 0.05);
}

.analytics-card h3 {
  font-size: 1.25em;
  color: var(--text-color);
  margin-bottom: 14px;
  font-weight: bold;
}

.analytics-country-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.country-stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05em;
}

.country-flag {
  font-size: 1.6em;
  flex-shrink: 0;
}

.country-name {
  width: 130px;
  font-weight: bold;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-bar-wrap {
  flex: 1;
  height: 12px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.country-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0984e3, #00cec9);
  border-radius: 10px;
  transition: width 0.6s ease;
}

.country-count {
  font-size: 0.9em;
  font-weight: bold;
  color: var(--text-color);
  opacity: 0.85;
  width: 75px;
  text-align: right;
  flex-shrink: 0;
}

.city-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.city-chip {
  background: rgba(0, 0, 0, 0.05);
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 0.95em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-color);
}

.city-badge {
  background: var(--accent-color);
  color: white;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: bold;
}

.device-bar-container {
  display: flex;
  height: 38px;
  border-radius: 14px;
  overflow: hidden;
  font-size: 0.9em;
  font-weight: bold;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.device-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
  transition: width 0.5s ease;
}

.dev-mobile { background: #00b894; }
.dev-desktop { background: #0984e3; }
.dev-tablet { background: #fdcb6e; color: #2d3436; }

.analytics-log-table-wrap {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}

.analytics-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.analytics-log-table th {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-color);
  padding: 8px 12px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}

.analytics-log-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--text-color);
}

.analytics-footer-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-analytics-refresh, .btn-analytics-export {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}

.btn-analytics-refresh {
  background: linear-gradient(135deg, #0984e3, #74b9ff);
  color: white;
}

.btn-analytics-export {
  background: linear-gradient(135deg, #00b894, #55efc4);
  color: #2d3436;
}

.btn-analytics-refresh:hover, .btn-analytics-export:hover {
  transform: translateY(-2px);
}

.analytics-empty {
  color: var(--text-color);
  opacity: 0.6;
  font-style: italic;
  padding: 16px 0;
}

/* ===== Inventions in Motion ===== */
.btn-inventions {
  background: linear-gradient(135deg, #e17055, #fdcb6e) !important;
  color: white !important;
  border: 2px solid #e17055 !important;
}
.btn-inventions:hover {
  background: linear-gradient(135deg, #d35400, #e17055) !important;
  transform: translateY(-3px) scale(1.05) !important;
}

.invention-toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.invention-slide {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.invention-emoji {
  font-size: 3em;
}
.invention-title {
  font-size: 1.6em;
  font-weight: bold;
  color: var(--accent-color);
  margin: 6px 0;
}
.invention-image {
  max-width: 320px;
  margin: 10px auto;
  border-radius: 14px;
  overflow: hidden;
}
.invention-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.invention-year {
  font-size: 0.95em;
  opacity: 0.7;
  margin-bottom: 10px;
}
.invention-desc {
  line-height: 1.6;
  margin-bottom: 10px;
}
.invention-analogy,
.invention-fact {
  background: rgba(108, 92, 231, 0.1);
  border-left: 4px solid #6c5ce7;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
  margin: 8px auto;
  max-width: 560px;
  line-height: 1.5;
  font-size: 0.95em;
}
.invention-fact {
  background: rgba(255, 215, 0, 0.12);
  border-left-color: #f9ca24;
}
.invention-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}
.invention-nav button {
  padding: 8px 18px;
  border-radius: 15px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
}
.invention-nav button:hover {
  background: var(--card-hover-bg);
}
.invention-nav span {
  font-size: 0.9em;
  color: var(--text-color);
  font-weight: bold;
}
.invention-close-btn {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
}
.invention-close-btn:hover {
  background: var(--card-hover-bg);
}

/* ===== 500 Fun Facts ===== */
.btn-funfacts {
  background: linear-gradient(135deg, #00cec9, #81ecec) !important;
  color: #2d3436 !important;
  border: 2px solid #00cec9 !important;
}
.btn-funfacts:hover {
  background: linear-gradient(135deg, #00b894, #00cec9) !important;
  transform: translateY(-3px) scale(1.05) !important;
}

.fact-filter-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fact-filter-select {
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-family: "Comic Sans MS", cursive;
  border: 2px solid rgba(0, 0, 0, 0.15);
  background: var(--card-bg);
  color: var(--text-color);
}
.fact-counter {
  font-weight: bold;
  font-size: 0.95em;
  color: var(--accent-color);
}
.fact-card-wrap {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}
.fact-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 25px 30px;
  text-align: center;
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  max-width: 640px;
  width: 100%;
}
.fact-card-emoji {
  font-size: 3.2em;
}
.fact-card-category {
  display: inline-block;
  margin: 8px 0;
  padding: 3px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: white;
  font-size: 0.85em;
  font-weight: bold;
}
.fact-card-text {
  font-size: 1.15em;
  line-height: 1.5;
}
.fact-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.fact-nav button {
  padding: 8px 18px;
  border-radius: 15px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
}
.fact-nav button:hover {
  background: var(--card-hover-bg);
}
.fact-nav .btn-listen {
  background: #0984e3;
  color: white;
  border: none;
}
.fact-nav .btn-listen:hover {
  background: #0a6ec4;
}

@media (max-width: 600px) {
  .invention-image img {
    height: 150px;
  }
  .invention-title {
    font-size: 1.3em;
  }
  .fact-card {
    padding: 20px;
  }
}

/* ==================== SHERU SAFARI MASCOT COMPANION ==================== */
.sheru-mascot-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", cursive, sans-serif;
  filter: none !important;
  opacity: 1 !important;
}

.sheru-speech-bubble {
  pointer-events: auto;
  background: #ffffff;
  color: #1e293b;
  padding: 12px 18px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 15px rgba(253, 203, 110, 0.4);
  font-size: 14px;
  font-weight: 800;
  max-width: 260px;
  margin-bottom: 10px;
  position: relative;
  border: 3px solid #fdcb6e;
  animation: sheruBubblePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: none !important;
  opacity: 1 !important;
  line-height: 1.45;
}

.sheru-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  right: 24px;
  border-width: 9px 8px 0 8px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

@keyframes sheruBubblePop {
  0% { transform: scale(0.6) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.sheru-avatar {
  pointer-events: auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(253, 203, 110, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.sheru-avatar:hover {
  transform: scale(1.1) rotate(5deg);
}

.sheru-avatar:active {
  transform: scale(0.92);
}

.sheru-face {
  font-size: 34px;
  line-height: 1;
}

.sheru-badge {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  background: #d63031;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: -2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sheru-toggle-btn {
  pointer-events: auto;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid white;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}

.sheru-avatar.mood-cheer {
  animation: sheruBounce 0.6s ease infinite alternate;
}

.sheru-avatar.mood-thinking {
  animation: sheruTilt 1.2s ease infinite alternate;
}

@keyframes sheruBounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-12px) scale(1.08); }
}

@keyframes sheruTilt {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

.sheru-mascot-wrap.minimized .sheru-avatar {
  transform: scale(0.65);
  opacity: 0.7;
}

/* ==================== ENHANCED TRACING & BRUSHES ==================== */
.tracing-brush-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.btn-brush-chip {
  padding: 6px 14px;
  border-radius: 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: var(--card-bg);
  color: var(--text-color);
  font-family: inherit;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-brush-chip.active {
  background: linear-gradient(135deg, #ff7675, #fab1a0);
  color: white;
  border-color: #ff7675;
  transform: scale(1.06);
}

.star-burst-reward {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #f9ca24;
  box-shadow: 0 12px 36px rgba(249, 202, 36, 0.6);
  padding: 20px 30px;
  border-radius: 24px;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: #e67e22;
  z-index: 10;
  display: none;
}

.star-burst-anim {
  animation: starBurst 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes starBurst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ==================== SCIENCE PLAYGROUND MODAL & LABS ==================== */
.modal-science-content {
  max-width: 780px !important;
  width: 95%;
  background: linear-gradient(to bottom, #1e293b, #0f172a) !important;
  color: #f8fafc !important;
  border: 2px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

.science-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.science-modal-header h2 {
  font-size: 1.6em;
  color: #38bdf8;
  margin: 0;
}

.science-tabs-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.lab-tab-btn {
  padding: 10px 18px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(30, 41, 59, 0.8);
  color: #94a3b8;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.lab-tab-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.lab-tab-btn.active {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
  transform: scale(1.03);
}

.science-lab-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
}

.lab-header h3 {
  color: #f1f5f9;
  font-size: 1.3em;
  margin: 0 0 6px;
}

.lab-header p {
  color: #94a3b8;
  font-size: 0.95em;
  margin: 0 0 16px;
}

/* Circuit Board */
.circuit-board {
  background: #020617;
  border: 2px dashed rgba(56, 189, 248, 0.4);
  border-radius: 16px;
  padding: 25px;
  margin: 15px 0;
}

.circuit-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 15px;
}

.component-box {
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.component-box:hover {
  transform: scale(1.05);
}

.comp-icon {
  font-size: 2.4em;
  margin-bottom: 4px;
}

.comp-label {
  font-size: 12px;
  font-weight: bold;
  color: #cbd5e1;
}

.bulb-box.bulb-lit {
  border-color: #facc15;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), #1e293b);
  box-shadow: 0 0 35px rgba(250, 204, 21, 0.6);
}

.switch-box.closed {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.circuit-wire {
  height: 4px;
  background: #334155;
  flex: 1;
  min-width: 30px;
  border-radius: 2px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.circuit-wire.active-wire {
  background: #facc15;
  box-shadow: 0 0 10px #facc15;
}

/* Matter Stage */
.matter-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
}

.matter-badge {
  background: #2ed573;
  color: white;
  padding: 6px 18px;
  border-radius: 14px;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 12px;
}

#matterCanvas {
  background: #090d16;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 100%;
}

.temp-slider-wrap {
  margin: 15px 0;
  text-align: center;
}

.science-slider {
  width: 100%;
  max-width: 380px;
  margin: 10px 0;
  accent-color: #38bdf8;
}

.temp-marks {
  display: flex;
  justify-content: space-between;
  max-width: 380px;
  margin: 0 auto;
  font-size: 13px;
  font-weight: bold;
}

/* Space Stage */
.space-stage {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

#spaceCanvas {
  background: #0b101b;
  border-radius: 18px;
  max-width: 100%;
  cursor: crosshair;
}

.planet-inspector {
  margin: 15px 0;
}

.inspector-card {
  background: #1e293b;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
}

.inspector-card h4 {
  color: #38bdf8;
  margin: 0 0 6px;
  font-size: 1.2em;
}

.gravity-calc-box {
  margin-top: 8px;
  padding: 8px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 10px;
  font-weight: bold;
}

/* Density Tank */
.density-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.btn-liquid-chip {
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.btn-liquid-chip.active {
  background: #0284c7;
  border-color: #38bdf8;
}

.tank-wrapper {
  margin: 15px 0;
}

.density-tank {
  height: 240px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top: none;
  border-radius: 0 0 18px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.3);
}

.tank-surface-line {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  padding-left: 10px;
}

.tank-items-container {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.dropped-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2em;
  transition: top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropped-item small {
  font-size: 9px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: bold;
}

.items-shelf {
  background: rgba(30, 41, 59, 0.6);
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
}

.shelf-title {
  font-size: 13px;
  font-weight: bold;
  color: #94a3b8;
  display: block;
  margin-bottom: 8px;
}

.shelf-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-drop-item {
  padding: 8px 12px;
  border-radius: 12px;
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-drop-item:hover {
  transform: translateY(-2px);
  background: #334155;
}

.lab-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.btn-lab-action {
  padding: 10px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: white;
  border: none;
  font-family: "Comic Sans MS", cursive;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-lab-action:hover {
  transform: scale(1.04);
}

.science-fact-banner {
  background: rgba(56, 189, 248, 0.12);
  border-left: 4px solid #38bdf8;
  padding: 10px 14px;
  border-radius: 0 12px 12px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #e0f2fe;
}

/* Tactile Bouncy Scale for Kids */
button:active, .letter-card:active, .memory-card:active {
  transform: scale(0.93) !important;
}

/* ==================== KARAOKE WORD HIGHLIGHTING & SENTENCE SHOWCASE ==================== */
.btn-science-nav {
  background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
  color: #ffffff !important;
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4) !important;
  font-weight: 900 !important;
}

.btn-science-nav:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.6) !important;
}

.tracing-sentence-card {
  background: var(--card-bg);
  border: 2px solid rgba(253, 203, 110, 0.5);
  border-radius: 18px;
  padding: 12px 18px;
  margin: 10px auto 14px;
  max-width: 440px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.sentence-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sentence-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sentence-emoji {
  font-size: 2em;
  line-height: 1;
}

.sentence-tokens {
  font-size: 1.15em;
  font-weight: bold;
  color: var(--text-color);
  line-height: 1.6;
}

.karaoke-word {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.karaoke-word:hover {
  background: rgba(253, 203, 110, 0.3);
  transform: scale(1.08);
}

.karaoke-word.karaoke-active {
  background: linear-gradient(135deg, #fbc531, #f5cd79) !important;
  color: #2f3542 !important;
  box-shadow: 0 0 16px rgba(251, 197, 49, 0.8), 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.22) translateY(-2px) !important;
  font-weight: 900 !important;
  border-radius: 10px;
}

.btn-sentence-audio {
  padding: 5px 12px;
  border-radius: 12px;
  border: 1px solid #fdcb6e;
  background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
  color: #2d3436;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sentence-audio:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(253, 203, 110, 0.5);
}

.sentence-translit {
  font-size: 13px;
  color: var(--accent-color);
  background: rgba(255, 107, 107, 0.1);
  padding: 3px 12px;
  border-radius: 10px;
  font-weight: 600;
}

/* Universal Karaoke Word Highlighting Token */
.karaoke-token {
  display: inline;
  padding: 1px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.karaoke-token:hover {
  background: rgba(253, 203, 110, 0.25);
  border-radius: 6px;
}

.karaoke-token.karaoke-active {
  background: linear-gradient(135deg, #fbc531, #f5cd79) !important;
  color: #2d3436 !important;
  box-shadow: 0 0 14px rgba(251, 197, 49, 0.85) !important;
  font-weight: 900 !important;
  border-radius: 6px;
  display: inline-block;
  transform: scale(1.12) translateY(-1px) !important;
}





/* ==================== SCIENCE PLAYGROUND 8 MICRO-LABS ==================== */
.science-tabs-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}

.lab-tab-btn {
  padding: 8px 14px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  font-family: "Comic Sans MS", cursive;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lab-tab-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  transform: translateY(-2px);
}

.lab-tab-btn.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: white !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

/* Solar System Enhanced Cards */
.space-pills-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.space-pill-btn {
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.space-pill-btn:hover {
  background: #334155;
  transform: scale(1.05);
}

.space-pill-btn.active {
  background: #0284c7;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.inspector-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.gravity-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

.planet-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin: 10px 0;
  text-align: left;
}

.spec-box {
  background: rgba(15, 23, 42, 0.6);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-label {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 2px;
}

.spec-val {
  display: block;
  font-size: 13px;
  color: #f1f5f9;
  font-weight: bold;
}

.highlight-weight {
  color: #f59e0b;
}

.planet-uniqueness-box {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.12);
  border-left: 4px solid #f59e0b;
  border-radius: 0 10px 10px 0;
  color: #f1f5f9;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

/* Optics & Prism Lab */
.optics-materials-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.optics-stage {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

#opticsCanvas {
  background: #0b1120;
  border-radius: 18px;
  max-width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.optics-controls-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.rgb-mix-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-rgb {
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-rgb.active-red { background: #ef4444 !important; color: white !important; }
.btn-rgb.active-green { background: #22c55e !important; color: white !important; }
.btn-rgb.active-blue { background: #0284c7 !important; color: white !important; }

.spectrum-ribbon {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0;
}

.vibgyor-badge {
  padding: 4px 8px;
  border-radius: 8px;
  color: white;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Virtual Microscope */
.micro-slides-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.microscope-viewport-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.microscope-circle-lens {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 8px solid #334155;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  background: #0f172a;
}

#microCanvas {
  width: 100%;
  height: 100%;
}

.reticle-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-left: 1px dashed rgba(0, 0, 0, 0.3);
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.micro-controls-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.zoom-turret {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-zoom {
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1e293b;
  color: #f1f5f9;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}

.btn-zoom.active {
  background: #0284c7;
  border-color: #38bdf8;
}

.slide-structures-shelf {
  background: rgba(30, 41, 59, 0.6);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 10px 0;
}

.structure-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.structure-badge:hover {
  background: rgba(2, 132, 199, 0.4);
  transform: scale(1.06);
}

/* Anatomy Lab */
.anatomy-layers-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.anatomy-viewport {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.body-xray-card {
  width: 100%;
  max-width: 440px;
  background: #0b1120;
  border: 2px solid rgba(56, 189, 248, 0.3);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.xray-figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.bone, .organ, .muscle-group {
  width: 90%;
  padding: 10px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skeleton-view .bone {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #f1f5f9;
}

.organs-view .organ {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.organ-row {
  display: flex;
  gap: 10px;
  width: 90%;
}

.organ-row .organ {
  width: 50%;
}

.vessels-view .artery-pulse {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #f87171;
  padding: 12px;
  border-radius: 12px;
  width: 90%;
  font-weight: bold;
}

.vessels-view .heart-pulse-central {
  background: rgba(236, 72, 153, 0.2);
  border: 1px solid #ec4899;
  color: #f472b6;
  padding: 14px;
  border-radius: 14px;
  width: 90%;
  font-size: 15px;
  font-weight: bold;
  animation: heartPulse 1.2s infinite;
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.vessels-view .vein-pulse {
  background: rgba(2, 132, 199, 0.2);
  border: 1px solid #0284c7;
  color: #38bdf8;
  padding: 12px;
  border-radius: 12px;
  width: 90%;
  font-weight: bold;
}

.muscle-view .muscle-group {
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid #f97316;
  color: #fdba74;
}

/* Plant Lab */
.plant-stage-stepper {
  margin-bottom: 12px;
}

.stepper-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.btn-step-pill {
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.btn-step-pill.active {
  background: #16a34a;
  border-color: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.plant-terrarium-stage {
  height: 240px;
  background: linear-gradient(to bottom, #38bdf8 0%, #bae6fd 60%, #78350f 60%, #451a03 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: 3px solid rgba(255, 255, 255, 0.3);
  margin: 12px 0;
}

.sun-glow {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2.8em;
  filter: drop-shadow(0 0 15px #facc15);
}

.plant-visual-tree {
  margin-bottom: 2px;
  z-index: 2;
}

.plant-sprite {
  font-size: 3.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.plant-sprite small {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  margin-top: 4px;
}

.soil-ground {
  width: 100%;
  height: 40%;
  background: #451a03;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.soil-roots-layer {
  color: #fed7aa;
  font-size: 12px;
  font-weight: bold;
}

.plant-care-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.photosynthesis-formula-banner {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.5;
  margin: 10px 0;
}


/* ==================== ANATOMY INSPECTOR & ACTIVE ORGAN CARD ==================== */
.active-organ-selected {
  border: 2px solid #38bdf8 !important;
  background: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6) !important;
  transform: scale(1.03);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.active-organ-btn {
  background: #38bdf8 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
}

.organ-inspector-panel {
  margin: 12px 0;
  width: 100%;
}

.organ-inspector-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 2px solid #38bdf8;
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.25);
  animation: slideDown 0.3s ease-out;
  text-align: left;
}

.organ-inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.organ-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.organ-avatar {
  font-size: 2.2em;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  display: inline-block;
  animation: bounceSoft 2s infinite ease-in-out;
}

.organ-header-title h4 {
  margin: 0;
  font-size: 1.3em;
  color: #38bdf8;
  font-weight: 800;
}

.organ-role-tag {
  display: inline-block;
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  margin-top: 3px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.btn-organ-speak {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border: 1px solid #38bdf8;
  padding: 8px 16px;
  border-radius: 14px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-organ-speak:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.5);
  background: linear-gradient(135deg, #0369a1, #0284c7);
}

.btn-organ-speak:active {
  transform: translateY(1px);
}

.organ-inspector-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.organ-fact-display {
  font-size: 14.5px;
  line-height: 1.6;
  color: #f1f5f9;
  background: rgba(0, 0, 0, 0.35);
  padding: 12px 14px;
  border-radius: 12px;
  border-left: 4px solid #38bdf8;
}

.organ-specs-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.organ-spec-chip {
  flex: 1;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.organ-spec-chip .osc-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.organ-spec-chip .osc-val {
  font-size: 13px;
  color: #fed7aa;
  font-weight: 700;
}


/* ==================== ANATOMY SPLIT SIDE-BY-SIDE LAYOUT ==================== */
.anatomy-split-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
  margin: 14px 0;
  text-align: left;
}

.anatomy-left-col {
  display: flex;
  justify-content: center;
}

.anatomy-left-col .body-xray-card {
  max-width: 280px;
  padding: 14px 12px;
  background: #0b1120;
}

.anatomy-left-col .bone,
.anatomy-left-col .organ,
.anatomy-left-col .muscle-group {
  padding: 8px 10px;
  font-size: 13px;
}

.anatomy-right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.anatomy-right-col .organ-inspector-panel {
  margin: 0;
}

@media (max-width: 720px) {
  .anatomy-split-wrap {
    grid-template-columns: 1fr;
  }
  .anatomy-left-col .body-xray-card {
    max-width: 100%;
  }
}


/* ==================== ANATOMY ROW-AFTER-ROW STACKED LAYOUT ==================== */
.anatomy-viewport {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.anatomy-viewport .body-xray-card {
  width: 100%;
  max-width: 480px;
  background: #0b1120;
  border: 2px solid rgba(56, 189, 248, 0.3);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.anatomy-lab-wrap .organ-inspector-panel {
  max-width: 600px;
  margin: 14px auto;
  width: 100%;
}


/* ==================== 1. CHEMISTRY & PERIODIC TABLE STYLES ==================== */
.chem-cat-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}

.btn-chem-cat {
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(30, 41, 59, 0.7);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-chem-cat:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  transform: translateY(-2px);
}

.btn-chem-cat.active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.chem-elements-shelf {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  margin-bottom: 16px;
}

.chem-element-chip {
  flex: 0 0 76px;
  height: 86px;
  background: #0f172a;
  border: 2px solid #38bdf8;
  border-radius: 14px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.chem-element-chip:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4);
}

.chem-element-chip.active-element {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.8) !important;
  transform: scale(1.1);
}

.chip-num {
  font-size: 10px;
  color: #94a3b8;
  font-weight: bold;
  align-self: flex-start;
  padding-left: 4px;
}

.chip-sym {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.chip-name {
  font-size: 9.5px;
  color: #e2e8f0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}

.chip-emoji {
  font-size: 12px;
}

.chem-inspector-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 2px solid #38bdf8;
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: left;
}

.chem-card-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: center;
}

.bohr-atom-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #020617;
  border-radius: 18px;
  padding: 10px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

#bohrCanvas {
  max-width: 100%;
}

.bohr-stage-title {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
}

.chem-details-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chem-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.chem-symbol-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2px solid #38bdf8;
  border-radius: 14px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.badge-z { font-size: 10px; }
.badge-sym { font-size: 22px; line-height: 1; }

.chem-cat-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid;
  margin-top: 4px;
}

.chem-fact-box {
  background: rgba(0, 0, 0, 0.35);
  border-left: 4px solid #38bdf8;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: #f1f5f9;
  line-height: 1.5;
}

.chem-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chem-spec-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.csp-label { font-size: 11px; color: #94a3b8; font-weight: 600; }
.csp-val { font-size: 13px; color: #fed7aa; font-weight: bold; }

.btn-add-to-beaker {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
  align-self: flex-start;
}

.btn-add-to-beaker:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

.chem-crafting-cauldron {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 18px 22px;
  text-align: left;
}

.cauldron-header h4 { margin: 0 0 4px; color: #38bdf8; font-size: 1.2em; }
.cauldron-header p { margin: 0 0 12px; color: #94a3b8; font-size: 13px; }

.beaker-drop-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #020617;
  border: 2px dashed rgba(56, 189, 248, 0.4);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.beaker-flask {
  flex: 1;
  min-height: 54px;
  display: flex;
  align-items: center;
}

.beaker-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.beaker-empty-msg {
  color: #64748b;
  font-size: 13px;
  font-style: italic;
}

.beaker-chip {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid #38bdf8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.beaker-chip:hover {
  transform: scale(1.1);
  background: #ef4444;
}

.beaker-drop-zone.reacting-pulse {
  animation: beakerPulse 0.5s ease-in-out;
  border-color: #f59e0b !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6), inset 0 0 15px rgba(245, 158, 11, 0.4);
}

@keyframes beakerPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

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

.btn-craft-fuse {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: all 0.2s ease;
}

.btn-craft-fuse:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);
}

.btn-craft-clear {
  background: #334155;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

.quick-add-shelf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.q-label { font-size: 12px; font-weight: bold; color: #94a3b8; }
.q-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.btn-q-add {
  padding: 5px 10px;
  border-radius: 10px;
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.btn-q-add:hover { background: #0284c7; border-color: #38bdf8; }

.craft-recipe-result {
  margin-top: 14px;
  border-radius: 16px;
  padding: 14px 18px;
  animation: slideDown 0.3s ease-out;
}

.recipe-success {
  background: rgba(16, 185, 129, 0.2);
  border: 2px solid #10b981;
  color: #ecfdf5;
}

.recipe-mystery {
  background: rgba(239, 68, 68, 0.15);
  border: 2px solid #ef4444;
  color: #fee2e2;
}

.result-badge-row { display: flex; align-items: center; gap: 14px; }
.result-emoji { font-size: 2.5em; }
.result-badge-row h3 { margin: 0 0 4px; color: #38bdf8; }
.result-badge-row p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.recipe-fact { margin-top: 8px; font-size: 13px; color: #fed7aa; }

@media (max-width: 720px) {
  .chem-card-grid { grid-template-columns: 1fr; }
}

/* ==================== 2. NUMBERS & MATH WIZARD STYLES ==================== */
.math-tabs-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

.btn-math-tab {
  padding: 8px 16px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(30, 41, 59, 0.7);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-math-tab.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border-color: #fcd34d;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.abacus-stage-card {
  background: rgba(15, 23, 42, 0.8);
  border: 2px solid #f59e0b;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.abacus-total-banner {
  background: #020617;
  border: 2px solid #f59e0b;
  border-radius: 16px;
  padding: 12px 20px;
  margin: 12px auto 20px;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.abacus-val-label { font-size: 13px; color: #94a3b8; font-weight: bold; }
.abacus-val-display { font-size: 28px; font-weight: 900; color: #f59e0b; letter-spacing: 2px; }
.ramanujan-badge { background: #3b82f6; color: white; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; }

.abacus-frame {
  background: #78350f;
  border: 8px solid #451a03;
  border-radius: 18px;
  padding: 16px;
  max-width: 500px;
  margin: 0 auto 16px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 10px 25px rgba(0,0,0,0.4);
}

.abacus-wires-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.abacus-wire-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.wire-beads-stack {
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
  align-items: center;
}

.wire-rod-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #d4d4d8;
  transform: translateX(-50%);
  z-index: 1;
  border-radius: 2px;
}

.beads-upper-active, .beads-lower-idle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 2;
}

.wire-divider {
  width: 100%;
  height: 6px;
  background: #451a03;
  border-radius: 3px;
  z-index: 3;
}

.abacus-bead {
  width: 42px;
  height: 18px;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: transform 0.15s ease;
}

.abacus-bead:hover { transform: scale(1.15); }
.bead-idle { background: #1e293b; border: 2px solid; opacity: 0.7; }

.wire-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.btn-wire-step {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #334155;
  color: white;
  border: none;
  font-weight: 900;
  cursor: pointer;
}

.wire-digit { font-size: 20px; font-weight: 900; }
.wire-label { font-size: 11px; color: #cbd5e1; font-weight: bold; margin-top: 4px; }

.abacus-presets-bar {
  margin-top: 14px;
}

.preset-title { font-size: 12px; color: #94a3b8; font-weight: bold; margin-bottom: 8px; display: block; }
.preset-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.btn-preset {
  padding: 6px 12px;
  border-radius: 12px;
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.btn-preset:hover { background: #f59e0b; color: #020617; }

/* Heritage Numbers */
.numbers-quick-shelf {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  margin-bottom: 16px;
}

.btn-num-chip {
  flex: 0 0 64px;
  height: 64px;
  border-radius: 14px;
  background: #0f172a;
  border: 2px solid rgba(56, 189, 248, 0.4);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.btn-num-chip.active-num {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.7);
  transform: scale(1.08);
}

.num-en { font-size: 18px; font-weight: 900; color: #38bdf8; }
.num-hi { font-size: 13px; color: #fed7aa; }

.active-number-card {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid #f59e0b;
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 18px;
  text-align: left;
}

.anc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.anc-avatar { display: flex; align-items: center; gap: 14px; }
.anc-emoji { font-size: 2.6em; background: rgba(255,255,255,0.06); padding: 6px 12px; border-radius: 16px; }
.anc-avatar h2 { margin: 0; color: #f59e0b; font-size: 1.6em; }
.anc-names { font-size: 13px; color: #94a3b8; font-weight: bold; }

.anc-fact-box {
  background: rgba(0,0,0,0.35);
  border-left: 4px solid #f59e0b;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  color: #f1f5f9;
  line-height: 1.5;
}

.indian-sys-table-wrap {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 18px;
  padding: 16px;
  text-align: left;
}

.indian-sys-table-wrap h4 { margin: 0 0 12px; color: #38bdf8; }
.indian-sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sys-card { background: #020617; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sys-hindi { font-size: 14px; font-weight: bold; color: #f59e0b; }
.sys-name { font-size: 12px; color: #cbd5e1; }
.sys-val { font-size: 11.5px; color: #94a3b8; font-weight: bold; }

/* Vedic Math */
.vedic-tricks-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.btn-trick-pill { padding: 8px 14px; border-radius: 14px; background: #1e293b; color: #f1f5f9; border: 1px solid rgba(255,255,255,0.15); font-weight: bold; font-size: 13px; cursor: pointer; }
.btn-trick-pill.active { background: #f59e0b; color: #020617; border-color: #fcd34d; font-weight: 900; }

.vedic-card-showcase { background: linear-gradient(135deg, #1e293b, #0f172a); border: 2px solid #f59e0b; border-radius: 20px; padding: 20px; text-align: left; }
.v-card-header h4 { margin: 0 0 4px; color: #f59e0b; font-size: 1.2em; }
.v-example-badge { display: inline-block; background: rgba(245,158,11,0.2); color: #fed7aa; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: bold; margin-bottom: 12px; }
.v-steps-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.v-step-item { background: rgba(0,0,0,0.3); padding: 10px 14px; border-radius: 10px; font-size: 14px; color: #f1f5f9; border-left: 3px solid #38bdf8; }

.v-practice-box { background: #020617; border: 2px dashed rgba(245,158,11,0.5); border-radius: 14px; padding: 14px; }
.v-p-title { font-size: 13px; color: #94a3b8; font-weight: bold; display: block; margin-bottom: 4px; }
.btn-reveal-ans { background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 12px; font-weight: bold; cursor: pointer; margin-top: 6px; }
.v-ans-display { margin-top: 10px; background: rgba(16,185,129,0.2); border: 1px solid #10b981; padding: 10px; border-radius: 10px; color: #ecfdf5; font-size: 14px; }

/* Ramanujan Square */
.magic-square-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.magic-grid { display: grid; grid-template-columns: repeat(4, 60px); gap: 8px; background: #020617; padding: 16px; border-radius: 18px; border: 3px solid #f59e0b; }
.magic-cell { width: 60px; height: 60px; background: #1e293b; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #f1f5f9; font-weight: 900; }
.birth-date-cell { background: rgba(245,158,11,0.25); border-color: #f59e0b; color: #fcd34d; }
.magic-sum-badge { margin-top: 10px; background: rgba(56,189,248,0.2); border: 1px solid #38bdf8; color: #38bdf8; padding: 6px 14px; border-radius: 12px; font-weight: bold; font-size: 13px; }

.math-giants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; text-align: left; }
.giant-card { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 14px; }
.giant-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.giant-emoji { font-size: 2em; }
.giant-header h5 { margin: 0; color: #38bdf8; font-size: 14px; }
.giant-header small { color: #94a3b8; font-size: 11px; font-weight: 600; }
.giant-contrib { margin: 0; font-size: 12.5px; color: #cbd5e1; line-height: 1.4; }

/* ==================== 3. FACTS FINDER & GYAN KOSH STYLES ==================== */
.facts-search-bar-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.facts-search-input {
  flex: 1;
  max-width: 440px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 2px solid rgba(56, 189, 248, 0.4);
  background: #020617;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.facts-search-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}

.btn-spin-wheel {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
  transition: all 0.2s ease;
}

.btn-spin-wheel:hover { transform: scale(1.05); }

.facts-categories-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.btn-fact-cat {
  padding: 6px 12px;
  border-radius: 14px;
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.btn-fact-cat.active {
  background: #0284c7;
  color: white;
  border-color: #38bdf8;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}

.spotlight-fact-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 2px solid #a855f7;
  border-radius: 22px;
  padding: 22px 26px;
  margin-bottom: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(168, 85, 247, 0.2);
  text-align: left;
  animation: slideDown 0.3s ease-out;
}

.sfc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sfc-tag { display: flex; align-items: center; gap: 10px; }
.sfc-emoji { font-size: 2.5em; }
.sfc-cat-name { font-size: 14px; font-weight: 800; color: #c084fc; text-transform: uppercase; letter-spacing: 0.5px; }

.sfc-text {
  font-size: 16px;
  line-height: 1.65;
  color: #f8fafc;
  margin: 0;
  background: rgba(0, 0, 0, 0.35);
  padding: 16px;
  border-radius: 14px;
  border-left: 4px solid #a855f7;
}

.facts-quiz-box {
  background: #020617;
  border: 2px solid rgba(168, 85, 247, 0.4);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: left;
}

.qc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.qc-title { font-size: 13px; font-weight: bold; color: #a855f7; }
.qc-stars { font-size: 13px; color: #f59e0b; font-weight: bold; }
.qc-question { margin: 0 0 12px; font-size: 14px; color: #f1f5f9; font-weight: 600; }
.qc-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.btn-qc-ans {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-qc-ans:hover { transform: scale(1.05); }
.btn-yes { background: #16a34a; color: white; }
.btn-new { background: #0284c7; color: white; }

.qc-reward-toast {
  margin-top: 10px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  padding: 8px 12px;
  border-radius: 10px;
  color: #fed7aa;
  font-size: 13px;
  font-weight: bold;
}

.facts-nav-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.btn-fact-nav {
  padding: 8px 16px;
  border-radius: 14px;
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

.btn-fact-nav:hover { background: #334155; }
.fact-counter-badge { font-size: 13px; color: #94a3b8; }


.chem-significance-box {
  background: rgba(16, 185, 129, 0.12);
  border-left: 4px solid #10b981;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  color: #d1fae5;
  line-height: 1.45;
}

.chem-history-details {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
}

.chem-history-details summary {
  font-weight: bold;
  color: #fed7aa;
  outline: none;
}

.chem-history-details p {
  margin: 8px 0 2px;
  line-height: 1.45;
  color: #e2e8f0;
}

/* ==================== PERIODIC TABLE SEARCH & MULTI-PROPERTY FILTERS ==================== */
.chem-search-filter-panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 18px;
  padding: 14px 18px;
  margin-bottom: 14px;
}

.chem-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.chem-search-box {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  background: #020617;
  border: 2px solid rgba(56, 189, 248, 0.4);
  border-radius: 14px;
  padding: 0 12px;
  position: relative;
}

.chem-search-box .search-icon {
  font-size: 15px;
  margin-right: 8px;
}

.chem-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f1f5f9;
  padding: 10px 0;
  font-size: 13.5px;
  outline: none;
  font-family: inherit;
}

.btn-clear-search {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-weight: bold;
  cursor: pointer;
  padding: 4px 8px;
}

.chem-cat-dropdown-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #020617;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  padding: 4px 12px;
}

.chem-inline-lbl {
  font-size: 12px;
  font-weight: bold;
  color: #94a3b8;
  white-space: nowrap;
}

.chem-cat-select {
  background: transparent;
  color: #38bdf8;
  font-size: 13px;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 2px;
}

.chem-cat-select option {
  background: #0f172a;
  color: #f1f5f9;
}

.btn-toggle-adv-filters {
  background: #1e293b;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle-adv-filters:hover, .btn-toggle-adv-filters.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
}

/* Enlarged Chemistry and Science Modals */
.modal-chemistry .modal-science-content,
.modal-chemistry.game-modal .modal-content,
.modal-science-content.modal-wide {
  max-width: 1280px !important;
  width: 96vw !important;
  max-height: 94vh !important;
  overflow-y: auto !important;
  padding: 22px 28px !important;
  border-radius: 24px !important;
}

.chem-adv-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: left;
}

.filter-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-lbl {
  font-size: 11px;
  color: #94a3b8;
  font-weight: bold;
  text-transform: capitalize;
}

.chem-filter-select {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.chem-filter-select:focus {
  border-color: #38bdf8;
}

.filter-reset-col {
  display: flex;
  align-items: flex-end;
}

.btn-reset-filters {
  width: 100%;
  background: #334155;
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset-filters:hover {
  background: #dc2626;
  color: white;
}

.chem-shelf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
  padding: 0 4px;
  text-align: left;
}

.no-elements-msg {
  color: #f87171;
  font-style: italic;
  padding: 20px;
  width: 100%;
  text-align: center;
}

.chem-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chem-title-wrap h3 {
  margin: 0;
  color: #f1f5f9;
}

.chem-tags-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.chem-sub-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 6px;
}

/* ==================== 20+ SCIENTIFIC PROPERTIES TABLE ==================== */
.chem-properties-section {
  margin: 10px 0;
}

.btn-toggle-all-props {
  width: 100%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.btn-toggle-all-props:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
}

.chem-all-props-table-wrap {
  margin-top: 10px;
  background: #020617;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  padding: 12px;
  overflow-x: auto;
}

.chem-props-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.chem-props-table th {
  color: #94a3b8;
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 22%;
  background: rgba(255, 255, 255, 0.02);
}

.chem-props-table td {
  color: #f1f5f9;
  font-weight: bold;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 28%;
}

.pubchem-link-row {
  margin-top: 10px;
  text-align: right;
}

.btn-pubchem-link {
  display: inline-block;
  background: #0284c7;
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.btn-pubchem-link:hover {
  background: #0369a1;
  color: #e0f2fe;
}

/* ==================== WORD EXPLORER & WORD SEARCH MODAL ==================== */
.modal-word-search .modal-science-content {
  max-width: 960px !important;
}

.word-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.word-search-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.word-search-tabs .word-tab-btn {
  padding: 10px 18px;
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(30, 41, 59, 0.8);
  color: #94a3b8;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.word-search-tabs .word-tab-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #e0f2fe;
}

.word-search-tabs .word-tab-btn.active {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
}

.word-search-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.word-srch-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.word-finder-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.word-srch-input {
  flex: 1;
  min-width: 180px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  background: rgba(15, 23, 42, 0.8);
  color: #f8fafc;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.word-srch-input:focus {
  border-color: #38bdf8;
}

.word-srch-select {
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  background: rgba(15, 23, 42, 0.8);
  color: #f8fafc;
  font-size: 1em;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.word-srch-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 80px;
}

.word-srch-hint {
  color: #94a3b8;
  text-align: center;
  padding: 16px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 16px;
  border: 1px dashed rgba(56, 189, 248, 0.2);
}

.word-srch-empty {
  color: #fbbf24;
  text-align: center;
  padding: 20px;
  background: rgba(251, 191, 36, 0.08);
  border-radius: 16px;
  border: 1px dashed rgba(251, 191, 36, 0.3);
  font-size: 1.05em;
}

.word-search-card {
  background: rgba(30, 41, 59, 0.7);
  border: 2px solid rgba(56, 189, 248, 0.25);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.word-search-card:hover {
  transform: translateY(-3px);
  border-color: #38bdf8;
}

.word-search-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.word-search-word {
  font-size: 1.5em;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.5px;
}

.word-srch-speak {
  background: #38bdf8;
  color: #0f172a;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

.word-srch-speak:hover {
  transform: scale(1.15);
  background: #7dd3fc;
}

.word-search-translations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12px;
  padding: 10px 14px;
  color: #e2e8f0;
}

.word-search-translations div {
  font-size: 1.02em;
}

.word-search-type {
  display: inline-block;
  align-self: flex-start;
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  font-weight: bold;
  font-size: 0.9em;
  padding: 4px 12px;
  border-radius: 20px;
}

.word-search-sig {
  color: #cbd5e1;
  font-size: 0.95em;
  line-height: 1.5;
  border-top: 1px dotted rgba(56, 189, 248, 0.2);
  padding-top: 8px;
}

.word-srch-img {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  margin-top: 4px;
}

.word-srch-img img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.btn-word-srch-dict {
  align-self: flex-start;
  background: rgba(168, 85, 247, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 10px 16px;
  border-radius: 14px;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 4px;
}

.btn-word-srch-dict:hover {
  background: rgba(168, 85, 247, 0.35);
  color: #ede9fe;
}

.word-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 16px;
}

.word-chip {
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 8px 14px;
  border-radius: 20px;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s ease;
}

.word-chip:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: scale(1.06);
}

.word-chip-pos {
  font-size: 0.75em;
  opacity: 0.7;
  margin-left: 6px;
}

.dict-card {
  background: rgba(30, 41, 59, 0.7);
  border: 2px solid rgba(250, 204, 21, 0.3);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dict-word {
  font-size: 1.8em;
  font-weight: 900;
  color: #facc15;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.dict-phonetic {
  font-size: 0.6em;
  color: #94a3b8;
  font-weight: normal;
}

.dict-part {
  font-weight: bold;
  color: #f472b6;
  font-style: italic;
  margin-top: 8px;
  text-transform: capitalize;
}

.dict-def {
  color: #e2e8f0;
  font-size: 1.02em;
  line-height: 1.5;
}

.dict-example {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.95em;
  margin-left: 12px;
}

.dict-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-random-big {
  font-size: 1.25em;
  padding: 14px 24px;
  align-self: flex-start;
}

.word-random-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 600px) {
  .word-finder-row {
    flex-direction: column;
    align-items: stretch;
  }
  .word-srch-input {
    width: 100%;
  }
  .btn-word-srch-dict,
  .btn-random-big {
    width: 100%;
  }
}