/* Fit both complete scrolls in the host's available viewport, without cropping. */
body.is-playing{height:var(--play-height,100svh);min-height:0;overflow:hidden}
body.is-playing .wrap{height:100%;min-height:0;box-sizing:border-box;padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(8px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
body.is-playing .masthead{flex:none;margin:0;padding:0 0 5px;min-height:22px}
body.is-playing .masthead .brand{font-size:19px}
body.is-playing .masthead .season{font-size:10px}
body.is-playing main{flex:1;min-height:0;display:flex;flex-direction:column}
body.is-playing #game{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;gap:5px 8px}
body.is-playing .game-top{grid-column:1/-1;margin:0;gap:8px}
body.is-playing #sceneTitle{font-size:23px;line-height:1.25;margin:0}
body.is-playing .chapter{font-size:10px;margin:0}
body.is-playing .metrics{gap:12px}
body.is-playing .metric strong{font-size:21px;line-height:1.15}
body.is-playing .metric span{font-size:10px}
body.is-playing #game .audio-panel{grid-column:1/-1;margin:0;padding:0 5px;min-width:0}
body.is-playing .controls{grid-column:1;margin:0;gap:4px;min-width:0}
body.is-playing .view-toolbar{grid-column:2;margin:0;gap:3px;justify-content:flex-end;min-width:0}
body.is-playing .controls .progress{display:none}
body.is-playing .controls button,body.is-playing .view-toolbar button{min-height:36px;padding:5px 8px;font-size:11px}
body.is-playing .view-toolbar span{font-size:11px}
body.is-playing .boards{grid-column:1/-1;grid-row:4;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch}
body.is-playing .boards .board{width:100%;height:100%;min-height:0;min-width:0;margin:0;display:flex;flex-direction:column}
body.is-playing .board figcaption{flex:none;padding:2px 7px;font-size:10px;line-height:16px}
body.is-playing .frame{flex:1;min-height:0;min-width:0;padding:2px;display:flex;align-items:center;justify-content:center;overflow:hidden}
body.is-playing .frame svg{display:block;width:100%;height:100%;max-height:100%;aspect-ratio:auto;object-fit:contain}
body.is-playing .game-bottom{grid-column:1/-1;margin:0;display:block}
body.is-playing .instruction,body.is-playing .footer{display:none}
body.is-playing .round-actions{display:flex;justify-content:center;gap:8px;flex-wrap:nowrap}
body.is-playing .round-actions button{font-size:11px;padding:5px 8px;min-height:34px}
body.is-playing #changePlayer{display:none}
body.is-playing .levels{grid-column:1/-1;min-width:0;margin:0;padding:1px 0;gap:5px}
body.is-playing .levels button{font-size:11px;min-height:30px;padding:4px 9px}
@media(orientation:landscape){body.is-playing .boards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}body.is-playing .masthead{display:none}body.is-playing #game{gap:3px 8px}body.is-playing .wrap{padding-top:6px}body.is-playing #sceneTitle{font-size:20px}body.is-playing .levels button{min-height:26px;padding:2px 8px}}
/* v1.1.6: quiet, frameless mobile composition. Audio behavior unchanged. */
body.is-playing .wrap{padding-top:calc(44px + env(safe-area-inset-top,0px));gap:0}
body.is-playing .masthead{display:none}
body.is-playing #game{grid-template-columns:minmax(112px,.85fr) minmax(0,1.15fr);gap:6px 6px}
body.is-playing .game-top{align-items:center;padding:0 2px 4px}
body.is-playing #sceneTitle{font-size:22px;letter-spacing:.04em}
body.is-playing .chapter{font-size:9px;letter-spacing:.12em;margin-bottom:4px}
body.is-playing .metric strong{font-size:20px;font-weight:500}
body.is-playing .metric span{font-size:9px;margin-bottom:3px}
body.is-playing #game .audio-panel{border:0;box-shadow:none;background:transparent;border-radius:0;padding:0;gap:8px}
body.is-playing .audio-panel .player-chip,body.is-playing .audio-panel .quiet,body.is-playing .audio-panel .music-toggle{border:0;border-radius:0;box-shadow:none;background:transparent;min-height:36px;padding:5px 2px;font-size:12px}
body.is-playing .audio-panel .player-chip{justify-content:flex-start}
body.is-playing .audio-panel .quiet{min-width:52px}
body.is-playing .audio-panel .music-toggle{min-width:76px}
body.is-playing .controls{align-items:center;justify-content:flex-start}
body.is-playing .controls .hint{border:0;box-shadow:none;background:transparent;padding:6px 2px;white-space:nowrap;font-size:11px}
body.is-playing .view-toolbar{flex-wrap:nowrap;gap:2px;white-space:nowrap}
body.is-playing .view-label{display:none}
body.is-playing .view-toolbar button{border:0;background:transparent;box-shadow:none;min-width:28px;min-height:36px;padding:4px;font-size:15px}
body.is-playing .view-toolbar output{min-width:22px;font-size:11px}
body.is-playing .view-toolbar .view-reset{min-width:48px;font-size:10px;padding:4px 0}
body.is-playing .boards{gap:7px}
body.is-playing .boards .board{border:0;box-shadow:none;background:transparent;border-radius:0}
body.is-playing .board figcaption{margin:0;padding:0 2px 3px;font-size:9px;line-height:13px;color:var(--muted)}
body.is-playing .board figcaption b{font-weight:400;letter-spacing:.08em}
body.is-playing .board figcaption span{display:none}
body.is-playing .frame{border:0!important;outline:0;box-shadow:none!important;background:transparent!important;border-radius:0;padding:0}
body.is-playing .round-actions{justify-content:space-between;padding:0 2px}
body.is-playing .round-actions .secondary{border:0;background:transparent;box-shadow:none;border-radius:0;min-height:36px;padding:4px 0;font-size:11px;color:var(--muted)}
body.is-playing .levels{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;overflow:visible;padding:0}
body.is-playing .levels button{min-width:0;width:100%;min-height:28px;padding:3px 0;font-size:10px;border:0;box-shadow:none;border-radius:4px}
@media(orientation:landscape){body.is-playing .wrap{padding-top:calc(34px + env(safe-area-inset-top,0px))}body.is-playing #game{gap:3px 8px}body.is-playing .audio-panel .player-chip,body.is-playing .audio-panel .quiet,body.is-playing .audio-panel .music-toggle{min-height:30px}}
/* Keep chapter navigation in the results, not a persistent bottom strip. */
body.is-playing #game{grid-template-rows:auto auto auto minmax(0,1fr) auto}
body.is-playing #levels{display:none}
/* Clear instructions, quiet controls, finger-sized targets. */
body.is-playing .board:first-child figcaption{font-size:11px;line-height:18px;padding-bottom:5px}
body.is-playing .board:first-child figcaption b{letter-spacing:.02em;color:var(--ink)}
body.is-playing .board:nth-child(2) figcaption{visibility:hidden;line-height:0;height:0;padding:0}
body.is-playing .view-toolbar .view-label{display:inline;font-size:10px;margin-right:3px}
body.is-playing .view-toolbar button{min-width:40px;min-height:40px}
body.is-playing .controls .hint{min-height:40px;min-width:80px;text-align:left;color:var(--red);font-size:12px}
body.is-playing .audio-panel .player-chip,body.is-playing .audio-panel .quiet,body.is-playing .audio-panel .music-toggle{min-height:40px}
body.is-playing .round-actions .secondary{min-height:40px}
body.is-playing .audio-panel .player-chip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:350px){body.is-playing .metrics{gap:8px}body.is-playing .metric strong{font-size:18px}body.is-playing #sceneTitle{font-size:20px}body.is-playing .view-toolbar .view-label{display:none}}
/* Independent music and effects, sharing the existing action row. */
.audio-panel .sound-toggle{flex:0 0 auto;min-width:76px;white-space:nowrap}
body.is-playing #game .audio-panel{gap:5px;flex-wrap:nowrap}
body.is-playing .audio-panel .music-toggle{min-width:70px;gap:4px;font-size:11px;padding:5px 1px}
body.is-playing .audio-panel .session-actions .quiet{min-width:46px;font-size:11px;padding:5px 1px}
body.is-playing .audio-panel .session-actions .player-chip{padding:5px 1px;font-size:11px;gap:3px}
body.is-playing .audio-panel.has-audio-feedback{flex-wrap:wrap}
@media(max-width:360px){body.is-playing .audio-panel .session-actions .player-chip>span:last-child{display:none}}
/* Group player/help on the left and audio switches on the right. */
body.is-playing .audio-panel .session-actions .player-chip{flex:0 1 auto}
body.is-playing .audio-panel #helpButton{margin-left:3px;margin-right:auto}
body.is-playing .audio-panel #musicButton{margin-left:12px}
@media(max-width:360px){body.is-playing .audio-panel #musicButton{margin-left:6px}}
/* Left-align only the help copy; leave other dialogs unchanged. */
.dialog:has(#closeHelp)>p{text-align:left;line-height:1.9}
/* Each chapter verse breaks at its comma; punctuation stays with its phrase. */
.dialog .verse-line{display:block;white-space:nowrap}
.dialog p.verse{font-size:clamp(14px,4vw,18px);line-height:1.9;letter-spacing:.035em;word-break:normal;line-break:strict}
.dialog h2{word-break:keep-all;line-break:strict}
/* Supporting verse stays quieter than its chapter title. */
.dialog p.verse{font-size:clamp(11.2px,3.2vw,14.4px);color:#787b70}
.dialog.scroll-intro .scroll-content>p.verse{font-size:clamp(11.2px,3.2vw,14.4px);color:#787b70}
