/* Fit the playable area to the current viewport, including browser chrome. */
.pop-page .preview{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:2px 10px;font-size:14px}
.pop-page .preview a{white-space:nowrap}
.pop-page .soundBtn{position:static;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;font-size:21px;box-shadow:none}
.pop-page .remaining{white-space:nowrap;font-size:14px}
.pop-page .remaining b{display:inline-block;min-width:24px;font-size:21px;color:#ffe79b}
.pop-page .game{width:min(100%,1100px);max-width:1100px;padding:8px 8px 20px}
.pop-page .play-area{width:min(100%,700px,calc((100vh - 246px)*.65));width:min(100%,700px,calc((100svh - 246px)*.65));margin:0 auto}
.pop-page .header{border-radius:18px}
.pop-page .progress{grid-template-columns:28px 1fr 54px;gap:6px;margin:5px 1% 6px;padding:4px 7px}
.pop-page .progressIcon{width:27px;height:27px}
.pop-page .progressText{font-size:13px}
.pop-page .track{height:13px}
.pop-page .boardShell{padding:4px;border-width:4px;border-radius:20px}
.pop-page .hint{margin:7px auto 0;padding:5px 8px;border-width:2px;font-size:12px;line-height:1.5}
.pop-page .rules{gap:4px;margin-top:8px}
.pop-page .rule{padding:4px 2px;border-radius:13px}
.pop-page .rule .item{height:32px}
.pop-page .rule canvas{width:32px;height:32px}
.pop-page .rule b{font-size:11px;line-height:1.6}
.pop-page .rule small{font-size:9px;line-height:1.5}
.pop-page .learning-content{width:100%;margin-top:32px}
@media(max-width:650px){.pop-page .nav-game-title{display:none}}
@media(orientation:landscape) and (min-width:560px){
  .pop-page .play-area{width:min(100%,1100px,calc((100vh - 84px)*1.4));width:min(100%,1100px,calc((100svh - 84px)*1.4));display:grid;grid-template-columns:minmax(210px,.65fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:'header board' 'progress board' 'hint board' 'rules board';column-gap:14px;align-items:start}
  .pop-page .header{grid-area:header}
  .pop-page .progress{grid-area:progress;margin:8px 0}
  .pop-page .boardShell{grid-area:board;width:100%;max-width:calc((100vh - 82px)*6/7);max-width:calc((100svh - 82px)*6/7);justify-self:center}
  .pop-page .hint{grid-area:hint;max-width:100%;width:auto;margin:0;text-align:center}
  .pop-page .rules{grid-area:rules;align-self:start}
}
@media(orientation:portrait) and (max-height:700px){
  .pop-page .header{width:85%;margin:0 auto}
  .pop-page .progress{margin-top:3px;margin-bottom:4px}
  .pop-page .hint{font-size:11px;line-height:1.4}
  .pop-page .rule .item{height:24px}
  .pop-page .rule canvas{width:24px;height:24px}
  .pop-page .rule b{font-size:10.5px}
  .pop-page .rule small{font-size:8.5px}
}
@media(orientation:landscape) and (max-height:450px) and (min-width:560px){
  .pop-page .play-area{width:100%}
  .pop-page .header{width:min(85%,200px);margin:0 auto}
  .pop-page .progress{margin:3px 0 4px}
  .pop-page .hint{font-size:11px;line-height:1.4}
  .pop-page .rule .item{height:24px}
  .pop-page .rule canvas{width:24px;height:24px}
  .pop-page .rule b{font-size:10px}
  .pop-page .rule small{font-size:8px}
}
.game-page .page{padding:12px 0}
.game-page .page-tools{min-height:44px;margin:0 0 6px}
.game-page .page>h1{font-size:26px;line-height:1.35;margin:8px 0}
.game-page .page>.lead,.game-page .game-help,.game-page .game-note{font-size:14px;line-height:1.5;margin:6px 0 10px}
.game-page .learning-content{margin-top:32px}
.memory-page .panel{padding:12px}
.memory-page .memory-grid{width:min(100%,560px,calc(100vh - 318px));width:min(100%,560px,calc(100svh - 318px));margin:8px auto;gap:8px}
.memory-page .panel>p{margin:4px 0;text-align:center}
.memory-page .feedback{min-height:26px;font-size:16px}
.memory-page #memoryRestart{display:flex;margin:6px auto 0;min-height:44px;padding:8px 14px}
.math-page .math-scene{padding:16px}
.math-page .math-stage{min-height:0;gap:14px;flex-wrap:nowrap}
.math-page .rabbit-character{flex:0 0 auto}
.math-page .rabbit-character img{width:min(210px,25vw);height:min(210px,25vw);max-height:calc((100svh - 290px)*.65);object-fit:contain}
.math-page .math-visual{flex:1;min-height:100px;gap:8px}
.math-page .math-question{font-size:22px;margin:8px 0}
.math-page .feedback{font-size:17px;min-height:30px;margin:5px 0}
.math-page .math-options{grid-template-columns:repeat(4,1fr);gap:8px;margin:10px auto}
.math-page .math-option{font-size:21px;min-height:44px;padding:8px}
.breakout-page .game-shell{padding:8px}
.breakout-page .game-canvas-wrap{width:min(100%,600px,calc((100vh - 230px)*1.2));width:min(100%,600px,calc((100svh - 230px)*1.2));margin:0 auto}
@media(max-width:760px){
  .math-page .math-scene{padding:12px}
  .math-page .math-stage{gap:8px}
  .math-page .rabbit-character strong{font-size:12px}
  .math-page .thought{width:42px;height:42px;font-size:24px;border-width:3px;right:0}
  .math-page .thought.shout{width:auto;height:auto;font-size:12px;padding:4px 7px}
  .math-page .carrot-group,.math-page .bundle-box{font-size:22px;padding:8px;gap:3px}
  .math-page .carrots,.math-page .div-pile{font-size:23px}
  .math-page .math-plus-icon{font-size:24px}
  .math-page .mult-groups{gap:6px}
  .math-page .mult-counter{font-size:22px;padding:4px 10px;margin-bottom:7px}
  .memory-page .memory-card .card-face{font-size:28px}
}

.pop-page .preview .sound-label{width:auto;flex:0 0 auto;min-width:72px;padding:5px 7px;border-radius:12px;font-size:12px;white-space:nowrap}
@media(max-width:420px){.pop-page .preview{gap:4px;padding-inline:4px}.pop-page .preview a{margin-right:0!important;padding:4px!important;font-size:11px}.pop-page .preview .sound-label{min-width:62px;padding-inline:4px;font-size:11px}.pop-page .remaining{font-size:11px}}