/* R90: desktop/tablet visual refinement, without changing mobile display,
 * quiz selection, LINE authorization, the R88 sequence/shuffle switch or reward saving.
 * Content lives inside a same-origin iframe, intentionally isolated from WP CSS.
 */
@media(min-width:771px){
  html, body {width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  body {margin:0!important;background:#f8f8f5!important;}
  .app {
    box-sizing:border-box!important;
    width:min(100%,960px)!important;
    max-width:960px!important;
    min-width:0!important;
    margin:0 auto!important;
    overflow-x:clip!important;
    box-shadow:0 0 32px rgba(33,57,43,.08)!important;
    background:#fbfbf8!important;
  }
  .game-quiz-control-panel {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .game-quiz-control-panel .bar {box-sizing:border-box!important;min-width:0!important;}
  .game-quiz-control-panel .gameHud {min-width:0!important;}
  .episode,.status,.question,.stage,.result {max-width:100%!important;box-sizing:border-box!important;}
  .sceneWrap,.scene,.visual.gameVisual{max-width:100%!important;}
  .sceneWrap .scene {aspect-ratio:3 / 2!important;}
  .question{font-size:clamp(19px,2vw,25px)!important;}
}
@media(min-width:771px) and (max-width:1024px){
  .app{width:min(100%,800px)!important;max-width:800px!important;}
  .game-quiz-control-panel{padding-left:12px!important;padding-right:12px!important;}
}
@media(max-width:770px){
  /* Preserve the approved mobile mock exactly. */
  .app{max-width:560px!important;}
}