:root{--font-h1:"Jersey 25",sans-serif;--font-h2:"Jersey 15",sans-serif;--font-body:"Silkscreen",monospace;--ink:#211940;--yellow:#fff18b;--muted:#404fa8;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--yellow);font-family:var(--font-body)}button,input{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}canvas:focus-visible{outline:none}[hidden]{display:none!important}h1,h2,p{margin:0;font-weight:400}h1{font-family:var(--font-h1)}h2{font-family:var(--font-h2)}img{object-fit:contain;image-rendering:pixelated}#app{width:min(1280px,96vw,calc((100svh - 130px)*1.77778));margin:24px auto;container-type:inline-size}header{display:flex;justify-content:space-between;align-items:center;height:34px;margin-bottom:22px;font-size:clamp(9px,1.7cqw,22px);letter-spacing:2px}header button{display:flex;align-items:center;gap:8px;padding:0}header img{width:24px;height:24px}.version{color:var(--muted);position:absolute;left:50%;transform:translateX(-50%)}#stage{position:relative;aspect-ratio:16/9;isolation:isolate;overflow:hidden}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center}.splash{background:url('assets/images/shared/shared-ui-splash-screen-background-v-01.jpg') center/100% 100%}.scenic{background:url('assets/images/level-01/lvl01-ui-level-01-background-v-01.jpg') center/100% 100%}.cave-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}.splash-content{position:absolute;inset:4% 0 auto;display:flex;flex-direction:column;align-items:center}.brand{width:39.0625%}.splash h1{color:var(--ink);font-size:4.2cqw;margin:1.7cqw 0 2.5cqw}.primary{display:block;width:25cqw;height:5.08cqw;background:url('assets/images/shared/shared-ui-button-background-v-01.png') center/100% 100% no-repeat;font-family:var(--font-h1);font-size:3.4cqw;line-height:1;padding:0 1cqw .3cqw;margin-inline:auto;color:var(--yellow)}.primary:hover{filter:brightness(1.1)}#load-status{font-size:.75cqw;margin-top:1cqw;color:var(--ink)}#stage:not([data-state="loading"]) #load-status{visibility:hidden}.stone{position:absolute;width:37.5%;height:63.89%;left:31.25%;top:20.83%;background:url('assets/images/shared/shared-ui-background-panel-v-01.png') center/100% 100% no-repeat;color:var(--ink)}.intro-title{position:absolute;width:90%;height:52%;left:5%;top:-30%;z-index:1}.intro-dino{position:absolute;width:65.6%;right:-27%;top:0;z-index:2}.intro-copy{position:absolute;inset:20% 6% auto}.intro-copy h1{font-size:3.4cqw;line-height:.95;margin-bottom:2.3cqw}.intro-copy h2{font-size:2.1cqw;line-height:1}.intro-copy p{font-size:1.05cqw;line-height:2;margin-top:.7cqw}.intro-copy h2:not(:first-of-type){margin-top:2.3cqw}.intro-panel>.primary{position:absolute;bottom:-2%;left:16.67%}.mini-logo{position:absolute;width:13%;height:auto;top:2%;left:43.5%;z-index:4;pointer-events:none}#stage:is([data-state="splash"],[data-state="loading"],[data-state="intro"],[data-state="complete"]) .mini-logo{display:none}.veil{background:#211940bb}.pause-panel{top:17%;height:63.89%;padding:3.5cqw 5cqw}.pause-panel h1{font-size:3.5cqw;line-height:.9}.audio-settings{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2.3cqw 1.5cqw;margin:2.7cqw 2.5cqw;font-family:var(--font-h2);font-size:1.9cqw}.audio-settings input{appearance:none;width:100%;min-width:0;height:4px;background:var(--ink);border:0;cursor:pointer}.audio-settings input::-webkit-slider-thumb{appearance:none;width:1.5cqw;height:1.5cqw;background:#d77636;border:4px solid var(--ink)}.audio-settings input::-moz-range-thumb{width:1cqw;height:1cqw;background:#d77636;border:3px solid var(--ink);border-radius:0}.secondary{font-family:var(--font-h2);font-size:2.1cqw;color:var(--yellow);text-decoration:none;border:2px solid var(--yellow);background:#211940dd;padding:.5cqw 1cqw;margin-top:1.5cqw}.complete-title{position:absolute;width:104%;height:65%;left:-2%;top:-31%}#result{position:absolute;top:35%;left:9%;right:9%;font-family:var(--font-h2);font-size:2.1cqw;line-height:1.1}#result strong{display:block;font-family:var(--font-h1);font-size:3.2cqw;font-weight:400}.result-row{display:flex;justify-content:space-around;margin-top:2.4cqw}.complete-panel>.primary{position:absolute;bottom:6%;left:16.67%}#hud{position:absolute;inset:3.5% 1% auto;z-index:5;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-family:var(--font-h2);font-size:2.2cqw}.score-block{display:flex;gap:1.5cqw}#pause{width:9.5%;padding:0;pointer-events:auto}#pause img{display:block;width:100%}#stage:is([data-state="paused"],[data-state="complete"]) #hud{display:none}.instructions{display:flex;justify-content:center;gap:8cqw;margin:1.2cqw 0 3cqw;color:var(--muted);font-size:1.7cqw}.instructions span{display:flex;align-items:center;gap:2cqw}.instructions img{width:auto;height:1.5cqw}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:1.35cqw;letter-spacing:1px}#toast{position:absolute;z-index:6;bottom:14%;left:50%;transform:translateX(-50%);background:#211940e8;padding:8px;font-size:1cqw;white-space:nowrap}#touch{position:absolute;z-index:6;left:12%;right:12%;bottom:12%;display:flex;justify-content:space-between;pointer-events:none}#touch button{pointer-events:auto;touch-action:none;background:#211940bb;padding:10px;font-size:12px;border:1px solid var(--yellow)}#app:fullscreen{width: min(100vw,calc((100vh - 110px)*1.77778));height:100vh;margin:0 auto;padding-top:10px;background:var(--ink)}@media(max-width:600px){#app{width:100%;margin-top:16px}header{padding:0 12px;letter-spacing:0}header img{width:16px;height:16px}.version{font-size:8px}.instructions{font-size:12px;margin-top:16px}.instructions img{height:10px}footer{padding:0 12px;font-size:7px;gap:20px;margin-top:24px}#touch button{font-size:9px;padding:8px}.audio-settings input::-webkit-slider-thumb{width:12px;height:12px;border-width:2px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.splash-content,.stone{z-index:4}

/* Refinements from visual review. */
header img{height:1.5cqw;width:auto}header .sound-icon{width:auto}
button:focus-visible,input:focus-visible{outline:none}body.keyboard-navigation button:focus-visible,body.keyboard-navigation input:focus-visible,[data-home]:focus-visible{outline:1px dashed var(--yellow);outline-offset:3px}
.audio-settings input{height:2px}.audio-settings input::-webkit-slider-thumb{width:1.1cqw;height:1.1cqw;border-width:2px}.audio-settings input::-moz-range-thumb{width:.8cqw;height:.8cqw;border-width:2px}
[data-home]{cursor:pointer}.mini-logo{pointer-events:auto}.title-home{position:absolute;left:30%;width:40%;top:-30%;height:18%;z-index:5}
@media(max-width:600px) and (orientation:portrait){
 #app{width:100%;margin:12px auto}header{margin-bottom:8px}header img{height:10px}#stage{aspect-ratio:9/16}
 .cave-frame{width:177.7778%;height:56.25%;max-width:none;left:-38.8889%;top:21.875%;transform:rotate(90deg);object-fit:fill}
 .splash,.scenic{background-size:auto 100%;background-position:center}
 .splash-content{top:23%}.brand{width:68%}.splash h1{font-size:7cqw;margin:5cqw 0}.primary{width:48cqw;height:9.75cqw;font-size:6cqw}
 .stone{width:76%;height:43%;left:12%;top:30%;background-size:100% 100%}
 .intro-title{width:94%;left:3%;height:52%;top:-31%}.intro-dino{width:43%;right:-6%;top:4%}.intro-copy{top:20%;inset-inline:6%}.intro-copy h1{font-size:6.5cqw;margin-bottom:4cqw}.intro-copy h2{font-size:4cqw}.intro-copy p{font-size:2cqw;line-height:1.8}.intro-copy h2:not(:first-of-type){margin-top:4cqw}
 .intro-panel>.primary,.complete-panel>.primary{left:18.4%}.mini-logo{width:28%;left:36%;top:8%}
 .pause-panel{top:28%;padding:7cqw 10cqw;height:43%}.pause-panel h1{font-size:7cqw}.audio-settings{font-size:4cqw;gap:6cqw 3cqw;margin:6cqw 2cqw}.audio-settings input::-webkit-slider-thumb{width:10px;height:10px}.secondary{font-size:4cqw;margin-top:4cqw}
 #hud{top:5%;inset-inline:9%;font-size:4cqw}#pause{width:24%}#result{font-size:4cqw}#result strong{font-size:6cqw}.result-row{margin-top:6cqw}.complete-title{height:65%}
 #toast{font-size:2cqw;max-width:82%;white-space:normal;text-align:center;bottom:15%}#touch{bottom:9%}.instructions{gap:8cqw}footer{margin-bottom:16px}
}

/* Square mobile composition and tighter introduction. */
.intro-copy{top:18%}.intro-copy p{line-height:1.35;margin-top:.5cqw}.intro-copy h1{margin-bottom:1.8cqw}.intro-copy h2:not(:first-of-type){margin-top:1.7cqw}
#toast{bottom:auto;top:25%}
@media(max-width:600px) and (orientation:portrait){
 #app{margin: max(12px,calc((100svh - 550px)/2)) auto 12px}#stage{aspect-ratio:1}
 .cave-frame{width:100%;height:100%;left:0;top:0;transform:rotate(90deg)}
 .splash-content{top:14%}.brand{width:58%}.splash h1{font-size:6cqw;margin:3cqw 0}
 .stone{left:50%;transform:translateX(-50%);width:72%;height:68%;top:23%}
 .intro-title{top:-29%;height:48%}.intro-dino{width:36%;right:-4%;top:5%}.intro-copy{top:18%;inset-inline:7%}.intro-copy h1{font-size:5.4cqw;line-height:.9;margin-bottom:2cqw}.intro-copy h2{font-size:3.5cqw}.intro-copy p{font-size:1.8cqw;line-height:1.3;margin-top:1cqw}.intro-copy h2:not(:first-of-type){margin-top:2cqw}
 .intro-panel>.primary,.complete-panel>.primary{left:50%;transform:translateX(-50%)}
 .pause-panel{top:22%;height:68%;padding:5cqw 10cqw}.pause-panel h1{font-size:6cqw}.audio-settings{gap:4cqw 3cqw;margin:4cqw 0}.pause-panel .primary{position:relative;left:50%;transform:translateX(-50%);margin:0}.secondary{margin-top:2cqw;font-size:3.5cqw}
 .mini-logo{top:5%;width:23%;left:38.5%}#hud{top:5%;inset-inline:7%;font-size:3.4cqw}#result{font-size:3.5cqw}#result strong{font-size:5cqw}.result-row{margin-top:3cqw}.complete-panel>.primary{bottom:5%}#toast{top:23%;bottom:auto}#touch{bottom:8%}
}

/* New intro fact cards and more legible completion figures. */
.intro-copy{top:17%;inset-inline:7%;text-align:left}.intro-copy h1{font-size:3.5cqw;white-space:nowrap;text-align:center;line-height:1;margin-bottom:1cqw}
.intro-fact{display:grid;grid-template-columns:9cqw 1fr;gap:1.2cqw;align-items:start;margin-top:.6cqw}.intro-fact img{width:100%}.intro-fact h2{font-size:2.1cqw;line-height:.95;margin:1cqw 0 .4cqw}.intro-fact p{font-size:.95cqw;line-height:1.55;margin:0}.intro-copy h2:not(:first-of-type){margin-top:0}
#result{font-size:2.8cqw;top:34%}#result strong{font-size:6.4cqw;line-height:.9}.result-row{margin-top:1.6cqw}.result-row strong{font-size:4.8cqw}
.audio-settings input{height:3px}.audio-settings input::-webkit-slider-thumb{border-width:3px;width:1.3cqw;height:1.3cqw}.audio-settings input::-moz-range-thumb{border-width:3px}
@media(max-width:600px) and (orientation:portrait){
 .intro-copy{top:18%;inset-inline:7%}.intro-copy h1{font-size:5.8cqw;margin-bottom:1.5cqw}.intro-fact{grid-template-columns:17cqw 1fr;gap:2cqw;margin-top:1.5cqw}.intro-fact h2{font-size:3.6cqw;margin:.8cqw 0 1cqw}.intro-fact p{font-size:1.85cqw;line-height:1.5}
 #result{font-size:4.3cqw;top:34%}#result strong{font-size:10cqw}.result-row{margin-top:3cqw}.result-row strong{font-size:8cqw}.audio-settings input::-webkit-slider-thumb{width:12px;height:12px;border-width:2px}
}
.intro-title{height:34%;top:-10%}.intro-brand{position:absolute;width:36%;left:32%;top:-30%;height:20%;z-index:5}.intro-panel .title-home{display:none}
@media(max-width:600px) and (orientation:portrait){.intro-title{height:32%;top:-11%}.intro-brand{top:-29%;height:19%}}
#result{top:30%}.result-row{margin-top:.4cqw}
@media(max-width:600px) and (orientation:portrait){#result{top:30%}.result-row{margin-top:1.5cqw}}
#result{font-size:2.5cqw;line-height:1}.result-row strong{font-size:6.4cqw}
@media(max-width:600px) and (orientation:portrait){#result{font-size:3.8cqw}.result-row strong{font-size:10cqw}}

@media(max-width:600px) and (orientation:portrait){#result{top:34%}}

/* Keep completion copy below the supplied title artwork. */
#result{top:37%}
#result .result-row strong{font-size:5cqw}
@media(max-width:600px) and (orientation:portrait){
 #result{top:40%}
 #result .result-row strong{font-size:10cqw}
 #pause{width:14%;min-height:32px;display:flex;align-items:center;justify-content:center}
}
@media(orientation:landscape) and (max-height:500px){#pause{width:8%;min-height:32px;display:flex;align-items:center}}

/* Centre the illustrated facts optically within the stone, independently of its heading. */
.intro-fact{transform:translateX(1.5cqw)}
#stage button,#stage [role="button"]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage button img{-webkit-user-drag:none;pointer-events:none}
@media(max-width:600px) and (orientation:portrait){
 .intro-fact{transform:translateX(3cqw)}
}

/* Refinements for narrow touch screens and shorter desktop windows. */
#menu-birds{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.intro-brand{top:-27%;height:18%;width:36%;left:32%}
#pause{width:7.5%;min-height:32px;display:flex;align-items:center}
#pause img{width:100%}
.complete-panel .primary{padding-bottom:.7cqw}
.audio-settings input{height:30px;background:transparent;touch-action:none}
.audio-settings input::-webkit-slider-runnable-track{height:3px;background:var(--ink)}
.audio-settings input::-webkit-slider-thumb{margin-top:calc((3px - 1.3cqw)/2)}
.audio-settings input::-moz-range-track{height:3px;background:var(--ink)}
.control-options{text-align:center;margin-top:1cqw}
#touch-switch{font-size:clamp(10px,1cqw,13px);padding:8px 12px;border:1px solid var(--muted);color:var(--muted);touch-action:manipulation}
#touch-switch[aria-pressed="true"]{color:var(--yellow);border-color:var(--yellow)}
#touch button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;min-width:60px;min-height:36px}
footer a{color:inherit;text-decoration:none}footer a:hover{color:var(--yellow);text-decoration:none}
@media(max-width:600px) and (orientation:portrait){
 .intro-brand{top:-26%;height:18%}
 #pause{width:12%;min-height:32px}
 .complete-panel .primary{padding-bottom:1.2cqw}
 .audio-settings input::-webkit-slider-thumb{margin-top:-4.5px}
 .control-options{margin-top:12px}
 .instructions{margin-top:10px}
}
@media(orientation:landscape) and (max-height:500px){#pause{width:7%}}

/* Keyboard instructions precede the touch switch. */
.control-options{margin:1cqw 0 3cqw}.instructions{margin-bottom:1.2cqw}
@media(max-width:600px){.control-options{margin:12px 0 20px}}

/* Touch instructions replace keyboard hints at the mobile breakpoint. */
.mobile-instructions{display:none}
@media(max-width:600px), (pointer:coarse){
 .keyboard-instructions{display:none}.mobile-instructions{display:flex;font-size:clamp(9px,2.4cqw,13px);margin:14px 0 20px;gap:7cqw}
}

/* One symmetric HUD inset at every viewport, independent of button width. */
#hud{inset-inline:7%;align-items:center;line-height:1}
.score-block{align-items:center;min-height:32px}
#pause{justify-content:center}
.intro-fact h2,.intro-fact p{white-space:pre-line}

/* Shared pixel-weight controls: identical border, padding and fill. */
#pause,#touch button{border:2px solid var(--yellow);background:#211940bb;padding:12px 16px;min-width:76px;min-height:44px;font-family:var(--font-body);font-size:clamp(9px,1.1cqw,14px);line-height:1.2;box-sizing:border-box}
#pause{width:auto;flex:none;justify-content:center}
#touch{left:7%;right:7%}
.pause-panel h1{white-space:nowrap;font-size:3.5cqw;margin-top:1.5cqw}
@media(max-width:600px), (pointer:coarse){
 #pause,#touch button{padding:12px 14px;min-width:78px;min-height:46px;font-size:clamp(9px,2.4cqw,13px)}
 .audio-settings input::-webkit-slider-thumb{width:24px;height:24px;border:3px solid var(--ink);margin-top:-10.5px}
 .audio-settings input::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--ink);border-radius:0}
}
@media(max-width:600px) and (orientation:portrait){
 .pause-panel h1{font-size:6cqw;margin-top:6cqw}
}

/* Two straight pause bars, independent of font glyphs and fallbacks. */
#pause{gap:.65em}
.pause-bars{display:inline-flex;gap:3px;height:.9em;flex:none}
.pause-bars::before,.pause-bars::after{content:"";display:block;width:2px;height:100%;background:currentColor}

/* L2 forest: fill the portrait rock opening while keeping the player's side
   of the 16:9 world visible. */
@media(max-width:600px) and (orientation:portrait){
 body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]){background:var(--ink)}
 body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) #game{position:absolute;left:-20%;top:0;width:177.7778%;height:100%;object-fit:fill}
 body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) .cave-frame{display:block;width:100%;height:100%;left:0;top:0;transform:none;object-fit:fill}
 body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) #hud{top:6%;font-size:2.7cqw}
 body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) .mini-logo{top:6%;width:20%;left:40%}
 body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) #touch{bottom:5%}
}

/* Use the approved Forest menu scene on the Forest splash as well as intro. */
body[data-level="forest"] .splash{background-image:url('assets/images/level-02/lvl02-ui-menu-background-v-02.png')}
body[data-level="forest"] .splash h1{color:var(--yellow);text-shadow:2px 2px 0 var(--ink),-2px -2px 0 var(--ink)}

/* Overdraw the frame past the clipped stage edge so fractional CSS pixels
   cannot expose a sliver of the canvas. Forest only; Level 1 is unchanged. */
body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) .cave-frame{left:-3px;top:-3px;width:calc(100% + 6px);height:calc(100% + 6px);object-fit:fill}
body[data-level="forest"] #touch [data-key="duck"]{display:none}
body[data-level="forest"] #touch{justify-content:flex-end}

body[data-level="forest"] .pause-panel #resume{display:flex;align-items:center;justify-content:center;line-height:1;padding:0 0 .35cqw;text-align:center}
@media(max-width:600px) and (orientation:portrait){
 body[data-level="forest"] .pause-panel #resume{padding-bottom:.55cqw}
}

/* Only mounted on explicit loopback development/test routes. */
#dev-level-panel{display:block;text-align:center;margin:16px auto;font-size:11px;color:var(--yellow)}
#dev-level{background:var(--ink);color:var(--yellow);border:1px solid var(--yellow);padding:6px;margin-left:8px}

/* Preserve the completion art/results; fit the retained replay below Continue. */
#complete[data-can-advance="true"] .complete-panel>.primary{bottom:7%}
#complete[data-can-advance="true"] .result-row{margin-top:0}
#complete[data-can-advance="true"] .result-row strong{font-size:4cqw}
.complete-panel>.completion-replay{position:absolute;top:100%;bottom:auto;left:0;width:100%;margin:0;padding:.35cqw 0;color:var(--yellow);background:#211940e8;text-decoration:none;font-size:1.7cqw;line-height:1.2}
@media(max-width:600px) and (orientation:portrait){
 .complete-panel>.completion-replay{font-size:3.6cqw}
 #complete[data-can-advance="true"] .result-row strong{font-size:8.5cqw}
}

/* Level 3 supplied title includes its own border; keep it legible on narrow screens. */
body[data-level="river"] .intro-title,body[data-level="river"] .complete-title {object-fit:contain;}
body[data-level="river"] .splash{background-image:url('assets/images/level-03/lvl03-ui-carousel-menu-background.png')}
body[data-level="river"] .splash h1{color:var(--yellow);text-shadow:2px 2px 0 var(--ink)}
body[data-level="river"] .intro-brand{display:none}
body[data-level="river"] .intro-title{height:48%;top:-28%}



.river-completed{display:none}
body[data-level="river"] .river-completed{display:none;position:absolute;top:26%;left:0;right:0;font-size:3.4cqw}
body[data-level="river"] .complete-title{top:-38%;height:60%}
@media(max-width:600px) and (orientation:portrait){body[data-level="river"] .river-completed{font-size:6cqw}}
/* River intro follows the supplied species, diet, then period order. */
body[data-level="river"] .intro-panel{width:44%;left:28%;height:72%;top:18%}
body[data-level="river"] .intro-copy{display:flex;flex-direction:column;top:16%;inset-inline:8%}
body[data-level="river"] .intro-copy h1{order:0}
body[data-level="river"] .intro-fact:first-of-type{order:1}
body[data-level="river"] .intro-fact:last-of-type{order:2}
body[data-level="river"] .intro-fact{transform:none;grid-template-columns:9cqw minmax(0,1fr);gap:1.2cqw}
body[data-level="river"] .intro-fact p{font-size:.95cqw;line-height:1.65}
body[data-level="river"] .intro-panel>.primary{left:50%;transform:translateX(-50%);bottom:2%}
@media(max-width:600px) and (orientation:portrait){
 body[data-level="river"] .intro-panel{width:78%;left:50%;height:76%;top:19%}
 body[data-level="river"] .intro-copy{top:14%}
 body[data-level="river"] .intro-fact{grid-template-columns:17cqw minmax(0,1fr);gap:2cqw}
 body[data-level="river"] .intro-fact p{font-size:2cqw;line-height:1.35}
}

body[data-level="river"] .intro-fact strong{display:inline-block;margin-top:.6cqw;font-weight:700}
body[data-level="river"] .intro-fact h2{font-size:2.1cqw;line-height:1.1}
body[data-level="river"] .complete-title{top:-31%;height:68%}
@media(max-width:600px) and (orientation:portrait){body[data-level="river"] .intro-fact h2{font-size:3.5cqw}body[data-level="river"] .intro-fact strong{margin-top:1cqw}}
body[data-level="river"] .intro-fact strong{font-synthesis:weight}

body[data-level="river"] .intro-copy{text-transform:uppercase}
body[data-level="river"] .intro-fact{margin-top:1cqw}

body[data-level="river"] .intro-fact:last-of-type h2{white-space:nowrap;font-size:2.1cqw}
@media(max-width:600px) and (orientation:portrait){body[data-level="river"] .intro-fact:last-of-type h2{font-size:3.5cqw}}

/* Standalone Open Sea presentation. Existing UI controls remain in the shell. */
body[data-level="open-sea"]{--ink:#211940;--muted:#404fa8;background:var(--ink)}
body[data-level="open-sea"] .splash{background-image:url('assets/images/level-04/lvl04-ui-carousel-menu-background.png');background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#071d34}
body[data-level="open-sea"] .scenic{background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#071d34}
body[data-level="open-sea"] .splash::before,body[data-level="open-sea"] .scenic::before{content:"";position:absolute;inset:0;background:url('assets/images/level-04/lvl04-background-water.png') center/contain no-repeat;opacity:.12;pointer-events:none}
body[data-level="open-sea"] .intro-brand{display:none}
body[data-level="open-sea"] .intro-panel .title-home{display:block;top:-20%;height:17%}
body[data-level="open-sea"] .splash h1,
body[data-level="open-sea"] #load-status{color:var(--yellow);text-shadow:0 2px 5px #07304d}
body[data-level="open-sea"] #touch [data-key="duck"]{display:none}
body[data-level="open-sea"] #touch{justify-content:flex-end}
body[data-level="open-sea"] .intro-title{height:45%;top:-27%}
body[data-level="open-sea"] .intro-copy{top:15%}
body[data-level="open-sea"] .intro-fact:last-of-type{margin-top:.3cqw}
body[data-level="open-sea"] .intro-fact:last-of-type p{font-size:.86cqw;line-height:1.35}
body[data-level="open-sea"] .intro-fact p{white-space:pre-line}
body[data-level="open-sea"] .intro-fact img{max-height:7cqw}
body[data-level="open-sea"] .complete-title{top:-27%;height:62%}
body[data-level="open-sea"] #result{top:32%}
body[data-level="open-sea"] .instructions{color:var(--muted)}
body[data-level="open-sea"] .keyboard-instructions{white-space:nowrap}
@media(max-width:600px) and (orientation:portrait){
 body[data-level="open-sea"] .intro-title{top:-24%;height:42%}
 body[data-level="open-sea"] .intro-copy{top:16%}
 body[data-level="open-sea"] .intro-fact:last-of-type p{font-size:1.75cqw;line-height:1.3}
 body[data-level="open-sea"] .intro-fact img{max-height:13cqw}
 body[data-level="open-sea"] #result{top:35%}
}

/* Keep the complete menu painting visible on portrait screens. A second copy
   extends its colours to the frame edges where a 16:9 image leaves space. */
@media(max-width:600px) and (orientation:portrait){
 body[data-level="open-sea"] .splash,
 body[data-level="open-sea"] .scenic{background-size:cover;background-position:center}
 body[data-level="open-sea"] .splash::before,
 body[data-level="open-sea"] .scenic::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:url('assets/images/level-04/lvl04-ui-carousel-menu-background.png') center/contain no-repeat;
  opacity:1;pointer-events:none
 }
 body[data-level="open-sea"] .splash::after,
 body[data-level="open-sea"] .scenic::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:url('assets/images/level-04/lvl04-background-water.png') center/cover no-repeat;
  opacity:.12;pointer-events:none
 }
 body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]){background:#082941}
 body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]) #game{
  position:absolute;left:-20%;top:0;width:177.7778%;height:100%;object-fit:fill
 }
 body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]) .cave-frame{
  display:block;left:-3px;top:-3px;width:calc(100% + 6px);height:calc(100% + 6px);
  transform:none;object-fit:fill
 }
 body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]) #hud{top:6%;font-size:2.7cqw}
 body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]) .mini-logo{top:6%;width:20%;left:40%}
 body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]) #touch{bottom:5%}
}

/* Level 5 retains the approved standalone intro, controls and Deccan framing. */
body[data-level="level5"] #stage{background:#231b35}
body[data-level="level5"] .scenic{background:linear-gradient(180deg,rgba(25,19,40,.08),rgba(25,19,40,.27))}
body[data-level="level5"] #complete.scenic{background:linear-gradient(180deg,rgba(25,19,40,.12),rgba(25,19,40,.32))}
body[data-level="level5"] .intro-brand,body[data-level="level5"] .title-home{display:none}
body[data-level="level5"] .intro-panel{width:44%;height:64%;left:28%;top:20.83%}
body[data-level="level5"] .intro-title{width:108%;height:47%;left:-4%;top:-30%}
body[data-level="level5"] .intro-copy{top:18%;left:7%;right:7%;text-align:left;text-transform:uppercase}
body[data-level="level5"] .intro-copy h1{text-align:center;font-size:3.5cqw;line-height:1;margin-bottom:1cqw}
body[data-level="level5"] .intro-fact{grid-template-columns:9cqw minmax(0,1fr);gap:1.2cqw;align-items:start;margin-top:.6cqw}
body[data-level="level5"] .intro-fact img{display:block;width:9cqw;height:8.1cqw;object-fit:contain}
body[data-level="level5"] .intro-fact h2{font-size:2.1cqw;line-height:.95;margin:.6cqw 0 .4cqw}
body[data-level="level5"] .intro-fact p{font-size:1cqw;line-height:1.5;margin:0}
body[data-level="level5"] .intro-fact strong{font-weight:400}
body[data-level="level5"] .intro-panel>.primary{left:50%;transform:translateX(-50%);bottom:-2%}
body[data-level="level5"] .complete-panel{width:37.5%;height:63.89%;left:31.25%;top:20.83%}
body[data-level="level5"] .complete-title{width:106%;height:64%;left:-3%;top:-36%}
body[data-level="level5"] .river-completed{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body[data-level="level5"] #result{top:30%;font-size:2.4cqw}
body[data-level="level5"] #result strong{font-size:5.4cqw;line-height:.9}
body[data-level="level5"] .result-row{margin-top:.8cqw}
body[data-level="level5"] .result-row strong{font-size:4.2cqw}
body[data-level="level5"] .complete-panel>.primary{left:50%;transform:translateX(-50%);bottom:2%}
body[data-level="level5"] #hud{inset-inline:7%}
body[data-level="level5"] #touch{left:10%;right:10%;bottom:10%}
body[data-level="level5"] #touch [data-key="jump"]{order:0}
body[data-level="level5"] #touch [data-key="charge"]{order:1}
body[data-level="level5"] #toast{top:23%}
body[data-level="level5"] .instructions{gap:4cqw}
@media(max-width:600px) and (orientation:portrait){
 body[data-level="level5"] .stone{left:50%;transform:translateX(-50%);width:82%;height:75%;top:20%}
 body[data-level="level5"] .intro-title{height:42%;top:-25%;left:-2%;width:104%}
 body[data-level="level5"] .intro-copy{top:17%;left:7%;right:7%}
 body[data-level="level5"] .intro-copy h1{font-size:5.5cqw;margin-bottom:1cqw}
 body[data-level="level5"] .intro-fact{grid-template-columns:15cqw minmax(0,1fr);gap:2cqw;margin-top:1.4cqw}
 body[data-level="level5"] .intro-fact img{width:15cqw;height:12cqw}
 body[data-level="level5"] .intro-fact h2{font-size:3.8cqw;margin:.2cqw 0 .5cqw}
 body[data-level="level5"] .intro-fact p{font-size:2.2cqw;line-height:1.33}
 body[data-level="level5"] .complete-title{height:53%;top:-25%}
 body[data-level="level5"] #result{top:35%;font-size:4cqw}
 body[data-level="level5"] #result strong{font-size:8cqw}
 body[data-level="level5"] .result-row{margin-top:5cqw}
 body[data-level="level5"] .result-row strong{font-size:6cqw}
 body[data-level="level5"] .cave-frame{left:-3px;top:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:none;object-fit:fill}
 body[data-level="level5"] #touch{bottom:4%;left:8%;right:8%}
 body[data-level="level5"] #touch button{min-width:96px;min-height:48px;font-size:11px}
 body[data-level="level5"] .instructions{display:none}
}
@media(orientation:landscape) and (max-height:520px){
 body[data-level="level5"] #touch{bottom:-50px;left:7%;right:7%}
}

/* V1.1: keep loading separate from the playable action and clear the splash. */
.primary{text-transform:uppercase}
.primary:disabled{opacity:1;filter:sepia(.45) brightness(.78) saturate(1.3)}
#splash-loader{position:relative;width:25cqw;height:5.8cqw;margin-inline:auto;background:url('assets/images/shared/shared-ui-carousel-shared-loader-emptystate.png') center/100% 100% no-repeat;image-rendering:pixelated}
#splash-progress{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#splash-progress .carousel-footprint{position:absolute;object-fit:fill}
#splash-loader[data-failed="true"]{filter:sepia(.65) hue-rotate(310deg) saturate(1.3)}
body:has(#stage[data-state="splash"]) .instructions,body:has(#stage[data-state="loading"]) .instructions{display:none}
body:has(#level-loading:not([hidden])) .instructions:not([hidden]){display:flex}
@media(max-width:600px) and (orientation:portrait){#splash-loader{width:48cqw;height:11.1cqw}}

/* Keep touch controls below the clipped play surface. */
main{position:relative}
#touch{position:relative;left:auto;right:auto;bottom:auto;width:86%;margin:10px auto 0}
@media(max-width:600px) and (orientation:portrait){
 #stage .cave-frame{left:-4px;top:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}
 /* Cover the last composited stage row with the same colour as the page. */
 #stage{outline:3px solid var(--ink)}
 #stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);z-index:7;pointer-events:none}
 #touch,body[data-level="level5"] #touch{position:relative;left:auto;right:auto;bottom:auto;width:86%;margin:10px auto 0}
 body[data-level="forest"] #touch,body[data-level="open-sea"] #touch{justify-content:flex-end}
 body[data-level="level5"] #touch{width:84%}
 body[data-level="level5"] .instructions:not([hidden]){display:flex}
}
#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app input{-webkit-user-select:auto;user-select:auto}
.complete-panel>.completion-replay{left:50%;top:101%;width:45%;transform:translateX(-50%);padding:.5cqw .8cqw;border:2px solid var(--yellow);background:#211940bb;color:var(--yellow);font-family:var(--font-body);font-size:1.35cqw;text-decoration:none;white-space:nowrap}
@media(max-width:600px) and (orientation:portrait){.complete-panel>.completion-replay{width:62%;padding:1.3cqw;font-size:2.6cqw;border-width:1px}}
body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) #hud,
body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]) #hud{font-family:var(--font-h2);font-size:2.2cqw}
@media(max-width:600px) and (orientation:portrait){body[data-level="forest"] #stage:is([data-state="playing"],[data-state="paused"]) #hud,body[data-level="open-sea"] #stage:is([data-state="playing"],[data-state="paused"]) #hud{font-size:3.4cqw}}

/* Show one control hint on menus and none beside visible touch buttons. */
body:has(#level-loading:not([hidden])) .keyboard-instructions:not([hidden]){display:flex}
body:has(#level-loading:not([hidden])) .mobile-instructions:not([hidden]){display:none}
@media(max-width:600px), (pointer:coarse){
 .keyboard-instructions{display:none!important}
 body:has(#level-loading:not([hidden])) .keyboard-instructions:not([hidden]){display:none}
 body:has(#level-loading:not([hidden])) .mobile-instructions:not([hidden]){display:flex}
 body:has(#touch:not([hidden])) .instructions{display:none!important}
}
@media(max-width:600px) and (orientation:portrait){
 #stage::after{height:14px}
}
.level-shortcuts{display:flex;justify-content:center;gap:.8cqw;flex-wrap:wrap;margin-top:1cqw;max-width:70%}
.level-shortcuts[hidden]{display:none}
.level-shortcuts button{padding:.6cqw 1cqw;border:2px solid var(--yellow);background:#211940d9;color:var(--yellow);font-size:1.1cqw;white-space:nowrap}
@media(max-width:600px) and (orientation:portrait){.level-shortcuts{max-width:78%;gap:1cqw;margin-top:2cqw}.level-shortcuts button{padding:1.5cqw 2cqw;font-size:2.3cqw;border-width:1px}}

/* October mobile review: keep both completion actions inside the stone. */
#complete[data-can-advance="true"] .complete-panel>.primary{bottom:17%}
.complete-panel>.completion-replay{top:auto;bottom:3%;min-height:3.8cqw;display:flex;align-items:center;justify-content:center}
.pause-panel #restart{display:block;width:25cqw;min-height:4.4cqw;margin:1.4cqw auto 0;padding:.7cqw;border:2px solid var(--yellow);background:#211940dd;color:var(--yellow);font-family:var(--font-body);font-size:1.25cqw;line-height:1.2;text-decoration:none}
.audio-settings label{white-space:nowrap}
.audio-settings output{display:inline-block;min-width:3ch;text-align:right;font-size:.7em}
.audio-settings input{touch-action:auto}
@media(max-width:600px) and (orientation:portrait){
 #complete[data-can-advance="true"] .complete-panel>.primary{bottom:17%}
 .complete-panel>.completion-replay{top:auto;bottom:3%;min-height:7cqw}
 .pause-panel #restart{width:48cqw;min-height:9cqw;margin-top:3cqw;font-size:2.6cqw}
 body[data-level="level5"] .complete-panel{top:23%;height:68%}
 body[data-level="level5"] .complete-title{height:45%;top:-22%}
 body[data-level="level5"] #result{top:32%;font-size:3.8cqw}
 body[data-level="level5"] #result strong{font-size:9cqw}
 body[data-level="level5"] .result-row{margin-top:1.5cqw}
 body[data-level="level5"] .result-row strong{font-size:7cqw}
 body[data-level="level5"] #complete[data-can-advance="true"] .complete-panel>.primary{bottom:16%}
}
/* Level 5 results use the same panel scale and type rhythm as other levels. */
body[data-level="level5"] .complete-panel{width:37.5%;height:63.89%;left:31.25%;top:20.83%}
body[data-level="level5"] .complete-title{width:104%;height:65%;left:-2%;top:-31%}
body[data-level="level5"] #result{top:37%;font-size:2.5cqw}
body[data-level="level5"] #result strong{font-size:6.4cqw}
body[data-level="level5"] .result-row{margin-top:0}
body[data-level="level5"] .result-row strong{font-size:4cqw}
@media(max-width:600px) and (orientation:portrait){
 body[data-level="level5"] .complete-panel{width:72%;height:68%;left:50%;top:23%}
 body[data-level="level5"] .complete-title{width:104%;height:65%;left:-2%;top:-31%}
 body[data-level="level5"] #result{top:40%;font-size:3.8cqw}
 body[data-level="level5"] #result strong{font-size:10cqw}
 body[data-level="level5"] .result-row{margin-top:1.5cqw}
 body[data-level="level5"] .result-row strong{font-size:8.5cqw}
}
#complete[data-can-advance="true"] #result{top:25%}
#complete[data-can-advance="true"] #result strong{font-size:5.8cqw}
#complete[data-can-advance="true"] .result-row{margin-top:0}
@media(max-width:600px) and (orientation:portrait){
 #complete[data-can-advance="true"] #result{top:28%}
 #complete[data-can-advance="true"] #result strong{font-size:8cqw}
 #complete[data-can-advance="true"] .result-row strong{font-size:7cqw}
}

/* V1.1 screenshot review: one results composition for all five levels.
   Keep the artwork box entirely above the score, with separate action rows. */
#complete .complete-panel{left:31.25%;top:20.83%;width:37.5%;height:63.89%;transform:none}
#complete .complete-title{left:-2%;top:-24%;width:104%;height:48%;object-fit:contain}
#complete #result,#complete[data-can-advance="true"] #result{top:29%;left:9%;right:9%;font-family:var(--font-h1);font-size:2cqw;line-height:1.05}
#complete #result strong,#complete[data-can-advance="true"] #result strong{font-family:var(--font-h1);font-size:4.6cqw;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
#complete #result .result-row{display:grid;grid-template-columns:1fr 1fr;gap:1cqw;margin-top:.8cqw}
#complete #result .result-row strong,#complete[data-can-advance="true"] #result .result-row strong{font-size:3.8cqw}
#complete .complete-panel>.primary,#complete[data-can-advance="true"] .complete-panel>.primary{left:50%;transform:translateX(-50%);bottom:17%;width:25cqw;height:5.08cqw;font-size:3.4cqw}
#complete .complete-panel>.completion-replay{left:50%;transform:translateX(-50%);top:auto;bottom:3%;width:45%;height:3.8cqw;min-height:0;padding:.3cqw .8cqw;margin:0;font-family:var(--font-h1);font-size:1.8cqw;line-height:1}
#complete .river-completed{display:none}
@media(max-width:600px) and (orientation:portrait){
 #complete .complete-panel{left:50%;top:23%;width:72%;height:68%;transform:translateX(-50%)}
 #complete .complete-title{top:-24%;height:48%}
 #complete #result,#complete[data-can-advance="true"] #result{top:29%;font-size:3.8cqw}
 #complete #result strong,#complete[data-can-advance="true"] #result strong{font-size:8.5cqw}
 #complete #result .result-row{gap:1.5cqw;margin-top:2cqw}
 #complete #result .result-row strong,#complete[data-can-advance="true"] #result .result-row strong{font-size:7cqw}
 #complete .complete-panel>.primary,#complete[data-can-advance="true"] .complete-panel>.primary{width:48cqw;height:9.75cqw;font-size:6cqw;bottom:17%}
 #complete .complete-panel>.completion-replay{width:62%;height:7cqw;font-size:3.6cqw;bottom:3%}
}

/* V1.1.1: retain the user's control wording on keyboard and touch. */
.instructions{white-space:pre-wrap;text-align:center}
#touch[data-single="true"]{justify-content:center}
@media(max-width:600px){.instructions{font-size:clamp(8px,2.2cqw,12px);padding-inline:3cqw;white-space:normal}}

/* Control hints belong to level introductions and active play, not results,
   home, settings/pause, or the final score screen. Copyright remains visible. */
body:has(#stage:is([data-state="splash"],[data-state="paused"],[data-state="complete"],[data-state="overall"])) .instructions{display:none!important}
body:has(#stage[data-state="loading"] #level-loading[hidden]) .instructions{display:none!important}

/* Shared home/results artwork: only the backdrop breathes, not the cave or UI. */
#splash,#overall-score{background:#211940}
#splash::before,#overall-score::before{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;
 background:url('assets/images/shared/shared-ui-splash-screen-background-v-01.jpg') center/cover no-repeat;
 transform-origin:center;animation:shared-menu-zoom 22s ease-in-out infinite alternate;
}
#splash::after{content:none}
#splash h1,#splash #load-status{color:var(--yellow);text-shadow:0 2px 3px var(--ink)}
.overall-panel{z-index:4}
@keyframes shared-menu-zoom{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){#splash::before,#overall-score::before{animation:none;transform:none}}

/* Decorative foreground clusters pass in front of the world, under the cave. */
#stage-foreground{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;image-rendering:pixelated}

/* Keep the leaping dinosaur clear of the main action, on desktop and phone. */
#splash .splash-content{inset:4% 0 8%}
#splash #start{position:absolute;top:76%;left:50%;transform:translateX(-50%);margin:0}
#splash .level-shortcuts{position:absolute;top:89%;left:50%;transform:translateX(-50%);margin:0}
#retry-loading{position:absolute;z-index:8;left:50%;bottom:11%;transform:translateX(-50%);margin:0;padding:.65em 1em;background:var(--ink);color:var(--yellow);border:1px solid var(--yellow);text-decoration:none;font-size:clamp(10px,1.3cqw,18px)}
@media(max-width:600px) and (orientation:portrait){
 #splash .splash-content{inset:10% 0 8%}
 #splash::before{background-size:auto 100%;background-position:36% center}
 #splash #start{top:77%}
 #splash:has(.level-shortcuts:not([hidden])) #start{top:73%}
 #splash .level-shortcuts{top:86%;width:90%;max-width:90%;flex-wrap:nowrap}
 #splash .level-shortcuts button{padding:1cqw 2cqw}
}

/* Every level is visible from the start, with an explicit pixel lock. */
#splash .level-shortcuts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:62%;max-width:90%}
.level-shortcuts button{display:flex;justify-content:center;align-items:center;gap:.35cqw;padding:.6cqw .35cqw}
.level-shortcuts button.is-locked{opacity:.42;cursor:default}
.level-lock{display:inline-block;flex:none;width:.7cqw;height:.55cqw;min-width:5px;min-height:4px;background:currentColor;position:relative;margin-top:.2cqw}
.level-lock::before{content:"";position:absolute;left:15%;bottom:100%;width:70%;height:70%;border:1px solid currentColor;border-bottom:0}
@media(max-width:600px) and (orientation:portrait){
 #splash .level-shortcuts{width:90%}
 #splash .level-shortcuts button{font-size:2.15cqw;padding:1cqw .5cqw;gap:.7cqw}
 .level-lock{width:1.7cqw;height:1.3cqw}
}