/* Compact keyboard and small hand guides directly underneath it. */
.fit-viewport { position: relative; width: 100%; min-width: 0; grid-area: 1 / 1; }
.adventure-heading { margin-bottom: 12px; }
.adventure-toolbar { padding: 10px 18px; gap: 8px; }
.learning-modes { padding-bottom: 8px; }
.learning-stats { padding-block: 6px; }
.adventure-scene { min-height: 0; padding: 8px 16px 5px; }
.prompt-card { min-height: 0; max-width: 780px; margin-top: 7px; padding: 10px 18px 8px; border-radius: 20px; }
.prompt-card h3 { margin-block: 6px; }
.prompt-card p { margin-block: 5px; }
.prompt-card .ready-keys { margin-block: 6px; }
.prompt-card .text-button { margin-top: 5px; }
.prompt-card .input-rule { margin-block: 0; }
.prompt-card .learning-feedback { min-height: 21px; margin: 0; font-size: .875rem; line-height: 1.5; }
.scene-topline > span,.scene-bottomline > span { padding-block: 2px; }
.scene-topline,.scene-bottomline { gap: 4px; }
.adventure-track { height: 80px; margin-inline: 4%; }
.game-actor { width: 62px; height: 62px; }
.adventure-track .actor-target { top: 12px; padding-block: 3px; }
[data-world="4"] .game-actor { bottom: calc(-8px + var(--word-progress,0)*23px); }
.learning-guide { padding: 7px 16px 6px; }
.next-instruction { gap: 4px 8px; margin: 0; line-height: 1.3; }
.next-instruction > kbd { font-size: 1.25rem; padding-block: 2px; min-width: 36px; }
.keyboard-deck { width: 100%; max-width: 620px; margin-inline: auto; }
.hand-guide-row { display: grid; grid-template-columns: 76px minmax(0,1fr) 76px; align-items: center; gap: 12px; max-width: 440px; margin: 2px auto 0; }
.keyboard-deck .learning-hand { margin: 0; width: 100%; max-width: 76px; min-width: 0; text-align: center; }
.keyboard-deck .learning-hand .hands-diagram,
.adventure-frame:fullscreen .keyboard-deck .hands-diagram,
.adventure-frame.is-expanded .keyboard-deck .hands-diagram { display: block; width: 100%; height: auto; }
.learning-hand figcaption { color: #536e7f; font-size: .75rem; line-height: 1.25; }
.hand-guide-row .next-instruction > strong { flex-basis: 100%; font-size: .875rem; line-height: 1.3; text-align: center; }
.keyboard-deck .learning-keyboard { max-width: 580px; min-width: 0; }
.learning-keyboard .key-row { gap: 4px; margin-bottom: 3px; padding-inline: 0; }
.learning-keyboard .keyboard-key { max-width: 43px; height: 24px; font-size: .8125rem; border-bottom-width: 2px; }
.learning-keyboard .keyboard-key.wide { max-width: 60px; font-size: .75rem; }
.learning-keyboard .keyboard-key.space { max-width: 260px; }
.keyboard-deck.hands-off .hand-guide-row { grid-template-columns: minmax(0,1fr); }
.keyboard-deck.hands-off .next-instruction > strong { flex-basis: auto; }
.finger-instruction { margin-block: 2px 4px; }
.session-strip { gap: 4px 10px; }
.session-strip #bankProgress { color: #1d648e; font-weight: 700; }
.session-strip .text-button { padding-block: 2px; }
.world-stage-bar { padding-block: 7px; }
.world-stage-bar button { min-height: 37px; }
.touch-entry { margin-block: 5px; }
.touch-entry label { margin-bottom: 3px; }
.touch-entry textarea { min-height: 40px; padding-block: 7px; }
.adventure-frame:fullscreen .learning-guide,.adventure-frame.is-expanded .learning-guide { padding-block: 6px; }
.adventure-frame:fullscreen .adventure-toolbar,.adventure-frame.is-expanded .adventure-toolbar { padding-block: 7px; }
@media (min-width: 1280px) and (pointer: fine) {
 .fit-viewport { grid-column: 2; }
 .adventure-frame .ad-side[data-side="left"] { grid-area: 1 / 1; }
 .adventure-frame .ad-side[data-side="right"] { grid-area: 1 / 3; }
}
@media (max-width: 850px) {
 .learning-guide { padding-inline: 10px; }
 .learning-modes #modeHelp { width: auto; margin: 0 0 0 auto; }
 .adventure-toolbar { padding-inline: 13px; }
}
@media (max-width: 600px) {
 .hand-guide-row { grid-template-columns: 60px minmax(0,1fr) 60px; gap: 8px; max-width: 380px; }
 .learning-keyboard .key-row { gap: 2px; }
 .learning-keyboard .keyboard-key { height: 24px; font-size: .75rem; border-radius: 4px; }
 .learning-hand figcaption { font-size: .75rem; }
 .adventure-scene { padding-inline: 10px; }
 .prompt-card { padding-inline: 10px; }
 .learning-modes #modeHelp { font-size: .75rem; }
 .learning-stats { gap: 4px 0; }
 .adventure-track { margin-inline: 0; }
 .game-actor { width: 60px; height: 60px; }
 .session-strip #saveStatus { flex-basis: 100%; text-align: center; }
}
@media (max-width: 380px) {
 .hand-guide-row { grid-template-columns: 50px minmax(0,1fr) 50px; gap: 4px; }
 .learning-guide { padding-inline: 7px; }
 .learning-keyboard .key-row { gap: 1px; }
 .learning-modes #modeHelp { flex-basis: 100%; }
}

/* The viewport owns the available height. The entire game is measured and fitted
   within it, including long prompts, results and the mobile input field. */
.adventure-frame[data-fit-screen="true"] {
 display: grid; grid-template-rows: minmax(0,1fr) auto;
 position: fixed; inset: var(--fullscreen-top,0px) 0 auto; width: 100%; max-width: none;
 height: var(--fullscreen-height,100dvh); min-height: 0;
 padding: max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
 overflow: hidden; overflow: clip; overscroll-behavior: none; scrollbar-gutter: auto;
}
.adventure-frame[data-fit-screen="true"] .play-workbench {
 grid-row: 1; grid-template-rows: minmax(0,1fr); min-height: 0; width: 100%; height: 100%; align-items: stretch;
}
.adventure-frame[data-fit-screen="true"] .fit-viewport { min-height: 0; height: 100%; overflow: hidden; overflow: clip; }
.adventure-frame[data-fit-screen="true"] .learning-game {
 position: absolute; top: 50%; left: 50%; width: var(--fit-width,100%); max-width: none;
 transform: translate(-50%,-50%) scale(var(--fit-scale,1)); transform-origin: center;
 margin: 0; border-radius: 14px;
}
.adventure-frame[data-fit-screen="true"] .ad-side { min-height: 0; }
.adventure-frame[data-fit-screen="true"] .ad-side .ad-mount:empty { height: 100%; }
.adventure-frame[data-fit-screen="true"] .ad-results { grid-row: 2; }
.adventure-frame[data-fit-screen="true"] .ad-results:not([data-ad-present="true"]) { display: none; }
.adventure-frame[data-fit-screen="true"] .adventure-toolbar { padding: 5px 14px; gap: 5px; }
.adventure-frame[data-fit-screen="true"] .adventure-toolbar h2 { line-height: 1.3; margin-top: 2px; }
.adventure-frame[data-fit-screen="true"] .adventure-toolbar .eyebrow { line-height: 1.3; margin-bottom: 2px; }
.adventure-frame[data-fit-screen="true"] .adventure-toolbar button { min-height: 32px; padding: 5px 9px; line-height: 1.3; }
.adventure-frame[data-fit-screen="true"] .learning-modes { padding-bottom: 5px; }
.adventure-frame[data-fit-screen="true"] .learning-modes button { padding: 5px 12px; line-height: 1.3; }
.adventure-frame[data-fit-screen="true"] .learning-stats { padding-block: 4px; }
.adventure-frame[data-fit-screen="true"] .learning-stats span { line-height: 1.3; }
.adventure-frame[data-fit-screen="true"] .learning-stats strong { line-height: 1.15; }
.adventure-frame[data-fit-screen="true"] .adventure-scene { padding-block: 5px; }
.adventure-frame[data-fit-screen="true"] .prompt-card { padding-block: 6px; margin-top: 4px; }
.adventure-frame[data-fit-screen="true"] .prompt-card h3 { margin-block: 3px; }
.adventure-frame[data-fit-screen="true"] .prompt-card p { margin-block: 3px; }
.adventure-frame[data-fit-screen="true"] #learningGame #wordJapanese { line-height: 1.2; margin-block: 3px; }
.adventure-frame[data-fit-screen="true"] #learningGame #romajiLine { line-height: 1.3; }
.adventure-frame[data-fit-screen="true"] .prompt-card .learning-feedback { margin: 0; }
.adventure-frame[data-fit-screen="true"] .learning-guide { padding: 4px 14px; }
.adventure-frame[data-fit-screen="true"] .learning-keyboard .keyboard-key { height: 22px; }
.adventure-frame[data-fit-screen="true"] .learning-keyboard .key-row { margin-bottom: 2px; }
.adventure-frame[data-fit-screen="true"] .hand-guide-row { grid-template-columns: 66px minmax(0,1fr) 66px; max-width: 400px; }
.adventure-frame[data-fit-screen="true"] .hands-off .hand-guide-row { grid-template-columns: minmax(0,1fr); }
.adventure-frame[data-fit-screen="true"] .world-stage-bar { padding-block: 4px; }
.adventure-frame[data-fit-screen="true"] .world-stage-bar button { min-height: 31px; line-height: 1.3; }
.adventure-frame[data-fit-screen="true"] .session-strip { line-height: 1.4; }
.adventure-frame[data-fit-screen="true"] .touch-entry { margin-block: 3px; }
.adventure-frame[data-fit-screen="true"] .touch-entry textarea { min-height: 34px; padding-block: 5px; }
@media (max-width: 600px) {
 .adventure-frame[data-fit-screen="true"] .learning-guide { padding-inline: 8px; }
 .adventure-frame[data-fit-screen="true"] .hand-guide-row { grid-template-columns: 48px minmax(0,1fr) 48px; }
 .adventure-frame[data-fit-screen="true"] .hands-off .hand-guide-row { grid-template-columns: minmax(0,1fr); }
}