/* Browser chrome, notches and the home indicator stay outside the play controls. */
#ocean{left:var(--view-left,0px);top:var(--view-top,0px);right:auto;bottom:auto;width:var(--view-width,100vw);height:var(--view-height,100dvh)}
[hidden]{display:none!important}
body.swimming{touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.playing .topbar{top:var(--view-top,0px);padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.hud{top:calc(var(--view-top,0px) + 80px + env(safe-area-inset-top));bottom:calc(var(--view-bottom,0px) + max(16px,env(safe-area-inset-bottom)));left:calc(var(--view-left,0px) + max(16px,env(safe-area-inset-left)));right:max(16px,env(safe-area-inset-right))}
dialog{max-height:calc(var(--view-height,100dvh) - 32px);overscroll-behavior:contain;touch-action:pan-y}
.touch-hint,.steer-control{display:none}.held-action{border-color:#c6ffe7!important;background:#296b69!important;box-shadow:0 0 25px #98ffe64d!important}.action-button.recharging{color:#a6c1d4}.action-button{touch-action:none}.action-button:active{transform:none}
.steer-control{position:absolute;bottom:0;left:0;pointer-events:auto;text-align:center;width:132px}
#steer-pad{width:128px;height:128px;padding:0;position:relative;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#1d586e66,#041d32bb);border:1px solid #b5ffe058;box-shadow:inset 0 0 30px #00101b80;touch-action:none;-webkit-touch-callout:none;transform:none}
.steer-cross{font-size:92px;font-weight:200;color:#b5ffe025;line-height:1}#steer-knob{position:absolute;width:49px;height:49px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#d0ffed,#6cb7bb);border:2px solid #dcfff599;box-shadow:0 3px 18px #001a2477;pointer-events:none;will-change:transform}
#steer-caption{display:block;font-size:9px;letter-spacing:1.2px;color:#b9ddd9;margin-top:7px}
.touch-layout .touch-hint{display:inline}.touch-layout .keyboard-hint{display:none!important}.touch-layout .hero-controls .touch-hint{font-size:12px}.touch-layout .steer-control{display:block}
.touch-layout.playing .topbar{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}.touch-layout.playing .brand{font-size:23px}.touch-layout.playing .icon-button{height:44px;min-width:44px}.touch-layout.playing #journal{font-size:12px;padding:0 12px}
.touch-layout .hud{top:calc(var(--view-top,0px) + 76px + env(safe-area-inset-top))}.touch-layout .hud-top{gap:16px}.touch-layout .score-panel{min-width:94px;padding:5px 9px}.touch-layout .score-panel>strong{font-size:30px}.touch-layout .score-panel #combo:empty{display:none}.touch-layout .run-xp{font-size:10px}.touch-layout .journey{flex:1;width:auto;max-width:430px;margin-top:4px}.touch-layout .journey-label{font-size:10px;letter-spacing:0;gap:12px}.touch-layout .journey-destination{font-size:11px;margin-top:8px}.touch-layout .life-panel{min-width:0;padding:4px 8px;gap:10px}.touch-layout .life-panel>span{font-size:16px;letter-spacing:1px}.touch-layout .hud kbd{display:none}
.touch-layout .hud-bottom{left:auto;right:0;bottom:0;width:240px;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0}.touch-layout .ability{width:100%;min-width:0}.touch-layout .ability .hud-label{font-size:9px;letter-spacing:.5px;white-space:nowrap}.touch-layout .ability small,.touch-layout .control-hint{display:none}.touch-layout .ability-track{margin:8px 0}.touch-layout .hud .action-button{width:100%;height:68px;min-height:44px;margin:0;padding:8px;border-radius:18px;font-size:16px;font-weight:600}.touch-layout .boost .action-button{font-size:14px}
.touch-layout .navigator{width:242px;left:50%;transform:translateX(-50%);bottom:8px;display:grid;grid-template-columns:1fr 1.6fr;backdrop-filter:none}.touch-layout #minimap,.touch-layout #depth-layer,.touch-layout #course-label{display:none}.touch-layout #open-map{grid-column:1;grid-row:1}.touch-layout #open-map>span{min-height:48px;justify-content:center;font-size:12px;padding:7px}.touch-layout .dive-controls{grid-column:2;grid-row:1;margin:0;padding:3px;gap:4px}.touch-layout .dive-controls button{min-height:44px;min-width:44px;font-size:11px;padding:5px}.touch-layout .depth-readout{grid-column:1/3;padding:0 10px 7px;font-size:10px}.touch-layout #stop-course{grid-column:1/3;min-height:36px;margin:0 6px 6px;font-size:11px}.touch-layout .camera-controls{bottom:139px;gap:6px}.touch-layout .camera-controls button{width:44px;height:44px}.touch-layout .camera-controls span{font-size:11px}
.touch-layout .announcement{top:112px;font-size:16px;line-height:1.4;min-width:0;width:65%;max-width:600px;padding:10px 16px;backdrop-filter:none}.touch-layout .sighting{bottom:140px;max-width:65%;padding:10px 18px;left:50%}.touch-layout .sighting small{display:none}.touch-layout .sighting strong{font-size:18px}.touch-layout #travel-action{bottom:125px;max-width:50%;min-height:44px;padding:11px 16px;font-size:13px}.touch-layout #capture-warning{top:113px;max-width:80%}.touch-layout .toast{bottom:calc(var(--view-bottom,0px) + 190px);max-width:85%;width:max-content;font-size:12px}.touch-layout .map-destination,.touch-layout .secondary-button{min-height:44px}
@media(max-width:700px){
 .touch-layout .hud{top:calc(var(--view-top,0px) + 68px + env(safe-area-inset-top));left:calc(var(--view-left,0px) + max(12px,env(safe-area-inset-left)));right:max(12px,env(safe-area-inset-right))}.touch-layout.playing .topbar{height:calc(60px + env(safe-area-inset-top));padding-left:12px;padding-right:12px}.touch-layout.playing .brand{font-size:20px;gap:5px}.touch-layout.playing .brand-symbol{width:24px}.touch-layout.playing .top-actions{gap:4px}.touch-layout.playing #journal{font-size:10px;padding:0 8px}.touch-layout.playing #fullscreen{display:none}
 .touch-layout .hud-top{gap:8px}.touch-layout .score-panel{min-width:62px;padding:4px 6px}.touch-layout .score-panel .hud-label{font-size:8px}.touch-layout .score-panel>strong{font-size:25px}.touch-layout .run-xp{font-size:8px}.touch-layout .journey-label{font-size:8px;gap:8px}.touch-layout .journey-destination{font-size:9px}.touch-layout .life-panel{padding:3px;gap:3px;flex-direction:column}.touch-layout .life-panel>span{font-size:12px;letter-spacing:0;max-width:75px;white-space:normal}.touch-layout .journey{max-width:none}
 .touch-layout .steer-control{width:108px}#steer-pad{width:104px;height:104px}#steer-knob{width:43px;height:43px}.steer-cross{font-size:78px}.touch-layout .hud-bottom{width:49%;max-width:205px;gap:8px}.touch-layout .hud .action-button{height:64px;font-size:14px}.touch-layout .boost .action-button{font-size:12px}.touch-layout .ability .hud-label{font-size:8px;letter-spacing:0}
 .touch-layout .navigator{bottom:144px;left:0;transform:none;width:100%;grid-template-columns:1fr 1.7fr}.touch-layout #open-map>span{font-size:12px}.touch-layout .dive-controls button{font-size:12px}.touch-layout .camera-controls{bottom:232px}.touch-layout .announcement{top:107px;width:96%;font-size:13px;padding:9px 12px}.touch-layout .sighting{bottom:285px;max-width:90%;width:max-content}.touch-layout .sighting>span{font-size:8px}.touch-layout #travel-action{bottom:225px;left:0;transform:none;max-width:calc(100% - 135px);font-size:11px;padding:9px}.touch-layout #capture-warning{top:107px;font-size:12px}.touch-layout .toast{bottom:calc(var(--view-bottom,0px) + 150px)}
}
@media(max-height:540px) and (orientation:landscape){
 .touch-layout.playing .topbar{height:calc(46px + env(safe-area-inset-top));padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}.touch-layout.playing .brand{font-size:18px}.touch-layout .hud{top:calc(var(--view-top,0px) + 51px + env(safe-area-inset-top));bottom:calc(var(--view-bottom,0px) + max(8px,env(safe-area-inset-bottom)))}.touch-layout .score-panel{min-width:70px;padding:2px 6px}.touch-layout .score-panel>strong{font-size:21px}.touch-layout .score-panel .hud-label{font-size:8px}.touch-layout .run-xp{font-size:8px}.touch-layout .journey{margin-top:1px}.touch-layout .journey-label{font-size:8px}.touch-layout .journey-destination{font-size:9px;margin-top:5px}.touch-layout .journey-track{margin-top:6px}.touch-layout .life-panel{padding:0 5px;flex-direction:row}.touch-layout .life-panel>span{font-size:13px;max-width:none;white-space:nowrap}
 .touch-layout .steer-control{width:98px}#steer-pad{width:96px;height:96px}#steer-knob{width:40px;height:40px}#steer-caption{font-size:7px;margin-top:3px}.touch-layout .hud-bottom{width:174px;gap:8px}.touch-layout .hud .action-button{height:54px;font-size:13px}.touch-layout .boost .action-button{font-size:12px}.touch-layout .ability .hud-label{font-size:8px}.touch-layout .ability-track{margin:5px 0}
 .touch-layout .navigator{bottom:0;left:48%;transform:translateX(-50%);width:216px;grid-template-columns:1fr 1.6fr}.touch-layout #open-map>span{font-size:10px;min-height:48px;padding:5px}.touch-layout .dive-controls button{font-size:10px;min-height:44px;padding:3px}.touch-layout .depth-readout{font-size:9px;padding:0 8px 6px}.touch-layout #stop-course{display:none}.touch-layout .camera-controls{bottom:104px}.touch-layout .camera-controls button{height:44px;width:44px}.touch-layout .camera-controls span{font-size:9px}.touch-layout .announcement{top:64px;font-size:11px;width:58%;padding:6px 10px}.touch-layout .sighting{top:64px;left:0;bottom:auto;transform:none;max-width:25%;padding:8px}.touch-layout .sighting strong{font-size:14px}.touch-layout .sighting>span{font-size:7px}.touch-layout #travel-action{bottom:80px;left:48%;transform:translateX(-50%);max-width:45%;font-size:11px;padding:8px 12px}.touch-layout #capture-warning{top:64px;padding:7px 12px;width:280px}.touch-layout .toast{bottom:calc(var(--view-bottom,0px) + 115px);font-size:11px}
}
@media(max-width:600px) and (orientation:landscape){.touch-layout .hud-bottom{width:142px}.touch-layout .navigator{left:47%;width:194px}.touch-layout .dive-controls button{font-size:9px}.touch-layout .navigator #open-map>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){#steer-knob{will-change:auto}}

@media(max-width:700px) and (orientation:portrait){.touch-layout .hud.has-course .camera-controls{bottom:276px}.touch-layout .hud.has-course #travel-action{bottom:269px}.touch-layout .hud.has-course .sighting{bottom:329px}}
.touch-layout .navigator button:hover,.touch-layout .top-actions button:hover,.touch-layout .action-button:hover{transform:none}