/* Avoid intrinsic grid sizing pushing the entire app beyond narrow browser panes. */
body{grid-template-columns:minmax(0,1fr)}
header,main,.bottom-nav{min-width:0;max-width:100%}
.header-tools,.game-header h1{min-width:0}
.compact-pager,.inline-response{display:none}
.answer-choice{display:block;font-size:12px;line-height:1.6;color:#577a6b;margin-bottom:5px}
.tank-title #open-water{margin-left:auto;white-space:nowrap;font-size:11px;min-height:28px}
.tank-title:has(#open-water)>span{margin-left:auto}
.tank-panel .feeding-controls{flex-wrap:nowrap;flex-shrink:0}
.tank-panel .feeding-controls .primary{white-space:nowrap;flex-shrink:0}
.tank-panel .feeding-controls>span{white-space:nowrap}
.tank-panel .feed-limit{font-size:10px;font-weight:400;opacity:.85}
.book-card h2{padding-right:22px;overflow-wrap:anywhere}
.dialog-question{text-align:center;margin:16px 0}
.dialog-question .glyph{font-size:72px}
.game-flow-slot:has(#next[hidden]){display:none}
.question .options{flex-shrink:0}
.question .hint-row{flex-shrink:0}
.question .question-visual{flex-shrink:0}

@media(max-width:650px){
  .compact-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px;min-height:34px;margin-top:8px}
  .compact-pager .secondary{padding:6px 13px;font-size:11px;min-height:31px;border-radius:9px}
  .compact-pager .pager-count{font-size:11px;color:#69816d}
  .mode-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
  [data-pager][data-current="0"]>:nth-child(n+5),[data-pager][data-current="1"]>:nth-child(-n+4){display:none}
  .mode-card{flex-direction:row;text-align:left;padding:10px 9px;gap:8px;min-height:60px}
  .mode-card strong{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
  .mode-icon{font-size:23px}
  .mode-card small{display:none}
  .gentle-note{font-size:10px}
  .record-list{grid-template-rows:repeat(4,minmax(0,1fr))}
  .record-row{padding:8px;gap:7px}
  .record-row strong{font-size:12px;line-height:1.6}
  .record-row small{font-size:10px}
  .record-row .text-button{font-size:11px;min-height:32px;padding:4px 5px}
  .record-view .compact-pager{margin-top:6px}
  .record-foot small{font-size:9px}
  .book-grid{grid-template-rows:repeat(2,minmax(0,1fr))}
  .book-card{padding:12px 10px;display:block}
  .book-card h2{font-size:13px;line-height:1.5;padding:2px 0 0;min-height:34px}
  .book-glyph{font-size:38px;margin-right:8px;line-height:1.1}
  .book-card p{font-size:11px;line-height:1.6;margin-top:8px}
  .book-examples{font-size:21px;margin-top:9px;word-spacing:3px;padding-right:24px;white-space:nowrap}
  .book-examples rt{font-size:8px}
  .listen{top:auto;bottom:9px;right:7px;width:25px;height:25px;font-size:12px}
  .tank-panel .feed-limit{display:none}
  .tank-panel .feeding-controls .primary{font-size:11px;padding:8px 11px}
  .tank-panel .feeding-controls>span{font-size:9px}
  .tank-panel .tank-status{font-size:11px!important;white-space:normal;min-height:32px;max-height:34px;line-height:1.5!important;flex-shrink:0}
  .compact-tank .tank-status{min-height:16px;max-height:17px;white-space:nowrap;font-size:10px!important}
}

/* Small-height phones use distinct question and explanation stages instead of
   squeezing both into the same column. The answer, reward and pause remain visible. */
@media(max-width:650px){
  .game-header{height:32px;min-height:32px;margin-bottom:5px}
  .game-header h1{font-size:14px;line-height:1.4}
  .game-content{display:flex;flex-direction:column;margin:7px 0;gap:8px}
  .game .question{flex:1;min-height:0;padding:10px 12px}
  .game .question-level{display:none}
  .game .question h2{font-size:18px;line-height:1.5;margin:4px 0 7px;min-height:27px;flex-shrink:0}
  .game .question-visual{flex:1 0 76px;min-height:76px;gap:2px}
  .game .glyph{font-size:54px;line-height:1.25}
  .game .glyph rt{font-size:10px}
  .game .group-glyph{font-size:43px}
  .game .missing-parts{font-size:32px;line-height:1.4;gap:8px}
  .game .puzzle-symbol{font-size:30px}
  .game .question-visual small{font-size:11px;line-height:1.5}
  .game .options{gap:8px;margin-top:8px}
  .game .option{font-size:15px;min-height:44px;line-height:1.4;padding:7px 6px}
  .game .option.symbol-option{font-size:26px;line-height:1.1;padding:5px 6px}
  .game .long-options .option{font-size:13px}
  .game .hint-row{min-height:29px;margin-top:6px;gap:10px}
  .game .hint-row .text-button{font-size:11px;padding:6px 3px;min-height:27px}
  .game:not(.answered) .question-side{display:none}
  .game.has-feedback:not(.answered) .inline-response{display:block;font-size:11px;line-height:1.5;color:#976c37;margin-top:6px;flex-shrink:0}
  .game.answered .question{display:none}
  .game.answered .question-side{display:flex;flex-direction:column;flex:1;gap:8px;min-height:0}
  .game.answered .question-side .fishing-pond{height:90px!important;min-height:72px;max-height:110px;flex:0 0 24%}
  .game.answered .question-side .fishing-pond p{display:none}
  .game.answered .question-side .swimming-fish{width:90px;left:68%;top:52%}
  .game.answered .question-side .food-prize{left:25%;top:5%}
  .game.answered .question-side .food-bag-art{width:34px;height:34px;font-size:23px;margin:3px auto}
  .game.answered .question-side .feedback-box{padding:12px;gap:0;flex:1;justify-content:center}
  .game.answered .feedback-box strong{font-size:15px;line-height:1.5}
  .game.answered .feedback-box .answer-choice{font-size:11px;line-height:1.5;margin-bottom:3px}
  .game.answered .feedback-box p{font-size:12px;line-height:1.65;margin:5px 0;-webkit-line-clamp:4}
  .game.answered .feedback-box .text-button{font-size:11px;padding:5px 8px;min-height:27px;margin-top:3px}
  .game-flow-slot{min-height:96px;gap:8px;align-items:stretch}
  .game-flow-slot .next{min-width:90px;max-width:94px;width:94px;font-size:12px;line-height:1.7;padding:9px 8px;align-self:stretch}
  .game-flow-slot .auto-flow{padding:10px;gap:5px;display:flex;flex-direction:column;align-items:stretch;justify-content:center}
  .game-flow-slot .auto-flow>div:first-child{padding:0}
  .game-flow-slot .flow-message{font-size:11px;line-height:1.5}
  .game-flow-slot .auto-flow small{font-size:10px;line-height:1.5;margin-top:1px}
  .game-flow-slot .auto-flow .secondary{position:static;align-self:flex-start;min-height:28px;font-size:11px;padding:5px 9px;border-radius:8px}
}

@media(max-width:650px) and (max-height:600px){
  body{grid-template-rows:56px minmax(0,1fr)54px}
  header{height:56px}
  main{padding:8px 12px}
  .home-board{grid-template-rows:110px minmax(0,1fr);gap:9px}
  .compact-tank{padding:8px 10px}
  .compact-tank .tank-title{margin-bottom:5px}
  .compact-tank .tank-title h2{font-size:12px}
  .compact-tank .feeding-controls,.compact-tank .tank-status{display:none}
  .compact-tank .tank-corner-label{display:none}
  .compact-tank .tank-title>span{display:none}
  .home-view .gentle-note{display:none}
  .learn-heading{margin-bottom:6px;min-height:22px}
  .mode-card{padding:9px 8px;min-height:64px}
  .mode-card strong{font-size:13px}
  .mode-icon{font-size:22px}
  .game.answered .question-side .fishing-pond{flex:0 0 72px;min-height:72px;max-height:72px}
  .game.answered .feedback-box p{-webkit-line-clamp:3}
  .fish-inspector .growth-card{min-height:72px}
  .fish-inspector .growth-card strong{font-size:12px;line-height:1.5}
  .fish-inspector .growth-card [data-growth-name],.fish-inspector .growth-card small{font-size:10px}
  .fish-inspector .growth-fish{width:48px}
  .record-foot small{max-width:155px}
}

@media(max-width:380px){
  header{padding:8px 10px;gap:6px}
  .brand{font-size:16px;gap:6px}
  .brand-icon{width:26px;height:30px;font-size:20px;border-radius:8px}
  .header-tools{gap:6px}
  .difficulty select{width:76px;font-size:11px;padding:7px 15px 7px 8px}
  .header-tools .adult{width:23px;height:23px;flex-shrink:0}
  .header-tools .food-wallet{padding:4px 6px;gap:3px}
  .header-tools .food-wallet strong{font-size:14px}
  .bottom-nav .nav{padding:7px 5px}
  .record-row{gap:5px;padding:6px}
  .record-row strong{font-size:11px}
  .record-row small{font-size:9px}
  .record-row .text-button{font-size:10px;padding:4px 2px}
  .book-card{padding:10px 8px}
  .book-glyph{font-size:34px}
  .book-card h2{font-size:12px;min-height:33px}
  .book-card p{font-size:11px;line-height:1.5}
  .book-examples{font-size:20px;word-spacing:2px}
  .game .question h2{font-size:17px}
}

@media(min-width:651px) and (max-height:620px){
  .game:not(.answered) .game-content{grid-template-columns:1fr}
  .game:not(.answered) .question-side{display:none}
  .game .question{display:grid;grid-template-columns:minmax(0,1fr)minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr)auto;gap:7px 20px;align-items:center;padding:12px 20px}
  .game .question-level{display:none}
  .game .question h2{grid-column:1/-1;margin:0;font-size:18px;min-height:27px}
  .game .question-visual{min-height:65px;grid-row:2}
  .game .options{margin:0;grid-row:2;grid-column:2}
  .game .hint-row{grid-row:3;grid-column:1/-1;min-height:27px;margin:0}
  .game .option{min-height:44px;padding:7px 10px}
  .game .option.symbol-option{font-size:26px;line-height:1.1}
  .game.answered .question{display:none}
  .game.answered .game-content{display:flex}
  .game.answered .question-side{display:grid;grid-template-columns:minmax(120px,.35fr)minmax(0,1fr);flex:1;gap:12px}
  .game.answered .question-side .fishing-pond{min-height:0;max-height:none;height:auto!important}
  .game.answered .feedback-box{padding:10px 15px;justify-content:center}
  .game.answered .feedback-box strong{font-size:15px}
  .game.answered .feedback-box p{font-size:12px;line-height:1.6;-webkit-line-clamp:3;margin:4px 0}
  .game.answered .feedback-box .text-button{margin:0}
}

@media(max-width:650px) and (max-height:500px){
  .game .question{padding:8px 11px}
  .game .question h2{font-size:16px;line-height:1.4;min-height:23px;margin:3px 0 5px}
  .game .question-visual{min-height:62px;flex-basis:62px}
  .game .glyph{font-size:44px;line-height:1.2}
  .game .glyph rt{font-size:9px}
  .game .hint-row{min-height:26px;margin-top:4px}
  .game.has-feedback:not(.answered) .inline-response{display:none}
  .game.answered .question-side .fishing-pond{display:none}
}
.mission-short{display:none}@media(max-width:650px) and (max-height:600px){.mission-full{display:none}.mission-short{display:inline}.home-board{grid-template-rows:136px minmax(0,1fr)}.home-view .view-heading{min-height:28px}.game-flow-slot .next{font-size:0}.game-flow-slot .next:after{content:attr(data-short-label);font-size:13px;line-height:1.6;white-space:nowrap}.game-flow-slot .next:disabled:after{content:'ゲット！'}}

@media(max-width:650px) and (min-height:741px){.game .question h2{font-size:20px;line-height:1.6}.game .glyph{font-size:76px;line-height:1.35}.game .glyph rt{font-size:12px}.game .option{min-height:52px;font-size:17px}.game .option.symbol-option{font-size:32px}.game .long-options .option{font-size:14px}.game.answered .feedback-box{padding:20px}.game.answered .feedback-box strong{font-size:19px}.game.answered .feedback-box .answer-choice{font-size:13px}.game.answered .feedback-box p{font-size:15px;line-height:1.9;-webkit-line-clamp:7}.game.answered .feedback-box .text-button{font-size:13px;min-height:36px}.game.answered .question-side .fishing-pond{height:130px!important;min-height:110px;max-height:140px}.game-flow-slot .flow-message{font-size:12px}.game-flow-slot .auto-flow small{font-size:11px}}
@media(min-width:651px) and (max-height:620px){.compact-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;height:34px;min-height:34px;margin-top:8px}.compact-pager .secondary{font-size:11px;padding:6px 13px;min-height:31px}.compact-pager .pager-count{font-size:11px}.mode-grid{grid-template-rows:repeat(2,minmax(0,1fr))}.mode-card{padding:10px;gap:8px;min-height:62px}.mode-card strong{font-size:14px;line-height:1.5}[data-pager][data-current="0"]>:nth-child(n+5),[data-pager][data-current="1"]>:nth-child(-n+4){display:none}.record-list{grid-template-rows:repeat(4,minmax(0,1fr))}.book-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}}
@media(max-width:650px) and (max-height:500px){.home-board{grid-template-rows:52px minmax(0,1fr)}.compact-tank .tank-inner{display:none}.compact-tank .tank-title{margin:0;min-height:33px}.compact-tank{justify-content:center}.book-grid{grid-template-rows:minmax(0,1fr)}}

/* Six grade records fit in two compact rows. */
.level-records{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.level-records>span{padding:5px;font-size:11px}.level-records b{font-size:17px}