.sub-hud{position:fixed;z-index:32;bottom:18px;left:50%;transform:translateX(-50%);width:min(730px,calc(100% - 28px));max-width:none;padding:14px 18px;border:2px solid #243e40;border-radius:10px;background:#eae4cfee;color:#253f3e;text-align:left;pointer-events:auto;box-shadow:0 5px 0 #233f4255;font-size:14px}
.sub-hud[data-view=cockpit]{background:#eae4cff5}.sub-hud[data-view=cockpit] .dive-instructions{display:none}.sub-hud[data-view=cockpit] .dive-readings{margin:5px 0}.sub-hud[data-view=cockpit] .dive-readings output{font-size:20px}.sub-hud[data-view=cockpit] .dive-actions{justify-content:flex-start;gap:6px}
.dive-top,.dive-actions,.dive-readings{display:flex;align-items:center;justify-content:space-between;gap:14px}.dive-top strong{letter-spacing:1px;font-size:14px}.dive-top button,.dive-actions button{font-size:14px;min-height:38px;padding:6px 11px}.dive-readings{margin:10px 0}.dive-readings>div{flex:1}.dive-readings output{display:block;font-size:24px;font-variant-numeric:tabular-nums}.dive-readings span{font-size:12px;text-transform:uppercase;letter-spacing:.7px}.dive-course{position:relative;height:10px;border-radius:6px;background:linear-gradient(90deg,#b46d55 0%,#d4b76a 25%,#83a78c 42%,#83a78c 58%,#d4b76a 75%,#b46d55 100%);margin:0 0 9px}.dive-course:before{content:'';position:absolute;width:2px;background:#27413d;height:18px;top:-4px;left:50%}.dive-course i{display:block;width:13px;height:13px;border:2px solid #243e40;background:#fff3ce;position:absolute;top:-2px;left:50%;transform:translateX(-50%);border-radius:50%}.dive-status{font-size:14px;line-height:1.4;min-height:20px;margin:5px 0}.dive-instructions{font-size:12px;margin:8px 0 0;color:#3a5650}.dive-touch{display:flex;gap:4px}.dive-touch button{touch-action:none;min-width:44px;padding:5px}.dive-touch button:active{background:#7fa9a5}.dive-actions{gap:8px;flex-wrap:wrap}.dive-throttle{display:flex;gap:6px;align-items:center;font-size:12px}.dive-throttle input{width:90px;min-height:32px}
body[data-underwater=true]>.topbar,body[data-underwater=true]>footer,body[data-underwater=true] .map,body[data-underwater=true] #jump,body[data-underwater=true] #joystick{display:none}body[data-underwater=true] #surface{left:auto;right:16px;top:16px;bottom:auto;transform:none;z-index:34;font-size:14px;white-space:normal;padding:10px 14px}
@media(max-width:600px){.sub-hud{bottom:9px;padding:10px 12px}.dive-top strong{font-size:12px}.dive-top{gap:4px}.dive-readings{gap:7px;margin:7px 0}.dive-readings output{font-size:20px}.dive-readings span{font-size:12px;letter-spacing:0}.dive-instructions{display:none}.dive-actions{gap:4px}.dive-actions button{font-size:12px;padding:6px}.dive-touch button{min-width:38px}.dive-status{font-size:12px}}