@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap";
:root{--paper:#f8f7f0;--ink:#234b47;--muted:#7b867b;--coral:#d97756;--line:#e4e5d9;--mint:#e6ecdf}*{box-sizing:border-box}html,body{background:var(--paper);min-height:100%;color:var(--ink);margin:0}body{font-family:DM Sans,Arial,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:0}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible{outline-offset:5px;outline:3px solid #c78849}button:hover{filter:brightness(.95)}button,button svg{flex-shrink:0}button{transition:background .2s,color .2s,transform .2s}a{color:inherit;text-decoration:none}.app-shell{max-width:2000px;margin:0 auto;padding:0 38px}.topbar{justify-content:space-between;align-items:center;gap:20px;height:94px;display:flex}.brand{letter-spacing:-1.2px;align-items:center;gap:11px;font-family:Manrope,sans-serif;font-size:25px;font-weight:800;display:flex}.brand svg{width:43px;height:42px}.brand-dot{vertical-align:super;margin-left:3px;font-size:10px;font-weight:500}.header-tagline{letter-spacing:2.4px;margin-left:5%;font-size:9px;font-weight:600}.topbar nav{align-items:center;gap:20px;display:flex}.achievements-button{align-items:center;gap:9px;font-size:12px;font-weight:550;display:flex}.achievements-button b{background:#eceee3;border-radius:6px;margin-left:3px;padding:5px 8px;font-size:11px;font-weight:600}.achievements-button i{color:#8a9184;font-size:10px;font-style:normal}.nav-divider{background:var(--line);width:1px;height:22px}.icon-button{justify-content:center;align-items:center;width:28px;height:32px;padding:0;display:flex}.ride-stage{background:#bdd2c0;border-radius:18px;height:calc(100svh - 263px);min-height:450px;max-height:940px;position:relative;overflow:hidden}.scene{position:absolute;inset:0}.scene canvas{width:100%;height:100%;display:block}.scene-grain{pointer-events:none;background:linear-gradient(90deg,#e5e4c170,#0000 42%),linear-gradient(#0000 78%,#10312b3b);position:absolute;inset:0}.intro{pointer-events:none;position:absolute;top:43px;left:42px}.eyebrow{letter-spacing:2px;align-items:center;gap:9px;font-size:9px;font-weight:650;display:flex}.eyebrow>span{border:1.5px solid;border-radius:50%;width:6px;height:6px}h1{letter-spacing:-3px;margin:23px 0 17px;font-family:Manrope,sans-serif;font-size:clamp(36px,3.9vw,61px);font-weight:600;line-height:1.16}h1 em{color:#48756a;font-style:normal}.intro p{color:#52746a;margin:0;font-size:12px;line-height:1.8}.location{letter-spacing:1.6px;align-items:center;gap:8px;margin-top:29px;font-size:8px;font-weight:600;display:flex}.location-line{background:#618275;width:24px;height:1px;margin-right:3px}.location-dot{font-size:12px}.world-controls{flex-direction:column;align-items:flex-end;gap:13px;display:flex;position:absolute;top:28px;right:27px}.time-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fbf6e3bd;border:1px solid #fcf7e894;border-radius:30px;align-items:center;gap:9px;padding:11px 15px;font-size:11px;display:flex;box-shadow:0 2px 4px #48625004}.time-dot{background:#bbad79;border-radius:50%;width:5px;height:5px;margin-left:12px}.coordinates{letter-spacing:1.7px;opacity:.6;margin-right:9px;font-size:8px}.scene-bottom{justify-content:space-between;align-items:flex-end;display:flex;position:absolute;bottom:25px;left:29px;right:26px}.autopilot-status{color:#f9f5e5;text-shadow:0 1px 10px #29433755;grid-template-columns:8px 1fr;gap:5px 10px;display:grid}.status-light{background:#d0e8b9;border-radius:50%;width:6px;height:6px;margin-top:4px;box-shadow:0 0 0 4px #d0e8b921}.status-light.manual{background:#ffd592}.autopilot-status strong{font-size:11px;font-weight:500}.autopilot-status>span:last-child{color:#f0f0dbb5;grid-column:2;font-size:9px}.camera-wrap{position:relative}.camera-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#faf5e5e0;border-radius:9px;align-items:center;gap:10px;padding:12px 15px;font-size:10px;display:flex}.camera-button>svg:last-child{margin-left:12px}.camera-menu{background:var(--paper);z-index:5;border-radius:12px;width:215px;padding:7px;position:absolute;bottom:51px;right:0;box-shadow:0 8px 35px #15363030}.camera-menu button{text-align:left;border-radius:7px;align-items:center;gap:11px;width:100%;padding:11px 8px;font-size:12px;display:flex}.camera-menu button[aria-pressed=true]{background:var(--mint)}.camera-menu button svg{margin-left:auto}.camera-number{color:#8e9a88;font-size:9px}.dashboard{border:1px solid var(--line);background:#fbfaf5;border-radius:12px;justify-content:space-between;align-items:center;min-height:94px;margin-top:17px;padding:17px 24px;display:flex}.ride-stats{gap:0;display:flex}.stat{border-right:1px solid var(--line);align-items:center;gap:15px;padding:0 35px;display:flex}.stat:first-child{padding-left:0}.stat:last-child{border:0}.stat-icon{color:#638073;background:#eff0e6;border-radius:50%;place-items:center;width:41px;height:41px;display:grid}.fish-stat .stat-icon{color:#b48b4b;background:#f3eedc}.stat label{letter-spacing:1.7px;color:#899080;margin-bottom:4px;font-size:8px;font-weight:600;display:block}.stat strong{letter-spacing:-1px;align-items:baseline;gap:8px;font-family:Manrope,sans-serif;font-size:28px;font-weight:600;line-height:1;display:flex}.stat strong span{letter-spacing:0;color:#8b9286;font:10px DM Sans,sans-serif}.ride-actions{align-items:center;gap:13px;display:flex}.autopilot-button{border:1px solid var(--line);background:#f2f4e9;border-radius:9px;align-items:center;gap:9px;padding:12px 15px;font-size:11px;display:flex}.autopilot-button.active{background:#e9eedf;border-color:#dce4cf}.toggle{background:#bcc4b4;border-radius:20px;width:27px;height:15px;margin-left:7px;padding:3px}.toggle i{background:#fffef4;border-radius:50%;width:9px;height:9px;transition:transform .2s;display:block}.active .toggle{background:#6d8a60}.active .toggle i{transform:translate(12px)}.pause-button{border:1px solid var(--line);border-radius:9px;place-items:center;width:42px;height:42px;display:grid}.controls-footer{justify-content:space-between;align-items:center;gap:16px;height:57px;display:flex}.keyboard-controls{align-items:center;gap:24px;display:flex}.control-hint{align-items:center;gap:4px;display:flex}kbd{color:#747e71;background:#fafbf4;border:1px solid #dfe1d7;border-bottom-width:2px;border-radius:4px;place-items:center;min-width:20px;height:20px;font-family:inherit;font-size:8px;display:grid}.space-key{padding:0 7px;font-size:7px}.control-hint>span{color:#82897d;margin-left:4px;font-size:9px}.footer-note{color:#8b9385;font-size:10px;font-style:italic}.quality-label{color:#8b9285;align-items:center;gap:6px;font-size:8px;display:flex}.quality-label>span:first-child{background:#88a472;border-radius:50%;width:5px;height:5px}.adaptive-label{opacity:.75}.touch-controls{display:none}.loading{color:#426b5c;background:#dde5cf;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:13px;display:flex;position:absolute;inset:0}.loading svg{animation:2s ease-in-out infinite loading}.loading.error svg{animation:none}.loading.error h2{margin:0}.loading.error p{text-align:center;margin:0;line-height:1.7}.loading.error button{background:var(--ink);color:var(--paper);border-radius:7px;padding:12px 25px}.pause-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f8f7efeb;border-radius:30px;align-items:center;gap:12px;padding:15px 23px;display:flex;position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px 25px #173e4022}.achievement-toast{z-index:3;background:#faf7e8ef;border-radius:11px;align-items:center;gap:13px;padding:13px 19px;animation:.4s toast;display:flex;position:absolute;top:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 35px #234b4722}.achievement-toast>div{color:#b58c43;background:#ebe8cf;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.achievement-toast>span{flex-direction:column;gap:4px;display:flex}.achievement-toast small{letter-spacing:1.6px;color:#96997a;font-size:7px}.achievement-toast strong{font-size:12px;font-weight:500}.achievement-toast>svg{color:#8ba072;margin-left:12px}.catch-pop{color:#fff4ba;text-shadow:0 1px 6px #735a35;pointer-events:none;gap:5px;font-size:20px;font-weight:700;animation:.9s ease-out forwards catch;display:flex;position:absolute;top:44%;left:51%}dialog{background:var(--paper);width:min(760px,100% - 32px);max-height:85svh;color:var(--ink);border:1px solid #e4e5d9;border-radius:22px;padding:0;box-shadow:0 30px 100px #132c3955}dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#173e4770}.dialog-content{padding:37px;position:relative}.dialog-close{position:absolute;top:20px;right:21px}.dialog-content h2{letter-spacing:-1.5px;margin:20px 0 10px;font-family:Manrope,sans-serif;font-size:35px;font-weight:550}.dialog-content>p{color:#85907f;font-size:12px;line-height:1.8}.achievement-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:26px;display:grid}.achievement-card{border:1px solid var(--line);border-radius:11px;align-items:center;gap:11px;min-height:85px;padding:15px 12px;display:flex}.achievement-card>div{flex:1}.badge-icon{color:#a1aa94;background:#edeee4;border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;display:grid}.badge-icon svg{width:18px}.achievement-card strong{font-size:11px;font-weight:550;display:block}.achievement-card div>span{color:#929987;margin-top:4px;font-size:9px;display:block}.progress-track{background:#e7e9db;border-radius:3px;height:3px;margin-top:9px;overflow:hidden}.progress-track i{background:#b0bd97;height:100%;display:block}.achievement-card.earned{background:#edf1e2;border-color:#d6dfc5}.earned .badge-icon{color:#a58543;background:#e8e4cb}.earned .progress-track i{background:#8ba672}.dialog-footnote{color:#939b87;text-align:center;margin-top:22px;font-size:10px}.help-grid{grid-template-columns:1fr 1fr;gap:24px;margin:30px 0;display:grid}.help-grid>div>svg{color:#93a081;margin-bottom:12px;display:block}.help-grid strong{font-size:13px;font-weight:550}.help-grid p{color:#7d8c78;margin-bottom:0;font-size:12px;line-height:1.7}.help-note{background:#e8eddd;border-radius:11px;gap:15px;padding:18px;font-size:11px;line-height:1.7;display:flex}.help-note svg{flex-shrink:0;margin-top:3px}.audio-error{background:var(--paper);z-index:15;border-radius:10px;align-items:center;gap:10px;padding:14px 18px;font-size:12px;display:flex;position:fixed;bottom:15px;left:50%;transform:translate(-50%);box-shadow:0 5px 30px #234b4733}@keyframes loading{50%{transform:translateY(-5px)}}@keyframes toast{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes catch{0%{opacity:1;translate:0}to{opacity:0;translate:0 -45px}}@media (min-width:1500px){.app-shell{padding:0 50px}.topbar{height:106px}.ride-stage{height:calc(100svh - 280px)}.intro{top:52px;left:51px}.intro p{font-size:14px}.eyebrow{font-size:10px}.location{margin-top:33px;font-size:9px}.dashboard{min-height:100px}}@media (max-width:1100px){.header-tagline{display:none}.stat{padding:0 22px}.keyboard-controls{gap:14px}.footer-note{display:none}.intro{top:33px;left:30px}h1{font-size:46px}.app-shell{padding:0 24px}.stat strong span{font-size:9px}.fish-stat strong span{display:none}.ride-stage{min-height:460px}}@media (max-width:760px){.app-shell{padding:0 14px}.topbar{gap:10px;height:76px}.brand{gap:5px;font-size:20px}.brand svg{width:34px}.topbar nav{gap:14px}.achievements-button>span{display:none}.achievements-button{gap:5px}.nav-divider,.topbar nav>.icon-button:first-of-type{display:none}.ride-stage{border-radius:14px;height:calc(100svh - 330px);min-height:400px}.intro{top:26px;left:25px}.eyebrow{letter-spacing:1.5px;font-size:8px}h1{letter-spacing:-2px;margin:17px 0 11px;font-size:38px}.intro p{font-size:10px;line-height:1.7}.location{letter-spacing:1.2px;margin-top:17px;font-size:7px}.world-controls{top:20px;right:17px}.time-button{gap:6px;padding:10px;font-size:9px}.time-dot,.coordinates,.time-button>span:not(.time-dot){display:none}.scene-bottom{bottom:18px;left:20px;right:17px}.autopilot-status strong{font-size:10px}.autopilot-status>span:last-child{max-width:160px;font-size:8px;line-height:1.5}.camera-button{gap:7px;padding:10px;font-size:9px}.camera-button>svg:last-child{margin-left:2px}.dashboard{border-radius:11px;flex-wrap:wrap;row-gap:15px;min-height:85px;margin-top:12px;padding:15px 13px}.ride-stats{justify-content:space-between;width:100%}.stat{gap:9px;padding:0 15px}.stat:last-child{padding-right:0}.stat-icon{width:30px;height:30px}.stat-icon svg{width:18px}.stat strong{gap:5px;font-size:23px}.stat label{letter-spacing:1.25px;font-size:6px}.stat strong span{font-size:8px}.fish-stat strong span{display:none}.ride-actions{border-top:1px solid var(--line);justify-content:space-between;width:100%;padding-top:12px}.autopilot-button{padding:9px 12px;font-size:10px}.pause-button{width:38px;height:33px}.controls-footer{justify-content:space-between;height:36px}.keyboard-controls{display:none}.footer-note{font-size:9px;display:block}.quality-label{font-size:7px}.touch-controls{padding-bottom:env(safe-area-inset-bottom);justify-content:space-between;gap:10px;margin:1px 0 14px;display:flex}.touch-controls>div{gap:7px;display:flex}.touch-controls button{touch-action:none;-webkit-user-select:none;user-select:none;background:#edf0e5;border:1px solid #dfe3d4;border-radius:10px;place-items:center;width:45px;height:44px;display:grid}.touch-controls button:active{background:#ceddc1;transform:translateY(1px)}.touch-controls button svg{width:18px}.touch-controls button span{letter-spacing:1px;font-size:9px;font-weight:600}.achievement-toast{width:240px;padding:10px 13px;top:auto;bottom:76px}.achievement-toast strong{font-size:11px}.dialog-content{padding:32px 22px}.dialog-content h2{font-size:28px}.achievement-grid{grid-template-columns:1fr}.help-grid{grid-template-columns:1fr;gap:20px}.dialog-content .eyebrow{font-size:7px}.dialog-content>p{font-size:11px}.achievement-card strong{font-size:12px}.achievement-card div>span{font-size:10px}.audio-error{width:calc(100% - 30px);bottom:20px}.catch-pop{top:54%}}@media (pointer:coarse) and (min-width:761px){.touch-controls{justify-content:center;gap:30px;padding-bottom:15px;display:flex}.touch-controls>div{gap:8px;display:flex}.touch-controls button{touch-action:none;background:var(--mint);border-radius:8px;place-items:center;width:45px;height:42px;display:grid}.keyboard-controls{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.ride-stage.night .intro{color:#f3f1dc}.ride-stage.night .intro h1 em{color:#c8dfd3}.ride-stage.night .intro p{color:#d8e3d7}.ride-stage.night .location-line{background:#c8dfd3}.ride-stage.night .coordinates{color:#f3f1dc}.ride-stage.night .scene-grain{background:linear-gradient(90deg,#14323f47,#0000 45%),linear-gradient(#0000 75%,#0a1a2840)}
