:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0f1ed;font-size:16px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#171c1d}#scene{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}#still{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}#view{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;outline:none}#view:focus-visible{outline:2px solid #e9b875;outline-offset:-3px}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:14px 22px;border:1px solid #ffffff25;background:#151a1de6;border-radius:5px;white-space:nowrap;font-size:1rem;transition:opacity .4s}.hud{position:absolute;top:max(20px,env(safe-area-inset-top));pointer-events:none}.left{left:max(20px,env(safe-area-inset-left));width:184px}.right{right:max(20px,env(safe-area-inset-right))}.panel{background:#10161966;border:1px solid #ffffff16;box-shadow:0 2px 10px #0000000b;border-radius:4px;padding:9px 12px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.label{display:block;color:#c5cecb;font-size:.875rem;font-weight:400;line-height:1.4}.lure strong{display:block;font-size:.875rem;font-weight:500;margin-top:4px;line-height:1.5}.retrieve{display:block;font-size:.875rem;color:#cbd0cc;margin-top:8px}.retrieve b{font-weight:400;color:#f0f1ed;margin-left:8px}.tension{margin-top:8px;padding-top:7px;padding-bottom:9px}.track{height:3px;background:#ffffff25;margin-top:9px;border-radius:2px;overflow:hidden}#tension{height:100%;width:0%;background:#c4caa4;transition:width .3s}.distance{min-width:109px}.distance strong{display:block;font-size:1.35rem;font-weight:400;line-height:1.25;margin-top:5px;font-variant-numeric:tabular-nums}.distance small{font-size:1rem;color:#d4d9d4}.location{position:absolute;bottom:max(27px,calc(env(safe-area-inset-bottom) + 14px));left:max(22px,env(safe-area-inset-left));text-shadow:0 1px 6px #000}.location span{display:block;letter-spacing:.22em;font-size:.75rem;font-weight:500}.location small{display:block;font-size:.875rem;margin-top:6px;color:#d4d8d2}.controls{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px));display:flex;flex-direction:column;align-items:flex-end;gap:10px}.controls p{font-size:.875rem;margin:0;text-shadow:0 1px 6px #000;color:#d6dbd7;transition:opacity .8s}button{font:inherit;border:1px solid #ffffff38;background:#121a1cc9;color:#f1f1e9;border-radius:5px;min-height:48px;padding:12px 17px;display:flex;align-items:center;gap:10px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.3}button[aria-pressed="true"]{background:#463d2be6;border-color:#ebc68999}button:focus-visible{outline:2px solid #e9b875;outline-offset:3px}#error{position:absolute;left:20px;right:20px;bottom:105px;margin:0;background:#151a1deb;border:1px solid #ffffff26;padding:16px;border-radius:5px;font-size:1rem;line-height:1.5}
@media(max-width:600px){.hud{top:max(14px,env(safe-area-inset-top))}.left{left:14px;width:176px}.right{right:14px}.panel{padding:8px 10px}.distance{min-width:100px}.lure strong{font-size:.875rem}.retrieve{margin-top:8px}.distance strong{font-size:1.25rem}.location{left:16px}.controls{right:14px}.controls p{font-size:.8125rem;max-width:180px;text-align:right}.tension{padding-bottom:9px}}
@media(max-width:350px){.left{width:171px}.lure strong{font-size:.875rem}.distance{min-width:91px;padding:10px}.label{font-size:.8125rem}}
@media(max-height:450px){.tension{margin-top:6px;padding:6px 12px}.lure{padding:8px 12px}.retrieve{margin-top:4px}.location{bottom:14px}.controls{bottom:12px}.controls p{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.actions{display:flex;gap:8px}button:disabled{opacity:.45;cursor:default}#cast{border-color:#e9b87570;background:#433a2dd9;min-width:85px;justify-content:center}

#cast-power{width:210px;padding:10px 12px;background:#101619c9;border:1px solid #e9b87550;border-radius:5px;font-size:.875rem}#cast-power[hidden]{display:none}#cast-power strong{float:right;font-weight:500;font-variant-numeric:tabular-nums}.power-track{clear:both;margin-top:9px;height:5px;background:#ffffff25;border-radius:3px;overflow:hidden}#cast-power-fill{height:100%;width:0;background:#e9b875}#cast[aria-pressed="true"]{background:#645030e6;border-color:#ebc689}#cast{min-width:120px}

#rod-picker{color:#f0f1ed;background:#151d20f5;border:1px solid #e9b87550;border-radius:14px;padding:28px;width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;box-shadow:0 24px 100px #0009}#rod-picker::backdrop{background:#08101380;backdrop-filter:blur(5px)}.picker-location{font-size:.75rem;letter-spacing:.18em;color:#e9b875}.picker-heading h1{font-size:1.65rem;font-weight:500;margin:12px 0 8px}.picker-heading p{margin:0;color:#c5cecb;font-size:1rem;line-height:1.5}.rod-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.rod-options button{padding:16px;min-height:110px;align-items:flex-start;flex-direction:column;gap:12px;text-align:left;border-color:#ffffff26;background:#ffffff05;touch-action:manipulation}.rod-options button:hover:not(:disabled){background:#e9b87513;border-color:#e9b875}.rod-options strong{display:block;font-size:1.05rem;font-weight:500}.rod-options small{display:block;color:#c5cecb;font-size:.875rem;line-height:1.5;margin-top:6px}.basic-tag{font-size:.75rem;color:#e9b875}.picker-footer{font-size:.875rem;color:#c5cecb;line-height:1.6;margin:0}#picker-status{font-size:.875rem;color:#e9b875;margin:10px 0 0}#picker-status:empty{display:none}#equipment{font-size:.875rem;padding:12px}#hint{max-width:280px}.actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){#rod-picker{padding:22px}.actions{gap:6px}#equipment{min-height:44px;padding:10px}#cast,#reel{padding:10px;min-height:44px}#cast{min-width:108px}#reel{gap:6px}.controls{left:14px}.controls p{max-width:260px}}
@media(max-width:350px){.rod-options{grid-template-columns:1fr}.rod-options button{min-height:80px;flex-direction:row;align-items:center;justify-content:space-between}.actions{max-width:285px}}

#fish-status{position:absolute;top: max(190px,calc(env(safe-area-inset-top) + 176px));left: max(20px,env(safe-area-inset-left));width:220px;pointer-events:none;background:#101619b0}#fish-message{display:block;margin:8px 0;font-size:1rem;line-height:1.4;font-weight:500}#fish-record{font-size:.875rem;color:#c5cecb;display:block}#fish-progress{font-size:.875rem;margin-bottom:9px}#fish-progress[hidden]{display:none}#fish-meter{display:block;width:100%;height:8px;margin-top:7px;accent-color:#e9b875}#fish-status[data-state="bite"]{border-color:#e9b875;background:#463a22d9}#fish-status[data-state="caught"]{border-color:#b7cba0}@media(max-width:600px){#fish-status{left:14px;top:max(184px,calc(env(safe-area-inset-top) + 170px));width:200px}}@media(max-height:500px){#fish-status{left:auto;right:14px;top:104px;width:200px;padding:8px}#fish-message{margin:4px 0}}

#tension-label{float:right;font-weight:500;font-variant-numeric:tabular-nums}#tension{transition:width .1s,background .2s}#fish-status[data-state="broken"]{border-color:#ff665b;background:#40201dde}

/* Keep the fishing view clear; only a caught fish opens a result card. */
.hud .lure,.hud.right[hidden]{display:none}
.hud.right{text-shadow:0 1px 5px #000;pointer-events:none}
#fish-status[hidden],.tension[hidden]{display:none}
.hud.left{top:auto;bottom:max(136px,calc(env(safe-area-inset-bottom) + 124px));width:184px}
.tension{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 5px #000;padding:8px 0}
.tension .track{height:5px;box-shadow:0 1px 4px #0008}
@media(max-height:450px){.hud.left{bottom:76px}}

#world-time{font-variant-numeric:tabular-nums}.location small{white-space:nowrap}

#payout[hidden]{display:none}#payout{font-size:.875rem;border-color:#e9b87580}#world-phase,#world-weather{display:inline;letter-spacing:normal;font-size:inherit;font-weight:400}.location{bottom:max(27px,calc(env(safe-area-inset-bottom) + 14px))}
@media(max-width:600px){.location{bottom:max(154px,calc(env(safe-area-inset-bottom) + 142px))}.actions{max-width:330px}.hud.left{bottom:max(193px,calc(env(safe-area-inset-bottom) + 181px))}#payout{padding:10px;min-height:44px}}

/* Edge-to-edge play area and a left-side distance readout beside the reel. */
#scene{position:fixed;inset:0;width:100%;height:100%;height:100dvh}
#scene:fullscreen{width:100vw;height:100vh;background:#171c1d}
#fullscreen{position:absolute;z-index:2;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));min-height:44px;font-size:.875rem;padding:10px 12px}
#fullscreen[hidden],#fight-distance[hidden]{display:none}
#fight-distance{left:max(20px,calc(env(safe-area-inset-left) + 14px));right:auto;top:var(--reel-y,70%);bottom:auto;transform:translateY(-50%);width:auto;text-shadow:0 2px 6px #000,0 0 14px #000;pointer-events:none}
#fight-distance .distance{min-width:0}
#fight-distance strong{font-size:1.65rem;font-weight:500}
#fight-distance .label{color:#f0f1ed}
.hud.left{top:calc(var(--reel-y,70%) - 100px);bottom:auto}
@media(max-width:600px){#fight-distance{left:max(14px,env(safe-area-inset-left))}.hud.left{top:calc(var(--reel-y,70%) - 100px);bottom:auto}}

/* Compact sharing and controls remain clear of the sunset and reel. */
.top-actions{position:absolute;z-index:2;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:8px}
.top-actions #fullscreen{position:static}.top-actions button{font-size:.875rem;min-height:44px;padding:10px 12px}
.control-guide{font-size:.875rem;line-height:1.6;color:#c5cecb;margin:14px 0 0}kbd{font:inherit;color:#f0d1a0}
.actions button{min-height:48px}#reel{min-width:120px;justify-content:center}#payout{min-width:120px;justify-content:center}
@media(max-width:600px){.controls{bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px))}.actions{display:grid;grid-template-columns:auto 1fr 1fr;width:min(100%,370px);max-width:none;gap:8px}.actions #equipment{grid-row:1;padding:10px}.actions #cast{grid-column:2}.actions #reel{grid-column:3}.actions #payout{grid-column:2/4;grid-row:2;min-height:48px;background:#493c28d9}.actions #cast,.actions #reel{min-width:0;padding:10px}.controls p{max-width:100%;font-size:.875rem}.location{bottom:max(157px,calc(env(safe-area-inset-bottom) + 145px))}.top-actions{gap:6px}}
@media(max-height:450px){.location{bottom:14px}.actions #payout{grid-column:auto;grid-row:auto}.actions{display:flex;width:auto;max-width:100%}.controls{left:160px}.actions button{min-height:44px}.control-guide{margin-top:10px}}

/* Equipment is recognized by its silhouette first; names stay prominent. */
#rod-picker{width:min(520px,calc(100% - 28px));padding:24px}.picker-heading p{font-size:.9375rem}.rod-options{margin:18px 0 14px;gap:12px}.rod-options button{min-height:0;padding:14px 12px 10px;gap:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow:hidden}.rod-options strong{font-size:1rem;font-weight:500}.rod-image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;margin:8px 0 4px;pointer-events:none}.rod-options small{margin:0;font-size:.8125rem;color:#adbdbd}.picker-footer{text-align:center;font-size:.8125rem;color:#aab9b8}.control-guide{text-align:center;font-size:.8125rem;line-height:1.5;margin-top:12px}.keyboard-guide{display:block;margin-top:4px;color:#aab9b8}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.location .conditions{display:flex;align-items:center;gap:8px;margin-top:4px;line-height:32px}.weather-icon{display:block;width:32px;height:32px;flex:none;filter:drop-shadow(0 1px 3px #0008)}.location .condition-dot{display:inline;font-size:inherit;letter-spacing:0;color:#aebdb8}
@media(pointer:coarse){.keyboard-guide{display:none}}
@media(max-width:600px){#rod-picker{padding:20px}.rod-options{gap:10px}.rod-options button{padding:12px 10px 9px}.picker-heading h1{font-size:1.5rem}}
@media(max-width:350px){.rod-options{grid-template-columns:1fr 1fr}.rod-options button{min-height:0;flex-direction:column;align-items:stretch;justify-content:flex-start}.rod-options strong{font-size:.9375rem}}
@media(max-height:450px) and (min-width:601px){#rod-picker{width:min(800px,calc(100% - 28px));padding:16px 20px}.rod-options{grid-template-columns:repeat(4,1fr);margin:12px 0}.picker-heading h1{margin:6px 0}.picker-heading p{display:none}.rod-image{margin:4px 0}.control-guide{margin-top:8px}}

/* Clear touch actions: recognizable icon above a short label. */
.actions .action-icon{width:26px;height:26px;flex:none;stroke-width:1.6;color:#e8e3d8}.actions button{flex-direction:column;justify-content:center;gap:6px;padding:10px 14px;font-size:.875rem;line-height:1.2;min-height:68px}.actions #cast .action-icon{color:#efcf97}.actions #payout .action-icon{color:#b9d4e3}.top-actions .action-icon{width:19px;height:19px;flex:none}.actions button:disabled .action-icon{color:inherit}
@media(max-width:600px){.actions #equipment,.actions #cast,.actions #reel,.actions #payout{min-height:68px;padding:9px 10px;gap:6px}.actions #equipment{font-size:.8125rem}.actions #payout{flex-direction:row}.actions{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}#cast{min-width:0}}
@media(max-height:450px){.actions button,.actions #equipment,.actions #cast,.actions #reel,.actions #payout{flex-direction:row;min-height:48px;padding:9px 12px;gap:7px}.actions .action-icon{width:22px;height:22px}}

/* A quiet visual bite signal; the reel button shows which action to take. */
#bite-indicator{width:60px;height:60px;display:grid;place-items:center;margin-right:42px;border-radius:50%;color:#f3cd88;background:#17212590;border:1px solid #edc57e75;box-shadow:0 2px 12px #0004;pointer-events:none;backdrop-filter:blur(3px)}#bite-indicator[hidden],#hint[hidden]{display:none}#bite-indicator svg{width:43px;height:43px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#bite-indicator .fish-mark{fill:currentColor;fill-opacity:.15}#bite-indicator .fish-eye{fill:currentColor;stroke:none}#bite-indicator[data-state="bite"]{animation:bite-pulse 1.15s ease-in-out infinite}#reel[data-bite="true"]{border-color:#f3cd88;color:#f3cd88;animation:reel-prompt 1.15s ease-in-out infinite}#bite-indicator[data-state="fighting"]{width:44px;height:44px;border-color:#bdd6ce60;color:#c8ddd6;background:#17212555}#bite-indicator[data-state="fighting"] svg{width:33px;height:33px}
@keyframes bite-pulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}@keyframes reel-prompt{0%,100%{box-shadow:0 0 0 0 #edc57e00}50%{box-shadow:0 0 0 3px #edc57e30}}
@media(prefers-reduced-motion:reduce){#bite-indicator,#reel[data-bite="true"]{animation:none}}
@media(max-height:450px){#bite-indicator{width:44px;height:44px;margin-right:45px}#bite-indicator svg{width:34px;height:34px}.controls{gap:6px}}

/* A clear pre-jump warning: stop reeling, give line, wait for re-entry. */
#bite-indicator[data-state="surge"],#bite-indicator[data-state="airborne"]{color:#f1a17c;border-color:#f1a17c;background:#38221caa;animation:bite-pulse 1s ease-in-out infinite}#bite-indicator[data-state="airborne"] svg{transform:rotate(-35deg)}#reel[data-jump-danger="true"]{border-color:#f1a17c;color:#f1a17c;background:#442a21c9}#reel[data-jump-danger="true"] .action-icon{color:#f1a17c}#bite-indicator[data-state="surge"]~.actions #payout,#bite-indicator[data-state="airborne"]~.actions #payout{border-color:#b9d4e3;background:#24404fc9}

@media(prefers-reduced-motion:reduce){#bite-indicator[data-state="surge"],#bite-indicator[data-state="airborne"]{animation:none}}

/* Give-line lives beside the fish signal, away from the reel touch target. */
.fight-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:8px}
.fight-actions:has(#bite-indicator[hidden]):has(#payout[hidden]){display:none}
.fight-actions #bite-indicator{margin-right:0;flex:none}
.fight-actions #payout{min-width:132px;min-height:52px;padding:10px 14px;gap:9px;flex-direction:row;border-color:#b9d4e370;background:#172a33c9}
.fight-actions #payout .action-icon{width:25px;height:25px;flex:none;color:#b9d4e3}
.fight-actions #payout[aria-pressed="true"]{background:#315461e6;border-color:#c6e5f2}
.fight-actions #bite-indicator[data-state="surge"]~#payout,.fight-actions #bite-indicator[data-state="airborne"]~#payout{border-color:#b9d4e3;background:#24404fc9}
@media(max-height:450px){.fight-actions{margin-bottom:4px;gap:14px}.fight-actions #payout{min-height:48px}}

/* Keep weather below the distance readout, not on its numerals. */
@media(min-height:451px){#scene[data-fighting="true"] .location{top:calc(var(--reel-y,60%) + 48px);bottom:auto}}

/* Lower the line readouts together, keeping clean gaps above the weather. */
@media(min-height:451px){.hud.left{top:calc(var(--reel-y,70%) - 80px)}#fight-distance{top:calc(var(--reel-y,70%) + 15px)}#scene[data-fighting="true"] .location{top:calc(var(--reel-y,60%) + 65px)}}
.location-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 18px;font-size:14px;color:#cad0cc}
.location-choice select{min-height:42px;max-width:65%;padding:8px 12px;border:1px solid #65716c;border-radius:8px;background:#20292b;color:#fff;font:inherit}
#tip-tension{position:absolute;left:var(--tip-x,50%);top:var(--tip-y,35%);bottom:auto;width:88px;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;text-shadow:none;filter:none;pointer-events:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#tip-tension #tension-label{display:block;float:none;color:#fff;font-size:14px;font-weight:700;line-height:20px;text-align:right;font-variant-numeric:tabular-nums;transition:color .25s}
#tip-tension .track{height:2px;margin-top:3px;background:#ffffff55;border:0;border-radius:0;box-shadow:none}
#tip-tension[hidden]{display:none}

/* Reserve desktop taskbar clearance even when reel-following labels move. */
#scene{--hud-safe-bottom:max(84px,calc(env(safe-area-inset-bottom,0px) + 70px))}
.location,#scene[data-fighting="true"] .location{top:auto;bottom:var(--hud-safe-bottom)}
.controls{bottom:var(--hud-safe-bottom)}
@media(max-width:600px){.location,#scene[data-fighting="true"] .location{bottom:calc(var(--hud-safe-bottom) + 122px)}}
@media(max-height:450px){#scene{--hud-safe-bottom:max(68px,calc(env(safe-area-inset-bottom,0px) + 60px))}.location,#scene[data-fighting="true"] .location{bottom:var(--hud-safe-bottom)}}

/* A compact lower-right dock keeps the lake open around the touch controls. */
.controls{left:auto;right:max(16px,calc(env(safe-area-inset-right,0px) + 10px));width:min(268px,calc(100% - 28px));gap:7px;align-items:flex-end}
.controls .actions{display:grid;grid-template-columns:72fr 88fr 96fr;gap:6px;width:100%;max-width:none;flex-wrap:nowrap}
.controls .actions #equipment,.controls .actions #cast,.controls .actions #reel{grid-column:auto;grid-row:auto;width:100%;min-width:0;min-height:50px;padding:6px 5px;gap:3px;flex-direction:column;font-size:.875rem;line-height:1.2;white-space:nowrap}
.controls .actions .action-icon{width:19px;height:19px}
.controls #hint{max-width:100%;font-size:.875rem;line-height:1.35;text-align:right}
.controls #cast-power{width:min(210px,100%)}
.controls .fight-actions{gap:8px;margin-bottom:0}
.controls .fight-actions #payout{min-width:116px;min-height:44px;padding:7px 9px;font-size:.875rem;gap:6px}
.controls .fight-actions #payout .action-icon{width:20px;height:20px}
@media(max-width:600px){.controls{width:min(236px,calc(100% - 24px));right:max(12px,calc(env(safe-area-inset-right,0px) + 8px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 10px))}.controls .actions{grid-template-columns:66fr 76fr 82fr;gap:6px}.controls .actions #equipment,.controls .actions #cast,.controls .actions #reel{min-height:48px;padding:5px 4px}.controls .actions .action-icon{width:18px;height:18px}}
@media(max-height:450px) and (max-width:1000px){.controls{left:auto;bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 10px))}}

/* Icon-only controls retain accessible names and generous touch targets. */
.controls .actions{width:170px;grid-template-columns:repeat(3,52px);gap:7px}
.controls .actions #equipment,.controls .actions #cast,.controls .actions #reel{width:52px;height:52px;min-height:52px;padding:9px;gap:0}
.controls .actions .action-icon{width:29px;height:29px;stroke-width:1.5}
.controls .fight-actions #payout{width:48px;min-width:48px;height:48px;min-height:48px;padding:9px;gap:0}
.controls .fight-actions #payout .action-icon{width:28px;height:28px}
.location,#scene[data-fighting="true"] .location{top:auto;bottom:max(64px,calc(env(safe-area-inset-bottom,0px) + 60px))}
.location .conditions{gap:9px;margin-top:0}
@media(max-width:600px){.controls .actions{width:156px;grid-template-columns:repeat(3,48px);gap:6px}.controls .actions #equipment,.controls .actions #cast,.controls .actions #reel{width:48px;height:48px;min-height:48px;padding:8px}.controls .actions .action-icon{width:28px;height:28px}.location,#scene[data-fighting="true"] .location{bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 18px))}}
@media(max-height:450px) and (max-width:1000px){.location,#scene[data-fighting="true"] .location{bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 18px))}}

/* Compact catch result; fishing controls remain icon-only. */
#fish-status[data-state="caught"]{width:max-content;max-width:calc(100% - 28px);padding:10px 14px}
#fish-status[data-state="caught"] #fish-message{margin:0;font-size:1rem;line-height:1.4}
#fish-record,#hint{display:none}

#selected-bait{position:absolute;left:16px;bottom:calc(env(safe-area-inset-bottom) + 145px);padding:5px;border-radius:8px;background:#101c20b3;pointer-events:none}#selected-bait[hidden]{display:none}#selected-bait img{display:block;width:62px;height:38px;object-fit:contain;border-radius:4px;background:white}

.controls button[aria-pressed="true"]{background:#214d35e6;border-color:#9cecb099;color:#b3ffc7;box-shadow:0 0 12px #6bf69725}

/* A snapped line leaves the angler at the lake until they replace the bait. */
#fish-status[data-state="broken"] #fish-message{color:#ff756e;font-weight:650}
#replace-bait{pointer-events:auto;min-height:44px;margin-top:8px;padding:9px 12px;border:1px solid #ff756e;background:#301b1a;color:#ffb4ae;font-size:14px}
#replace-bait[hidden]{display:none}

/* Keep touch targets inside the browser's visible area and away from the home indicator. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#scene button{-webkit-touch-callout:none}
@media(pointer:coarse){
 .controls{right:max(12px,calc(env(safe-area-inset-right,0px) + 8px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));width:min(252px,calc(100% - 28px))}
 .controls .actions{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .controls .actions #equipment,.controls .actions #cast,.controls .actions #reel{width:100%;height:58px;min-height:58px;padding:10px;border-radius:14px;touch-action:none}
 .controls .actions .action-icon{width:28px;height:28px}
 .controls .fight-actions #payout{min-height:52px;min-width:80px;border-radius:13px;touch-action:none}
 .top-actions button{min-height:46px;touch-action:manipulation}
 #fish-status{max-width:calc(100% - 32px);left:max(16px,env(safe-area-inset-left));top:max(82px,calc(env(safe-area-inset-top) + 70px));right:auto}
 #replace-bait{min-height:48px;touch-action:manipulation}
 .location,#scene[data-fighting="true"] .location{bottom:max(154px,calc(env(safe-area-inset-bottom,0px) + 140px));left:max(16px,env(safe-area-inset-left))}
 #rod-picker{max-height:calc(100dvh - 24px);padding:20px;overscroll-behavior:contain}
}
@media(pointer:coarse) and (max-height:500px){
 .controls{width:196px;bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 8px))}
 .controls .actions{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
 .controls .actions #equipment,.controls .actions #cast,.controls .actions #reel{width:100%;height:50px;min-height:50px;padding:8px}
 .location,#scene[data-fighting="true"] .location{bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px))}
 #fish-status{top:70px}
}

/* Weather sits low on the left; the catch caption is centered under the fish. */
.location,#scene[data-fighting="true"] .location{top:auto;bottom:max(36px,calc(env(safe-area-inset-bottom,0px) + 18px))}
#fish-status[data-state="caught"]{left:50%;right:auto;top:77%;bottom:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:center;text-shadow:0 2px 8px #000,0 1px 3px #000}
#fish-status[data-state="caught"] #fish-message{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0;line-height:1.15;font-weight:500}
.catch-name{font-size:clamp(18px,2.5vw,26px);color:#f4f5ee;letter-spacing:.025em}
.catch-weight{display:flex;justify-content:center;gap:14px;font-size:clamp(28px,4vw,40px);font-weight:650;font-variant-numeric:tabular-nums;color:#f5d7a2}
.catch-weight small{font-size:.52em;font-weight:450;color:#f2eadb}
@media(max-width:600px),(pointer:coarse){.location,#scene[data-fighting="true"] .location{bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 14px))}}
@media(max-height:500px){#fish-status[data-state="caught"]{top:77%}#fish-status[data-state="caught"] #fish-message{gap:3px}.catch-name{font-size:16px}.catch-weight{font-size:26px;gap:10px}}

/* Floating line and percentage only; dual contrast follows the photograph. */
#tip-tension{width:96px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;text-shadow:none}
#tip-tension #tension-label{font-size:16px;line-height:22px;font-weight:750;text-align:right;text-shadow:0 0 2px var(--tension-shadow,#061116),0 1px 2px var(--tension-shadow,#061116)}
#tip-tension .track{height:4px;margin-top:3px;border-radius:2px;box-shadow:0 0 0 1px var(--tension-edge,#061116),0 1px 3px var(--tension-shadow,#061116)}
#tip-tension #tension{border-radius:2px;transition:width .08s,background .25s}
#audio-enable{min-width:44px;justify-content:center;padding:10px}
#audio-enable[data-status="ready"]{color:#b9edc5;border-color:#b9edc5aa}
#audio-enable[data-status="blocked"],#audio-enable[data-status="error"]{color:#ffe0a0;border-color:#ffe0a0aa}
#audio-status{position:absolute;top:max(65px,calc(env(safe-area-inset-top) + 51px));right:max(14px,env(safe-area-inset-right));max-width:250px;margin:0;padding:7px 10px;border-radius:8px;background:#08171ceb;color:#fff2d5;font-size:12px;line-height:1.4;pointer-events:none;z-index:3}
#audio-status[hidden]{display:none}
@media(max-width:600px){.top-actions #fullscreen span{display:none}.top-actions{max-width:calc(100% - 28px)}}

#tip-tension .track{height:var(--pull-thickness,4px);box-shadow:0 0 0 1px var(--tension-edge,#061116),0 1px 3px var(--tension-shadow,#061116),0 0 var(--pull-glow,2px) var(--tension-edge,#061116)}
#fight-distance{left:var(--readout-x,65%);top:var(--readout-y,65%);font-variant-numeric:tabular-nums}

/* Keep the complete metre value on one line beside the reel. */
#fight-distance{white-space:nowrap}

/* The release control shares the reel's exact third-column alignment. */
.controls{--action-width:170px;--action-gap:7px}
.controls .actions{width:var(--action-width);grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--action-gap)}
.controls .fight-actions{display:grid;width:var(--action-width);grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--action-gap);align-items:center;margin-bottom:0}
.controls .fight-actions:has(#bite-indicator[hidden]):has(#payout[hidden]){display:none}
.controls .fight-actions #bite-indicator{grid-column:2;justify-self:center;width:52px;height:52px;margin:0}
.controls .fight-actions #payout{grid-column:3;width:100%;min-width:0;height:58px;min-height:58px;padding:6px 3px;display:flex;flex-direction:column;gap:3px;touch-action:none;-webkit-user-select:none;user-select:none}
.controls .fight-actions #payout[hidden]{display:none}
.controls .fight-actions #payout .action-icon{width:27px;height:27px}
.payout-label{font:500 10px/1.1 system-ui;color:#d6eaf0}
@media(max-width:600px){.controls{--action-width:156px;--action-gap:6px}}
@media(pointer:coarse){.controls{--action-width:100%;--action-gap:8px}.controls .fight-actions #bite-indicator{width:56px;height:56px}}

.top-actions #time-skip{width:54px;height:54px;min-height:54px;flex:none;border-radius:50%;padding:3px;gap:0;flex-direction:column;justify-content:center;color:#f1d9aa}#time-skip-icon{display:block;font-size:30px;line-height:30px}#time-skip small{font-size:10px;line-height:13px;font-weight:650}#time-toast{position:absolute;z-index:4;top:max(82px,calc(env(safe-area-inset-top) + 68px));right:22px;margin:0;padding:7px 12px;background:#10262ee6;border-radius:12px;color:#ffe3a5;font-size:18px;pointer-events:none}#time-toast:empty{display:none}@keyframes time-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){#time-skip-icon{animation:none!important}}

#storm-glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(180deg,#e7f1ff 0%,#d6e6ff88 48%,transparent 85%)}
@media(prefers-reduced-motion:reduce){#storm-glow{display:none}}

/* Persistent one-tap tackle-box shortcut. Keep it above weather/depth HUD. */
#selected-bait{left:max(16px,env(safe-area-inset-left));z-index:8;pointer-events:auto;cursor:pointer;touch-action:manipulation;min-height:56px;width:80px;padding:6px 10px 6px 6px;border:1px solid #abc9bf8c;border-radius:12px;background:#10262be8;box-shadow:0 3px 12px #0004;transition:border-color .18s,background .18s}
#selected-bait img{width:62px;height:40px}
#selected-bait .bait-box-icon{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;padding:3px;border-radius:7px;border:1px solid #b7cfbf;background:#244439;color:#e1edc6;stroke-width:2}
#selected-bait:hover:not(:disabled){background:#25473f;border-color:#e6ce94}
#selected-bait:active:not(:disabled){transform:scale(.96)}
#selected-bait:disabled{cursor:default;opacity:1}
#selected-bait[data-empty="true"] img{display:none}
#selected-bait[data-empty="true"]::before{content:"+";width:62px;text-align:center;font-size:28px;color:#e9d3a1}

#world-temperature{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:inherit;letter-spacing:normal}

/* Two controls fit their dock exactly, including on touch screens. */
#scene .controls{--action-width:112px;--action-gap:8px;width:var(--action-width);right:max(8px,env(safe-area-inset-right,0px))}
#scene .controls .actions,#scene .controls .fight-actions{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--action-gap)}
#scene .controls .actions #cast,#scene .controls .actions #reel{width:100%;height:52px;min-height:52px;grid-column:auto;padding:9px}
#scene .controls .fight-actions #bite-indicator{grid-column:1;width:48px;height:48px}
#scene .controls .fight-actions #payout{grid-column:2;height:52px;min-height:52px}
#scene .controls #cast-power{width:180px}
@media(pointer:coarse){#scene .controls{--action-width:124px}#scene .controls .actions #cast,#scene .controls .actions #reel{height:58px;min-height:58px}#scene .controls .fight-actions #payout{height:58px;min-height:58px}}

#scene #cast[data-recast="true"] .action-icon{color:#ffe5a2;stroke-width:1.9}

#scene #bottom-status{display:none!important}

/* One extra feeder-only action fits to the left of cast/reel, including phones. */
.controls .actions #feed{position:relative;grid-column:auto;grid-row:auto;width:52px;height:52px;min-height:52px;padding:9px;color:#e8e3d8;touch-action:manipulation}
#feed[hidden]{display:none!important}#feed-count{position:absolute;right:3px;top:2px;font-size:11px;font-weight:700;line-height:1.3;border-radius:5px;padding:1px 3px;background:#183037;color:#ffe0a0;min-width:16px}#feed:disabled{opacity:.45}
@media(max-width:600px){.controls .actions #feed{width:48px;height:48px;min-height:48px;padding:8px}}
.controls .actions{width:111px;grid-template-columns:repeat(2,52px)}
.controls .actions:has(#feed:not([hidden])){width:170px;grid-template-columns:repeat(3,52px)}
@media(max-width:600px){.controls .actions{width:102px;grid-template-columns:repeat(2,48px)}.controls .actions:has(#feed:not([hidden])){width:156px;grid-template-columns:repeat(3,48px)}}

/* Feed uses the same dock, target size and icon colour as the reel controls. */
#scene .controls:has(#feed:not([hidden])){--action-width:172px}
#scene .controls .actions:has(#feed:not([hidden])){width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
#scene .controls .actions #feed{width:100%;height:52px;min-height:52px;padding:9px;gap:0}
#scene .controls .actions #feed .action-icon{color:inherit}
@media(pointer:coarse){#scene .controls:has(#feed:not([hidden])){--action-width:190px}#scene .controls .actions #feed{height:58px;min-height:58px}}

#scene .controls .actions #feed[data-feed-warning="soon"]{border-color:#f1ae4d;background:#775127;color:#ffd166;opacity:1;animation:feed-warning 1s ease-in-out infinite alternate}
#scene .controls .actions #feed[data-feed-warning="expired"]{border-color:#ff8376;background:#763d36;color:#ffaaa0;opacity:1;animation:feed-expired .7s ease-in-out infinite alternate}
@keyframes feed-warning{to{box-shadow:0 0 0 3px #efab5055,0 0 20px #f0924055;filter:brightness(1.35)}}
@keyframes feed-expired{to{box-shadow:0 0 0 3px #ff554466,0 0 20px #ff554477;filter:brightness(1.35)}}
@media(prefers-reduced-motion:reduce){#scene .controls .actions #feed[data-feed-warning="soon"],#scene .controls .actions #feed[data-feed-warning="expired"]{animation:none}#feed[data-feed-warning="soon"]{box-shadow:0 0 0 3px #efab5066}#feed[data-feed-warning="expired"]{box-shadow:0 0 0 3px #ff554466}}

#reel .strike-label{position:absolute;right:0;bottom:calc(100% + 6px);padding:5px 10px;border-radius:8px;background:#28463be8;color:#ffdf91;font:650 13px system-ui;white-space:nowrap}