/* ========================================================
   MALIK – THE NUMBER ADVENTURE
   Premium Children's Interactive Mathematics Adventure Game
   ======================================================== */

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

:root {
  --primary-font: 'Fredoka', 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bg-gradient: linear-gradient(135deg, #1A237E 0%, #0D47A1 50%, #01579B 100%);
  --gold-accent: #FFD700;
  --gold-shadow: #FF8F00;
  --card-bg: #FFFFFF;
  --card-border: #E0E0E0;
  --btn-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
  --btn-active-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  --border-radius-lg: 24px;
  --border-radius-md: 16px;
  --border-radius-sm: 10px;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: var(--primary-font);
  background: var(--bg-gradient);
  color: #263238;
}

#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

#app-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

/* ========================================================
   BUTTONS & CONTROLS
   ======================================================== */

.btn {
  font-family: var(--primary-font);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
}

.btn-primary {
  background: linear-gradient(180deg, #FFD54F 0%, #FFB300 50%, #FF8F00 100%);
  color: #3E2723;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  border: 2px solid #FFE082;
}

.btn-secondary {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
  color: #37474F;
  border: 2px solid #CFD8DC;
}

.btn-danger {
  background: linear-gradient(180deg, #FF5252 0%, #D32F2F 100%);
  color: #FFFFFF;
}

.btn-hint {
  background: linear-gradient(180deg, #B388FF 0%, #7C4DFF 100%);
  color: #FFFFFF;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 999px;
}

.btn-large {
  font-size: 1.35rem;
  padding: 16px 36px;
  letter-spacing: 0.5px;
}

.btn-small {
  font-size: 0.95rem;
  padding: 8px 16px;
}

.pulse-btn {
  animation: buttonPulse 2s infinite ease-in-out;
}

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

.stat-pill {
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #37474F;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ========================================================
   SCREEN 1: WELCOME SCREEN
   ======================================================== */

.screen-welcome {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at 50% 30%, #1976D2 0%, #0D47A1 60%, #051B44 100%);
}

.welcome-header {
  margin-bottom: 20px;
}

.game-badge {
  display: inline-block;
  background: #FFD54F;
  color: #3E2723;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 6px 18px;
  border-radius: 999px;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.main-title {
  font-size: 4.2rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #FFF9C4;
  text-shadow: 0 4px 0 #E65100, 0 8px 16px rgba(0,0,0,0.4);
  line-height: 1.05;
}

.sub-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #80D8FF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-bottom: 10px;
}

.personalized-welcome {
  font-size: 1.25rem;
  color: #FFFFFF;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

.personalized-welcome strong {
  color: #FFD54F;
}

.welcome-hero-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 15px 0 25px;
  flex-wrap: wrap;
}

.hero-character-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: floatBob 3.5s ease-in-out infinite;
}

.hero-name-plate {
  margin-top: -10px;
  background: linear-gradient(180deg, #FFD54F, #FF9800);
  color: #3E2723;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 4px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  border: 2px solid #FFF8E1;
}

.welcome-companions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.companion-bubble {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.companion-bubble:hover {
  transform: scale(1.15) rotate(5deg);
}

.welcome-stats-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  justify-content: center;
}

.welcome-action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.welcome-secondary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

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

/* ========================================================
   SCREEN 2: STORY SCREEN
   ======================================================== */

.screen-story {
  min-height: 100vh;
  background: #002171;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.screen-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 20px;
  color: #FFFFFF;
}

.screen-top-bar h2 {
  font-size: 1.8rem;
  font-weight: 900;
  color: #FFD54F;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.story-book-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

.story-page {
  background: #FFFDF0;
  border: 6px solid #8D6E63;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.4);
  display: flex;
  gap: 30px;
  align-items: center;
}

.story-illustration {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.story-companions-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.story-text-content {
  flex: 1.5;
  color: #37474F;
  line-height: 1.6;
}

.story-text-content h3 {
  font-size: 1.6rem;
  color: #0288D1;
  margin-bottom: 12px;
}

.story-text-content p {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.story-quote {
  background: #E1F5FE;
  padding: 12px 18px;
  border-left: 5px solid #03A9F4;
  border-radius: 8px;
  font-style: italic;
  font-weight: 700;
  color: #01579B;
  margin-top: 15px;
}

.story-footer {
  text-align: center;
  padding: 20px 0;
}

/* ========================================================
   SCREEN 3: MAIN WORLD MAP SCREEN
   ======================================================== */

.screen-world-map {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 40%, #004D40 0%, #00251A 100%);
}

.map-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 25px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
}

.map-title-box h2 {
  font-size: 1.6rem;
  color: #FFD54F;
}

.map-progress-tracker {
  font-size: 0.9rem;
  color: #80CBC4;
  font-weight: 700;
}

.map-scroll-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

.map-path-network {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  max-width: 1100px;
  width: 100%;
}

.map-world-node {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 24px 18px;
  text-align: center;
  border: 4px solid var(--world-color);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.map-world-node:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
}

.map-world-node.node-locked {
  background: #ECEFF1;
  border-color: #B0BEC5;
  opacity: 0.65;
  cursor: not-allowed;
}

.map-world-node.node-locked:hover {
  transform: none;
}

.pulse-glow {
  box-shadow: 0 0 25px var(--world-color);
  animation: pulseNodeGlow 2s infinite ease-in-out;
}

@keyframes pulseNodeGlow {
  0%, 100% { box-shadow: 0 0 15px var(--world-color); }
  50% { box-shadow: 0 0 35px var(--world-color); }
}

.world-node-crystal {
  font-size: 2.8rem;
  margin-bottom: 8px;
}

.world-node-target {
  font-size: 1.4rem;
  font-weight: 900;
  color: #263238;
}

.world-node-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #546E7A;
  margin-bottom: 12px;
}

.world-node-progress {
  display: flex;
  justify-content: space-between;
  background: #F5F5F5;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
}

.world-node-locked-tag {
  background: #CFD8DC;
  color: #546E7A;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  font-size: 0.85rem;
}

.map-bottom-bar {
  padding: 15px;
  text-align: center;
  background: rgba(0,0,0,0.4);
  color: #B2DFDB;
  font-weight: 700;
}

/* ========================================================
   SCREEN 4: WORLD INTRO & LEVEL SELECT SCREEN
   ======================================================== */

.screen-world-intro {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.world-backdrop-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.world-backdrop-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-world-intro > *:not(.world-backdrop-container) {
  position: relative;
  z-index: 2;
}

.world-intro-content {
  display: flex;
  gap: 25px;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}

.world-story-card {
  flex: 1.4;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: 24px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  border: 4px solid var(--world-theme);
}

.world-target-pill {
  display: inline-block;
  background: var(--world-theme);
  color: #FFFFFF;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.world-story-text {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #37474F;
  margin-bottom: 14px;
}

.world-reward-preview {
  background: #FFF9C4;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 700;
  color: #5D4037;
  display: inline-block;
}

.world-character-cheer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.speech-bubble {
  background: #FFFFFF;
  border: 3px solid #00ACC1;
  border-radius: 18px;
  padding: 12px 18px;
  font-size: 1.1rem;
  color: #006064;
  font-weight: 800;
  margin-top: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  position: relative;
}

.speech-bubble::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 12px 12px 12px;
  border-style: solid;
  border-color: transparent transparent #00ACC1 transparent;
}

.world-levels-section {
  max-width: 1000px;
  margin: 10px auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  width: calc(100% - 40px);
}

.world-levels-section h3 {
  font-size: 1.4rem;
  color: #37474F;
  margin-bottom: 16px;
  text-align: center;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.level-badge {
  background: #FFFFFF;
  border: 3px solid #CFD8DC;
  border-radius: 18px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  transition: transform 0.15s ease;
}

.level-badge.playable:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: #00BCD4;
}

.level-badge.locked {
  background: #ECEFF1;
  opacity: 0.5;
  cursor: not-allowed;
}

.level-badge.completed {
  border-color: #4CAF50;
  background: #F1F8E9;
}

.level-badge.boss-level {
  border-color: #FFB300;
  background: #FFFDE7;
  grid-column: span 1;
}

.level-number {
  font-size: 1.4rem;
  font-weight: 900;
  color: #263238;
}

.level-stars {
  font-size: 1rem;
  margin-top: 4px;
}

.world-intro-footer {
  text-align: center;
  padding: 20px;
}

/* ========================================================
   SCREEN 5: MAIN GAMEPLAY SCREEN (ARENA)
   ======================================================== */

.screen-gameplay {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.gameplay-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.screen-gameplay > *:not(.gameplay-backdrop) {
  position: relative;
  z-index: 2;
}

.gameplay-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.hud-center {
  text-align: center;
}

.hud-world-info {
  font-size: 0.95rem;
  font-weight: 800;
  color: #78909C;
}

.hud-target-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--world-theme, #0288D1);
  color: #FFFFFF;
  padding: 4px 18px;
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 900;
}

.target-value {
  color: #FFEB3B;
  font-size: 1.6rem;
}

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

.hud-coins {
  background: #FFF9C4;
  color: #F57F17;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.1rem;
}

.gameplay-character-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 30px;
  max-width: 950px;
  margin: 10px auto 0;
  width: 100%;
}

.character-anchor {
  flex-shrink: 0;
}

.dialogue-box {
  background: rgba(255, 255, 255, 0.95);
  border: 4px solid #00ACC1;
  border-radius: 20px;
  padding: 14px 22px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  flex: 1;
}

.dialogue-speaker {
  font-size: 0.85rem;
  font-weight: 800;
  color: #00838F;
  text-transform: uppercase;
}

.dialogue-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: #263238;
}

/* Combination Arena */
.math-arena {
  max-width: 900px;
  width: calc(100% - 40px);
  margin: 10px auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: 20px 25px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);
  border: 4px dashed #B0BEC5;
  text-align: center;
}

.arena-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  border-bottom: 2px solid #ECEFF1;
  padding-bottom: 12px;
}

.arena-equation {
  font-size: 1.6rem;
  font-weight: 900;
  color: #37474F;
}

.arena-equation .eq-slot {
  display: inline-block;
  min-width: 50px;
  height: 45px;
  line-height: 45px;
  background: #FFF9C4;
  border: 3px dashed #FBC02D;
  border-radius: 12px;
  margin: 0 6px;
  color: #E65100;
}

.arena-sum-counter {
  font-size: 1.3rem;
  font-weight: 800;
  color: #546E7A;
}

.arena-sum-counter strong {
  font-size: 1.7rem;
}

.selected-cards-slots {
  min-height: 85px;
  background: #F8F9FA;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  flex-wrap: wrap;
}

.slots-placeholder {
  color: #90A4AE;
  font-weight: 700;
  font-size: 1.1rem;
}

.selected-token {
  background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
  color: #FFFFFF;
  font-size: 1.8rem;
  font-weight: 900;
  padding: 10px 22px;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #A5D6A7;
}

.token-remove {
  font-size: 1.3rem;
  opacity: 0.8;
}

.selected-token:hover {
  background: #C62828;
  border-color: #EF9A9A;
}

/* Available Deck */
.cards-deck-container {
  max-width: 950px;
  width: calc(100% - 40px);
  margin: 10px auto;
  text-align: center;
}

.deck-title {
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin-bottom: 8px;
}

.cards-deck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px;
}

.number-card {
  width: 90px;
  height: 110px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8E1 100%);
  border: 4px solid #FFCA28;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25), inset 0 2px 0 #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.number-card:hover {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 14px 24px rgba(0,0,0,0.3);
  border-color: #FFB300;
}

.number-card:active {
  transform: translateY(2px) scale(0.98);
}

.number-card.card-selected {
  opacity: 0.35;
  filter: grayscale(80%);
  transform: scale(0.92);
  cursor: default;
}

.card-number {
  font-size: 2.6rem;
  font-weight: 900;
  color: #263238;
}

.card-sparkle {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.85rem;
  color: #FFB300;
}

.gameplay-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding: 15px 20px 25px;
}

/* ========================================================
   MODALS
   ======================================================== */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-card {
  background: #FFFFFF;
  border-radius: 28px;
  padding: 30px;
  max-width: 650px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  position: relative;
}

.pop-in {
  animation: popInAnim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popInAnim {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 2px solid #ECEFF1;
  padding-bottom: 12px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: #78909C;
  cursor: pointer;
}

/* Hint Modal & Pedagogical Tools */
.hint-mentor-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #EDE7F6;
  border-radius: 20px;
  padding: 15px;
  margin-bottom: 20px;
}

.hint-message {
  font-size: 1.25rem;
  font-weight: 800;
  color: #4A148C;
  margin-bottom: 6px;
}

.hint-target-reminder {
  font-size: 0.95rem;
  color: #6A1B9A;
}

.hint-tabs-header {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.hint-tab-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid #D1C4E9;
  background: #F3E5F5;
  font-family: var(--primary-font);
  font-weight: 800;
  cursor: pointer;
  color: #4A148C;
}

.hint-tab-btn.active {
  background: #7C4DFF;
  color: #FFFFFF;
  border-color: #7C4DFF;
}

.tab-explanation {
  font-weight: 700;
  color: #546E7A;
  margin-bottom: 10px;
}

.ten-frames-container {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 0;
}

.ten-frame-card {
  background: #FAFAFA;
  border: 3px solid #CFD8DC;
  border-radius: 16px;
  padding: 12px;
  flex-shrink: 0;
}

.ten-frame-header {
  font-size: 0.85rem;
  font-weight: 800;
  color: #546E7A;
  text-align: center;
  margin-bottom: 8px;
}

.ten-frame-grid {
  display: grid;
  grid-template-columns: repeat(5, 42px);
  grid-template-rows: repeat(2, 42px);
  gap: 6px;
}

.tf-slot {
  border: 2px solid #B0BEC5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  color: #90A4AE;
}

.tf-slot.slot-filled {
  background: #E8F5E9;
  border-color: #4CAF50;
  font-size: 1.2rem;
}

/* Base-10 Blocks */
.base-ten-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0;
}

.rods-row, .cubes-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.base-ten-rod {
  display: flex;
  flex-direction: column;
  width: 28px;
  border: 2px solid #FFB300;
  border-radius: 6px;
  background: #FFF9C4;
}

.rod-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: #E65100;
  background: #FFE082;
}

.rod-segment {
  height: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.base-ten-cube {
  width: 26px;
  height: 26px;
  background: #80D8FF;
  border: 2px solid #0288D1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  color: #01579B;
}

/* Celebration Modal */
.modal-celebration-card {
  text-align: center;
}

.celebration-hero {
  margin: -10px auto 10px;
}

.celebration-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #2E7D32;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.celebration-equation {
  font-size: 2rem;
  font-weight: 900;
  color: #E65100;
  margin: 8px 0;
}

.celebration-compliment {
  font-size: 1.25rem;
  color: #37474F;
  margin-bottom: 15px;
}

.celebration-rewards-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.reward-pill {
  background: #FFF8E1;
  border: 2px solid #FFD54F;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #5D4037;
}

.new-badge-announcement {
  background: #E8F5E9;
  border: 2px solid #81C784;
  padding: 10px;
  border-radius: 12px;
  color: #2E7D32;
  font-weight: 800;
  margin-bottom: 18px;
}

/* Retry Modal */
.modal-retry-card {
  text-align: center;
}

.retry-hero {
  margin-bottom: 10px;
}

.modal-retry-card h3 {
  font-size: 1.8rem;
  color: #0288D1;
  margin-bottom: 8px;
}

.retry-text {
  font-size: 1.2rem;
  color: #37474F;
  margin-bottom: 20px;
}

.retry-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* World Completion Modal */
.modal-world-complete-card {
  text-align: center;
  border: 6px solid #FFD700;
}

.world-complete-banner {
  font-size: 2.4rem;
  font-weight: 900;
  color: #FF8F00;
  letter-spacing: 1px;
}

.giant-crystal-spin {
  font-size: 4rem;
  animation: crystalSpin 3s infinite linear;
}

@keyframes crystalSpin {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.crystal-restored-name {
  font-size: 1.4rem;
  font-weight: 900;
  color: #37474F;
  margin: 8px 0 16px;
}

.hero-victory-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.world-complete-speech {
  font-size: 1.3rem;
  font-weight: 800;
  color: #2E7D32;
  margin: 18px 0;
  line-height: 1.4;
}

/* ========================================================
   SCREEN 6: WARDROBE (MALIK'S EXPLORER GEAR)
   ======================================================== */

.screen-wardrobe {
  min-height: 100vh;
  background: #263238;
  padding: 20px;
  color: #FFFFFF;
}

.wardrobe-sub {
  text-align: center;
  font-size: 1.15rem;
  color: #B0BEC5;
  margin-bottom: 20px;
}

.outfits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1050px;
  margin: 0 auto;
}

.outfit-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 20px;
  color: #263238;
  display: flex;
  gap: 15px;
  align-items: center;
  border: 4px solid transparent;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.outfit-card.outfit-selected {
  border-color: #00E676;
  box-shadow: 0 0 20px #00E676;
}

.outfit-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #0288D1;
}

.outfit-desc {
  font-size: 0.95rem;
  color: #607D8B;
  margin: 6px 0 12px;
}

/* ========================================================
   SCREEN 7: TROPHY & SANCTUARY
   ======================================================== */

.screen-trophies {
  min-height: 100vh;
  background: #1A237E;
  padding: 20px;
  color: #FFFFFF;
}

.sanctuary-section {
  max-width: 1000px;
  margin: 20px auto;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 20px;
}

.sanctuary-section h3 {
  font-size: 1.4rem;
  color: #FFD54F;
  margin-bottom: 16px;
  text-align: center;
}

.crystals-podium {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.crystal-pedestal {
  background: rgba(0,0,0,0.3);
  border-radius: 18px;
  padding: 15px 10px;
  text-align: center;
  border: 2px solid rgba(255,255,255,0.2);
}

.crystal-pedestal.pedestal-active {
  border-color: #FFD700;
  background: rgba(255, 215, 0, 0.15);
}

.crystal-gem {
  font-size: 2.4rem;
}

.crystal-label {
  font-size: 1.1rem;
  font-weight: 900;
  color: #FFD54F;
  margin-top: 4px;
}

.crystal-name {
  font-size: 0.8rem;
  color: #B0BEC5;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
}

.badge-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 16px;
  color: #263238;
  text-align: center;
}

.badge-card.badge-locked {
  opacity: 0.5;
  background: #ECEFF1;
}

.badge-icon {
  font-size: 2.2rem;
  margin-bottom: 6px;
}

.badge-title {
  font-weight: 900;
  font-size: 1.1rem;
  color: #0288D1;
}

.badge-desc {
  font-size: 0.85rem;
  color: #607D8B;
  margin: 6px 0;
}

/* ========================================================
   SCREEN 8: DASHBOARD & CERTIFICATE
   ======================================================== */

.screen-progress {
  min-height: 100vh;
  background: #004D40;
  padding: 20px;
  color: #FFFFFF;
}

.progress-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  max-width: 1050px;
  margin: 0 auto 25px;
}

.summary-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  color: #263238;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.sum-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: #00897B;
}

.sum-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #546E7A;
}

.dashboard-details-row {
  display: flex;
  gap: 20px;
  max-width: 1050px;
  margin: 0 auto;
}

.dashboard-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 24px;
  color: #263238;
}

.target-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.target-num {
  width: 80px;
  font-weight: 800;
  font-size: 0.95rem;
}

.progress-bar-bg {
  flex: 1;
  height: 14px;
  background: #ECEFF1;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 999px;
}

.target-pct {
  font-weight: 800;
  font-size: 0.9rem;
  color: #388E3C;
}

.mentor-commentary {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 15px;
}

.mentor-text {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #37474F;
}

/* Certificate */
.cert-modal-backdrop {
  overflow-y: auto;
}

.certificate-wrapper {
  max-width: 850px;
  width: 100%;
  margin: 20px auto;
}

.cert-border-gold {
  background: #FFFDF0;
  padding: 20px;
  border: 12px solid #FFD700;
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  position: relative;
}

.cert-inner {
  border: 3px double #B78103;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
}

.cert-seal {
  font-size: 3.5rem;
}

.cert-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #B78103;
  margin: 10px 0;
}

.cert-sub {
  font-size: 1rem;
  font-weight: 800;
  color: #795548;
  letter-spacing: 2px;
}

.cert-hero-name {
  font-size: 3.8rem;
  font-weight: 900;
  color: #0288D1;
  text-shadow: 0 3px 6px rgba(0,0,0,0.15);
  margin: 12px 0;
}

.cert-body {
  font-size: 1.2rem;
  color: #4E342E;
  line-height: 1.6;
  max-width: 650px;
  margin: 0 auto 15px;
}

.cert-honor {
  display: inline-block;
  background: linear-gradient(180deg, #FFD54F, #FF9800);
  color: #3E2723;
  font-size: 1.4rem;
  font-weight: 900;
  padding: 8px 24px;
  border-radius: 999px;
  margin-bottom: 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.cert-signatures {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 15px;
}

.sig-block {
  text-align: center;
}

.sig-title, .sig-date {
  font-size: 1.1rem;
  font-weight: 900;
  color: #263238;
}

.sig-role {
  font-size: 0.85rem;
  color: #78909C;
  border-top: 2px solid #78909C;
  padding-top: 4px;
  margin-top: 4px;
}

.cert-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 15px;
}

/* Settings Modal */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #ECEFF1;
  font-weight: 700;
  font-size: 1.1rem;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.setting-danger-zone {
  margin-top: 20px;
  padding: 15px;
  background: #FFEBEE;
  border-radius: 16px;
  border: 2px dashed #EF9A9A;
  text-align: center;
}

.setting-danger-zone h4 {
  color: #C62828;
  margin-bottom: 6px;
}

.setting-danger-zone p {
  font-size: 0.9rem;
  color: #78909C;
  margin-bottom: 12px;
}

/* Accessibility */
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

body.high-contrast {
  filter: contrast(135%);
}

/* Print */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-certificate, #printable-certificate * {
    visibility: visible;
  }
  #printable-certificate {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .no-print {
    display: none !important;
  }
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
  .main-title {
    font-size: 3rem;
  }
  .sub-title {
    font-size: 1.4rem;
  }
  .story-page {
    flex-direction: column;
  }
  .world-intro-content {
    flex-direction: column;
  }
  .levels-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .dashboard-details-row {
    flex-direction: column;
  }
  .cert-signatures {
    flex-direction: column;
    gap: 15px;
  }
  .cert-hero-name {
    font-size: 2.8rem;
  }
  .gameplay-character-bar {
    padding: 5px 15px;
  }
  .number-card {
    width: 72px;
    height: 90px;
  }
  .card-number {
    font-size: 2rem;
  }
}

/* ========================================================
   iPAD SAFARI & TABLET OPTIMIZATIONS (PORTRAIT & LANDSCAPE)
   ======================================================== */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

body {
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.btn, .number-card, .map-world-node, .level-badge, .selected-token, .hint-tab-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* iPad Portrait (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .main-title {
    font-size: 3.8rem;
  }
  .welcome-hero-stage {
    gap: 20px;
  }
  .math-arena {
    max-width: 720px;
  }
  .cards-deck {
    gap: 14px;
  }
  .number-card {
    width: 82px;
    height: 102px;
  }
  .card-number {
    font-size: 2.3rem;
  }
  .levels-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Tablet & iPad Landscape Optimization */
@media only screen and (max-height: 720px) and (orientation: landscape) {
  .welcome-hero-stage {
    margin: 5px 0 12px;
    gap: 15px;
  }
  .main-title {
    font-size: 2.8rem;
  }
  .sub-title {
    font-size: 1.3rem;
  }
  .gameplay-hud {
    padding: 8px 18px;
  }
  .gameplay-character-bar {
    padding: 4px 15px;
  }
  .dialogue-text {
    font-size: 1.1rem;
  }
  .math-arena {
    margin: 5px auto;
    padding: 12px 18px;
  }
  .cards-deck-container {
    margin: 4px auto;
  }
  .number-card {
    width: 70px;
    height: 85px;
  }
  .card-number {
    font-size: 1.9rem;
  }
  .gameplay-actions {
    padding: 8px 15px 15px;
  }
}