*{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)}#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}
: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:12px 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:8px;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:10px!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:14px;font-weight:400}#touchPrimary small{display:block;font-size:9px;margin-top:7px;opacity:.75}
#touchRole,#touchCancel{font-size:11px!important}#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:74px}#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}
.touch-mode #menuButton{top:calc(var(--safe-top) + 64px);right:var(--safe-right);bottom:auto;width:44px;height:44px}
.touch-mode #compass{top:var(--safe-top);width:126px;font-size:8px}.touch-mode #compass strong{font-size:10px}
.touch-mode #conditions{top:var(--safe-top);right:var(--safe-right);font-size:10px}.touch-mode #conditions>div{font-size:9px;gap:4px}
.touch-mode #role{left:var(--safe-left);top:calc(var(--safe-top) + 4px);font-size:7px;letter-spacing:1px;gap:5px}
.touch-mode #flyCard{top:calc(var(--safe-top) + 38px);bottom:auto;left:var(--safe-left);font-size:10px;gap:5px}.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:9px;padding:7px 10px;max-width:82vw;white-space:normal;text-align:center;width:max-content}
.touch-mode #controls:empty{display:none}.touch-mode #notice{top:24%;width:min(80vw,500px);text-align:center;font-size:13px}
.touch-mode #castUI{bottom:calc(var(--safe-bottom) + 140px);width:270px}.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) + 134px);width:142px;text-align:center}
.touch-mode #fightUI{bottom:calc(var(--safe-bottom) + 107px);width:min(190px,46vw);font-size:8px}.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}
.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:12px}
 #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) + 120px)}.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}