/* Preguntas visuales sobre el mismo pizarrón de COALEARN. */
.pixel-icon{width:48px;height:48px;display:inline-block;flex-shrink:0;color:var(--scene-ink,#265f68);vertical-align:middle;image-rendering:pixelated}
.dynamic-mission{--scene-ink:#285c65;--scene-bg:#e1eddf;--scene-edge:#9eb8a3;width:min(900px,94vw);padding:22px;max-height:94dvh}
.theme-paper{--scene-ink:#8a5736;--scene-bg:#f3e6cc;--scene-edge:#c7a57a}.theme-math{--scene-ink:#396c91;--scene-bg:#dfeef5;--scene-edge:#a1bbc8}.theme-lab{--scene-ink:#326e51;--scene-bg:#deebd6;--scene-edge:#9bb997}.theme-museum{--scene-ink:#85613c;--scene-bg:#ece0c6;--scene-edge:#b79b73}.theme-community{--scene-ink:#70527e;--scene-bg:#ebe1ee;--scene-edge:#b9a4bf}.theme-theatre{--scene-ink:#a25558;--scene-bg:#f2e1d7;--scene-edge:#c69e94}.theme-workshop{--scene-ink:#316c75;--scene-bg:#dceced;--scene-edge:#91b6ba}
.mission-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.dynamic-mission .eyebrow{font-size:11px;letter-spacing:1px}.dynamic-mission .mission-meta{margin-top:8px;color:#55656c;font-size:11px}.dynamic-mission h2{font-size:clamp(19px,3vw,27px);margin:12px 0}.mini-progress{display:flex;gap:5px;white-space:nowrap}.mini-progress i{font:23px/1 sans-serif;color:#bdc4bb;font-style:normal}.mini-progress i.earned{color:#b57b1a;text-shadow:1px 1px #fff}
.scene-context{font:16px/1.6 Verdana,sans-serif;margin:10px 0;color:#253d48}.play-scene{padding:16px;background:var(--scene-bg);border:3px solid var(--scene-edge);box-shadow:4px 4px 0 #14264018;position:relative;margin:12px 0;overflow:hidden}.scene-objects{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap}.scene-object{flex:1;min-width:100px;max-width:240px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:10px}.scene-object .pixel-icon{width:60px;height:60px;filter:drop-shadow(3px 4px 0 #14264015)}.scene-object span{font:14px/1.5 Verdana,sans-serif}.chain-objects{flex-wrap:nowrap}.chain-arrow{position:absolute;right:-17px;top:35px;font-size:24px!important}
.scene-people{position:relative;display:flex;justify-content:center;gap:24px;align-items:flex-end;min-height:80px;padding:8px 0;border-bottom:5px solid var(--scene-edge);margin-bottom:8px}.scene-people canvas{width:40px;height:55px;image-rendering:pixelated;transition:transform .25s}.scene-people .actor-1{width:48px;height:66px}.scene-reaction{position:absolute;right:12%;top:0;font:13px/1.5 Verdana,sans-serif;background:#fff9ee;padding:4px 10px;border:2px solid var(--scene-edge)}.scene-complete .actor-0{transform:translateX(8px)}.scene-complete .actor-2{transform:translateX(-8px)}
.play-question{font:700 18px/1.5 Verdana,sans-serif;margin:18px 0 12px}.visual-answers{gap:10px}.visual-answer{gap:14px;border:2px solid #a8b9b3;padding:12px;min-height:60px;font:15px/1.5 Verdana,sans-serif!important}.visual-answer .pixel-icon{width:34px;height:34px}.visual-answer.selected{border-color:#226d63;background:#e2f2e6;box-shadow:0 0 0 2px #226d6330}.visual-answer.wrong{opacity:.7}.picture-options{grid-template-columns:repeat(3,minmax(0,1fr))}.picture-options .visual-answer{flex-direction:column;text-align:center;padding:14px 10px}.picture-options .pixel-icon{width:55px;height:55px}.choice-preview{font:13px/1.5 Verdana,sans-serif;color:#55666d;margin:10px 0}.apply-choice{margin-top:0}.dynamic-mission .learning-hint{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:14px}.learning-hint .pixel-icon{width:28px;height:28px;color:#597d39}.dynamic-mission .feedback{padding:8px 0}.dynamic-mission .feedback:empty{display:none}.dynamic-mission .play-tools{margin-top:16px;gap:9px}.dynamic-mission .btn{font-size:10px;padding:12px 14px}.sound-control{display:block;margin:16px 0 0 auto;border:0;background:transparent;color:#526871;font:12px/1.5 Verdana,sans-serif;padding:6px}.small-control{font:13px/1.5 Verdana,sans-serif;color:#243f53;background:#fff9ed;border:2px solid #78998b;padding:9px 12px;min-height:44px}
.number-console{padding:18px;border:2px solid #97afba;background:#edf4f4;text-align:center}.number-console label{font:15px/1.5 Verdana,sans-serif}.number-input-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0}.number-input-row input{width:min(190px,55%);min-width:80px;font:700 32px/1.3 monospace;text-align:center;padding:10px;border:3px solid #36566b;background:white;color:#18364a}.number-input-row button,.test-counter button{width:48px;height:48px;font:bold 26px monospace;border:2px solid #315668;background:#fff7df;color:#1b384e}.number-shortcuts{display:flex;gap:8px;justify-content:center;margin:8px 0 16px}.number-shortcuts button{padding:8px;font:14px monospace;min-width:44px;min-height:40px;border:1px solid #9ab0ba;background:white;color:#224c60}
.fraction-wholes{display:flex;justify-content:center;flex-wrap:wrap;gap:24px}.fraction-unit{min-width:160px;max-width:270px;flex:1;text-align:center;font:14px/1.5 Verdana,sans-serif}.fraction-pieces{display:grid;grid-template-columns:repeat(var(--parts),1fr);gap:3px;margin-top:8px;border:3px solid #a37a37;padding:3px;background:#fff8de}.fraction-pieces button{min-height:70px;border:2px dashed #bc9f68;background:#fff8de;color:#805d24;font:26px monospace}.fraction-pieces button.filled{background:#edb750;border-style:solid;color:#413414}.fraction-count{display:block;text-align:center;font:700 17px/1.5 Verdana,sans-serif;margin-top:12px}.scene-instruction{font:14px/1.6 Verdana,sans-serif;text-align:center;margin:0 0 12px}.fraction-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:66px;height:66px;background:#c6a15a;border:3px solid #a17a3f;padding:3px}.fraction-demo i{background:#fff6de}.fraction-demo i.filled{background:#e9a54b}
.coordinate-map{display:block;width:min(100%,430px);max-height:230px;margin:auto;font:12px Verdana,sans-serif;color:#223f51}.coordinate-map text{fill:#29475d}.compass-board{display:grid;grid-template-columns:30px 55px 30px;grid-template-rows:25px 55px 25px;align-items:center;justify-content:center;text-align:center;margin:auto;font:bold 16px Verdana,sans-serif}.compass-board .north{grid-column:2}.compass-board .west{grid-row:2}.compass-board .pixel-icon{grid-row:2;grid-column:2;width:55px;height:55px}.compass-board .east{grid-row:2;grid-column:3}.compass-board .south{grid-row:3;grid-column:2}
.editor-paper{background:#fffdf2;border:2px solid #bc9f77;box-shadow:4px 4px #cab991;padding:16px;min-height:95px}.editor-writing{font:18px/1.6 Georgia,serif;padding-top:12px}.paper-masthead{font-size:10px}.story-stage{border-top:10px solid #a66a65;border-left:8px solid #a66a65;border-right:8px solid #a66a65;padding:8px;background:#fff9e750}.story-stage .scene-people{margin:0}.timeline-scene{position:relative}.timeline-scene:before{content:'';position:absolute;top:44px;left:10%;right:10%;height:4px;background:#a47d43}.timeline-scene .scene-object .pixel-icon{position:relative;background:var(--scene-bg)}.evidence-board{display:flex;gap:12px;justify-content:center;align-items:stretch}.evidence-item{flex:1;max-width:240px;min-width:0;background:#fff8e8;border:2px solid #b49a70;box-shadow:3px 3px #c3b497;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#614c30;font:14px/1.5 Verdana,sans-serif;transform:rotate(-1deg)}.evidence-item:nth-child(2){transform:rotate(1deg)}.evidence-item.inspected{border-color:#27766a;background:#edf3df;transform:rotate(0deg)}.evidence-item small{font-size:11px;color:#577063}.evidence-caption{font:15px/1.5 Verdana,sans-serif;text-align:center;background:#fff9e5;padding:9px;margin:12px 0 0}
.robot-track{height:70px;position:relative;background:repeating-linear-gradient(90deg,#d8e6d8 0 56px,#aac1b0 56px 58px);border-bottom:4px solid #749181;margin-bottom:12px}.robot-track canvas{position:absolute;left:5%;bottom:0;width:40px;height:55px;image-rendering:pixelated}.robot-goal{position:absolute;right:5%;bottom:0}.running .robot-track canvas{left:calc(85% - 40px);transition:left .7s ease-out}.lab-result{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:#fff9e8;padding:12px;border:2px solid #86a78c;margin-top:12px;animation:reward-pop .3s ease-out}.lab-result strong{font:14px/1.5 Verdana,sans-serif;width:100%;text-align:center}
.rhythm-strip{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:14px}.rhythm-beat{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff9e5;border:2px solid #a3b7a4;padding:12px;font:13px/1.5 Verdana,sans-serif}.rhythm-beat.quiet{background:#d8dfda}.rhythm-beat.missing{font:bold 30px monospace;min-height:100px}.paint-tray{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px}.paint-swatch{display:flex;align-items:center;justify-content:center;width:78px;height:70px;border:3px solid #3d5053;font:bold 11px/1.3 Verdana,sans-serif;box-shadow:4px 4px #21394a25;color:#142640}.paint-swatch.yellow{background:#f6d662}.paint-swatch.blue{background:#5e8cca;color:#fff}.paint-swatch.green{background:#70ab71}.paint-swatch.orange{background:#eeac5d}.paint-swatch.purple{background:#a88bc0}.paint-swatch.unknown{background:#fff7dc;font-size:26px}
.poster-thumb{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;width:100%;max-width:180px;min-height:100px;background:#fff4d2;border:3px solid #253b51;padding:12px;color:#17384d;overflow:hidden}.poster-thumb strong{font:700 15px/1.5 monospace}.poster-thumb small{font:12px/1.5 Verdana,sans-serif}.poster-thumb.poster-1{color:#d4cbb1;background:#e5ddc7}.poster-thumb.poster-2 strong{font-size:7px}.poster-thumb.poster-2 small{font-size:7px;margin-top:-8px}.poster-thumb.identity.poster-0 strong{font-family:Pixel,monospace;font-size:11px}.poster-thumb.identity.poster-1{color:#be47bc;background:linear-gradient(35deg,#8bffca,#fbc2ee)}.poster-thumb.identity.poster-1 strong{font-family:Georgia,serif;font-style:italic}.poster-thumb.identity.poster-2 strong{letter-spacing:-3px}
.sentence-slots{font:clamp(18px,3vw,26px)/2.7 Georgia,serif;text-align:center}.sentence-slots button{width:38px;min-height:44px;border:2px dashed #528d75;background:#fff9e5;color:#27543e;font:bold 22px monospace;margin:0 5px}.sequence-strip{display:flex;align-items:center;justify-content:center;gap:12px}.sequence-strip span{display:flex;flex-direction:column;align-items:center;gap:8px;font:14px/1.5 Verdana,sans-serif;text-align:center}.test-counter{text-align:center;font:15px/1.5 Verdana,sans-serif}.test-counter>div{display:flex;align-items:center;justify-content:center;gap:18px;margin:12px}.test-counter output{font:bold 32px monospace}.test-counter small{display:block}
.success-panel{display:flex;align-items:flex-start;gap:16px;padding:18px;margin:16px 0;background:#e0efda;border:3px solid #7eaa83;animation:reward-pop .3s ease-out}.success-panel h3{font:700 20px/1.4 Verdana,sans-serif;margin:0 0 8px;color:#1e6148}.success-panel p{font:14px/1.6 Verdana,sans-serif;margin:6px 0}.success-panel .correct-outcome{font-weight:bold}.reward-icon .pixel-icon{color:#b98b29;width:52px;height:52px}.scene-complete .scene-object .pixel-icon{animation:reward-pop .35s ease-out}.quest-preview{display:flex;gap:16px;align-items:center;background:#e2ecdd;border:2px solid #a0b7a6;padding:14px}.quest-preview strong{display:block;font:700 16px/1.5 Verdana,sans-serif}.quest-preview span{display:block;font:12px/1.6 Verdana,sans-serif;margin-top:6px}.stamp-album{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.stamp-room{padding:12px;border:2px solid #a0b7a6;background:#e9efdc}.stamp-room h3{font:700 14px/1.4 Verdana,sans-serif;margin:0 0 10px}.stamp-room>div{display:flex;justify-content:space-between;font:12px/1.8 Verdana,sans-serif}.stamp-room strong{font:20px/1.3 sans-serif;color:#9c721e}
@keyframes reward-pop{from{opacity:.5;transform:translateY(5px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){.dynamic-mission{padding:14px}.mission-top{gap:6px}.dynamic-mission .eyebrow{font-size:10px;letter-spacing:0}.mini-progress i{font-size:19px}.dynamic-mission .mission-meta{font-size:10px}.scene-context{font-size:14px}.play-scene{padding:10px}.scene-objects{gap:8px}.scene-object{min-width:70px;padding:5px;gap:6px}.scene-object .pixel-icon{width:42px;height:42px}.scene-object span{font-size:12px;overflow-wrap:anywhere}.play-question{font-size:16px}.visual-answer{font-size:14px!important;gap:10px;padding:10px}.picture-options .visual-answer{font-size:12px!important;padding:9px 5px}.picture-options .pixel-icon{width:42px;height:42px}.dynamic-mission .btn{font-size:9px;padding:12px 10px}.dynamic-mission .actions{gap:8px}.evidence-board{gap:7px}.evidence-item{padding:8px;font-size:12px}.evidence-item .pixel-icon{width:36px;height:36px}.rhythm-strip{gap:5px}.rhythm-beat{padding:7px 4px;font-size:11px;min-width:0}.rhythm-beat .pixel-icon{width:33px;height:33px}.rhythm-beat.missing{min-height:81px}.paint-tray{gap:7px;padding:3px}.paint-swatch{width:62px;height:62px;font-size:10px}.poster-thumb{padding:6px;min-height:94px}.poster-thumb strong{font-size:12px}.poster-thumb small{font-size:10px}.success-panel{padding:12px;gap:10px}.success-panel h3{font-size:17px}.reward-icon .pixel-icon{width:35px;height:35px}.stamp-album{grid-template-columns:1fr}.chain-arrow{right:-12px;top:22px}.scene-reaction{right:2%}.fraction-unit{min-width:110px}.fraction-pieces button{min-height:58px}.scene-instruction{font-size:13px}}
@media(prefers-reduced-motion:reduce){.scene-complete .scene-object .pixel-icon,.success-panel,.lab-result{animation:none}.scene-people canvas,.running .robot-track canvas{transition:none}.running .robot-track canvas{left:5%}}

.editor-source{font:14px/1.6 Verdana,sans-serif;margin:12px 0 4px;color:#4c5c5c}.editor-writing{border-top:1px dashed #bca98e;margin-top:10px}.empty-edit{font:13px/1.5 Verdana,sans-serif;color:#7c8175}.poster-thumb.date-focus.poster-0 strong{font-size:10px}.poster-thumb.date-focus.poster-0 small{font-weight:bold;font-size:16px;background:#efd06b;padding:3px}.poster-thumb.date-focus.poster-1 strong,.poster-thumb.date-focus.poster-1 small{font-size:12px;color:#64757a}.poster-thumb.contrast.poster-2 small{margin-top:-22px;font-size:14px}.poster-thumb.accessible.poster-1 strong{color:#ad5a58}.poster-thumb.accessible.poster-1 small{color:#699c63}
