@import url('data:text/css,');
:root{--navy:#142640;--cream:#fff6de;--gold:#ffd464;--teal:#64e0c2}*{box-sizing:border-box}body{margin:0;background:#101d31;color:var(--cream);font-family:Verdana,Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:4px solid var(--teal);outline-offset:5px}button:disabled{cursor:default;opacity:.65}#app{height:100dvh;min-height:540px;position:relative;overflow:hidden}#screen{position:absolute;inset:0;background-position:center;background-size:cover;display:flex;align-items:center;justify-content:center}#screen:empty{display:none}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,24,43,.88),rgba(9,24,43,.18) 75%)}.content{position:relative;width:min(1200px,92%);margin:auto;padding:42px 0}.eyebrow{font:700 12px monospace;letter-spacing:3px;color:var(--teal);text-transform:uppercase}.brand{position:absolute;top:25px;left:4%;font:700 13px monospace;letter-spacing:2px}.version{position:absolute;right:4%;top:25px;border:1px solid #ffffff50;padding:8px 12px;font:12px monospace;background:#13283dbb}h1{font:900 clamp(45px,6.8vw,90px)/1.02 monospace;letter-spacing:-4px;margin:22px 0;text-shadow:4px 4px #15263e}h1 span{color:var(--gold)}h2{font:800 clamp(26px,3.6vw,44px)/1.1 monospace;margin:14px 0}p{line-height:1.7}.lead{max-width:460px;color:#e5e7e4;font-size:16px}.btn{border:2px solid #172b43;background:var(--gold);color:#172b43;box-shadow:0 5px 0 #101f35;border-radius:5px;padding:15px 25px;font-weight:800;transition:transform .12s}.btn:hover{transform:translateY(-2px);background:#ffe7a3}.btn.secondary{background:var(--cream)}.btn.dark{background:#1c3654;color:var(--cream);border-color:#668298}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}.footnote{position:absolute;bottom:22px;left:4%;font:12px monospace;color:#e4e8eb}.step{font:12px monospace;letter-spacing:2px;color:var(--gold)}.center{text-align:center}.center .lead{margin:auto}.fullshade{background:#10263ac9}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px auto 0;max-width:1000px}.card{border:2px solid #718391;background:#132b43e8;color:white;border-radius:9px;padding:22px 12px;box-shadow:0 7px 0 #0a182c;transition:.15s}.card:hover,.card.selected{border-color:var(--gold);background:#254761;transform:translateY(-4px)}.card canvas{width:96px;height:128px;image-rendering:pixelated;display:block;margin:0 auto 15px}.card strong{display:block;font:700 21px monospace}.card small{display:block;margin-top:9px;color:#b6cbd6;font-size:11px}.levels{grid-template-columns:repeat(3,1fr);max-width:850px}.levelnum{font:700 42px monospace;color:var(--gold);display:block;margin:16px}.back{position:absolute;left:4%;top:24px;z-index:5;border:1px solid #ffffff66;background:#142640dd;color:white;border-radius:5px;padding:10px 14px}#game{position:absolute;inset:0}#game canvas{display:block}#hud{position:absolute;inset:0;pointer-events:none;padding:18px;display:flex;align-items:flex-start;justify-content:space-between}#hud[hidden],#modal[hidden]{display:none}.hudbox{background:#142640ed;border:2px solid #6e8c98;border-radius:7px;padding:13px 17px;box-shadow:0 4px #081322;font:13px monospace}.hudbox strong{display:block;color:var(--gold);font-size:17px;margin-bottom:5px}.hudbtn{pointer-events:auto;padding:10px;background:var(--cream);border:0;border-radius:4px;color:var(--navy);font-weight:bold}.bottomhud{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);text-align:center;min-width:270px}.touch{position:absolute;bottom:22px;left:20px;display:grid;grid-template-columns:repeat(3,40px);gap:4px;pointer-events:auto}.touch button{height:40px;background:#152b45df;color:white;border:1px solid #b7c6c9;border-radius:4px;touch-action:none}.interact{position:absolute;bottom:32px;right:24px;pointer-events:auto}.dialogwrap{position:absolute;inset:0;background:#0c1e32b8;display:flex;align-items:center;justify-content:center;padding:24px}.dialog{width:min(640px,100%);max-height:90dvh;overflow:auto;background:var(--cream);border:5px solid #1a3550;box-shadow:8px 8px #07132188;border-radius:12px;padding:30px;color:var(--navy)}.dialog p{font-size:14px}.dialog .eyebrow{color:#1a786d}.quizwrap {
  position: absolute;
  inset: 0;
  background: url('assets/board.webp') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz {
  width: min(10px, 83vw);       /* Cambia 850px si lo quieres más ancho o angosto */
  background: #fff9eefa;
  border: 4px solid #213b54;
  box-shadow: 8px 8px #12243c88;
  border-radius: 9px;
  padding: 28px;                 /* Cambia este padding si quieres más espacio interno */
  max-height: 75dvh;             /* Cambia este valor si se sale del pizarrón por arriba/abajo */
  overflow: auto;
  color: var(--navy);
}.quiz h2{font-size:28px}.quiz .eyebrow{color:#19736a}.progress{height:8px;background:#d5d8d3;margin:16px 0 24px;border-radius:9px;overflow:hidden}.progress span{height:100%;display:block;background:#208d7a}.answers{display:grid;gap:10px}.answer{display:flex;align-items:center;text-align:left;padding:14px;border:2px solid #aebdbd;background:white;border-radius:5px;color:var(--navy);font-size:17px}.answer b{padding:6px 10px;background:#edf0e9;margin-right:14px;font:16px monospace}.answer:hover:not(:disabled){border-color:#218d7b}.answer.correct{border-color:#16816c;background:#dff6e9;opacity:1}.answer.wrong{border-color:#bd5c53;background:#ffe4dc;opacity:1}.feedback{padding:12px 0;font-size:14px;line-height:1.6}.result{font:800 68px monospace;color:#167c6a;margin:20px 0}.pill{background:#d9eee5;border-radius:20px;padding:7px 12px;font:12px monospace;display:inline-block}.selectionrow{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 24px}.selectionrow button{padding:12px 16px;background:white;border:2px solid #99abab;border-radius:5px;color:var(--navy)}.selectionrow button.active{background:#1d655e;color:white;border-color:#1d655e}@media(max-width:650px){.cards{gap:10px;grid-template-columns:repeat(2,1fr);margin-top:18px}.card{padding:12px}.card canvas{width:60px;height:80px;margin-bottom:5px}.card strong{font-size:17px}.card small{display:none}.levels{grid-template-columns:1fr}.levels .card{display:flex;align-items:center;gap:20px;text-align:left}.levelnum{font-size:27px;margin:3px}.content{padding-top:65px}.lead{font-size:14px}h1{letter-spacing:-2px}.footnote{font-size:10px}.quiz{padding:18px}.quiz h2{font-size:22px}.bottomhud{bottom:120px}.hudbox{padding:9px;font-size:11px}.dialog{padding:20px}}

/* ESTILO PIXEL: la fuente se incluye en assets, no necesita conexión. */
@font-face{font-family:Pixel;src:url('assets/pixel.ttf') format('truetype');font-display:swap}
body,button{font-family:Pixel,monospace}
body{font-size:12px}p{line-height:2}.btn,.card,.dialog,.quiz,.hudbox,.answer,.selectionrow button{border-radius:0}
h2{font-family:Pixel,monospace;font-size:clamp(20px,3vw,32px);line-height:1.6}
.title-shade{position:absolute;inset:0;background:#08172b55}
.title-content{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:95%}
.pixel-title{font-family:Pixel,monospace;font-size:clamp(32px,8vw,var(--title-size));color:var(--title-color);letter-spacing:0;line-height:1.4;margin:0;text-shadow:5px 5px 0 #172942,8px 8px 0 #081525}
.pixel-play{margin-top:var(--play-gap);font-family:Pixel,monospace;background:var(--play-color);font-size:20px;padding:22px 40px;border:4px solid #172942;border-radius:0;box-shadow:6px 6px 0 #081525}
.pixel-play:hover{background:var(--play-color);filter:brightness(1.1)}
.learning-hint{background:#e5f2db;border-left:4px solid #40805d;padding:14px;margin-top:14px;font:15px/1.7 Verdana,sans-serif}.learning-summary{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:20px 0}.learning-summary>div{flex:1;min-width:160px;background:#e5eee3;padding:18px;border:2px solid #9fb6ac}.learning-summary strong{display:block;font-size:30px;color:#167c6a;margin-bottom:12px}.learning-summary span,.practice-note{font:13px/1.7 Verdana,sans-serif}.practice-note{color:#526871}.quiz h2{font:700 clamp(20px,3vw,28px)/1.5 Verdana,sans-serif}.answers,.feedback{font-family:Verdana,sans-serif}
.shop h2{margin:10px 0;font:700 clamp(21px,3vw,30px)/1.3 Verdana,sans-serif}.shop-goal{font:17px/1.5 Verdana,sans-serif;margin:10px 0}.friends{display:flex;justify-content:center;gap:28px;margin:10px 0}.friend{text-align:center}.friend canvas{width:40px;height:55px;image-rendering:pixelated;display:block;margin:auto}.friend-status{font:11px/1.5 Verdana,sans-serif;display:block;margin-top:4px}.shop-products{display:grid;grid-template-columns:1fr 1fr;gap:14px}.shop-product{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;background:#f1e5ce;border:2px solid #bda783}.juice{height:65px;width:49px;flex-shrink:0}.juice.big{height:76px}.shop-product h3{font:700 14px Verdana,sans-serif;margin:0 0 7px}.price{font:700 24px monospace;color:#185b51}.quantity{display:flex;align-items:center;gap:12px;margin-left:auto}.quantity button{width:39px;height:39px;border:2px solid #18364a;background:#fff9e8;color:#18364a;font:bold 25px monospace;touch-action:manipulation}.quantity output{font:bold 22px monospace;min-width:20px;text-align:center}.basket{min-height:53px;display:flex;align-items:center;justify-content:center;margin:12px 0;border:2px dashed #bbaa88;padding:6px;font:13px/1.5 Verdana,sans-serif}.basket .juice{width:27px;height:38px}.basket .juice.big{height:43px}.shop-totals{display:flex;justify-content:space-around;gap:8px;background:#e2ecdf;padding:12px;font:14px Verdana,sans-serif}.shop-totals b{display:block;font-size:22px;margin-top:5px}.over-budget{color:#a73528}.shop-message{font:15px/1.5 Verdana,sans-serif;margin-top:12px}.shop-success{padding:12px;background:#d2efcc;border-left:4px solid #3a8045}.shop .actions{margin-top:16px}.shop .btn{font-size:12px;padding:13px}.shop .practice-note{margin-bottom:0}@media(max-width:600px){.friends{gap:18px}.shop-product{padding:8px;gap:6px}.quantity{margin:5px auto 0;gap:8px}.shop-product .juice{width:32px;height:48px}.shop-product .juice.big{height:55px}.shop-product h3{font-size:12px}.shop-totals{font-size:12px}.shop{width:94vw}.shop .eyebrow{font-size:10px;letter-spacing:1px}}

/* Misiones: se conserva el pizarrón, la paleta y los botones existentes. */
.mission-meta{display:flex;justify-content:space-between;gap:12px;font:13px/1.5 Verdana,sans-serif}.mission-prompt,.mission-instruction{font:17px/1.7 Verdana,sans-serif}.mission .answer{font:16px/1.5 Verdana,sans-serif;min-height:48px}.proof-slots{padding:12px 18px 12px 42px;background:#e5eee3;border:2px solid #9fb6ac;font:16px/1.6 Verdana,sans-serif}.proof-slots li{padding:7px 4px;border-bottom:1px dashed #a7b9ae}.proof-slots li:last-child{border:0}.empty-slot{color:#5a6e68}.proof-bank .answer:disabled{display:none}.mission .progress{margin:12px 0}.compact{margin-top:12px}.mission .btn{font-size:11px;line-height:1.6;padding:13px 16px}.grade-label{display:block;margin-top:8px;font:12px/1.5 Verdana,sans-serif}.mission-preview{font:700 16px/1.6 Verdana,sans-serif}.content-source{margin-top:22px;font:12px/1.6 Verdana,sans-serif;color:#526871}.content-source summary{cursor:pointer}.content-source p{font:12px/1.6 Verdana,sans-serif}.mission .eyebrow{letter-spacing:1px;line-height:1.6}.selectionrow button{overflow-wrap:anywhere}@media(max-width:600px){.mission{width:94vw;max-height:92dvh;padding:16px}.mission-meta{font-size:11px;flex-wrap:wrap}.mission-prompt,.mission-instruction,.mission .answer,.proof-slots{font-size:15px}.mission .actions{gap:10px;margin-top:14px}.mission h2{font-size:22px}.proof-slots{padding-left:30px}.dialogwrap{padding:12px}.dialog{max-height:94dvh}.selectionrow{gap:7px}.selectionrow button{font-size:11px;padding:10px}.mission .learning-summary>div{min-width:120px}.mission .eyebrow{font-size:11px}}

/* Periódico: misma escena de pizarrón y personajes del patio. */
.newspaper .reporter{display:flex;gap:16px;align-items:center;margin:14px 0}.reporter>canvas{width:56px;height:77px;image-rendering:pixelated;flex-shrink:0}.reporter-bubble{border:2px solid #a7b9ae;background:#e5eee3;padding:12px 16px;flex:1}.reporter-bubble h2{font-size:21px;margin:0 0 5px}.reporter-bubble p{font:16px/1.5 Verdana,sans-serif;margin:0}.survey{margin:14px 0;background:#f1e5ce;border:2px solid #bda783;padding:12px}.survey figcaption{font:15px/1.5 Verdana,sans-serif;text-align:center}.survey-students{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;max-width:600px;margin:12px auto}.survey-student{position:relative;display:flex;flex-direction:column;align-items:center}.survey-student canvas{width:32px;height:44px;image-rendering:pixelated}.reading-icon{width:32px;height:32px;flex-shrink:0;image-rendering:pixelated}.survey-key{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font:14px/1.5 Verdana,sans-serif}.survey-key span{display:flex;align-items:center;gap:6px}.survey-key .reading-icon{width:24px;height:24px}.survey small{display:block;text-align:center;margin-top:8px;font:11px/1.4 Verdana,sans-serif;color:#526871}.choose-headline{font:700 15px/1.5 Verdana,sans-serif;margin:12px 0}.headline-options .answer{gap:14px}.newspaper .feedback:empty{display:none}.published-paper{background:#fffdf3;border:3px solid #654f35;padding:18px;position:relative;animation:paper-arrives .3s ease-out}.paper-masthead{font:11px/1.7 Pixel,monospace;border-bottom:3px double #654f35;padding-bottom:10px}.published-paper h3{font:700 23px/1.4 Georgia,serif;margin:16px 0}.paper-lines{height:25px;background:repeating-linear-gradient(to bottom,#bba98c 0 2px,transparent 2px 8px);width:68%}.publication-stamp{display:block;text-align:right;color:#167c6a;font:700 14px/1.5 Verdana,sans-serif;margin-top:12px}.newspaper .success-message{color:#166653;font-weight:bold}.newspaper .actions{margin-top:14px}@keyframes paper-arrives{from{transform:translateY(8px);opacity:.4}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.published-paper{animation:none}}@media(max-width:520px){.survey-students{grid-template-columns:repeat(5,minmax(0,1fr));max-width:320px;gap:8px}.survey-key{gap:8px}.reporter>canvas{width:40px;height:55px}.newspaper .reporter{gap:8px}.reporter-bubble{padding:10px}.reporter-bubble h2{font-size:18px}.reporter-bubble p{font-size:14px}.newspaper .answer{font-size:14px}.headline-options .reading-icon{width:26px;height:26px}}
/* Transición suave para las pantallas */
#screen {
  transition: opacity 0.3s ease-in-out;
}

#screen.fade-out {
  opacity: 0;
}

#screen.fade-in {
  animation: fadeIn 0.4s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Estilo para los botones en hover y active */
.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Caja de felicitación del álbum */
.congrats-card {
  background: rgba(20, 38, 64, 0.9);
  border: 3px solid #ffd464;
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  margin: 20px auto;
  box-shadow: 0 0 25px rgba(255, 212, 100, 0.4);
  text-align: center;
}

.congrats-card h2 {
  color: #ffd464;
  font-size: 24px;
  margin-bottom: 10px;
}
/* --- ANIMACIONES DIVERSAS PARA LOS MENÚS --- */

.anim-slide-right {
  animation: slideRight 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

.anim-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-zoom-in {
  animation: zoomIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.anim-fade-in {
  animation: fadeIn 0.4s ease-in-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}

.congrats-card {
  background: rgba(20, 38, 64, 0.9);
  border: 3px solid #ffd464;
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  margin: 20px auto;
  box-shadow: 0 0 25px rgba(255, 212, 100, 0.4);
  text-align: center;
}
.congrats-card h2 {
  color: #ffd464;
  font-size: 24px;
  margin-bottom: 10px;
}
.beta-note{font:10px/1.7 Pixel,monospace;color:#fff6de;text-shadow:2px 2px #142640;margin:16px 0 0}