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

:root {
  --green: #00ff88;
  --cyan: #00d4ff;
  --purple: #9945ff;
  --orange: #ff6b35;
  --yellow: #ffd700;
  --bg: #0a0a1a;
  --card-bg: #12122a;
}

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

/* SCREENS */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* STARS BACKGROUND */
.stars {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at top, #1a1a3e 0%, #0a0a1a 70%);
}
.stars::before {
  content: '✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧';
  position: absolute; top: 10%; left: 5%;
  color: rgba(255,255,255,0.15); font-size: 1.5rem;
  letter-spacing: 2rem; line-height: 4rem;
  width: 100%; white-space: pre-wrap;
}

/* HOME SCREEN */
.home-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; gap: 1.5rem; padding: 2rem;
  text-align: center;
}

.app-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: #fff;
  text-shadow: 0 0 30px rgba(0,255,136,0.5);
  line-height: 1.2;
}
.app-title .highlight { color: var(--green); }
.app-subtitle { color: rgba(255,255,255,0.7); font-size: 1.1rem; }

/* VELATRON CHARACTER */
.velatron-avatar, .velatron-mini, .velatron-win {
  display: flex; align-items: center; justify-content: center;
}
.vltn-face {
  position: relative;
  width: 120px; height: 160px;
}
.vltn-face.small { width: 80px; height: 110px; }

.vltn-head {
  position: absolute;
  width: 100px; height: 110px;
  background: linear-gradient(135deg, #2d7a4f, #1a5c38);
  border-radius: 50% 50% 45% 45%;
  top: 0; left: 10px;
  box-shadow: 0 0 20px rgba(0,255,136,0.3);
}
.vltn-face.small .vltn-head { width: 68px; height: 75px; left: 6px; }

.vltn-goggles {
  position: absolute;
  top: 25px; left: 15px;
  display: flex; gap: 6px; z-index: 2;
}
.vltn-face.small .vltn-goggles { top: 18px; left: 10px; gap: 4px; }

.goggle {
  width: 38px; height: 30px;
  background: #1a1a2e;
  border: 3px solid #888;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(0,255,136,0.8);
}
.vltn-face.small .goggle { width: 26px; height: 20px; border-width: 2px; }

.goggle-inner {
  width: 20px; height: 14px;
  background: linear-gradient(135deg, #00ff88, #00d4ff);
  border-radius: 50%;
  animation: goggle-glow 2s ease-in-out infinite;
}
.vltn-face.small .goggle-inner { width: 14px; height: 10px; }

@keyframes goggle-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #00ff88; }
  50% { opacity: 0.6; box-shadow: 0 0 16px #00ff88; }
}

.vltn-mouth {
  position: absolute;
  bottom: 28px; left: 30px;
  width: 40px; height: 8px;
  background: #fff;
  border-radius: 0 0 20px 20px;
  border: 2px solid rgba(255,255,255,0.3);
}
.vltn-face.small .vltn-mouth { bottom: 20px; left: 20px; width: 28px; height: 6px; }
.vltn-mouth.happy {
  height: 20px; border-radius: 0 0 30px 30px;
  background: linear-gradient(to bottom, #ff6b6b, #ff4444);
}

.vltn-cape {
  position: absolute;
  bottom: -30px; left: 5px;
  width: 110px; height: 60px;
  background: linear-gradient(135deg, #cc2200, #ff4400);
  border-radius: 0 0 50% 50%;
  z-index: -1;
}
.vltn-face.small .vltn-cape { width: 75px; height: 40px; bottom: -20px; left: 3px; }

.vltn-chest-orb {
  position: absolute;
  bottom: 45px; left: 47px;
  width: 22px; height: 22px;
  background: radial-gradient(circle, #00ff88, #00a855);
  border-radius: 50%;
  box-shadow: 0 0 15px #00ff88;
}
.vltn-face.small .vltn-chest-orb { bottom: 30px; left: 30px; width: 15px; height: 15px; }

/* ANIMATIONS */
.bounce { animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px #00ff88; transform: scale(1); }
  50% { box-shadow: 0 0 25px #00ff88, 0 0 40px #00ff88; transform: scale(1.15); }
}
.pulse.fast { animation-duration: 0.8s; }

/* VELATRON REACTIONS */
.teacher-happy {
  animation: velatron-happy 0.6s ease forwards !important;
}
@keyframes velatron-happy {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  25%  { transform: translateY(-30px) scale(1.15) rotate(-8deg); }
  50%  { transform: translateY(-40px) scale(1.2) rotate(8deg); }
  75%  { transform: translateY(-20px) scale(1.1) rotate(-4deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.teacher-sad {
  animation: velatron-sad 0.6s ease forwards !important;
}
@keyframes velatron-sad {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(-12px) scale(0.95); }
  40%  { transform: translateX(12px) scale(0.95); }
  60%  { transform: translateX(-8px) scale(0.97); }
  80%  { transform: translateX(8px) scale(0.97); }
  100% { transform: translateX(0) scale(1); }
}

/* BUTTONS */
.btn-main {
  background: linear-gradient(135deg, var(--green), #00a855);
  color: #000; font-family: 'Fredoka One', cursive;
  font-size: 1.3rem; padding: 1rem 2.5rem;
  border: none; border-radius: 50px; cursor: pointer;
  box-shadow: 0 0 20px rgba(0,255,136,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%; max-width: 300px;
}
.btn-main:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(0,255,136,0.7); }
.btn-main:active { transform: scale(0.97); }

.btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #fff; font-family: 'Fredoka One', cursive;
  font-size: 1.1rem; padding: 0.8rem 2rem;
  border: 2px solid rgba(255,255,255,0.3); border-radius: 50px;
  cursor: pointer; transition: all 0.2s;
  width: 100%; max-width: 300px;
}
.btn-secondary:hover { background: rgba(255,255,255,0.2); border-color: var(--cyan); }

.btn-back {
  background: rgba(255,255,255,0.1);
  color: #fff; font-size: 1rem;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 20px;
  padding: 0.4rem 1rem; cursor: pointer;
}

.home-buttons { display: flex; flex-direction: column; gap: 1rem; align-items: center; width: 100%; }
.stars-count { color: var(--yellow); font-size: 1.1rem; font-weight: 700; }

/* MAP SCREEN */
#screen-map { background: linear-gradient(180deg, #0f0f2e 0%, #1a1a3e 100%); padding: 1.5rem; }
.map-header { width: 100%; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.map-header h2 { font-family: 'Fredoka One', cursive; font-size: 1.6rem; color: var(--yellow); }

.worlds-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; width: 100%; max-width: 500px;
}

.world-card {
  background: var(--card-bg);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 1.5rem;
  text-align: center; cursor: pointer;
  transition: all 0.3s; opacity: 0.5;
}
.world-card.unlocked { opacity: 1; border-color: var(--green); box-shadow: 0 0 15px rgba(0,255,136,0.2); }
.world-card.unlocked:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(0,255,136,0.4); }
.world-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.world-card h3 { font-family: 'Fredoka One', cursive; color: var(--cyan); font-size: 1rem; }
.world-card p { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin: 0.3rem 0; }
.world-badge { background: rgba(0,255,136,0.15); color: var(--green); border-radius: 10px; padding: 0.2rem 0.5rem; font-size: 0.7rem; margin-top: 0.5rem; }

/* LESSON SCREEN */
#screen-lesson { background: linear-gradient(180deg, #0d1f2d 0%, #0a0a1a 100%); padding: 0; }
/* LESSON PARTICLES */
.lesson-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.lesson-particle {
  position: absolute; top: -40px;
  font-size: 1.4rem; opacity: 0.35;
  animation: particle-drift linear infinite;
}
@keyframes particle-drift {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.35; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

.lesson-header { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; position: absolute; top: 0; left: 0; z-index: 10; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); }
.lesson-progress-bar { flex: 1; height: 12px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.lesson-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 10px; transition: width 0.5s; width: 0%; }
.lesson-score { color: var(--yellow); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }

.lesson-content { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1; }

.velatron-teacher { width: 100%; position: relative; }
.speech-bubble {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: #fff; color: #000;
  padding: 0.6rem 1.2rem; border-radius: 20px;
  font-size: 0.95rem; font-weight: 700;
  text-align: center; max-width: 80%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  z-index: 2; white-space: nowrap;
}

/* FLASHCARD */
.flashcard-area {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.2rem 1.5rem 2rem; gap: 1rem;
  flex: 1;
}
.flashcard-img {
  width: 260px; height: 260px;
  object-fit: contain;
  border-radius: 24px;
  border: 4px solid var(--yellow);
  box-shadow: 0 0 30px rgba(255,215,0,0.4);
  background: rgba(255,255,255,0.05);
  animation: pop 0.4s ease;
}
.flashcard-emoji {
  font-size: 5.5rem;
  animation: pop 0.4s ease;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.5));
}
.flashcard-word {
  font-family: 'Fredoka One', cursive;
  font-size: 3.8rem;
  color: var(--yellow);
  text-shadow: 0 0 30px rgba(255,215,0,0.7), 0 0 60px rgba(255,215,0,0.3);
  letter-spacing: 6px;
  animation: pop 0.5s ease;
  background: rgba(255,215,0,0.12);
  border: 3px solid var(--yellow);
  border-radius: 20px;
  padding: 0.5rem 2rem;
  width: 90%;
  text-align: center;
}
.flashcard-speak { margin-bottom: 0.2rem; }
.flashcard-next-btn {
  margin-top: 0.4rem;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #000; font-size: 1.1rem; font-weight: 900;
  border: none; border-radius: 30px;
  padding: 0.9rem 2rem; cursor: pointer;
  font-family: 'Fredoka One', cursive;
  box-shadow: 0 4px 20px rgba(0,255,136,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: pulse-green 1.5s ease infinite;
}
.flashcard-next-btn:hover { transform: scale(1.05); box-shadow: 0 6px 30px rgba(0,255,136,0.6); }
@keyframes pulse-green {
  0%,100% { box-shadow: 0 4px 20px rgba(0,255,136,0.4); }
  50% { box-shadow: 0 4px 35px rgba(0,255,136,0.8); }
}

.question-area { width: 100%; text-align: center; padding: 1rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: center; }
.question-word { font-size: 4rem; margin-bottom: 0.5rem; animation: pop 0.4s ease; }
@keyframes pop { 0% { transform: scale(0); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } }
.question-text { color: rgba(255,255,255,0.8); font-size: 1rem; margin-bottom: 0.6rem; }

.speak-btn {
  background: rgba(0,212,255,0.15);
  border: 2px solid var(--cyan); color: var(--cyan);
  font-family: 'Fredoka One', cursive; font-size: 1rem;
  padding: 0.5rem 1.5rem; border-radius: 30px;
  cursor: pointer; margin-bottom: 1rem;
  transition: all 0.2s;
}
.speak-btn:hover { background: rgba(0,212,255,0.3); transform: scale(1.05); }

.answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.answer-btn {
  background: var(--card-bg);
  border: 2px solid rgba(255,255,255,0.15);
  color: #fff; font-family: 'Nunito', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  padding: 1rem; border-radius: 16px;
  cursor: pointer; transition: all 0.2s;
}
.answer-btn:hover { border-color: var(--cyan); background: rgba(0,212,255,0.1); transform: scale(1.03); }
.answer-btn.correct { background: rgba(0,255,136,0.2); border-color: var(--green); animation: correct-flash 0.5s ease; }
.answer-btn.wrong { background: rgba(255,60,60,0.2); border-color: #ff3c3c; animation: shake 0.4s ease; }
@keyframes correct-flash { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* WIN SCREEN */
/* WORLD INTRO SCREEN */
#screen-intro { padding: 0; }
.world-intro-bg {
  width: 100%; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a1a0f, #0a0a1a);
  transition: background 0.3s;
}
.world-intro-bg.world-1 { background: linear-gradient(135deg, #1a0a2e, #0d0d3e); }
.world-intro-bg.world-2 { background: linear-gradient(135deg, #3e1a0a, #2e0a1a); }
.world-intro-bg.world-3 { background: linear-gradient(135deg, #0a2e0a, #1a3e0a); }
.world-intro-bg.world-4 { background: linear-gradient(135deg, #0a1a3e, #0a2e3e); }
.world-intro-bg.world-5 { background: linear-gradient(135deg, #0a1a3e, #0a2e3e); }
.world-intro-bg.world-6 { background: linear-gradient(135deg, #0a0a2e, #1a0a3e); }
.world-intro-bg.world-7 { background: linear-gradient(135deg, #2e0a0a, #3e1a0a); }
.world-intro-content {
  text-align: center;
  animation: intro-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes intro-pop {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.world-intro-icon { font-size: 6rem; margin-bottom: 1rem; animation: intro-bounce 0.8s ease infinite alternate; }
@keyframes intro-bounce { from { transform: translateY(0); } to { transform: translateY(-15px); } }
.world-intro-title {
  font-family: 'Fredoka One', cursive;
  font-size: 3rem; color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;
}
.world-intro-sub { font-size: 1.2rem; color: rgba(255,255,255,0.7); margin-bottom: 1.5rem; }
.world-intro-bar {
  width: 200px; height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px; margin: 0 auto; overflow: hidden;
}
.world-intro-fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: #00ff88;
  animation: intro-load 2s linear forwards;
}
@keyframes intro-load { from { width: 0%; } to { width: 100%; } }

#screen-win {
  background: linear-gradient(135deg, #0a1a0f, #0a0a1a);
  align-items: center; justify-content: center;
}
.win-content { text-align: center; padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.win-title { font-family: 'Fredoka One', cursive; font-size: 3rem; color: var(--green); text-shadow: 0 0 30px rgba(0,255,136,0.6); }
.win-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.8); }
.win-stars-display { font-size: 2.5rem; letter-spacing: 0.5rem; }
.win-buttons { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 300px; }
.confetti-area { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.confetti-piece {
  position: absolute; width: 10px; height: 10px;
  border-radius: 2px; animation: fall linear forwards;
}
@keyframes fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes confetti-fall {
  0%   { transform: translateY(-30px) rotate(0deg) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(540deg) scale(0.5); opacity: 0; }
}

/* PROGRESS SCREEN */
#screen-progress { background: linear-gradient(180deg, #0f0f2e 0%, #1a1a3e 100%); padding: 1.5rem; }
.progress-content { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 1rem; }
.progress-card {
  background: var(--card-bg); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 1.2rem;
  display: flex; align-items: center; gap: 1rem;
}
.progress-card.locked { opacity: 0.5; }
.progress-icon { font-size: 2rem; }
.progress-info { flex: 1; }
.progress-info h3 { font-family: 'Fredoka One', cursive; color: var(--cyan); margin-bottom: 0.4rem; }
.progress-bar-mini { height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin-bottom: 0.3rem; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 10px; transition: width 1s; }
.locked-text { color: rgba(255,255,255,0.4); font-size: 0.85rem; }
.total-stars-card {
  background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,212,255,0.15));
  border: 2px solid var(--green); border-radius: 16px;
  padding: 1.5rem; text-align: center;
}
.total-stars-card h2 { font-family: 'Fredoka One', cursive; color: var(--yellow); font-size: 1.5rem; }
.total-stars-card p { color: rgba(255,255,255,0.7); margin-top: 0.5rem; }

/* LOADING SCREEN */
#screen-loading { padding: 0; }
.loading-bg { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.loading-img { width: 100%; height: 100%; object-fit: cover; }
.loading-overlay {
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
  text-align: center; width: 80%;
}
.loading-bar-wrap { background: rgba(0,0,0,0.5); border-radius: 20px; height: 18px; overflow: hidden; margin-bottom: 0.8rem; border: 2px solid var(--green); }
.loading-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: 20px; width: 0%; transition: width 0.1s; }
.loading-text { color: var(--green); font-family: 'Fredoka One', cursive; font-size: 1.2rem; text-shadow: 0 0 10px rgba(0,255,136,0.8); }

/* HOME SCREEN */
#screen-home { padding: 0; }
.home-hero { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.home-overlay {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 90%;
}

/* MAP SCREEN */
.map-img-wrap { position: relative; width: 100%; flex: 1; overflow: hidden; }
.map-bg-img { width: 100%; height: 100%; object-fit: cover; }
.map-buttons-overlay {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; width: 90%;
}
.map-btn {
  background: rgba(0,0,0,0.7); color: #fff;
  font-family: 'Fredoka One', cursive; font-size: 1rem;
  padding: 0.7rem 1.2rem; border-radius: 30px; border: 2px solid var(--green);
  cursor: pointer; backdrop-filter: blur(4px);
  transition: all 0.2s;
}
.map-btn.world1-btn { background: rgba(0,255,136,0.2); border-color: var(--green); }
.map-btn.world1-btn:hover { background: rgba(0,255,136,0.4); transform: scale(1.05); }
.map-btn.locked-btn { border-color: rgba(255,255,255,0.2); opacity: 0.6; cursor: not-allowed; }

/* TEACHER IMAGE */
.teacher-img {
  width: 100%;
  height: 50vh;
  object-fit: cover;
  object-position: center top;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 8px 40px rgba(0,255,136,0.4);
  display: block;
}

/* WIN SCREEN */
#screen-win { padding: 0; }
.win-full { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.win-bg-img { width: 100%; height: 100%; object-fit: cover; }
.win-overlay {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  text-align: center; width: 90%;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}

/* MUSIC TOGGLE */
.music-toggle {
  position: fixed; top: 12px; right: 12px; z-index: 999;
  background: rgba(0,0,0,0.6); border: 2px solid var(--green);
  color: #fff; font-size: 1.4rem; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer; backdrop-filter: blur(4px);
  transition: all 0.2s;
}
.music-toggle:hover { background: rgba(0,255,136,0.2); transform: scale(1.1); }

/* PREMIUM MAP BUTTON */
.map-btn.premium-btn {
  background: linear-gradient(135deg, #2a1a00, #1a0a2e);
  border: 2px solid var(--yellow);
  color: var(--yellow);
  opacity: 0.9;
}
.map-btn.premium-btn:hover { transform: scale(1.04); opacity: 1; }

/* PREMIUM MODAL */
.premium-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.premium-modal-box {
  background: linear-gradient(135deg, #1a0a2e, #0a1a3e);
  border: 3px solid var(--yellow);
  border-radius: 28px; padding: 2.5rem 2rem;
  text-align: center; max-width: 340px; width: 90%;
  box-shadow: 0 0 60px rgba(255,215,0,0.3);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.premium-modal-icon { font-size: 4rem; }
.premium-modal-box h2 { font-family: 'Fredoka One', cursive; font-size: 2rem; color: var(--yellow); }
.premium-modal-box p { color: rgba(255,255,255,0.85); font-size: 1rem; line-height: 1.5; }
.premium-modal-sub { font-size: 0.9rem !important; color: rgba(255,255,255,0.6) !important; }

@media (max-width: 400px) {
  .answers-grid { grid-template-columns: 1fr; }
  .map-btn { font-size: 0.85rem; padding: 0.5rem 0.9rem; }
}