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

html {
  font-size: clamp(16px, 2.2cqi, 24px);
}

body {
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
  padding: 0;
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.font-fun {
  font-family: 'Fredoka', 'Quicksand', sans-serif;
}

.reading-text {
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: clamp(1rem, 2.5cqi, 1.4rem);
  line-height: 1.7;
  color: #1e3a8a;
  background: #fff;
  padding: clamp(8px, 2cqi, 16px);
  border-radius: 8px;
}

.container-game {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.grid { display: grid; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-50 { z-index: 50; }
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }

.p-1 { padding: clamp(4px, 1cqi, 8px); }
.p-2 { padding: clamp(6px, 1.5cqi, 12px); }
.p-3 { padding: clamp(10px, 2cqi, 18px); }
.p-4 { padding: clamp(14px, 3cqi, 24px); }
.px-2 { padding-left: clamp(6px, 1.5cqi, 12px); padding-right: clamp(6px, 1.5cqi, 12px); }
.px-3 { padding-left: clamp(10px, 2cqi, 18px); padding-right: clamp(10px, 2cqi, 18px); }
.px-4 { padding-left: clamp(14px, 3cqi, 24px); padding-right: clamp(14px, 3cqi, 24px); }
.px-5 { padding-left: clamp(18px, 4cqi, 30px); padding-right: clamp(18px, 4cqi, 30px); }
.px-6 { padding-left: clamp(22px, 5cqi, 36px); padding-right: clamp(22px, 5cqi, 36px); }
.py-1 { padding-top: clamp(4px, 1cqi, 8px); padding-bottom: clamp(4px, 1cqi, 8px); }
.py-2 { padding-top: clamp(6px, 1.5cqi, 12px); padding-bottom: clamp(6px, 1.5cqi, 12px); }
.py-3 { padding-top: clamp(10px, 2cqi, 18px); padding-bottom: clamp(10px, 2cqi, 18px); }
.mb-1 { margin-bottom: clamp(4px, 1cqi, 8px); }
.mb-2 { margin-bottom: clamp(8px, 2cqi, 16px); }
.mb-3 { margin-bottom: clamp(12px, 2.5cqi, 20px); }
.mb-4 { margin-bottom: clamp(16px, 3cqi, 28px); }
.mt-1 { margin-top: clamp(4px, 1cqi, 8px); }
.mt-2 { margin-top: clamp(8px, 2cqi, 16px); }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-1 { gap: clamp(4px, 1cqi, 8px); }
.gap-2 { gap: clamp(8px, 2cqi, 14px); }
.space-x-1 > * + * { margin-left: clamp(4px, 1cqi, 8px); }
.space-x-2 > * + * { margin-left: clamp(8px, 2cqi, 14px); }
.space-x-4 > * + * { margin-left: clamp(16px, 3cqi, 24px); }

.text-xs   { font-size: clamp(0.75rem, 1.8cqi, 0.9rem); }
.text-sm   { font-size: clamp(0.85rem, 2cqi, 1rem); }
.text-base { font-size: clamp(1rem, 2.2cqi, 1.2rem); }
.text-lg   { font-size: clamp(1.1rem, 2.5cqi, 1.4rem); }
.text-xl   { font-size: clamp(1.25rem, 3cqi, 1.6rem); }
.text-2xl  { font-size: clamp(1.5rem, 4cqi, 2rem); }
.text-3xl  { font-size: clamp(1.75rem, 5cqi, 2.5rem); }
.text-4xl  { font-size: clamp(2rem, 6cqi, 3rem); }
.font-bold { font-weight: 700; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-none    { line-height: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opacity-80 { opacity: 0.8; }

.bg-white, .bg-white\/95 { background: #fff; }
.bg-indigo-50  { background: #eef2ff; }
.bg-amber-50\/70 { background: rgba(255,251,235,0.85); }
.bg-blue-50   { background: #eff6ff; }
.bg-purple-50 { background: #faf5ff; }
.bg-slate-100\/95 { background: rgba(241,245,249,0.95); }
.bg-slate-200 { background: #e2e8f0; }
.bg-slate-800 { background: #1e293b; }
.bg-slate-900 { background: #0f172a; }
.bg-yellow-100 { background: #fef9c3; }
.bg-yellow-400 { background: #facc15; }
.bg-yellow-200 { background: #fef08a; }
.bg-emerald-100 { background: #d1fae5; }
.bg-emerald-500 { background: #10b981; }
.bg-rose-100 { background: #ffe4e6; }
.bg-amber-100 { background: #fef3c7; }
.bg-indigo-100 { background: #e0e7ff; }
.bg-indigo-600 { background: #4f46e5; }
.bg-purple-600 { background: #7c3aed; }

.text-white        { color: #fff; }
.text-slate-300    { color: #cbd5e1; }
.text-slate-400    { color: #94a3b8; }
.text-slate-500    { color: #64748b; }
.text-slate-600    { color: #475569; }
.text-slate-700    { color: #334155; }
.text-slate-800    { color: #1e293b; }
.text-indigo-700   { color: #4338ca; }
.text-indigo-800   { color: #3730a3; }
.text-indigo-900   { color: #312e81; }
.text-indigo-950   { color: #1e1b4b; }
.text-amber-600    { color: #d97706; }
.text-rose-600     { color: #e11d48; }
.text-rose-700     { color: #be123c; }
.text-rose-800     { color: #9f1239; }
.text-emerald-600  { color: #059669; }
.text-emerald-700  { color: #047857; }
.text-blue-700     { color: #1d4ed8; }
.text-blue-900     { color: #1e3a8a; }
.text-yellow-300   { color: #fde047; }
.text-yellow-400   { color: #facc15; }
.text-yellow-600   { color: #ca8a04; }

.border      { border: 1px solid; }
.border-2    { border: 2px solid; }
.border-4    { border: 4px solid; }
.border-b-2  { border-bottom: 2px solid; }
.border-dashed { border-style: dashed; }
.rounded-lg  { border-radius: 8px; }
.rounded-xl  { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

.border-white\/80 { border-color: rgba(255,255,255,0.8); }
.border-purple-200 { border-color: #e9d5ff; }
.border-purple-300 { border-color: #d8b4fe; }
.border-indigo-200 { border-color: #c7d2fe; }
.border-indigo-300 { border-color: #a5b4fc; }
.border-amber-200  { border-color: #fde68a; }
.border-amber-400  { border-color: #fbbf24; }
.border-slate-200  { border-color: #e2e8f0; }
.border-slate-300  { border-color: #cbd5e1; }
.border-emerald-400 { border-color: #34d399; }
.border-rose-400   { border-color: #fb7185; }
.border-blue-200   { border-color: #bfdbfe; }
.border-yellow-400 { border-color: #facc15; }
.border-yellow-600 { border-color: #ca8a04; }
.border-green-400  { border-color: #4ade80; }

.shadow-xl { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.shadow    { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.animate-bounce {
  animation: bounce 1s infinite;
}

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

.btn-game {
  transition: all 0.1s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.2);
  cursor: pointer;
  min-height: 48px;
  touch-action: manipulation;
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2cqi, 18px) clamp(16px, 3cqi, 28px);
  font-size: clamp(0.9rem, 2cqi, 1.1rem);
  border-radius: 12px;
}

.btn-game:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.btn-game:disabled {
  opacity: 0.5;
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  cursor: default;
}

.avatar-btn {
  transition: all 0.15s ease;
  cursor: pointer;
  min-width: 54px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #d8b4fe;
  border-radius: 12px;
  font-size: clamp(1.5rem, 4cqi, 2.2rem);
}

.avatar-btn:active { transform: scale(0.92); }
.avatar-btn.selected { background: #fef08a; border-color: #facc15; }

.area-chip {
  transition: all 0.12s ease;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid #c7d2fe;
  background: #fff;
  color: #3730a3;
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  touch-action: manipulation;
}

.area-chip:active { transform: scale(0.95); }
.area-chip.selected { background: #6366f1; border-color: #4338ca; color: #fff; }

#basketArea, #crArea, #eqArea, #tbArea {
  touch-action: none;
  user-select: none;
  height: 50dvh;
  max-height: 320px;
  min-height: 200px;
}

#rewardWrapper {
  height: 50dvh;
  max-height: 300px;
  min-height: 200px;
}

#rewardCanvas {
  display: block;
  touch-action: none;
  width: 100%;
  height: 100%;
}

#optionsGrid button {
  min-height: 52px;
  font-size: clamp(0.9rem, 2cqi, 1.1rem);
  padding: clamp(12px, 2.5cqi, 20px) clamp(12px, 2.5cqi, 20px);
}

/* Desafíos interactivos (unir, ordenar, completar): evita desbordes en
   pantallas angostas manteniendo las fichas legibles y alcanzables. */
#optionsGrid select {
  min-width: 0;
  max-width: 100%;
}
#optionsGrid .flex > * {
  min-width: 0;
}
#optionsGrid .chips-row {
  overflow-wrap: break-word;
}
#optionsGrid button, #optionsGrid select, #optionsGrid span, #optionsGrid div {
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  #optionsGrid button, #optionsGrid select {
    font-size: 0.85rem;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #optionsGrid .btn-game { min-height: 44px; }
}

.shake-error {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.bounce-pop {
  animation: pop 0.3s ease-out;
}

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

.bottom-1 { bottom: clamp(4px, 1cqi, 8px); }
.bottom-2 { bottom: clamp(8px, 2cqi, 16px); }

.select-none { -webkit-user-select: none; user-select: none; }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

header {
  padding: clamp(8px, 2cqi, 14px);
  background: #0f172a;
}

.falling-item {
  pointer-events: none;
  will-change: transform;
  font-size: clamp(1.2rem, 3cqi, 2rem);
}

#minigameWrapper button:not(.btn-game) {
  cursor: pointer;
  touch-action: manipulation;
  border: none;
  outline: none;
}

#minigameWrapper {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

#screenWelcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 4cqi, 40px);
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  box-sizing: border-box;
  position: relative;
}

/* Fondo decorativo de la pantalla de inicio: emojis temáticos flotando
   (matemática, lectura, ciencias, historia, etc.) para que no quede vacío. */
#screenWelcome .welcome-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#screenWelcome .welcome-bg span {
  position: absolute;
  font-size: clamp(3rem, 12cqi, 7rem);
  opacity: 0.16;
  filter: blur(0.5px);
  animation: welcomeFloat 9s ease-in-out infinite;
  user-select: none;
}

#screenWelcome .welcome-bg span:nth-child(1)  { top: 6%;  left: 4%;  animation-delay: 0s; }
#screenWelcome .welcome-bg span:nth-child(2)  { top: 18%; right: 6%; animation-delay: 1.2s; }
#screenWelcome .welcome-bg span:nth-child(3)  { top: 4%;  right: 22%; animation-delay: 2.1s; }
#screenWelcome .welcome-bg span:nth-child(4)  { top: 42%; left: 2%;  animation-delay: 0.6s; }
#screenWelcome .welcome-bg span:nth-child(5)  { top: 58%; right: 2%; animation-delay: 1.8s; }
#screenWelcome .welcome-bg span:nth-child(6)  { top: 76%; left: 6%;  animation-delay: 2.6s; }
#screenWelcome .welcome-bg span:nth-child(7)  { top: 88%; right: 8%; animation-delay: 0.9s; }
#screenWelcome .welcome-bg span:nth-child(8)  { top: 10%; left: 38%; animation-delay: 3s; }
#screenWelcome .welcome-bg span:nth-child(9)  { top: 68%; left: 30%; animation-delay: 1.5s; }
#screenWelcome .welcome-bg span:nth-child(10) { top: 30%; right: 32%; animation-delay: 2.4s; }
#screenWelcome .welcome-bg span:nth-child(11) { top: 82%; left: 48%; animation-delay: 3.4s; }
#screenWelcome .welcome-bg span:nth-child(12) { top: 20%; left: 60%; animation-delay: 0.3s; }
#screenWelcome .welcome-bg span:nth-child(13) { top: 90%; left: 22%; animation-delay: 2s; }
#screenWelcome .welcome-bg span:nth-child(14) { top: 8%;  right: 48%; animation-delay: 3.8s; }
#screenWelcome .welcome-bg span:nth-child(15) { top: 60%; left: 70%; animation-delay: 4.2s; }

@keyframes welcomeFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-18px) rotate(5deg); }
}

#screenWelcome .welcome-wrap {
  position: relative;
  z-index: 1;
  margin: auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2cqi, 22px);
}

#screenWelcome .welcome-card {
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#screenWelcome .welcome-card h1 {
  color: #fff;
}

#screenWelcome .welcome-card p {
  color: rgba(255,255,255,0.9);
}

.grade-select {
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #5b21b6;
  background: #fff;
  border: 2px solid #c4b5fd;
  border-radius: 0.75rem;
  cursor: pointer;
}

.grade-picker {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.grade-picker .grade-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.grade-chevron {
  transition: transform 0.15s ease;
  font-size: 0.85em;
}

.grade-picker.open .grade-chevron {
  transform: rotate(180deg);
}

.grade-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 2px solid #c4b5fd;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  max-height: 240px;
  overflow-y: auto;
  z-index: 60;
}

.grade-picker-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #5b21b6;
  background: #fff;
  border: none;
  border-bottom: 1px solid #ede9fe;
  cursor: pointer;
}

.grade-picker-list button:last-child {
  border-bottom: none;
}

.grade-picker-list button:active {
  background: #ede9fe;
}

@media (max-width: 360px) {
  #appFooter {
    font-size: 12px !important;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

#screenAreaPick,
#screenFreePick,
#screenReward {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3cqi, 24px);
  min-height: 100dvh;
}

#screenGame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2cqi, 20px);
  gap: clamp(8px, 1.5cqi, 16px);
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#screenGame > * {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#screenMinigame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3cqi, 24px);
  min-height: 100dvh;
}

#screenVictory {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4cqi, 32px);
  min-height: 100dvh;
}

#screenVictory .victory-card {
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 400px;
}

#screenVictory .victory-card h1 {
  color: #fff;
}

#screenVictory .feedback-form {
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: clamp(14px, 3cqi, 24px);
  text-align: left;
  color: #334155;
}

#optionsGrid {
  width: 100%;
}

#questionCard {
  width: 100%;
}

#readingPassageBox {
  width: 100%;
}

@media (orientation: landscape) and (max-height: 500px) {
  #basketArea, #crArea, #eqArea, #tbArea { height: 55dvh; max-height: 220px; min-height: 140px; }
  #rewardWrapper { height: 45dvh; max-height: 200px; min-height: 140px; }
  #optionsGrid { flex-direction: row !important; flex-wrap: wrap; }
  #optionsGrid button { flex: 1; min-width: 40%; }
  #screenWelcome, #screenGame, #screenMinigame, #screenVictory { padding: clamp(6px, 1.5cqi, 12px); }
}

@media (min-width: 768px) {
  .container-game { max-width: 720px; margin: 0 auto; }
  html { font-size: 18px; }
  #basketArea, #crArea, #eqArea, #tbArea { height: 40dvh; max-height: 360px; }
}