:root {
  --bg1: #1b1f5a;
  --bg2: #0ea5e9;
  --bg3: #22c55e;
  --bg4: #2563eb;
  --orb-a: #ffd93d;
  --orb-b: #fb7185;
  --orb-c: #34d399;
  --card: #ffffff;
  --text: #162238;
  --accent: #ff9f1c;
  --hero-btn-bg: #ffffff;
  --hero-btn-text: #163a63;
  --panel-bg: #f2f7ff;
  --panel-border: #cfe0ff;
  --face-bg: #dbeafe;
  --face-border: #99baf2;
  --face-text: #183a66;
  --input-border: #d8e1f0;
  --input-bg: #ffffff;
  --choice-bg: #edf2ff;
  --choice-border: #cbd7f2;
  --choice-text: #1d3458;
  --choice-active-bg: #dbeafe;
  --choice-active-border: #1d4ed8;
  --soft-btn-bg: #e9f1ff;
  --soft-btn-border: #bfd2f7;
  --soft-btn-text: #17365e;
  --progress-track: #e5ecf9;
  --progress-a: #00c2ff;
  --progress-b: #00e0a4;
  --power-bg: #1d4ed8;
  --power-border: #1e40af;
  --power-text: #ffffff;
  --answer-bg: #f7f9ff;
  --answer-border: #d8e1f0;
  --rps-bg: #1e40af;
  --rps-border: #172c8e;
  --rps-text: #ffffff;
  --prize-bg-a: #fff7d6;
  --prize-bg-b: #ffe7a3;
  --prize-border: #ffd166;
  --prize-title: #8b4513;
  --achievement-bg: #eef5ff;
  --achievement-border: #cfe0ff;
  --good: #2ecc71;
  --bad: #e74c3c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(-45deg, var(--bg1), var(--bg2), var(--bg3), var(--bg4));
  background-size: 250% 250%;
  animation: bg-move 12s ease infinite;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-x: hidden;
}

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
}

.orb-a {
  width: 220px;
  height: 220px;
  left: -70px;
  top: 10%;
  background: var(--orb-a);
  animation: drift-a 10s ease-in-out infinite;
}

.orb-b {
  width: 170px;
  height: 170px;
  right: -45px;
  top: 24%;
  background: var(--orb-b);
  animation: drift-b 8s ease-in-out infinite;
}

.orb-c {
  width: 260px;
  height: 260px;
  right: 16%;
  bottom: -130px;
  background: var(--orb-c);
  animation: drift-a 12s ease-in-out infinite;
}

.app {
  width: min(760px, 100%);
  position: relative;
  z-index: 2;
}

.hero {
  text-align: center;
  color: #fff;
  margin-bottom: 16px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
}

.hero p {
  margin: 8px 0 0;
}

.sound-toggle {
  margin: 12px 0 0;
  max-width: 180px;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
}

.hero-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-controls button {
  width: auto;
  min-width: 140px;
}

.voice-toggle {
  margin-top: 12px;
  max-width: 180px;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
}

.character-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 12px;
}

.world-scene {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  margin-bottom: 14px;
}

#world-art {
  display: block;
  width: 100%;
  height: clamp(170px, 28vw, 240px);
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.world-scene-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.char-face {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 2px solid var(--face-border);
  background: var(--face-bg);
  color: var(--face-text);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  transition: transform 0.2s ease, background 0.2s ease;
}

.char-name {
  margin: 0 0 3px;
  font-weight: 800;
}

.char-text {
  margin: 0;
}

.char-face.happy {
  background: #dcfce7;
  border-color: #8fe3ad;
  transform: translateY(-2px);
}

.char-face.sad {
  background: #fee2e2;
  border-color: #f9a8a8;
}

.char-face.wow {
  background: #fef3c7;
  border-color: #fcd34d;
  transform: scale(1.04);
}

.world-label {
  margin: 4px 0 8px;
  font-weight: 700;
}

.world-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.world-btn {
  background: var(--choice-bg);
  border: 2px solid var(--choice-border);
  color: var(--choice-text);
  padding: 10px;
}

.world-btn.active {
  border-color: var(--choice-active-border);
  background: var(--choice-active-bg);
}

.card {
  display: none;
  background: var(--card);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.card.active {
  display: block;
}

label,
input,
button {
  display: block;
  width: 100%;
}

input {
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 11px;
  border: 2px solid var(--input-border);
  background: var(--input-bg);
  border-radius: 10px;
  font-size: 1rem;
}

button {
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  padding: 11px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.alt-start-btn {
  margin-top: 8px;
  background: var(--soft-btn-bg);
  color: var(--soft-btn-text);
  border: 2px solid var(--soft-btn-border);
}

.world-select .world-btn {
  background: var(--choice-bg);
  border: 2px solid var(--choice-border);
  color: var(--choice-text);
  padding: 10px;
}

.world-select .world-btn.active {
  border-color: var(--choice-active-border);
  background: var(--choice-active-bg);
}

.quiz-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.progress-wrap {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--progress-track);
  overflow: hidden;
  margin-top: 10px;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--progress-a), var(--progress-b));
  transition: width 0.25s linear;
}

.powerups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.power-btn {
  background: var(--power-bg);
  color: var(--power-text);
  border: 2px solid var(--power-border);
  padding: 10px;
}

.power-btn:disabled {
  background: #b6c3e0;
  border-color: #94a3c2;
  cursor: not-allowed;
}

.hint {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: #2d3f61;
}

body.world-classic {
  --bg1: #1b1f5a;
  --bg2: #0ea5e9;
  --bg3: #22c55e;
  --bg4: #2563eb;
  --orb-a: #ffd93d;
  --orb-b: #fb7185;
  --orb-c: #34d399;
}

body.world-space {
  --bg1: #0b1026;
  --bg2: #312e81;
  --bg3: #1d4ed8;
  --bg4: #7c3aed;
  --orb-a: #60a5fa;
  --orb-b: #a78bfa;
  --orb-c: #f0abfc;
  --card: #eef2ff;
  --text: #171a33;
  --accent: #7c3aed;
  --hero-btn-bg: #eef2ff;
  --hero-btn-text: #2a1b57;
  --panel-bg: #e0e7ff;
  --panel-border: #c7d2fe;
  --face-bg: #ddd6fe;
  --face-border: #a78bfa;
  --face-text: #2e1065;
  --choice-bg: #e0e7ff;
  --choice-border: #c7d2fe;
  --choice-text: #312e81;
  --choice-active-bg: #ddd6fe;
  --choice-active-border: #7c3aed;
  --soft-btn-bg: #e0e7ff;
  --soft-btn-border: #c7d2fe;
  --soft-btn-text: #312e81;
  --progress-track: #c7d2fe;
  --progress-a: #60a5fa;
  --progress-b: #a78bfa;
  --power-bg: #6d28d9;
  --power-border: #5b21b6;
  --answer-bg: #eef2ff;
  --answer-border: #c7d2fe;
  --rps-bg: #6d28d9;
  --rps-border: #5b21b6;
  --prize-bg-a: #ede9fe;
  --prize-bg-b: #ddd6fe;
  --prize-border: #a78bfa;
  --prize-title: #4c1d95;
  --achievement-bg: #e0e7ff;
  --achievement-border: #c7d2fe;
}

body.world-space #world-art {
  filter: saturate(1.25) brightness(1.05);
}

body.world-ocean {
  --bg1: #083344;
  --bg2: #0f766e;
  --bg3: #06b6d4;
  --bg4: #0284c7;
  --orb-a: #67e8f9;
  --orb-b: #5eead4;
  --orb-c: #99f6e4;
  --card: #ecfeff;
  --text: #083344;
  --accent: #0891b2;
  --hero-btn-bg: #ecfeff;
  --hero-btn-text: #0c4a6e;
  --panel-bg: #cffafe;
  --panel-border: #67e8f9;
  --face-bg: #a5f3fc;
  --face-border: #22d3ee;
  --face-text: #155e75;
  --choice-bg: #ccfbf1;
  --choice-border: #5eead4;
  --choice-text: #115e59;
  --choice-active-bg: #99f6e4;
  --choice-active-border: #0f766e;
  --soft-btn-bg: #ccfbf1;
  --soft-btn-border: #5eead4;
  --soft-btn-text: #115e59;
  --progress-track: #a5f3fc;
  --progress-a: #22d3ee;
  --progress-b: #14b8a6;
  --power-bg: #0e7490;
  --power-border: #155e75;
  --answer-bg: #f0fdfa;
  --answer-border: #99f6e4;
  --rps-bg: #0e7490;
  --rps-border: #155e75;
  --prize-bg-a: #ecfeff;
  --prize-bg-b: #ccfbf1;
  --prize-border: #5eead4;
  --prize-title: #0f766e;
  --achievement-bg: #cffafe;
  --achievement-border: #67e8f9;
}

body.world-ocean #world-art {
  filter: saturate(1.25) hue-rotate(-8deg);
}

body.world-igbo {
  --bg1: #1f2937;
  --bg2: #7c2d12;
  --bg3: #854d0e;
  --bg4: #365314;
  --orb-a: #fde68a;
  --orb-b: #9a3412;
  --orb-c: #1e3a8a;
  --card: #fff8e8;
  --text: #3f2009;
  --accent: #9a3412;
  --hero-btn-bg: #fff8e8;
  --hero-btn-text: #5b2e0e;
  --panel-bg: #fef3c7;
  --panel-border: #a16207;
  --face-bg: #fde68a;
  --face-border: #92400e;
  --face-text: #5b2e0e;
  --choice-bg: #fef3c7;
  --choice-border: #a16207;
  --choice-text: #5b2e0e;
  --choice-active-bg: #fde68a;
  --choice-active-border: #1e3a8a;
  --soft-btn-bg: #fef3c7;
  --soft-btn-border: #92400e;
  --soft-btn-text: #5b2e0e;
  --progress-track: #fde68a;
  --progress-a: #1e3a8a;
  --progress-b: #9a3412;
  --power-bg: #1e3a8a;
  --power-border: #1e293b;
  --answer-bg: #fff8e8;
  --answer-border: #a16207;
  --rps-bg: #1e3a8a;
  --rps-border: #1e293b;
  --prize-bg-a: #fef3c7;
  --prize-bg-b: #fde68a;
  --prize-border: #a16207;
  --prize-title: #7c2d12;
  --achievement-bg: #fef3c7;
  --achievement-border: #a16207;
}

body.world-igbo #world-art {
  filter: saturate(1.2) contrast(1.08);
}

body.world-igbo .world-scene {
  border-color: rgba(30, 58, 138, 0.82);
  box-shadow: 0 16px 32px rgba(66, 32, 6, 0.35);
}

body.world-igbo .world-scene-label {
  background: rgba(66, 32, 6, 0.7);
}

body.world-igbo .card {
  background-image:
    linear-gradient(0deg, rgba(161, 98, 7, 0.11), rgba(161, 98, 7, 0.11)),
    repeating-linear-gradient(
      45deg,
      rgba(30, 58, 138, 0.06) 0px,
      rgba(30, 58, 138, 0.06) 8px,
      rgba(154, 52, 18, 0.06) 8px,
      rgba(154, 52, 18, 0.06) 16px
    );
}

body.world-igbo::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.1;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(30, 58, 138, 0.35) 0px,
      rgba(30, 58, 138, 0.35) 2px,
      transparent 2px,
      transparent 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(250, 204, 21, 0.35) 0px,
      rgba(250, 204, 21, 0.35) 2px,
      transparent 2px,
      transparent 30px
    );
}

.answer-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 16px;
}

.answer-btn {
  border: 2px solid var(--answer-border);
  background: var(--answer-bg);
  padding: 12px;
  border-radius: 10px;
  text-align: left;
}

.answer-btn.correct {
  border-color: var(--good);
  background: #eafaf1;
}

.answer-btn.wrong {
  border-color: var(--bad);
  background: #fdecec;
}

.answer-btn.fifty-hide {
  opacity: 0.35;
}

#feedback {
  min-height: 24px;
  font-weight: 700;
  margin-top: 12px;
}

.prize-box {
  margin: 12px 0 16px;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, var(--prize-bg-a), var(--prize-bg-b));
  border: 2px solid var(--prize-border);
}

.prize-title {
  margin: 6px 0 2px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--prize-title);
}

.prize-detail {
  margin: 0;
}

.achievements {
  list-style: none;
  padding: 0;
  margin: 6px 0 16px;
  display: grid;
  gap: 8px;
}

.achievement {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--achievement-bg);
  border: 2px solid var(--achievement-border);
}

.rps-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.rps-btn {
  background: var(--rps-bg);
  color: var(--rps-text);
  border: 2px solid var(--rps-border);
}

.rps-result {
  min-height: 24px;
  font-weight: 700;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.memory-tile {
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  min-height: 54px;
}

.tile-red { background: #dc2626; }
.tile-blue { background: #2563eb; }
.tile-green { background: #16a34a; }
.tile-yellow { background: #ca8a04; }

.memory-tile.flash {
  filter: brightness(1.55);
  transform: scale(1.03);
}

.celebrate {
  animation: pop 0.25s ease;
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 16px;
  opacity: 0.9;
  animation: drop 1s ease forwards;
}

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

@keyframes bg-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes drift-a {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-18px); }
  100% { transform: translateY(0px); }
}

@keyframes drift-b {
  0% { transform: translateY(0px); }
  50% { transform: translateY(14px); }
  100% { transform: translateY(0px); }
}

@keyframes drop {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(520deg);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .card {
    padding: 14px;
  }
}