*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#285e63;color:#fff4d7;font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible{outline:2px solid #f4d79d;outline-offset:4px}#game,#world{width:100%;height:100%;display:block}#world{outline:0}#hud{position:absolute;inset:0;pointer-events:none;text-shadow:0 1px 8px #183d47aa;user-select:none}.hidden{display:none!important}#compass{position:absolute;top:27px;left:50%;transform:translateX(-50%);width:230px;text-align:center;font-size:10px;letter-spacing:3px}#compassTicks{display:flex;align-items:center;justify-content:space-between;opacity:.78}#compassTicks i{height:7px;border-left:1px solid #fff4d788}#compass strong{display:block;font-size:12px;letter-spacing:1px;font-weight:400;margin-top:10px}#conditions{position:absolute;right:34px;top:27px;font-size:12px;text-align:right;letter-spacing:1px}#conditions>div{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;font-size:10px}#conditions b{font-weight:400}#windArrow{transform:rotate(247.5deg)}#role{position:absolute;top:32px;left:32px;display:flex;gap:9px;align-items:center;font-size:9px;letter-spacing:2px;opacity:.8}.dot{width:4px;height:4px;border-radius:50%;background:#fff4d7}#menuButton{position:absolute;pointer-events:auto;bottom:28px;right:30px;border:1px solid #fff4d744;border-radius:50%;width:32px;height:32px;color:#fff4d7;background:#173c3c44;font-size:12px}#flyCard{position:absolute;left:30px;bottom:30px;display:flex;gap:12px;align-items:center;font-size:12px}#flyCard strong{font-weight:400;letter-spacing:.5px}#flyKeys{display:block;font-size:10px;letter-spacing:3px;margin-top:7px;opacity:.7}#flyKeys b{font-weight:400;opacity:1;color:#f7d18a}#flyCard small{display:block;font-size:9px;opacity:.6;margin-top:9px;letter-spacing:1px}#controls{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);background:#173e3d60;border:1px solid #fff4d714;border-radius:24px;padding:10px 20px;white-space:nowrap;font-size:11px;letter-spacing:.3px;backdrop-filter:blur(6px)}kbd{font:10px Arial,sans-serif;border:1px solid #fff4d75c;border-radius:3px;padding:1px 4px;margin-right:3px}#notice{position:absolute;top:18%;left:50%;transform:translateX(-50%);font:italic 19px Georgia,serif;text-align:center;max-width:70%;transition:opacity .4s;opacity:0;background:linear-gradient(90deg,transparent,#183e3d55,transparent);padding:12px 25px}#notice.show{opacity:1}#castUI{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);width:290px;text-align:center;font-size:9px;letter-spacing:2px}#castLabel{opacity:.8}.castRow{display:flex;align-items:center;gap:20px;margin-top:15px}#directionTrack{position:relative;height:22px;width:250px;background:repeating-linear-gradient(90deg,#fff4d777 0,#fff4d777 1px,transparent 1px,transparent 25px);background-size:100% 8px;background-repeat:no-repeat;background-position:center}#directionTrack:after{content:'';position:absolute;top:10px;left:0;right:0;border-top:1px solid #fff4d7aa}#directionPointer{position:absolute;width:3px;height:22px;background:#f7d18a;left:50%;box-shadow:0 0 8px #f7d18a44}#distanceTrack{position:relative;height:70px;width:12px;border-left:1px solid #fff4d777;background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,#fff4d766 9px,#fff4d766 10px);opacity:.4}#distancePointer{position:absolute;bottom:50%;left:-4px;width:19px;height:3px;background:#f7d18a}#castInstruction{font-size:11px;letter-spacing:.3px;margin:8px 0 0}#powerUI{position:absolute;right:40px;bottom:110px;width:110px;font-size:8px;letter-spacing:1.5px}#powerUI>div{height:3px;background:#fff4d733;margin:10px 0}#powerFill{display:block;height:100%;background:#c1e0cd;width:0}#powerUI small{font-size:9px;letter-spacing:0;opacity:.8}#fightUI{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);width:230px;text-align:center;font-size:9px;letter-spacing:2px}#tensionTrack{position:relative;height:4px;margin:18px 0;background:linear-gradient(90deg,#fff4d744 0 10%,#a7c9ae99 20% 75%,#d3946cbb 90%,#c86b5dbb)}#pumpTrack{height:3px;margin:-10px auto 14px;width:70%;background:#fff4d73d}#pumpFill{display:block;height:100%;width:0;background:#f0c78a;transition:width .08s}#pumpTrack.danger #pumpFill{background:#d8705c}#tensionPointer{position:absolute;top:-6px;width:2px;height:16px;background:#fff4d7;left:45%}#lineOut{font-size:9px;letter-spacing:1px;opacity:.75}#measureCard{position:absolute;top:25%;right:12%;text-align:center;padding:28px;background:#163f3d55;border:1px solid #fff4d722;border-radius:3px}#measureCard>span{font-size:9px;letter-spacing:4px}#measureCard strong{display:block;font:80px Georgia,serif;margin:9px 0}#measureCard strong small{font-size:22px}#measureCard p{font:italic 15px Georgia,serif}.veil{position:absolute;inset:0;background:linear-gradient(90deg,#112e32d9 0%,#183c4266 45%,transparent 100%);display:flex;align-items:center}.introContent{margin-left:8%;max-width:500px}.eyebrow{font-size:10px;letter-spacing:3px;color:#e9dfc5cc}.eyebrow span{margin:0 12px;opacity:.5}h1{font:clamp(90px,11vw,160px)/.85 Georgia,'Times New Roman',serif;letter-spacing:-7px;font-weight:400;margin:50px 0 30px}h1 em{font-weight:400;color:#f6c98f}.introText{font-size:15px;line-height:1.8;letter-spacing:.5px;color:#f3ecd7cf}.primary{border:1px solid #eaddbe;background:#f0e4c8;color:#234d4c;padding:16px 26px;border-radius:2px;font-size:12px;letter-spacing:1px;min-width:190px;transition:background .2s,transform .2s}.primary:hover{background:#fff4d7;transform:translateY(-1px)}.primary span{margin-left:50px}.introContent .primary{margin-top:25px}.introFoot{font-size:8px;letter-spacing:2px;line-height:2.6;margin-top:48px;opacity:.7}.introFoot span{letter-spacing:.5px;font-size:10px}.introRight{position:absolute;right:6%;bottom:9%;text-align:right}.introRight>span{display:block;font-size:9px;letter-spacing:2px;line-height:2.2}.introRight p{font:italic 25px/1.4 Georgia,serif;margin-top:30px}#pause{background:#12343be8;backdrop-filter:blur(8px);justify-content:center}.pauseContent{max-width:850px;padding:35px}h2{font:60px Georgia,serif;letter-spacing:-2px;margin:22px 0}.pauseContent>p{max-width:640px;line-height:1.7;font-size:14px;color:#ebe3ccbf}.helpGrid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:25px;margin:35px 0}.helpGrid h3{font-size:10px;letter-spacing:2px;font-weight:400;color:#efcd94}.helpGrid p{font-size:12px;line-height:2.1;color:#eee7d1cf}.pauseContent .note{font-size:11px;opacity:.65}.pauseActions{display:flex;align-items:center;gap:25px;margin-top:30px}.textButton{background:none;border:0;color:#e3dac3;font-size:11px;padding:10px 0}.textButton:hover{color:#fff4d7}.version{display:block;margin-top:30px;font-size:8px;letter-spacing:2px;opacity:.35}#debug{position:absolute;left:12px;top:80px;padding:12px;background:#102a30df;color:#d2e9d5;font:11px/1.6 monospace;pointer-events:none}#fatal{position:absolute;inset:0;background:#16383c;padding:15%;font-size:18px;line-height:1.8}@media(max-width:700px){.introContent{margin-left:7%}h1{font-size:95px;margin:35px 0 25px}.introRight{display:none}.eyebrow{font-size:8px;letter-spacing:2px}.introFoot{margin-top:28px}#compass{width:140px;top:20px}#conditions{right:16px;top:20px}#role{left:16px;top:23px;font-size:7px;letter-spacing:1px}#controls{bottom:20px;font-size:9px;padding:8px 10px;max-width:80vw;white-space:normal;text-align:center}#flyCard{left:15px;bottom:85px;font-size:10px}#flyCard small{display:none}.helpGrid{grid-template-columns:1fr;gap:0;margin:12px 0}.helpGrid p{margin:5px 0}.helpGrid h3{margin-bottom:5px}.pauseContent{max-height:100%;overflow:auto;padding:22px}h2{font-size:40px;margin:15px 0}.pauseContent>p{font-size:12px}.pauseActions{gap:12px;flex-wrap:wrap;margin-top:15px}.pauseActions .primary{padding:13px}.introText{font-size:13px}}
/* Thumb controls stay out of the sight-fishing area and respect device notches. */
.ambienceSetting{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:12px;flex-wrap:wrap}.ambienceSetting input{width:min(220px,45vw);min-height:44px;accent-color:#d9c08c}.ambienceSetting output{font-size:11px;min-width:32px;opacity:.7}
html,body{overscroll-behavior:none}#game{height:100dvh}#world{touch-action:none}
/* Phone play: no text selection, long-press callouts, tap flashes or pinch zoom; the menu still scrolls. */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#hud{touch-action:none}button{touch-action:manipulation}input,select,textarea{-webkit-user-select:auto;user-select:auto}
:root{--safe-bottom:max(14px,env(safe-area-inset-bottom));--safe-left:max(14px,env(safe-area-inset-left));--safe-right:max(14px,env(safe-area-inset-right));--safe-top:max(18px,env(safe-area-inset-top))}
#touchControls{position:absolute;inset:0;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#touchControls button{pointer-events:auto;touch-action:none;min-height:44px;border:1px solid #fff4d75c;border-radius:9px;color:#fff4d7;background:#173e40c2;backdrop-filter:blur(5px);font:14px Arial,sans-serif;padding:10px 14px;box-shadow:0 2px 15px #102e3220}
#touchControls button:active,#touchControls button.pressed{background:#e5d4a9;color:#214b4b;border-color:#f2dfb4}
#touchControls button:disabled{opacity:.45;pointer-events:none}
#touchSteering{position:absolute;left:var(--safe-left);bottom:var(--safe-bottom);width:126px;text-align:center}
#touchSteerLabel{display:block;font-size:10px;letter-spacing:2px;margin-bottom:8px;opacity:.75}
.steerRow{display:flex;gap:10px}.steerRow button{width:58px;height:56px;font-size:18px!important}
#touchBack{margin-top:8px;width:100%;font-size:12px!important}
#touchActions{position:absolute;right:var(--safe-right);bottom:var(--safe-bottom);width:142px;display:flex;flex-direction:column;gap:8px}
#touchPrimary{min-height:68px!important;background:#f0e4c8e6!important;color:#234d4c!important;border-color:#f5e8cc!important}
#touchPrimary.pressed{background:#c3dbc9!important;transform:translateY(1px)}
#touchPrimary strong{display:block;font-size:17px;font-weight:400}#touchPrimary small{display:block;font-size:11px;margin-top:7px;opacity:.75}
#touchRole,#touchCancel,#touchFlyToggle{font-size:13px!important}#touchFlyToggle[aria-expanded=true]{background:#ead6abe6;color:#234d4c}.fly-picking #controls{visibility:hidden}#touchHook{background:#e9c987!important;color:#234d4c!important}
#touchFlies{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-bottom) + 130px);display:flex;gap:7px;white-space:nowrap}
#touchFlies button{font-size:11px;min-width:62px;padding:10px 11px}#touchFlies button[aria-pressed=true]{background:#ead6abe6;color:#234d4c}
.inputPreference{display:flex;align-items:center;gap:12px;font-size:12px;margin-top:20px}.inputPreference select{font:inherit;background:#204a4e;color:#fff4d7;border:1px solid #fff4d766;border-radius:4px;padding:10px;min-height:44px}
/* Phone HUD: menu in the top-left corner, clear of the tide chart; text at least 10px. */
.touch-mode #menuButton{top:calc(var(--safe-top) - 6px);left:var(--safe-left);right:auto;bottom:auto;width:44px;height:44px;font-size:14px}
.touch-mode #compass{top:var(--safe-top);width:170px;font-size:11px;letter-spacing:2px}.touch-mode #compass strong{font-size:13px;margin-top:8px}
.touch-mode #conditions{top:var(--safe-top);right:var(--safe-right);font-size:13px}.touch-mode #conditions>div{font-size:11px;gap:5px;margin-top:6px}
.touch-mode #role{left:calc(var(--safe-left) + 56px);top:var(--safe-top);font-size:10px;letter-spacing:1.5px;gap:6px}
.touch-mode #flyCard{top:calc(var(--safe-top) + 18px);bottom:auto;left:calc(var(--safe-left) + 56px);font-size:13px;gap:6px}.touch-mode #flyCard svg{width:26px;height:22px}.touch-mode #flyCard small,.touch-mode #flyKeys{display:none}
.touch-mode #controls{bottom:calc(var(--safe-bottom) + 188px);font-size:12px;padding:8px 12px;max-width:82vw;white-space:normal;text-align:center;width:max-content}
.touch-mode #controls:empty{display:none}.touch-mode #controls{transition:opacity .8s}.touch-mode #controls.faded{opacity:0}.touch-mode #notice{top:24%;width:min(80vw,500px);text-align:center;font-size:16px}
.touch-mode #castUI{bottom:calc(var(--safe-bottom) + 140px);width:270px;font-size:11px}.touch-mode #castInstruction{font-size:13px}.touch-mode #directionTrack{width:220px}.touch-mode #distanceTrack{height:52px}.touch-mode .castRow{gap:14px}
.touch-mode #powerUI{right:var(--safe-right);bottom:calc(var(--safe-bottom) + 186px);width:150px;text-align:center;font-size:11px}.touch-mode #powerUI small{font-size:11px}
.touch-mode #fightUI{bottom:calc(var(--safe-bottom) + 107px);width:min(220px,46vw);font-size:11px}.touch-mode #lineOut{font-size:12px}.touch-mode #tensionTrack{margin:13px 0}
.touch-mode #measureCard{top:28%;right:50%;transform:translateX(50%);padding:18px;min-width:210px}.touch-mode #measureCard strong{font-size:64px}
/* Fights need fast, sure thumbs: bigger fixed targets, and Reel becomes Bow in place during a leap. */
.touch-fight #touchSteering{width:150px}.touch-fight .steerRow button{width:70px;height:76px}
.touch-fight #touchActions{width:150px}.touch-fight #touchPrimary{min-height:92px!important}.touch-fight #touchStake{min-height:56px}
#touchPrimary.bow{background:#f3c977!important;border-color:#fff1c9!important;box-shadow:0 0 22px #f3c977aa;animation:bowPulse .45s ease-in-out infinite alternate}
#touchPrimary.bow strong{font-size:22px;font-weight:700}
@keyframes bowPulse{to{transform:scale(1.04)}}
@media(orientation:portrait){#touchFlies{bottom:calc(var(--safe-bottom) + 200px)}.touch-mode #role{left:var(--safe-left);top:calc(var(--safe-top) + 46px)}.touch-mode #flyCard{left:var(--safe-left);top:calc(var(--safe-top) + 64px)}.touch-mode #fightLab{top:calc(var(--safe-top) + 100px)}.touch-mode #fightUI{bottom:calc(var(--safe-bottom) + 190px);width:min(260px,70vw)}.touch-mode #controls{bottom:calc(var(--safe-bottom) + 276px)}.steerRow button{width:64px;height:64px}#touchSteering{width:138px}#touchActions{width:150px}}
.touch-mode .veil{overflow-y:auto;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
@media(max-height:520px){
 .touch-mode .introContent{padding:24px 0}.touch-mode h1{font-size:76px;margin:20px 0 14px;letter-spacing:-4px}.touch-mode .introText{font-size:12px;margin:10px 0}.touch-mode .introContent .primary{margin-top:6px;padding:12px 22px}.touch-mode .introFoot{margin-top:14px;font-size:7px;line-height:1.8}.touch-mode .introFoot span{font-size:9px}
 .touch-mode #controls{bottom:calc(var(--safe-bottom) + 174px)}.touch-mode #notice{top:28%;font-size:15px}
 #touchPrimary{min-height:58px!important}.steerRow button{height:48px}#touchActions{gap:6px}#touchFlies{bottom:calc(var(--safe-bottom) + 116px)}
 .touch-mode #castUI{bottom:calc(var(--safe-bottom) + 112px)}.touch-mode #powerUI{bottom:calc(var(--safe-bottom) + 166px)}.touch-mode #fightUI{bottom:calc(var(--safe-bottom) + 90px)}
 .pauseContent{max-height:100%;overflow:auto}.touch-mode #measureCard{top:20%;padding:12px}.touch-mode #measureCard strong{font-size:48px;margin:5px 0}
}

#catchRecord{display:block;font-size:10px;letter-spacing:1.5px;color:#f6cf91}

.journal{border-block:1px solid #c7d9bb33;padding:16px 0;margin:18px 0}.journal summary{cursor:pointer;font-size:14px}.journal h3{font-size:12px;font-weight:normal;margin-top:24px}#journalEntries,#residentNotes{white-space:pre-line;font-size:12px;line-height:1.7}#journalEntries{max-height:320px;overflow:auto;color:#dce3c7;padding-right:12px}

.saveActions{border-top:1px solid #c7d9bb33;margin-top:20px;padding-top:12px}.saveActions label{display:inline-block;margin-left:18px;cursor:pointer}.saveActions input{display:block;max-width:240px;font:inherit;font-size:11px}#slamProgress{white-space:pre-line}
/* Destination menu is CSS-only: no renderer or world is loaded until selection. */
#destinations{position:absolute;inset:0;z-index:30;overflow:auto;background:radial-gradient(ellipse at 90% 0%,#436b65,transparent 65%),#102f35;color:#f0e6ce;padding:max(32px,env(safe-area-inset-top)) 6vw max(24px,env(safe-area-inset-bottom));box-sizing:border-box}
.destinationWrap{max-width:950px;margin:auto}#destinations h1{font-size:clamp(55px,7vw,90px);letter-spacing:-3px;margin:30px 0 18px}.destinationIntro{font:italic 17px Georgia,serif;color:#d5dccc}.destinationCards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}.destinationCard{position:relative;overflow:hidden;border:1px solid #e8dfbd38;border-radius:8px;padding:0 0 24px;text-align:left;background:#1b4145;color:inherit;display:flex;flex-direction:column;gap:13px;min-height:310px;transition:transform .2s,border-color .2s}.destinationCard:hover,.destinationCard:focus-visible{transform:translateY(-3px);border-color:#e9d3a5;outline-offset:4px}.destinationCard:disabled{opacity:.65;cursor:wait}.destinationCard>span:not(.destinationArt),.destinationCard>strong,.destinationCard>b{margin:0 24px}.destinationCard>strong{font:29px Georgia,serif;letter-spacing:-.7px}.destinationCard>span{font-size:12px;line-height:1.6;color:#e0e4d5}.destinationCard .destinationNumber{font-size:9px;letter-spacing:2px}.destinationCard>b{font-size:11px;font-weight:400;letter-spacing:1px;color:#f5ce91;margin-top:4px}.destinationArt{height:125px;width:100%;background:linear-gradient(166deg,transparent 44%,#234d46 45% 54%,transparent 55%),linear-gradient(12deg,#22565a 25%,#96b9a2 26% 37%,#3d7975 38% 65%,#e4b690 66%)}.keys .destinationArt{background:linear-gradient(159deg,transparent 55%,#136e85 56% 66%,transparent 67%),radial-gradient(ellipse at 22% 38%,#467259 0% 10%,transparent 11%),linear-gradient(12deg,#4eaaa5 20%,#d6ddba 21% 42%,#8bc5b5 43% 70%,#b6d4d8 71%)}#destinationStatus{font-size:12px;line-height:1.6;margin-top:23px;color:#e5dfc8}.destinationFoot{font-size:10px;line-height:1.6;color:#a3bbb4}.introContent>#levelNote{font-size:11px;line-height:1.6;max-width:360px;color:#e8e1c7bf}.introContent>#introDestinations{display:block;margin-top:10px}
@media(max-width:600px){#destinations{padding-left:6%;padding-right:6%}#destinations h1{font-size:58px;margin-top:24px}.destinationCards{grid-template-columns:1fr;gap:14px;margin-top:20px}.destinationCard{min-height:0;padding-bottom:18px;gap:8px}.destinationArt{height:75px}.destinationCard>strong{font-size:26px}.destinationCard>span:not(.destinationArt),.destinationCard>strong,.destinationCard>b{margin-left:19px}.destinationIntro{font-size:15px}.introContent>#levelNote{max-width:85vw}}

/* Destination images are genuine captures from the active game renderer. */
.destinationCard .destinationArt{height:auto;aspect-ratio:1.6;position:relative;display:grid;place-items:center;background:#234b50;overflow:hidden}
.destinationArt img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.destinationArt img[hidden],.destinationArt span[hidden]{display:none}.destinationArt>span{font-size:11px;letter-spacing:.04em;color:#b5ccc6}

/* Keep the catch scene clear; details stay at the lower edge, outside the subject. */
#measureCard,.touch-mode #measureCard{top:auto;bottom:90px;right:24px;transform:none;min-width:180px;padding:14px 18px;background:#163c3bd9;border:1px solid #d5dcc244;border-radius:8px}
#measureCard strong,.touch-mode #measureCard strong{font-size:40px;margin:5px 0}
#measureCard p{margin:6px 0 0;font-size:11px}
@media(max-width:700px){#measureCard,.touch-mode #measureCard{right:auto;left:16px;bottom:100px;min-width:155px;padding:10px 14px}#measureCard strong,.touch-mode #measureCard strong{font-size:32px}}


.beach .destinationArt{background:linear-gradient(110deg,#e5d9b8 0% 27%,#a4ccba 28% 41%,#60a69e 42% 65%,#367e87 66%);display:grid;place-items:center}.beach #captureNoteBeach{font-size:10px;letter-spacing:3px;color:#244e53}.beach .destinationArt img:not([hidden])~span{display:none}

/* Small read-only tide instrument, grouped with time/wind; no touch targets. */
#tideChart{width:120px;margin-top:10px;padding:7px 5px 5px;border-radius:5px;background:#143b43b8;text-shadow:none;letter-spacing:.6px;pointer-events:none}
#tideChart header,#tideChart footer{display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:400}
#tideChart header span:first-child{opacity:.65}#tideTrend{color:#f5d49d;letter-spacing:0}
#tideChart svg{display:block;width:100%;height:40px;overflow:visible}
#tideChart footer{font-size:6px;opacity:.65;letter-spacing:.5px}
#tideFill{fill:#8abac0;opacity:.22}#tideCurve{fill:none;stroke:#d4e6dd;stroke-width:1.3}
#tideChart .tideGuide{fill:none;stroke:#d4e6dd;stroke-width:.5;stroke-dasharray:2 3;opacity:.4}
#tideNowLine{stroke:#f5d49d;stroke-width:.7;opacity:.65}#tideNow{fill:#f5d49d;stroke:#173e42;stroke-width:1.2}
@media(max-width:700px){#tideChart{width:100px;margin-top:8px}#tideChart svg{height:34px}}
@media(max-height:450px){#tideChart{margin-top:5px;padding-top:4px}#tideChart svg{height:26px}}
.touch-mode #tideChart{width:132px}.touch-mode #tideChart header{font-size:10px}.touch-mode #tideChart footer{font-size:9px}

/* Field notes must scroll at every viewport size, independently of the game. */
#pause{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#pause .pauseContent{box-sizing:border-box;width:100%;max-height:none;overflow:visible;margin-block:auto}

/* Eight patterns remain readable on portrait phones without widening the HUD. */
#touchFlies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(520px,calc(100vw - 24px));white-space:normal;gap:5px}
#touchFlies button{min-width:0;min-height:44px;padding:7px 4px;font-size:12px}

#catchRecap{margin-top:10px;padding-top:9px;border-top:1px solid #fff4d72a;max-width:245px;text-align:left}
#catchRecap>span{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;opacity:.7}
#measureCard #catchRecap p{font:11px/1.4 Arial,sans-serif;margin:5px 0 0}
@media(max-width:700px){#catchRecap{max-width:205px}#measureCard #catchRecap p{font-size:10px}}
@media(max-height:480px){#measureCard,.touch-mode #measureCard{bottom:65px;max-width:280px;padding:8px 12px}#measureCard #catchRecap{margin-top:5px;padding-top:5px}#measureCard #catchRecap p{margin-top:3px}}

#measureCard #catchRecap p{display:grid;grid-template-columns:1fr 22px;gap:1px 8px;margin-top:7px}
#measureCard #catchRecap p strong{font:600 11px/1.4 Arial,sans-serif;letter-spacing:0}
#measureCard #catchRecap p b{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:center;font:700 20px/1 Arial,sans-serif;color:#f5e4ad}
#measureCard #catchRecap p small{grid-column:1;font:10px/1.35 Arial,sans-serif;opacity:.8}
.marsh .destinationArt{background:linear-gradient(170deg,#e9c99a 0% 30%,#9a9a5a 31% 52%,#3f4a3a 53% 61%,#8b8a4e 62%)}.marsh #captureNoteJacksonville{font-size:10px;letter-spacing:3px;color:#2e3a2c}.marsh .destinationArt img:not([hidden])~span{display:none}

/* Fight lab (?fightlab): owner testing buttons. */
#fightLab {
  position: absolute;
  top: 84px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  z-index: 5;
}
#fightLab button {
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(20, 40, 44, 0.72);
  color: #f3ead2;
  cursor: pointer;
}

/* Packaged start: title card, loading screen, and the fades into and out of the water.
   Motion is transform/opacity only, so it keeps running while the scene builds. */
.covered #destinations{visibility:hidden}
#title,#loading{position:absolute;inset:0;z-index:40;overflow:hidden;display:flex;color:#f0e6ce;transition:opacity .7s ease}
#title{cursor:pointer;flex-direction:column;align-items:center;text-align:center;padding:max(15vh,env(safe-area-inset-top)) 6vw 0;background:linear-gradient(180deg,#112e33 0%,#22504f 34%,#7f7f68 50%,#d6a77d 55.5%,#3b6966 56%,#1c4447 72%,#102f35 100%)}
.titleSun{position:absolute;left:50%;top:55.7%;width:min(60vw,420px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#f8d2a0aa 0%,#f6c98f33 32%,transparent 66%);animation:sunWarm 6s ease-out both}
.titleWater{position:absolute;left:0;right:0;top:56%;bottom:0}
.titleWater i{position:absolute;left:50%;height:1px;background:linear-gradient(90deg,#f6c98f00,#f6c98f,#f6c98f00);opacity:0;animation:glimmer 9s ease-in-out infinite}
.titleWater i:nth-child(1){top:3%;width:20vw;margin-left:-10vw}
.titleWater i:nth-child(2){top:9%;width:32vw;margin-left:-19vw;animation-delay:2.2s}
.titleWater i:nth-child(3){top:19%;width:14vw;margin-left:3vw;animation-delay:4.5s}
.titleWater i:nth-child(4){top:33%;width:40vw;margin-left:-22vw;animation-delay:6.7s}
.titleSky{position:absolute;left:0;right:0;top:0;height:56%;overflow:hidden}
.titleDisc{position:absolute;left:50%;bottom:0;width:min(17vw,92px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff4dc 0%,#fde2b0 45%,#f4bd83 100%);box-shadow:0 0 30px 8px #f8d2a055,0 0 90px 30px #f6c98f2e;transform:translate(-50%,30%);will-change:transform;animation:sunrise 90s cubic-bezier(.3,.15,.6,1) both}
.titleBirds{position:absolute;inset:0;pointer-events:none}
.titleBirds svg{position:absolute;overflow:visible;fill:#12302f}
.flock{position:absolute;left:0;top:calc(56% - 64px);width:150px;height:40px;opacity:0;animation:flockPass 30s linear 3s infinite both}
.flock svg{width:26px;animation:bob 3.2s ease-in-out infinite}
.flock .w{animation:pelicanFlap 3.2s ease-in-out infinite}
.flock svg:nth-child(1){left:96px;top:10px}
.flock svg:nth-child(2){left:62px;top:16px}
.flock svg:nth-child(3){left:30px;top:8px}
.flock svg:nth-child(4){left:0;top:14px}
.flock svg:nth-child(2),.flock svg:nth-child(2) .w{animation-delay:.3s}
.flock svg:nth-child(3),.flock svg:nth-child(3) .w{animation-delay:.6s}
.flock svg:nth-child(4),.flock svg:nth-child(4) .w{animation-delay:.9s}
.gull{position:absolute;left:0;top:calc(56% - 104px);width:20px;height:8px;opacity:0;animation:gullPass 41s linear 17s infinite both}
.gull svg{width:20px}
.gull .w{animation:gullFlap .42s ease-in-out infinite alternate}
.titleDolphin{position:absolute;left:calc(50% + min(10vw,96px));top:calc(57% - 30px);width:90px;height:30px;margin-left:-45px}
.titleDolphin .clip{position:absolute;inset:-40px -40px 0;overflow:hidden}
.titleDolphin .arc{position:absolute;left:50%;bottom:-7px;transform:rotate(-125deg);animation:breach 23s linear 9s infinite both}
.titleDolphin svg{position:absolute;left:-17px;top:-36px;width:34px;fill:#13302f}
.titleDolphin b{position:absolute;bottom:0;width:9px;height:10px;margin-left:-4.5px;border-radius:50% 50% 35% 35%/75% 75% 25% 25%;background:radial-gradient(ellipse at 50% 100%,#f8ead0 0%,#f8ead099 45%,#f8ead000 75%);opacity:0;transform-origin:50% 100%;animation:crownOut 23s ease-out 9s infinite both}
.titleDolphin b:nth-of-type(1){left:calc(50% - 29px)}
.titleDolphin b:nth-of-type(2){left:calc(50% + 29px);animation-name:crownIn}
.titleDolphin i{position:absolute;top:100%;width:40px;height:6px;margin:-3px 0 0 -20px;border:1px solid #f4e3c4;border-radius:50%;opacity:0;transform:scale(.15);animation:ringOut 23s ease-out 9s infinite both}
.titleDolphin i:nth-of-type(1){left:calc(50% - 29px)}
.titleDolphin i:nth-of-type(2){left:calc(50% + 29px);animation-name:ringIn}
.titleContent{position:relative;max-width:640px}
#title .eyebrow{text-shadow:0 1px 10px #0d2629}
#title h1{font-size:clamp(56px,min(9vw,11.5vh),124px);letter-spacing:-2px;margin:22px 0 18px;text-shadow:0 2px 4px #0d2629cc,0 0 22px #0d2629,0 0 48px #0d2629aa;animation:rise 1.6s ease-out both}
.titleTag{font:italic 16px Georgia,serif;color:#efe8d4;margin:0;text-shadow:0 1px 3px #0d2629,0 0 14px #0d2629;animation:rise 1.6s ease-out .3s both}
.titlePrompt{position:absolute;left:50%;bottom:max(12vh,calc(env(safe-area-inset-bottom) + 32px));transform:translateX(-50%);white-space:nowrap;min-height:44px;padding:10px 20px;background:none;border:0;color:#f0e6ce;font-size:11px;letter-spacing:3px;text-transform:uppercase;animation:breathe 4s ease-in-out 1.2s infinite both}
#loading{align-items:flex-end;background:#102f35}
.loadingArt{position:absolute;inset:0}
.loadingArt img{width:100%;height:100%;object-fit:cover;opacity:.6;transform-origin:60% 55%;animation:drift 16s ease-out both}
.loadingArt img:not([src]){display:none}
.loadingArt::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#102f35f2 0%,#102f3599 38%,#102f3526 100%)}
.loadingContent{position:relative;width:min(520px,84vw);margin:0 8vw max(11vh,calc(env(safe-area-inset-bottom) + 40px))}
#loading h2{font:400 clamp(40px,6vw,72px)/1 Georgia,'Times New Roman',serif;letter-spacing:-1.5px;margin:12px 0 26px}
.tideLine{position:relative;height:2px;overflow:hidden;border-radius:1px;background:#f0e6ce2e}
#loadingFill{position:absolute;inset:0;background:linear-gradient(90deg,#f0e6ce,#f6c98f);transform:scaleX(0);transform-origin:left;transition:transform 2.6s cubic-bezier(.2,.7,.3,1);will-change:transform}
.tideLine::after{content:'';position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,#fff4d799,transparent);animation:glint 2.4s linear infinite}
#loadingCaption{font:italic 15px Georgia,serif;color:#d5dccc;margin:14px 0 0;min-height:1.3em}
#loading.failed .tideLine{opacity:.25}
#title.leaving,#loading.leaving,#intro.leaving{opacity:0;pointer-events:none}
.veil{transition:opacity .8s ease}
#hud:not(.hidden){animation:fadeIn 1.2s ease .25s both}
#curtain{position:absolute;inset:0;z-index:50;background:#102f35;opacity:0;pointer-events:none;transition:opacity .55s ease}
#curtain.closing{opacity:1;pointer-events:auto}
@keyframes drift{from{transform:scale(1.12) translateX(-1.5%)}to{transform:scale(1.02)}}
@keyframes glint{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@keyframes glimmer{0%,100%{opacity:0;transform:translateX(-10px)}50%{opacity:.4;transform:translateX(10px)}}
@keyframes sunrise{from{transform:translate(-50%,94%)}to{transform:translate(-50%,-8%)}}
@keyframes flockPass{0%{opacity:1;transform:translate(-160px,6px)}40%{opacity:1;transform:translate(calc(100vw + 20px),-10px)}40.1%,100%{opacity:0;transform:translate(calc(100vw + 20px),-10px)}}
@keyframes gullPass{0%{opacity:1;transform:translate(calc(100vw + 30px),0)}22%{opacity:1;transform:translate(-40px,22px)}22.1%,100%{opacity:0;transform:translate(-40px,22px)}}
@keyframes pelicanFlap{0%,46%,100%{transform:rotate(-3deg)}6%,20%{transform:rotate(18deg)}13%,27%{transform:rotate(-22deg)}36%{transform:rotate(6deg)}}
@keyframes bob{0%,100%{transform:translateY(1px)}16%,30%{transform:translateY(-1.5px)}70%{transform:translateY(1.5px)}}
@keyframes gullFlap{from{transform:rotate(26deg)}to{transform:rotate(-20deg)}}
@keyframes breach{0%{transform:rotate(-125deg);animation-timing-function:cubic-bezier(.35,.15,.65,.85)}10%,100%{transform:rotate(125deg)}}
@keyframes crownOut{0%,1.6%{opacity:0;transform:scale(.4,.1)}2.2%{opacity:.6;transform:scale(.8,.8)}4.2%,100%{opacity:0;transform:scale(1,.2)}}
@keyframes crownIn{0%,8%{opacity:0;transform:scale(.4,.1)}8.6%{opacity:.9;transform:scale(1.2,1.4)}11.5%,100%{opacity:0;transform:scale(1.5,.2)}}
@keyframes ringOut{0%,1.6%{opacity:0;transform:scale(.15)}2.2%{opacity:.45}11%,100%{opacity:0;transform:scale(1)}}
@keyframes ringIn{0%,8%{opacity:0;transform:scale(.15)}8.7%{opacity:.6}18%,100%{opacity:0;transform:scale(1.35)}}
@keyframes sunWarm{from{opacity:0;transform:translate(-50%,-42%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:.95}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-height:520px){#title{padding-top:8vh}#title h1{font-size:52px;margin:12px 0 10px}.titlePrompt{bottom:6vh}}
@media(prefers-reduced-motion:reduce){#title *,.loadingArt img,.tideLine::after,#hud:not(.hidden){animation:none!important}}
#destinations{animation:fadeIn .6s ease both}
#introTitle{font-size:clamp(56px,8vw,104px);letter-spacing:-3px}

/* Pause menu: Resume and the session actions on top, then Field notes / Journal / Settings tabs. */
.pauseHead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 30px;padding-bottom:18px;border-bottom:1px solid #c7d9bb33}
.pauseHead .eyebrow{flex-basis:100%}
.pauseHead h2{margin:8px 0 0}
#pause .pauseHead .pauseActions{margin-top:0;flex-wrap:wrap;gap:6px 22px}
.pauseTabs{position:sticky;top:0;z-index:1;display:flex;gap:6px;margin:0 0 8px;padding:12px 0 10px;background:#12343b}
.pauseTabs button{min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:999px;background:none;color:#e3dac3;font-size:11px;letter-spacing:2px;text-transform:uppercase}
.pauseTabs button[aria-selected=true]{border-color:#efcd9466;background:#f6c98f14;color:#f6c98f}
.pausePanel>p{max-width:640px;line-height:1.7;font-size:14px;color:#ebe3ccbf}
.pausePanel>.journal:last-child{border-bottom:0}
#panelJournal>p:empty{display:none}
@media(max-width:700px){.pauseHead h2{font-size:40px}.pauseTabs{gap:2px}.pauseTabs button{padding:10px 11px;letter-spacing:1px}.pausePanel>p{font-size:12px}}
#panelSettings>.ambienceSetting,#panelSettings>.inputPreference{display:grid;grid-template-columns:minmax(150px,230px) auto 1fr;align-items:center;gap:14px;margin:0;padding:8px 0;border-bottom:1px solid #c7d9bb1f;font-size:12px}
#panelSettings input[type=checkbox]{width:22px;height:22px;min-height:0;margin:11px 0}
#panelSettings .saveActions{margin-top:14px}
#loading em{color:#f6c98f}