:root{color-scheme:dark;--cream:#fff3d6;--teal:#69e2d2;--ink:#073c49;font-family:'Courier New',ui-monospace,monospace}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#063b4c}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:5px}button:disabled{opacity:.7;cursor:wait}button{touch-action:manipulation}button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;color:var(--cream);isolation:isolate}#ocean{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,28,43,.30),transparent 25%,transparent 78%,rgba(5,28,43,.34));z-index:1}.tools{position:absolute;right:max(30px,env(safe-area-inset-right));top:max(27px,env(safe-area-inset-top));display:flex;gap:10px;z-index:7}.icon-button{border:1px solid #fff3d64d;background:#123e4a52;backdrop-filter:blur(6px);color:var(--cream);width:42px;height:42px;border-radius:8px;display:grid;place-items:center;font-weight:bold;font-size:22px;transition:background .2s}.icon-button:hover{background:#073c49c0}.sound-wave{display:none}.sound-on .sound-wave{display:block}.sound-on .sound-off{display:none}.panel{z-index:5;position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:420px}.welcome:before{content:'';position:absolute;inset:-160px -130px -120px -25vw;background:radial-gradient(ellipse,rgba(4,32,42,.67),transparent 68%);z-index:-1;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:bold;margin:0 0 21px;color:#e7f6e5}h1{position:relative;font-size:clamp(50px,6.7vw,96px);line-height:.88;letter-spacing:-4px;margin:0;text-shadow:3px 4px 0 #113d47;font-weight:900}h1 span{color:var(--teal);letter-spacing:6px}h1 i{font-size:30px;color:#ffc97c;vertical-align:top;font-style:normal;margin-left:10px}.intro{font-family:system-ui,sans-serif;font-size:17px;line-height:1.6;margin:24px 0;color:#fff8e8}.primary{display:flex;align-items:center;justify-content:space-between;gap:36px;min-height:54px;padding:14px 22px;color:#083c45;border:0;border-bottom:4px solid #b6d3b5;background:var(--cream);border-radius:5px;box-shadow:0 6px 20px #002b3530;font-weight:700;font-size:16px;transition:transform .15s,background .15s}.primary:hover{background:#fff9e9;transform:translateY(-2px)}.primary:active{transform:translateY(1px)}.hint{font-size:12px;line-height:1.7;color:#f3ead8;margin-top:21px}.best{font-size:12px;margin-top:21px;color:#9ee6d7}.hud{z-index:2;position:absolute;inset:29px 30px auto;pointer-events:none;text-shadow:2px 2px 0 #143c4b99}.numbers{display:flex;gap:34px}.numbers>div{display:flex;flex-direction:column;gap:5px}.label{font-size:10px;letter-spacing:2px;color:#e0f6ea}.numbers strong{font-size:28px;font-weight:700;letter-spacing:-1px}.numbers small{font-size:16px;font-weight:400;letter-spacing:0}.location{position:absolute;left:50%;top:5px;transform:translateX(-50%);display:flex;gap:9px;align-items:center;font-size:11px;letter-spacing:2px;background:#073c4940;border:1px solid #fff3d624;padding:11px 15px;border-radius:5px;white-space:nowrap}.chapter-dot{width:5px;height:5px;background:#83e7c9;box-shadow:0 0 8px #83e7c960}.pause-panel{left:50%;transform:translate(-50%,-50%);width:min(90%,470px);max-width:470px;background:#083c48ef;border:1px solid #8ddece70;padding:32px;border-radius:12px;box-shadow:0 24px 100px #032a4480;backdrop-filter:blur(8px)}h2{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:0 0 24px}.pause-panel .eyebrow{font-size:10px;margin-bottom:12px}.pause-stats{display:flex;justify-content:space-between;border-top:1px solid #8ddece30;border-bottom:1px solid #8ddece30;padding:17px 0;margin-bottom:20px;gap:10px}.pause-stats div{display:flex;flex-direction:column;gap:6px}.pause-stats strong{font-size:20px}.pause-stats span{font-size:11px;color:#abd5ca}.instructions{font-size:13px;line-height:1.6}.instructions p{margin:11px 0}kbd{font:700 10px 'Courier New',monospace;background:#f4eedc20;border:1px solid #f4eedc50;border-bottom-width:2px;border-radius:3px;padding:4px 6px;white-space:nowrap}.touch-note{color:#aed5cc;font-size:12px}.setting{display:flex;align-items:center;gap:10px;font-size:13px;margin:19px 0}.setting input{accent-color:var(--teal);width:18px;height:18px}.panel-actions{display:flex;gap:10px;align-items:center}.panel-actions .primary{flex:1;font-size:14px;padding:12px 16px;gap:10px}.secondary{background:transparent;color:var(--cream);border:1px solid #f4eedc55;border-radius:5px;padding:14px;font-size:12px;min-height:52px}.smallprint{font-size:11px;line-height:1.6;color:#b9d5cc;margin:18px 0 0}.chapter-toast{position:absolute;top:23%;left:50%;transform:translate(-50%,12px);z-index:3;text-align:center;pointer-events:none;opacity:0;transition:opacity 1s,transform 1s;text-shadow:2px 3px 0 #193b5077;white-space:nowrap}.chapter-toast.visible{opacity:1;transform:translate(-50%,0)}.chapter-toast span{display:block;letter-spacing:4px;font-size:11px}.chapter-toast strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:43px;margin:10px 0}.chapter-toast em{font-style:normal;font-size:12px;letter-spacing:1px}.trick{position:absolute;left:32%;top:30%;z-index:3;pointer-events:none;opacity:0;transform:translate(-50%,8px);text-shadow:2px 2px 0 #103c49;transition:opacity .15s,transform .4s;white-space:nowrap;text-align:center}.trick.visible{opacity:1;transform:translate(-50%,0)}.trick strong{display:block;font-size:20px;letter-spacing:1px;color:#fff2cd}.trick span{display:block;font-size:13px;margin-top:7px;color:#86f5df}.flow{position:absolute;left:30px;bottom:max(29px,env(safe-area-inset-bottom));z-index:2;width:155px;font-size:10px;letter-spacing:1px}.flow-track{height:3px;background:#ffffff40;margin:10px 0 7px}.flow-track div{height:100%;background:var(--teal);width:0;transition:width .2s}.flow>span:last-child{color:#82e9d6}.bottom-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;font-size:10px;letter-spacing:1.5px;white-space:nowrap;color:#f7f0d8aa}.bottom-hint kbd{margin-right:7px}.touch-controls{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:4;display:flex;align-items:end;gap:14px}.touch-controls button{color:#fff4d5;background:#16445080;border:1px solid #d8f5e68a;border-bottom-width:3px;border-radius:50%;width:65px;height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none;backdrop-filter:blur(4px)}.touch-controls button:last-child{width:81px;height:81px;background:#fff3d6d1;color:#0d5559;border-color:#9ddcca}.touch-controls button small{font-size:9px;font-weight:bold;letter-spacing:1px;margin-top:0}.touch-controls button.pressed{transform:scale(.93);background:#67dacae0;color:#06414d}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}#loadError{font-size:13px;max-width:300px;line-height:1.5;background:#073c49;padding:12px;margin-top:14px}#loadError button{border:0;background:transparent;color:#8ee8d7;text-decoration:underline}.touch-controls{display:none}@media(pointer:coarse){.touch-controls{display:flex}.bottom-hint{display:none}}@media(max-width:750px){.tools{top:max(20px,env(safe-area-inset-top));right:18px;gap:7px}.icon-button{width:36px;height:36px}.hud{inset:23px 20px auto}.numbers{gap:22px}.numbers strong{font-size:23px}.location{top:60px;left:0;transform:none;font-size:9px;padding:8px 10px;letter-spacing:1px}.label{font-size:9px}.welcome{left:7%;top:45%}h1{font-size:64px}.intro{font-size:16px}.welcome .hint{font-size:12px}.flow{left:21px;bottom:26px;width:130px}.chapter-toast{top:22%}.chapter-toast strong{font-size:32px}.trick{left:35%;top:35%}.trick strong{font-size:16px}.pause-panel{padding:25px}.touch-controls{display:flex}.bottom-hint{display:none}}@media(max-height:520px){.welcome{top:48%}h1{font-size:48px}.eyebrow{margin-bottom:12px}.intro{margin:15px 0;font-size:14px}.hint{margin-top:12px;font-size:10px}.best{display:none}.primary{min-height:45px;padding:10px 18px}.pause-panel{padding:20px;max-width:560px}.pause-panel h2{font-size:24px;margin-bottom:12px}.pause-stats{margin-bottom:8px;padding:10px 0}.instructions p{margin:7px 0}.touch-note,.smallprint{display:none}.setting{margin:9px 0}.chapter-toast{top:26%}.chapter-toast strong{font-size:30px}.tools{top:16px}.hud{top:18px}.touch-controls{bottom:12px}.touch-controls button{width:55px;height:55px}.touch-controls button:last-child{width:67px;height:67px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.primary:hover{transform:none}}

/* Keep desktop scenery at its authored proportions on ultrawide monitors. */
.coast-picker{display:flex;flex-direction:column;gap:8px;margin:17px 0;color:#d9f4e9}
.coast-picker>span{font-size:10px;letter-spacing:2px;font-weight:bold}
.coast-picker select{font:inherit;font-size:13px;width:100%;min-height:44px;padding:10px 32px 10px 12px;border:1px solid #a2e2d180;border-radius:5px;background:#073c49ed;color:#fff3d6;cursor:pointer;touch-action:manipulation}
.coast-picker select:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.coast-note{font-size:11px;color:#b9d5cc;margin:-9px 0 17px}
@media(max-height:520px){.welcome{top:50%}.welcome h1{font-size:40px}.welcome .intro{margin:10px 0}.welcome .coast-picker{margin:10px 0;gap:5px}.welcome .coast-picker select{min-height:36px;padding:7px 28px 7px 10px}.welcome .hint{margin-bottom:0}}
@media (min-width:1024px){
  body{background:#061e29}
  #game{
    width:min(100%,calc(100vh * 16 / 9));
    width:min(100%,calc(100dvh * 16 / 9));
    margin-inline:auto;
  }
}

/* Safari requires the prefixed rules on both controls and their text nodes. */
#game,#game *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
#ocean{touch-action:none;-webkit-user-drag:none}
/* Copy, hints and buttons follow the input method, including touch laptops. */
#game[data-controls="keyboard"] .touch-copy,#game[data-controls="touch"] .keyboard-copy{display:none}
#game[data-controls="keyboard"] .touch-controls{display:none}
#game[data-controls="touch"] .touch-controls{display:flex}
#game[data-controls="touch"] .bottom-hint{display:none}
#game[data-controls="keyboard"] .bottom-hint{display:block}
.instructions .touch-copy strong{color:#9cecd9;font-size:13px;letter-spacing:.5px}
.encounter-cue{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:3;pointer-events:none;filter:drop-shadow(2px 3px 0 #062e3c99)}
.encounter-cue svg{display:block;width:56px;height:53px}
.signal-status{position:absolute;left:30px;bottom:114px;z-index:3;pointer-events:none;width:195px;color:#bdffec;background:#063e4ee8;border:1px solid #83efdb;padding:10px 12px;border-radius:6px;font-size:12px}
.signal-status strong{float:right}.signal-status small{display:block;font-size:10px;letter-spacing:.5px;margin-top:6px}.signal-status>div{height:3px;background:#7ed5bf40;margin-top:8px}.signal-status i{display:block;height:100%;background:#9affdf}
.encounter-help{font-size:12px;line-height:1.5;color:#bce5da;margin:12px 0}
.pause-panel{max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:750px){.encounter-cue{top:128px}.encounter-cue svg{width:48px;height:45px}.signal-status{left:20px;bottom:127px;width:177px;font-size:11px}}
@media(max-height:520px){.encounter-cue{top:78px}.signal-status{bottom:94px;padding:7px 10px}.encounter-help{font-size:11px}}
@media(pointer:coarse),(max-width:750px){
  .icon-button,.touch-controls button,.pause-panel{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* The exit stays beside Settings, including during loading and pause. */
#exit{text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#exit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
#exit:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
/* Challenge-only additions: sea-glass green, sand lettering and quiet score type.
   The original website keeps its endless recovery rules and layout. */
.run-rules{color:#d1f5e6;font:12px/1.5 system-ui,sans-serif;max-width:330px}
.run-summary{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px)}
.run-summary h2{margin-bottom:12px}
.result-reason,.score-note{font:13px/1.5 system-ui,sans-serif;color:#d1e9df;margin:12px 0}
.final-points{display:flex;align-items:baseline;gap:12px;margin:16px 0 20px}
.final-points strong{font-size:48px;line-height:1;color:#a3f2dc;letter-spacing:-2px;overflow-wrap:anywhere}
.final-points span{font:13px system-ui,sans-serif;white-space:nowrap}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:16px 0;border-block:1px solid #8ddece40}
.result-stats div{display:flex;flex-direction:column;gap:6px;min-width:0}.result-stats dt{font:12px system-ui,sans-serif;color:#bddbd0}.result-stats dd{font-size:20px;margin:0;overflow-wrap:anywhere}
.score-note{font-size:11px}.result-actions{margin-top:18px}.result-actions button{width:100%}
@media(max-height:520px){
  .run-summary{padding:18px 24px;width:min(90%,560px);max-width:560px}
  .run-summary h2{font-size:26px;margin-bottom:8px}
  .run-summary .eyebrow{margin-bottom:8px}
  .run-summary .final-points{margin:10px 0}.final-points strong{font-size:36px}
  .result-stats{grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 0}
  .result-stats dd{font-size:17px}.result-stats dt{font-size:10px}
  .result-actions{margin-top:10px}.result-reason,.score-note{margin:8px 0}
  .welcome .run-rules{margin:8px 0;font-size:11px}
}
@media(max-width:420px){.run-summary{padding:24px}.run-summary .result-stats{grid-template-columns:1fr 1fr}}
@media(max-height:360px){
  .run-summary{padding:12px 20px}
  .run-summary h2{font-size:22px;margin-bottom:4px}
  .run-summary .eyebrow{font-size:9px;margin-bottom:4px}
  .run-summary .result-reason{font-size:11px;line-height:1.3;margin:4px 0}
  .run-summary .final-points{margin:6px 0}.run-summary .final-points strong{font-size:30px}
  .run-summary .result-stats{padding:6px 0}.run-summary .result-stats dt{font-size:9px}.run-summary .result-stats dd{font-size:15px}
  .run-summary .score-note{font-size:10px;margin:6px 0}
  .run-summary .result-actions{margin-top:6px}.run-summary .result-actions button{min-height:44px;padding:10px 16px}
}
#exit{text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#exit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
#exit:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
@media(max-width:420px){
  /* Tools share a clear row; long scores never collide with the exit. */
  .hud{top:max(72px,calc(env(safe-area-inset-top) + 52px))}
  .numbers{gap:22px}
  .location{top:60px}
  .encounter-cue{top:176px}
}

/* Label-only control keeps its original hit area and hold/release behavior. */
#surfButton #surfAction{margin:0;font-size:12px;letter-spacing:.4px}
.wildlife-collection{font-size:11px;line-height:1.6;color:#b9d5cc;margin:12px 0}
.wildlife-collection summary{cursor:pointer;color:#e7f6e5}
.wildlife-collection p{margin:7px 0}
.wildlife-toast{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);z-index:3;pointer-events:none;max-width:75%;padding:7px 10px;border:1px solid #8ddece55;border-radius:4px;background:#083c48d9;color:#e7f6e5;font-size:11px;text-align:center}
/* A short coastal opening, driven by the same paused presentation clock. */
.coast-reveal{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 52% 46%,transparent 0 var(--reveal-radius,0px),#06303b calc(var(--reveal-radius,0px) + 3px))}
.departure-title{position:absolute;z-index:2;pointer-events:none;will-change:transform,opacity}
.departure-title h1{margin:0}
@media(prefers-reduced-motion:reduce){.coast-reveal,.departure-title{display:none}}