:root{color-scheme:dark;--ink:#d6ead7;--lime:#c1e987;--gold:#f3c879;--muted:#93b7ad}*{box-sizing:border-box}body{margin:0;background:#102a27;color:var(--ink);font:16px/1.55 system-ui,sans-serif}header,main,footer{max-width:1100px;margin:auto}header{display:flex;justify-content:space-between;padding:26px 28px;border-bottom:1px solid #496253;font:12px monospace;letter-spacing:1px}a{color:var(--lime)}header a{text-decoration:none;font-weight:bold;font-size:18px}main{padding:36px 28px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{font:bold 11px/1.5 monospace;letter-spacing:2px;color:var(--lime);margin:0 0 10px}h1{font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-1.6px;margin:0}h1 span{color:var(--gold)}.intro p:last-child{color:#b2c9ba;font-size:15px}.badge{flex-shrink:0;color:var(--gold);border:2px solid #75835f;padding:14px;font:bold 12px/1.8 monospace;transform:rotate(4deg)}.cabinet{margin-top:20px;border:3px solid #698d76;box-shadow:8px 8px 0 #061b1b;background:#0b2327}.topline{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;background:#173d39;color:var(--lime);font:11px monospace;letter-spacing:1px}button{font:bold 12px/1.5 monospace;border:2px solid #6e9381;background:#173d39;color:var(--ink);padding:12px 16px;cursor:pointer;min-height:44px;box-shadow:3px 3px 0 #061b1b}button:hover{background:#28594c}button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{cursor:default;opacity:.55}.topline button{border:0;box-shadow:none;font-size:10px;padding:5px;min-height:32px}#steps{margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;font:10px/1.6 monospace}#steps li{padding:11px 8px;color:#8ba69f;border-bottom:3px solid #294d45;text-align:center}#steps li.current{color:var(--gold);background:#234139;border-color:var(--gold)}#steps li.done{color:var(--lime);border-color:var(--lime)}.hud{display:flex;justify-content:space-between;padding:14px 20px;font:10px monospace;color:var(--muted)}.hud b{display:block;color:var(--ink);font-size:17px;margin-top:6px}.screen{position:relative;border-block:2px solid #476b60}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;touch-action:manipulation}.location{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;font:9px monospace;color:#d6f0d8;text-shadow:2px 2px #103444}.mission{padding:22px 24px 12px}h2{font-size:24px;margin:0 0 8px;line-height:1.2}.mission>p:not(.eyebrow){font-size:14px;color:#b7d2c5;margin:8px 0 18px;max-width:800px}#actions{display:flex;gap:10px;flex-wrap:wrap}#actions button.primary{background:var(--gold);color:#172d27;border-color:#ffe3a6}#actions button.primary:hover{background:#ffe0a0}#actions .patch{min-width:110px}#message{min-height:23px;color:var(--gold)!important;margin:14px 0!important}.bottom{border-top:1px solid #35574d;display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:10px;color:var(--muted);font:10px/1.6 monospace}.bottom button{background:none;box-shadow:none;border:0;font-size:10px;padding:8px}.footnote,details{font-size:12px;color:#a1baab;margin:22px 0}details{border-top:1px solid #496253;padding-top:14px}summary{cursor:pointer}footer{padding:0 28px 30px;font:10px/1.8 monospace;color:var(--lime);display:flex;justify-content:space-between}footer span{color:var(--muted)}@media(max-width:600px){header{padding:18px}header span{font-size:9px}header a{font-size:14px}main{padding:24px 14px}.badge{display:none}.intro p:last-child{font-size:13px}#steps li{font-size:8px;padding:9px 2px}.hud{padding:12px;font-size:8px}.hud b{font-size:14px}.location{font-size:7px;top:8px;left:8px;right:8px}.mission{padding:18px 14px 10px}h2{font-size:21px}#actions button{flex:1;padding:10px 8px}.bottom{align-items:flex-start}footer{display:block;padding:0 16px 24px}footer span{display:block}}

.air-panel{width:100%;display:flex;gap:16px;align-items:center;color:#c1e987;font:12px monospace;background:#173d39;padding:12px}.air-panel b{font-size:24px;display:block;color:#f3c879}.air-panel progress{flex:1;width:60px;accent-color:#c1e987}.low-air{color:#ff947b!important}.dive-controls{display:flex;gap:8px}.dive-controls button{font-size:20px;touch-action:none;user-select:none}.clipboard{width:100%;background:#ead8ae;border:4px solid #a58d62;color:#243c36;padding:14px;font:12px/1.6 monospace}.clipboard strong{display:block;border-bottom:2px solid #a58d62;padding-bottom:6px}.clipboard p{margin:6px 0}.survey-comparison{width:100%;font:12px/1.6 monospace;color:#b7d2c5}@media(max-width:600px){.dive-controls{width:100%}.dive-controls button{flex:1}.air-panel{gap:8px;font-size:10px}}

/* Readable interface text stays outside the pixel-art canvas. */
body{font-size:17px}button{font-family:system-ui,sans-serif;font-size:15px;line-height:1.4}.topline,.eyebrow,#steps,.hud,.bottom,.clipboard,.air-panel,.survey-comparison,footer{font-family:system-ui,sans-serif}.eyebrow{font-size:13px;letter-spacing:1px}.topline{font-size:13px;letter-spacing:.5px}.topline button{font-size:12px}#steps li{font-size:13px;font-weight:700}.hud{font-size:12px}.hud b{font-size:20px}.mission>p:not(.eyebrow){font-size:16px;line-height:1.65}.bottom{font-size:13px;line-height:1.6}.bottom button{font-size:12px}.location{font:bold 12px/1.4 system-ui,sans-serif;background:#0b2838e8;top:8px;padding:7px 10px;text-shadow:none}.clipboard{font-size:15px;line-height:1.65}.air-panel{font-size:14px}.air-panel b{font-size:28px;font-variant-numeric:tabular-nums}.footnote,details{font-size:14px}.dive-prompt{width:100%;margin:0;padding:12px 15px;background:#23483e;color:#ffe0a0;font-size:16px;line-height:1.5;border-left:4px solid #f3c879}.diver-legend{width:100%;font-size:13px;font-weight:700;color:#e4edcf;margin:0}.dive-controls button{min-width:52px;min-height:52px;font-size:25px}#record-observation:disabled{opacity:1;background:#3d514a;color:#cfdbd1;border-color:#657e71}@media(max-width:600px){#steps li{font-size:10px}.hud{font-size:10px}.hud b{font-size:17px}.location{font-size:10px;gap:10px}.topline{font-size:11px}.air-panel{font-size:12px}.mission>p:not(.eyebrow){font-size:16px}.bottom{font-size:12px}.clipboard{font-size:14px}button{font-size:14px}.diver-legend{font-size:12px}}
/* One-window play surface. Game UI is anchored to the scene, not the page. */
html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:column}header{width:100%;max-width:none;height:44px;flex:0 0 44px;padding:8px 18px;align-items:center}header a{font-size:16px}main{padding:8px;max-width:1400px;width:100%;flex:1;min-height:0;display:flex}.intro,.footnote,main>details,body>footer{display:none}.cabinet{width:100%;height:100%;min-height:0;margin:0;box-shadow:none;display:flex;flex-direction:column}.topline{padding:2px 12px;flex-shrink:0}.topline button{min-height:28px}#steps{flex-shrink:0}#steps li{padding:5px 4px;font-size:12px}.hud{padding:5px 14px;flex-shrink:0;align-items:center;font-size:11px}.hud span{display:flex;align-items:center;gap:10px}.hud b{font-size:15px;margin:0}.play-area{position:relative;flex:1;min-height:0;overflow:hidden;background:#163c4c}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0}.screen canvas{flex-shrink:0;max-width:100%;image-rendering:pixelated}.location{left:10px;right:10px;top:8px;padding:4px 8px;font-size:11px;pointer-events:none}.mission{position:absolute;inset:40px 12px 8px;padding:0;display:flex;flex-direction:column;pointer-events:none;gap:5px}.mission>*{pointer-events:auto}.mission>.eyebrow{display:none}h2{font-size:clamp(17px,2.3vw,23px);line-height:1.2;margin:0;background:#09262df5;padding:8px 12px 0;border-radius:5px 5px 0 0}.mission>#description{background:#09262df5;max-width:none;margin:0;padding:5px 12px 10px;border-radius:0 0 5px 5px;font-size:14px;line-height:1.45}.mission>#actions{margin-top:auto;padding:10px;background:#09262df5;border:1px solid #658b77;border-radius:5px;gap:8px;align-items:center;pointer-events:auto}#actions button{min-height:42px;padding:8px 12px;font-size:14px;box-shadow:none;flex:1}#actions .patch{min-width:80px}#message{background:#09262df5;padding:5px 10px;line-height:1.4;font-size:13px!important;margin:0!important;min-height:0;max-width:none!important}#message:empty{display:none}.bottom{padding:4px 8px;background:#09262df5;border:0;gap:8px;font-size:12px}.bottom button{min-height:28px;padding:4px;white-space:nowrap}.survey-comparison{margin:0;font-size:12px}.diving h2,.diving #description,.diving .diver-legend{display:none}.diving #actions{display:contents;pointer-events:none}.diving #actions>*{pointer-events:auto}.diving .air-panel{order:0;position:absolute;top:0;right:0;left:0;width:100%;padding:6px 12px;border:1px solid #658b77;border-radius:5px;gap:12px;background:#09262df5;font-size:12px}.air-panel b{display:inline;font-size:23px;margin-left:8px}.diving .dive-prompt{margin-top:55px;padding:7px 12px;font-size:14px;background:#09262df5;line-height:1.4}.diving .dive-controls{margin-top:auto;align-self:flex-start;background:#09262df5;padding:6px;border-radius:4px}.diving .dive-controls button{width:46px;min-width:46px;height:44px;min-height:44px;padding:4px;font-size:24px;flex:none}.diving #record-observation{position:absolute;bottom:88px;right:0;width:auto;max-width:55%;min-height:44px;padding:8px 12px;font-size:14px;flex:none;background:#f3c879;color:#172d27;border-color:#ffe3a6}.diving #actions>button:not(#record-observation){position:absolute;bottom:41px;right:0;max-width:55%;font-size:12px;min-height:40px;padding:6px 10px}.diving #message{font-size:12px!important}.diving .clipboard{position:absolute;top:110px;right:0;width:auto;max-width:95%;margin:0;padding:7px 10px;border-width:2px;font-size:13px;z-index:5}.clipboard summary{font-weight:700;min-height:28px;line-height:28px}.clipboard:not([open])>*:not(summary){display:none}.clipboard[open]{max-height:calc(100% - 250px);overflow:auto;box-shadow:0 5px 20px #061b1b}.clipboard strong{display:none}.diving .bottom{margin-top:0}.diving .mission{gap:5px}.diving #message{margin-top:0!important}.diving .dive-controls{margin-bottom:42px}.diving #hint{max-width:75%}
@media(max-width:600px){header{height:36px;flex-basis:36px;padding:5px 10px}header a{font-size:13px}header span{font-size:9px}main{padding:4px}.cabinet{border-width:2px}.topline{font-size:10px}.topline button{font-size:10px}#steps li{font-size:10px;padding:4px 1px}.hud{font-size:9px;padding:5px 8px}.hud span{gap:4px}.hud b{font-size:12px}.mission{inset:34px 7px 5px;gap:3px}.location{font-size:9px;top:5px;left:6px;right:6px;gap:6px}.mission>#description{font-size:13px;padding:5px 9px 7px}h2{font-size:17px;padding:7px 9px 0}#actions button{font-size:12px;padding:7px;min-height:42px}#actions .patch{min-width:26%;flex-basis:26%}.mission>#actions{gap:6px;padding:7px}.bottom{font-size:10px;padding:3px 5px}.bottom button{font-size:10px}.diving .dive-controls{gap:4px;width:auto;padding:4px;margin-bottom:46px}.diving .dive-controls button{width:38px;min-width:38px;min-height:44px}.diving #record-observation{font-size:12px;max-width:49%;bottom:94px;padding:6px}.diving #actions>button:not(#record-observation){font-size:11px;max-width:49%;bottom:45px}.diving .air-panel{font-size:10px;padding:6px 8px;gap:7px}.air-panel b{font-size:21px;margin-left:4px}.diving .dive-prompt{font-size:13px;margin-top:49px;padding:6px 8px}.diving .clipboard{font-size:11px;top:109px;padding:3px 7px}.survey-comparison{font-size:11px}.diving .clipboard[open]{max-height:calc(100% - 260px)}}
@media(max-height:540px){header,.topline,.hud{display:none}main{padding:3px}#steps li{padding:3px}.mission{inset:28px 8px 4px}.location{font-size:9px;top:3px}.mission>#description{font-size:12px;line-height:1.25;padding:4px 9px}h2{font-size:16px;padding-top:5px}.mission>#actions{padding:5px}#actions button{min-height:36px;font-size:12px;padding:5px 9px}.bottom{font-size:10px}.bottom button{font-size:10px;min-height:24px}.diving .air-panel{left:auto;width:270px;top:0;padding:3px 8px}.diving .dive-prompt{margin:0 280px 0 0;font-size:12px;padding:5px 8px}.diving .clipboard{top:44px;font-size:11px}.diving .clipboard[open]{max-height:calc(100% - 145px)}.diving .dive-controls{margin-bottom:35px}.diving #record-observation{bottom:74px}.diving #actions>button:not(#record-observation){bottom:29px}.diving #message{font-size:11px!important;padding:3px 7px}.diving .dive-controls button{height:40px;min-height:40px}}
/* Reserve scene space so controls never sit on top of survey stations. */
.screen{inset:130px 0 145px}.play-area>.location{z-index:2}.diving .screen{inset:145px 0 160px}@media(max-height:540px){.screen{inset:110px 0 120px}.diving .screen{inset:90px 0 125px}}
/* Compact overlays leave the underwater world at full playable size. */
.screen,.diving .screen{inset:0}.mission{inset:32px 8px 5px;gap:3px}.location{top:4px;left:8px;right:8px;font-size:10px;padding:3px 6px}.topline{display:none}.hud{padding:3px 10px;font-size:10px}.hud b{font-size:13px}#steps li{font-size:11px;padding:4px 2px}.mission h2{align-self:flex-start;font-size:16px;padding:5px 8px;background:#09262de8;max-width:75%}.mission>#description{align-self:flex-start;font-size:12px;line-height:1.35;padding:4px 8px 6px;max-width:70%;background:#09262de8}.mission>#actions{align-self:center;width:auto;max-width:100%;padding:5px;gap:5px;background:#09262de8}.mission #actions button{font-size:12px;min-height:34px;padding:5px 9px;flex:0 1 auto}.mission #actions .patch{min-width:65px}.mission #message{align-self:center;max-width:85%!important;font-size:11px!important;padding:3px 7px;background:#09262de8}.bottom{font-size:10px;line-height:1.3;padding:2px 5px;background:#09262dbb}.bottom button{font-size:10px;min-height:24px;padding:3px}.diving .air-panel{left:auto;right:0;top:0;width:255px;gap:7px;font-size:10px;padding:4px 7px;background:#09262de8}.diving .air-panel b{font-size:19px;margin-left:4px}.diving .dive-prompt{margin:0;align-self:flex-start;max-width:calc(100% - 270px);font-size:12px;line-height:1.35;padding:5px 7px;border-left-width:2px;background:#09262de8}.diving .clipboard{top:42px;right:0;max-width:70%;font-size:11px;padding:2px 6px;opacity:.94}.clipboard summary{min-height:24px;line-height:24px}.diving .dive-controls{padding:3px;gap:4px;margin-bottom:0;background:#09262dbb}.diving .dive-controls button{width:36px;min-width:36px;height:36px;min-height:36px;padding:3px;font-size:21px}.diving #actions>#record-observation{bottom:66px;right:0;max-width:45%;width:auto;min-height:34px;padding:5px 8px;font-size:12px;box-shadow:none}.diving #actions>button:not(#record-observation){bottom:28px;right:0;max-width:45%;min-height:32px;padding:4px 7px;font-size:10px;background:#09262de8}.diving .clipboard[open]{max-height:calc(100% - 170px)}.diving #message{position:absolute;bottom:110px;left:8px;right:8px;max-width:none!important}.diving .bottom{min-height:24px}.diving #hint{max-width:78%;font-size:10px}.survey-comparison{font-size:10px;max-width:450px}
@media(max-width:600px){header{height:29px;flex-basis:29px}header span{font-size:8px}#steps li{font-size:9px;padding:3px 1px}.hud{font-size:8px;padding:3px 6px}.hud b{font-size:11px}.location{font-size:8px;gap:5px}.mission{inset:27px 6px 4px}.mission h2{font-size:14px;max-width:90%}.mission>#description{font-size:11px;max-width:90%}.mission #actions button{font-size:11px;padding:5px 7px;min-height:34px}.mission #actions .patch{min-width:50px;flex-basis:auto}.diving .air-panel{width:190px;font-size:9px;gap:5px;padding:3px 6px}.diving .air-panel b{font-size:17px}.diving .air-panel progress{width:30px}.diving .dive-prompt{max-width:calc(100% - 198px);font-size:11px;padding:4px 6px}.diving .clipboard{top:56px;font-size:10px}.diving .dive-controls{width:auto;gap:3px;padding:3px;margin-bottom:0}.diving .dive-controls button{width:34px;min-width:34px;min-height:36px;height:36px}.diving #actions>#record-observation{font-size:11px;max-width:49%;bottom:68px;padding:5px 7px}.diving #actions>button:not(#record-observation){max-width:49%;bottom:30px;font-size:10px;min-height:33px}.diving #hint{font-size:9px}.bottom button{font-size:9px}.diving #message{bottom:108px;font-size:10px!important}}
@media(max-height:540px){.screen,.diving .screen{inset:0}header,.hud{display:none}.mission{inset:26px 7px 3px}.diving .air-panel{width:255px}.diving .dive-prompt{margin:0;max-width:calc(100% - 265px)}.diving .clipboard{top:39px}.diving .dive-controls{margin-bottom:0}.diving #actions>#record-observation{bottom:63px}.diving #actions>button:not(#record-observation){bottom:26px}.diving #message{bottom:103px}}
.life-tally{position:absolute;top:85px;left:0;max-width:65%;padding:6px 8px;background:#09262de8;color:#c1e987;font:700 11px/1.5 system-ui,sans-serif;border:1px solid #648c7b;pointer-events:none!important}@media(max-width:600px){.life-tally{top:105px;font-size:10px;max-width:85%}}
/* Playtest pass: keep all interactive reef water free of text and buttons. */
.diving .mission{inset:24px 8px 4px}.diving .dive-prompt{font-size:11px;line-height:1.25;padding:4px 6px;max-width:calc(100% - 245px)}.diving .air-panel{width:235px;padding:3px 6px;font-size:10px}.diving .air-panel b{font-size:17px}.diving .clipboard{top:38px;font-size:10px}.diving .life-tally{top:70px;right:0;left:auto;max-width:230px;font-size:10px;padding:4px 6px}.diving .dive-controls{position:absolute;bottom:0;left:0;margin:0;padding:2px;gap:3px}.diving .dive-controls button{width:32px;min-width:32px;height:32px;min-height:32px;font-size:18px}.diving #actions>#record-observation{bottom:0;right:130px;max-width:40%;font-size:11px;padding:5px 7px;min-height:34px}.diving #actions>button:not(#record-observation){bottom:0;right:0;max-width:125px;min-height:34px;font-size:10px;padding:5px}.diving .bottom{position:absolute;bottom:39px;left:0;right:0;pointer-events:none;background:none;border:0}.diving #hint{display:none}.diving #restart{display:none}.diving #message{position:absolute;top:36px;left:0;right:auto;bottom:auto;max-width:55%!important;font-size:10px!important;padding:3px 6px;background:#09262dbb;pointer-events:none}.quiet{visibility:hidden}.diving .clipboard[open]{max-height:180px;max-width:280px}.final-report{font-size:12px;line-height:1.5;width:100%;max-width:650px}.final-report p{margin:5px 0}body[data-stage="5"] #actions{flex-wrap:wrap;max-width:90%}body[data-stage="5"] #description{display:none}
@media(max-width:600px){.diving .air-panel{width:177px;font-size:9px}.diving .air-panel b{font-size:16px}.diving .dive-prompt{max-width:calc(100% - 184px);font-size:10px}.diving .life-tally{top:89px;font-size:9px;max-width:170px}.diving .clipboard{top:55px}.diving #message{top:52px;font-size:9px!important;max-width:48%!important}.diving .dive-controls button{width:27px;min-width:27px}.diving #actions>#record-observation{right:102px;font-size:10px;max-width:32%;padding:4px}.diving #actions>button:not(#record-observation){max-width:98px;font-size:9px}.diving .mission{inset:22px 5px 3px}}

.diving #actions>#return-boat.ready-to-return{background:#f3c879;color:#09262d;border-color:#ffe4a1}.diving .dive-prompt.work-complete{color:#ffe4a1;font-weight:700}

.boat-patches{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;width:100%}body[data-stage="2"]:not(.diving) #actions{flex-wrap:wrap;max-width:95%}.mission #actions .boat-patches button{font-size:10px;padding:4px 7px;min-height:28px}

body[data-stage="2"]:not(.diving) #actions{position:absolute;bottom:0;left:0;right:0;max-width:100%;padding:4px;gap:5px;justify-content:center;flex-wrap:nowrap}body[data-stage="2"]:not(.diving) .boat-patches{width:auto;flex-wrap:nowrap;gap:3px}.mission #actions .boat-patches button{min-width:26px;padding:4px;font-size:10px}body[data-stage="2"]:not(.diving) .bottom{display:none}body[data-stage="2"]:not(.diving) #message{position:absolute;top:90px;left:0;max-width:60%!important}#push-rocks{font-size:10px!important}

/* Keep the roof sign visible and make the first dive the central action. */
body:not(.diving) .mission h2,body:not(.diving) .mission>#description{align-self:flex-end;max-width:65%}body:not(.diving) .mission #baseline-start{position:absolute;left:50%;top:calc(50% - 16px);transform:translate(-50%,-50%);width:max-content;max-width:95%;min-height:42px;padding:9px 16px;font-size:13px;z-index:3}

/* First-dive coaching stays in a dismissible side panel. */
#scene{touch-action:none}#controls-help[hidden],#show-controls[hidden]{display:none!important}
#controls-help{position:absolute;z-index:20;left:12px;top:24%;width:260px;max-width:calc(100% - 24px);padding:14px;background:#102e36f5;border:2px solid #f3c879;border-radius:6px;box-shadow:0 5px 22px #061b1b80;font:12px/1.5 system-ui,sans-serif;max-height:70%;overflow:auto}
#controls-help h2{font:800 14px/1.3 system-ui,sans-serif;color:#ffe1a0;padding:0;background:none;margin:0 0 10px}#controls-help p{margin:0 0 10px}#controls-help strong{color:#ffe1a0}#controls-help .help-paused{font-size:10px;color:#b1c7bc}#close-controls{width:100%;min-height:38px;background:#f3c879;color:#102e36;padding:7px;font:700 12px system-ui,sans-serif;box-shadow:none}#show-controls{position:absolute;z-index:10;left:12px;top:90px;padding:4px 7px;min-height:26px;font:700 10px system-ui,sans-serif;box-shadow:none}
@media(max-width:600px){#controls-help{top:25%;left:8px;width:245px;padding:12px;font-size:11px;max-height:65%}#show-controls{left:10px;top:125px}}
@media(max-height:540px){#controls-help{top:60px;max-height:calc(100% - 70px);font-size:11px;padding:10px}#controls-help p{margin-bottom:6px}}

.diving #controls-help h2{display:block}

/* Small, self-dismissing hint; keep the rest of the water clear. */
#controls-help{top:26%;width:220px;padding:10px 12px;max-height:none;overflow:visible;border-width:1px;box-shadow:0 3px 10px #061b1b55;font-size:11px;line-height:1.4}
#controls-help h2{font-size:12px;margin:0 20px 7px 0}#controls-help p{margin:0 0 7px}#controls-help small{font-size:9px;color:#b1c7bc}#close-controls{position:absolute;right:4px;top:3px;width:24px;min-height:24px;padding:0;background:none;border:0;color:#e5eddb;font-size:19px}#show-controls{top:85px;min-height:26px}.mission h2{color:#ffe1a0}
@media(max-width:600px){#controls-help{top:28%;width:200px;padding:9px 10px;font-size:10px}#show-controls{top:120px}}
@media(max-height:540px){#controls-help{top:95px;width:220px;font-size:10px}}

/* Bin choices belong to the item, not the footer. */
body.sorting-active .mission>#actions{position:absolute;top:calc(51.5625% + 76px * var(--scene-scale,1) - 16px);bottom:auto;left:50%;transform:translateX(-50%);margin:0;max-width:95%;width:max-content;flex-wrap:nowrap;padding:5px;gap:6px}body.sorting-active #message{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%!important}
.boat-steering{display:flex;gap:4px;flex-shrink:0}.mission #actions .boat-steering button{font-size:19px;min-width:35px;min-height:34px;padding:2px 6px;touch-action:none}body[data-stage="2"]:not(.diving) #actions{flex-wrap:wrap}body[data-stage="2"]:not(.diving) .boat-patches{gap:2px}.mission #actions .boat-patches button{min-width:23px}

body.sorting-active .bottom{margin-top:auto}

/* Compact speedrun HUD and an on-demand local leaderboard. */
.hud{gap:8px;flex-wrap:wrap}.race-clock{font-variant-numeric:tabular-nums;color:#ffe1a0}.hud #leaderboard-open{font-size:10px;min-height:24px;padding:3px 6px}.hud b{font-variant-numeric:tabular-nums}
#leaderboard-dialog{color:#e6eddb;background:#102e36;border:2px solid #f3c879;padding:20px;width:min(430px,90vw);max-height:85dvh;overflow:auto}#leaderboard-dialog::backdrop{background:#04191dcc}#leaderboard-dialog h2{color:#ffe1a0;font-size:18px}#leaderboard-dialog p{font-size:12px}#leaderboard-list{padding:0;list-style:none;font-variant-numeric:tabular-nums}#leaderboard-list li{padding:7px;border-bottom:1px solid #54776d}.race-rules{line-height:1.5;color:#b9cbc2}
body.run-failed .mission{justify-content:center!important;align-items:center!important}body.run-failed .mission #actions{position:static!important;transform:none!important;width:auto!important}body.run-failed .mission #description,body.run-failed .mission #title{display:block!important;max-width:min(520px,90%)!important;align-self:center!important;background:#102e36f5;padding:12px}body.run-failed .mission #title{color:#ffb39d}body.run-failed .mission #message{display:none}

/* Mandatory next steps stay in the centre of the playfield. */
body.progression-ready:not(.run-failed) .mission>#actions{position:absolute!important;left:50%!important;top:50%!important;bottom:auto!important;right:auto!important;transform:translate(-50%,-50%)!important;width:max-content!important;max-width:90%!important;max-height:65%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px!important;background:#09262ded;border:1px solid #7fa499;border-radius:5px}
body.progression-ready:not(.run-failed) .mission #actions>button{min-height:44px;font-size:14px;padding:10px 18px;max-width:100%;white-space:normal}
body.progression-ready:not(.run-failed) .mission #actions>button:disabled{display:none}
body.progression-ready .mission #baseline-start{position:static!important;transform:none!important;width:auto!important;max-width:100%!important}
body.progression-ready .survey-comparison{display:none}
body[data-stage="5"].progression-ready .final-report{max-height:30dvh;overflow:auto;font-size:11px}
body.run-failed .mission #title{position:absolute!important;top:30%!important;left:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;font-size:clamp(32px,6vw,72px)!important;line-height:1.1;text-align:center;white-space:nowrap;max-width:95%!important;width:max-content;padding:14px 24px!important;border:2px solid #ffb39d;z-index:5}
body.run-failed .mission #description{position:absolute!important;top:46%!important;left:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;text-align:center;width:min(520px,85%);font-size:14px;z-index:5}
body.run-failed .mission #actions{position:absolute!important;top:64%!important;left:50%!important;bottom:auto!important;right:auto!important;transform:translate(-50%,-50%)!important;width:max-content!important;max-width:90%!important;z-index:5}
body.run-failed .mission #actions button{font-size:17px;min-height:50px;padding:12px 24px}
@media(max-height:500px){body.run-failed .mission #title{top:25%!important;font-size:32px!important;padding:7px 18px!important}body.run-failed .mission #description{top:48%!important;font-size:12px}body.run-failed .mission #actions{top:75%!important}}
body.progression-ready .mission>.bottom,body.run-failed .mission>.bottom{position:absolute;bottom:0;left:0;right:0;margin:0}

/* Keep audio reachable; low air expands in place without covering the diver. */
.hud #sound{font-size:10px;min-height:24px;padding:3px 6px}
.diving .air-panel.air-critical{border:2px solid #ff997c;background:#492c29;width:270px;max-width:58vw;padding:5px 8px;z-index:15;box-shadow:0 0 0 2px #ffc78d55}
.diving .air-panel.air-critical b{font-size:36px;line-height:1.05;color:#ffcf8f!important}
.diving .air-panel.air-critical progress{accent-color:#ff997c}
.diving .air-panel.air-critical #station-count{font-size:9px}
@media(max-width:600px){.diving .air-panel.air-critical{width:205px}.diving .air-panel.air-critical b{font-size:29px}.diving .air-panel.air-critical progress{display:none}}
@media(max-height:540px){.hud{display:flex!important}.hud #sound{min-height:20px;padding:1px 5px}}

.mission>#description:empty{display:none!important}

/* Pre-run rules belong directly beneath START, inside its centred panel. */
.start-rules{width:min(430px,75vw);margin:2px 0 0;padding:4px 8px;text-align:center;font:12px/1.5 system-ui,sans-serif;color:#d6ead7}
@media(max-width:600px){.start-rules{font-size:11px;width:min(360px,76vw)}}

/* Sharp screen-resolution type over pixelated artwork. */
#scene-text{position:absolute;inset:0;pointer-events:none;image-rendering:auto!important;background:transparent}
/* Observation feedback sits beside the action, clear of the roof and top prompt. */
.diving .mission #message{top:100px;left:0;right:auto;bottom:auto;width:180px;max-width:24%!important;padding:6px 8px;line-height:1.4;text-align:left;border-left:2px solid #f3c879}
#controls-help:not([hidden])~.mission #message{visibility:hidden}
@media(max-width:600px){.diving .mission #message{top:115px;width:145px;max-width:30%!important;font-size:10px!important}}

/* Instruction banner lives at the side, leaving the centre and roof clear. */
.diving .dive-prompt{position:absolute;left:0;top:85px;width:178px;max-width:23%!important;margin:0;padding:8px;font-size:11px;line-height:1.4;border-left:2px solid #f3c879;z-index:6}
.diving .mission #message{top:180px;width:178px;max-width:23%!important}
.diving .life-tally{white-space:pre-line;line-height:1.5}
#controls-help:not([hidden])~.mission .dive-prompt{visibility:hidden}
@media(max-width:600px){.diving .dive-prompt{top:85px;width:140px;max-width:29%!important;font-size:10px}.diving .mission #message{top:195px;width:140px;max-width:29%!important}}
#record-observation[hidden]{display:none!important}

.leaderboard-entry{display:flex;flex-direction:column;gap:9px;width:min(380px,75vw);text-align:center;padding:10px;border:1px solid #f3c879;background:#123c40}.leaderboard-entry label{font-weight:700;color:#ffe1a0;font-size:14px}.leaderboard-entry input{font:16px system-ui;padding:10px;border:2px solid #90b9a5;border-radius:2px;background:#eef1d9;color:#102e36;min-width:0}.leaderboard-entry button{min-height:42px!important}body[data-stage="5"] .leaderboard-entry~.final-report{max-height:18dvh}

.leaderboard-entry .email-opt-in{display:flex;align-items:flex-start;gap:8px;text-align:left;font-size:12px;font-weight:500;color:#e5eddb}.leaderboard-entry .email-opt-in input{width:17px;height:17px;flex:none;margin:2px 0;padding:0}.leaderboard-entry label[for="reef-info-email"]{font-size:12px;text-align:left}.leaderboard-entry small{font-size:10px;line-height:1.4;color:#b5c8be}.leaderboard-entry input:disabled{opacity:.45}

/* Phone-sized touch targets, with deployment actions on a separate row. */
@media(max-width:600px){
.diving .dive-controls{gap:3px}.diving .dive-controls button{width:44px;min-width:44px;height:44px;min-height:44px;font-size:23px}
.diving #actions>button:not(#record-observation){min-height:44px;max-width:145px;width:145px;font-size:11px}
.diving #actions>#record-observation{right:0;bottom:52px;max-width:180px;min-height:44px;font-size:12px}
#show-controls{min-height:44px;min-width:50px;padding:6px}#close-controls{width:36px;min-height:36px;right:0;top:0}
.hud #sound,.hud #leaderboard-open{min-height:36px;padding:6px}.boat-steering button{min-width:44px!important;min-height:44px!important}.mission #actions .boat-patches button{min-width:40px;min-height:40px;font-size:12px}#push-rocks{min-height:44px!important}
body.name-entry-active .mission>#actions{max-height:92%;width:94%!important;max-width:94%!important;padding:6px!important}.leaderboard-entry{width:100%;padding:8px;gap:6px}.leaderboard-entry small{font-size:11px}body.name-entry-active .final-report{display:none}
}
@media(max-width:360px){.diving .dive-controls{gap:2px}.diving .dive-controls button{width:42px;min-width:42px}.diving #actions>button:not(#record-observation){width:125px;max-width:125px;font-size:10px}}
@media(max-height:500px){.diving .dive-controls button{width:44px;min-width:44px;height:44px;min-height:44px}.diving #actions>button{min-height:44px!important}.diving #actions>#record-observation{right:145px}.diving .dive-prompt{top:45px;max-width:23%!important}.diving .mission #message{top:125px}body.name-entry-active .mission>#actions{max-height:94%}body.name-entry-active .final-report{display:none}}
@media(max-width:600px),(max-height:500px){#show-controls{top:auto;bottom:56px;left:8px}}
@media(max-width:600px){body.sorting-active .mission #actions button{min-height:44px}}
@media(max-height:500px){.boat-steering button{min-width:44px!important;min-height:44px!important}.mission #actions .boat-patches button{min-width:40px;min-height:44px;font-size:12px}#push-rocks{min-height:44px!important}.hud #sound,.hud #leaderboard-open{min-height:32px}}
@media(max-width:360px){.diving .dive-controls button{width:44px;min-width:44px}.diving #actions>button:not(#record-observation){width:108px;max-width:108px}}

/* Keep dive guidance together in the requested help square. */
.diving #controls-help .dive-prompt{position:static!important;visibility:visible!important;width:auto!important;max-width:100%!important;margin:9px 0 0;padding:7px 0 0;border:0;border-top:1px solid #739386;background:none;font-size:11px;line-height:1.4}
.diving .mission #message{display:none!important}
#controls-help{max-height:70%;overflow:auto}

.mode-choices{display:flex;gap:8px}.mode-choices button[aria-pressed="true"]{background:#c1e987;color:#102e36;border-color:#e4ffbc}#leaderboard-dialog{width:min(760px,94vw)}#leaderboard-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}#leaderboard-list section{min-width:0;padding:8px;background:#173c40}#leaderboard-list h3{color:#ffe1a0;font-size:15px}#leaderboard-list p{overflow-wrap:anywhere;font-size:12px}

/* Every stage uses the same dismissible instruction square. */
body:not(.run-failed) .mission>#description{display:none!important}.start-rules{display:none}
#controls-help{border:1px solid #f3c879;background:#102e36f5;border-radius:6px;padding:12px;width:230px;max-width:calc(100% - 24px);max-height:65%;overflow:auto}
#controls-help h2{padding-right:25px}#controls-help p{line-height:1.45}

#controls-help{transition:opacity .18s ease}#controls-help.avoiding-actor{opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){#controls-help{transition:none}}

.studio-credit{display:flex;flex-direction:column;align-items:flex-end;font:10px/1.4 system-ui,sans-serif;letter-spacing:0}.studio-credit a{font-weight:700}.studio-help-credit{display:block;margin-top:8px;border-top:1px solid #557568;padding-top:6px;font:9px/1.5 system-ui,sans-serif}@media(max-width:600px){header{height:40px;flex-basis:40px}.studio-credit{font-size:8px}}
/* Menu instructions stay above the central progression buttons on phones. */
@media(max-width:600px){body:not(.diving) #controls-help{top:40px;left:8px;max-height:calc(50% - 70px);width:230px;max-width:calc(100% - 16px);font-size:10px;padding:10px}body:not(.diving) #controls-help h2{font-size:12px}body:not(.diving) #controls-help p{margin-bottom:6px}}

/* Repeated game taps must stay taps, including on iOS Safari. Keep pinch zoom available. */
.cabinet,button,a,summary{touch-action:manipulation}
#scene,.boat-steering button,.dive-controls button{touch-action:none}
.cabinet{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.leaderboard-entry input{user-select:text;-webkit-user-select:text;font-size:16px}
@media(max-width:600px),(max-height:500px){
body[data-stage="2"]:not(.diving) #show-controls{bottom:126px}
}

#push-rocks.drop-warning{background:#762e2b;color:#fff0e8;border-color:#ff957f}#push-rocks.drop-warning:hover{background:#913b34}

/* Prominent, readable survey checklist: red until every required sighting is recorded. */
.diving .life-tally{top:76px;right:0;left:auto;width:285px;max-width:38%;padding:10px 12px;border:2px solid #ff957f;background:#582c2df2;color:#fff0e8;font:700 14px/1.55 system-ui,sans-serif;white-space:pre-line;border-radius:5px}
.diving .life-tally.survey-complete{background:#153e33f2;border-color:#c1e987;color:#d7ffac}
@media(max-width:600px){.diving .life-tally{top:96px;width:205px;max-width:58%;padding:8px;font-size:12px;line-height:1.45}}
@media(max-height:500px){.diving .life-tally{top:55px;width:260px;max-width:38%;padding:6px 8px;font-size:12px;line-height:1.35}}

/* Compact final survey list leaves room to swim while retaining incomplete/complete colours. */
.diving .life-tally{width:220px;max-width:30%;padding:6px 8px;font-size:11px;line-height:1.35}
@media(max-width:600px){.diving .life-tally{width:168px;max-width:45%;padding:5px 6px;font-size:10px;line-height:1.3}}
@media(max-height:500px){.diving .life-tally{width:210px;max-width:30%;padding:5px 7px;font-size:10px;line-height:1.3}}

/* Neutral survey panel; only unfinished species are red. */
.diving .life-tally,.diving .life-tally.survey-complete{background:#102e36f2;border-color:#7fa79a;color:#e0eadb;white-space:normal}
.life-tally strong,.life-tally small{display:block}.life-tally small{margin-top:4px;font-size:inherit;font-weight:400}.life-tally .survey-species.incomplete{color:#ff9d8b}.life-tally .survey-species.complete{color:#c1e987}
/* Name entry sits above help and every other in-game overlay. */
body.name-entry-active .mission{z-index:40}
body.name-entry-active .mission>#actions{z-index:41;background:#102e36!important}
body.name-entry-active #controls-help,body.name-entry-active #show-controls,body.name-entry-active .final-report{display:none!important}
.leaderboard-entry label[for="player-organisation"]{font-size:12px;text-align:left}

/* Help belongs in the HUD beside Sound, clear of the water and movement controls. */
.hud #show-controls{position:static!important;inset:auto!important;min-width:0;min-height:24px;padding:3px 6px;font-size:10px;flex-shrink:0;box-shadow:none}
@media(max-width:600px){.hud #show-controls{min-height:36px;padding:6px}}
@media(max-height:500px){.hud #show-controls{min-height:32px}}

/* Playtest pass: reserve space for controls; keep help and feedback separate. */
#controls-help{width:210px;top:70px;max-height:calc(100% - 150px);font-size:11px;padding:10px}
#controls-help h2{padding-right:32px;min-height:28px}
#close-controls{width:44px;min-height:44px;top:0;right:0}
#controls-help .studio-help-credit{display:none}
body[data-stage="5"] #controls-help,body[data-stage="5"] #show-controls{display:none!important}
body[data-stage="5"] .mission>#title,body[data-stage="5"] .mission>#message{display:none!important}
body[data-stage="5"].progression-ready:not(.name-entry-active) .mission>#actions{top:31%!important;width:min(520px,90%)!important;max-height:58%;padding:14px!important}
body[data-stage="5"].progression-ready .final-report{max-height:none;overflow:visible;font-size:12px;line-height:1.5}
.final-report strong{display:block;color:#d8f4a9;font-size:16px;line-height:1.5}
body.name-entry-active .mission>#actions{max-height:95%}
body.sorting-active .mission #message:not(.quiet){visibility:visible!important;position:absolute;top:70%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%!important;z-index:25;border:1px solid #f3c879;text-align:center}
body.cinematic #controls-help{display:none!important}
body.cinematic .mission>#title{font-size:13px;align-self:center}
body.cinematic .mission>#actions{position:absolute!important;top:0!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)!important;padding:3px!important;width:max-content!important;max-width:90%!important}
body.cinematic .mission>#actions>button{font-size:12px;min-height:32px;padding:4px 8px}
.diving .air-panel,.diving .air-panel.air-critical{height:44px;width:245px;padding:3px 7px;gap:6px}
.diving .air-panel b{font-size:21px}.diving .air-panel.air-critical b{font-size:28px}
.diving .clipboard{top:50px}
.diving .life-tally{top:100px}
.hud #sound,.hud #show-controls,.hud #leaderboard-open,.bottom #restart{min-height:44px;padding:6px}
@media(max-width:600px),(max-height:540px){
 .screen{bottom:58px}
 .diving .mission{bottom:4px}
 .diving .dive-controls{bottom:0!important}
 .diving #actions>#return-boat{bottom:0!important}
 .diving #actions>#record-observation{bottom:50px!important}
 .hud{gap:4px;flex-wrap:wrap;padding:2px 4px}
 .hud #sound,.hud #show-controls,.hud #leaderboard-open{min-height:44px;font-size:9px;padding:4px}
 .hud span{gap:3px;font-size:8px}.hud b{font-size:11px}
 .mission #actions .boat-patches button{min-width:44px;min-height:44px}
 .boat-patches{flex-wrap:wrap;gap:3px}
 #controls-help,body:not(.diving) #controls-help{top:34px;max-height:calc(100% - 98px);width:195px;font-size:10px}
 .diving .air-panel,.diving .air-panel.air-critical{width:210px;height:40px;font-size:9px}
 .diving .clipboard{top:44px}.diving .clipboard summary{min-height:44px;line-height:44px}
 .diving .life-tally{top:96px}
 header .studio-credit a{font-size:9px}
}
@media(max-height:540px){
 #controls-help,body:not(.diving) #controls-help{top:30px;max-height:calc(100% - 90px)}
 .diving .life-tally{top:44px;right:215px;width:180px;max-width:30%}
 .diving .clipboard{top:44px}
 body[data-stage="5"].progression-ready:not(.name-entry-active) .mission>#actions{top:46%!important;max-height:85%}
}
/* Supporting restoration information remains available below the play screen. */
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
body{display:block}main{display:block;flex:none;max-width:1400px;margin:auto}
.cabinet{height:calc(100dvh - 64px);min-height:280px}
main>.footnote,main>details{display:block;margin:18px auto;max-width:800px;padding:0 12px;line-height:1.6}
main>.intro{display:block;margin:28px auto 12px;max-width:800px;padding:0 12px}.intro .badge{display:none}
.rotation-note{display:none;font:12px/1.5 system-ui;color:#c8ddce;text-align:center;margin:12px}
@media(max-width:600px) and (orientation:portrait){.rotation-note{display:block}}
@media(max-height:540px){.cabinet{height:calc(100dvh - 6px)}}

@media(max-width:600px),(max-height:540px){.play-area>.screen{top:24px!important;bottom:58px!important;height:auto!important}}

body.cinematic .mission>#message,body.cinematic .mission>.bottom{display:none!important}
@media(max-width:600px),(max-height:540px){body.sorting-active .mission #actions button{min-height:44px!important}.bottom #restart{min-height:44px!important}}