/* v0.8.6: 画像案r7の見出し。上部の高さは本編メーターの実寸を共有する。 */
#play-heading{position:relative;flex:none}
.board{max-width:100%}
#play-heading,#play-toolbar,body.board-session #screen-game{align-self:center;max-width:100%}
#play-heading>#challenge-hud{position:absolute;inset:0}
.play-mode-card{position:absolute;inset:0;display:grid;grid-template-columns:32px 1fr auto;grid-template-rows:20px 14px;align-content:start;align-items:center;gap:0 8px;padding:5px 10px;border:1px solid #56704e;border-radius:12px;background:#233b2b;color:#edf3dd}
.play-mode-card[data-kind="tutorial"]{height:46px;bottom:auto}
.play-mode-card img{grid-column:1;grid-row:1/3;width:24px;height:24px;justify-self:center;object-fit:contain}
.play-mode-card[data-kind="tutorial"] img{width:32px;height:24px}
#mode-card-title{grid-column:2/4;grid-row:1;font-size:16px;line-height:20px}
#mode-card-description{grid-column:2/4;grid-row:2;font-size:12px;line-height:14px;color:#c6d6bb}
.play-mode-card[data-kind="tutorial"] #mode-card-description{font-size:11px}
#practice-comment{position:absolute;left:50px;right:10px;top:45px;bottom:6px;margin:0;border-top:1px solid #466248;display:flex;align-items:center;font-size:12px;line-height:1.5;color:#d6e2c9}
body[data-game-mode="tutorial"] #play-heading>#challenge-hud{top:50px;display:grid;grid-template-columns:1fr}
body[data-game-mode="tutorial"] #hp-meter-block{position:relative;padding:5px 10px}
body[data-game-mode="tutorial"] #hp-meter-block .meter-label{grid-template-columns:1fr auto auto;grid-template-rows:22px;min-height:22px;margin-bottom:2px;column-gap:7px}
body[data-game-mode="tutorial"] #hp-meter-block .meter-label strong{grid-column:3;grid-row:1;font-size:18px}
body[data-game-mode="tutorial"] #hp-meter-block .shield-stock{grid-column:2;grid-row:1}
body[data-game-mode="tutorial"] #hp-meter-block progress{height:7px}
body[data-game-mode="tutorial"] #hud-damage{position:absolute;left:48px;top:2px;margin:0;grid-column:auto;grid-row:auto}
.stage-line{height:25px}
.stage-line #hud-stage{font-size:18px;line-height:1.2}
#play-mode-label{font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.08em}
#practice-stage{font-size:18px;line-height:1.2;color:#f3e0be;white-space:nowrap}
.compact-play-band .play-actions{gap:6px}
.compact-play-band .play-actions :is(.sound-button,.pause-button){padding-inline:10px;font-size:11px}
.compact-play-band .meter-block{padding-inline:7px}
body[data-game-mode="practice"] #play-toolbar .play-labels{display:none}
body.board-session:not([data-game-mode="floor-practice"]) #screen-game{display:block;flex:0 0 auto;min-height:0}
body.board-session:not([data-game-mode="floor-practice"]) #screen-game .hud{margin-bottom:6px}
body.board-session:not([data-game-mode="floor-practice"]) #game-status{margin:6px 0 0}
body.board-session:not([data-game-mode="floor-practice"]) #screen-game>.row,body.board-session:not([data-game-mode="floor-practice"]) #btn-game-exit{position:absolute;left:8px;right:8px;top:0}
/* 説明の情報は残し、絵・見出し・本文を短い段へまとめる。 */
.tutorial-lesson{height:112px;padding:6px 8px;min-height:0}
@media(max-height:720px){.tutorial-lesson{height:120px}}
.tutorial-message{height:auto;grid-template-columns:28px 1fr;grid-template-rows:auto auto;grid-auto-rows:auto;gap:2px 8px;align-content:center;align-items:center}
.tutorial-lesson canvas{width:28px;height:24px;grid-column:1;grid-row:1}
.tutorial-text{display:contents}
.tutorial-lesson h2{grid-column:2;grid-row:1;font-size:15px;line-height:1.3;margin:0}
.tutorial-lesson .tutorial-copy{grid-column:1/-1;grid-row:2;font-size:13px;line-height:1.4;margin:0}
.tutorial-lesson .tutorial-context{grid-column:1/-1;grid-row:3;font-size:11px;line-height:1.35;margin:0}
.tutorial-lesson .tutorial-context:empty,.tutorial-play-state,.tutorial-idle small{display:none}
.is-puzzle-course .tutorial-message{grid-template-columns:28px 1fr;grid-template-rows:auto auto auto}
.is-puzzle-course .tutorial-hint{grid-column:1/-1;grid-row:3;font-size:13px;line-height:1.4;margin:0}
.is-puzzle-course .tutorial-context{display:none}
body[data-screen="mode"] .wrap{gap:8px}
body[data-screen="mode"] #challenge-hud{display:none}
body[data-screen="mode"] #screen-mode{min-height:0;flex:1 1 auto}
@media(max-height:760px){.toy-box{gap:8px;padding-block:9px}.toy-box .menu-scene{height:38px}.toy-box .learning{gap:10px}.toy-box .entry{min-height:62px;padding-block:5px}.toy-box .challenge{padding-block:12px}.toy-box .difficulty-note{margin-block:5px 7px}}
/* 見出しの壁飾りを足しても、短い画面では操作の間隔から高さを確保する。 */
@media(max-height:720px){.toy-box{gap:5px}.toy-box .challenge{padding-block:9px}}

/* T-310: まもりを独立した札にし、カード全体の高さは従来と揃える。 */
.meter-label .shield-stock{height:19px;gap:3px;padding:0 5px;border:1px solid #92a971;border-radius:999px;background:#e2edcf;color:#35552e;box-shadow:inset 0 1px #f9ffe9;line-height:1;justify-self:end}
.shield-stock img{width:17px;height:17px;flex-shrink:0}
.shield-stock-label{font-size:9px;font-weight:700}
#hud-shield{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;min-width:9px;text-align:center}
.meter-label .shield-stock.is-empty{background:#f2e9d7;border-color:#bcac8f;color:#6f604b;box-shadow:inset 0 1px #fff9ed}
body[data-game-mode="challenge"] #hp-meter-block{padding-block:4px 10px}
body[data-game-mode="challenge"] #hp-meter-block .meter-label{grid-template-rows:19px 18px;margin-bottom:1px}
.compact-play-band .shield-stock-label{display:none}
@media(max-width:360px){body[data-game-mode="challenge"] #hp-meter-block{padding-block:2px 8px}.shield-stock-label{display:none}#hud-shield{font-size:14px}}