/* El panel coincide con la pantalla blanca del fondo de 1672 × 941 px.
   La imagen completa conserva su proporción; el texto se desplaza dentro. */
.quizwrap{
  position:fixed;inset:0;
  --board-w:min(100vw,177.6833dvh);
  --board-h:min(56.2799vw,100dvh);
  background:#23313b url('assets/board.webp') center/contain no-repeat;
  overflow:hidden;
}
.quizwrap>.quiz{
  position:absolute;
  left:calc(50% - var(--board-w)*.01316);
  top:calc(50% - var(--board-h)*.02072);
  transform:translate(-50%,-50%);
  width:calc(var(--board-w)*.54);
  height:calc(var(--board-h)*.59);
  max-width:none;max-height:none;min-width:0;
  margin:0;padding:clamp(12px,1.2vw,22px);
  background:transparent;border:0;border-radius:0;box-shadow:none;
  overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#7d939a #e8e7dd;
  color:#203546;
}
.quizwrap>.quiz:focus-within{scroll-behavior:auto}
.quizwrap>.quiz h2{font-size:clamp(18px,1.6vw,26px);line-height:1.4;margin:10px 0}
.quizwrap .mission-top{border-bottom:1px solid #a5b2b0;padding-bottom:8px}
.quizwrap .mission-meta{margin-top:10px}
.quizwrap .scene-context{font-size:15px;line-height:1.6;margin:10px 0}
.quizwrap .play-scene{box-shadow:none;border-color:#a5b8ba;padding:12px}
.quizwrap .scene-object .pixel-icon{width:48px;height:48px}
.quizwrap .play-question{font-size:17px;line-height:1.5;margin:14px 0 10px}
.quizwrap .number-console{padding:14px;background:#e8eff0;border-color:#a5b8ba}
.quizwrap .visual-answer{background:#f9faf5;box-shadow:none}
.quizwrap .visual-answer:hover:not(:disabled){background:#e4f0ec;border-color:#26776e}
.quizwrap .visual-answer.selected{background:#e1eee9;border-color:#26776e}
.quizwrap .actions{margin-top:16px;gap:10px}
.quizwrap .feedback:empty{display:none}
.quizwrap .practice-note{margin:10px 0;font-size:12px}
.quizwrap .sound-control{margin-top:12px}
.quizwrap .btn.secondary{background:#edf0e8}
.quizwrap>.quiz::-webkit-scrollbar{width:8px}
.quizwrap>.quiz::-webkit-scrollbar-track{background:#e8e7dd}
.quizwrap>.quiz::-webkit-scrollbar-thumb{background:#7d939a;border:2px solid #e8e7dd}
/* En una pantalla estrecha se usa un marco propio del mismo color,
   para mantener el texto legible sin reducir toda la pared. */
@media(max-width:760px),(max-height:480px){
 .quizwrap{background:#35434b}
 .quizwrap>.quiz{
  left:50%;top:50%;width:calc(100vw - 24px);height:calc(100dvh - 24px);
  padding:14px;background:#f3f2e8;border:8px solid #34434d;
  box-shadow:0 0 0 3px #8e9a9d,0 0 0 6px #1d2932;
 }
 .quizwrap>.quiz h2{font-size:20px}
 .quizwrap .scene-object{min-width:60px}
 .quizwrap .scene-object .pixel-icon{width:38px;height:38px}
 .quizwrap .mission-meta{flex-wrap:wrap;gap:6px}
 .quizwrap .answers{grid-template-columns:1fr}
 .quizwrap .btn{min-height:44px}
}