:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#dcecf4;background:#103b58;--blue:#bad8ee;--ink:#102c3d;--panel:#112d40f5;--line:#b4d1e12e}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button,select{border:1px solid #8bb7d066;border-radius:9px;background:var(--blue);color:var(--ink);font-weight:700}button{padding:11px 14px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}button:hover{background:#d1e7f6}button.active,button[aria-pressed=true]{background:#93c4e6;box-shadow:inset 0 0 0 1px #4e8db9}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #85d7c4;outline-offset:3px}button:disabled{opacity:.55;cursor:default}.quiet{border:0;background:transparent;color:#b9d8ec;font-size:12px;padding:9px}.quiet:hover{background:#b4d1e114}.danger{background:#efb6b2;color:#66262a}.primary{display:flex;justify-content:space-between;width:100%}#saveButton{background:#a2d5bf}.fullWidth{width:100%}h1,h2,h3,p{margin:0}h1,h2{font-family:Georgia,serif;font-weight:500}h2{font-size:22px}h3{font-size:15px}p{font-size:12px;color:#b3cddb;line-height:1.6}small{font-size:9px;letter-spacing:1.1px}a{color:#c0ddef}[hidden]{display:none!important}#world,.vignette{position:fixed;inset:0}#world{touch-action:none;user-select:none;cursor:grab}#world.orbiting{cursor:grabbing}#world canvas{display:block;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(#0a315618,transparent 22%,transparent 85%,#0c294228)}
header{position:fixed;top:16px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:9px;color:#17394b;text-decoration:none;font-family:Georgia,serif;font-size:18px;text-shadow:0 1px 5px #e6f3fa66}.emblem{font-size:30px}nav{display:flex;gap:7px}nav button{padding:10px 14px;box-shadow:0 3px 12px #092a4320}
.topInstruments{position:fixed;top:72px;left:20px;display:flex;align-items:center;gap:15px;padding:12px 15px;border-radius:13px;background:#cce3efed;color:var(--ink);box-shadow:0 5px 22px #0d30421a;pointer-events:none}.motionReadings{display:flex;flex-direction:column;gap:7px;min-width:88px}.motionReadings>div{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:4px}.motionReadings small{grid-column:1/-1;font-size:8px;letter-spacing:1px}.motionReadings strong{font-size:25px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.motionReadings span{font-size:11px;font-weight:700}.windInstrument{width:75px;text-align:center}.windInstrument small{font-size:8px}.windInstrument>span{display:block;font-size:9px;white-space:nowrap}#windDial{height:56px;width:64px;margin:auto}#windDial svg{height:100%;width:100%;overflow:visible}#windArrow{stroke:#145b68;stroke-width:3.3;fill:#145b68;stroke-linecap:round;stroke-linejoin:round}#windArrow path{fill:none}.bowMark{stroke:#547a8a;stroke-width:1;fill:none}.headingInstrument{border-left:1px solid #346a8133;padding-left:13px;min-width:112px}.headingInstrument>small{font-size:8px}.headingRow{display:flex;align-items:center;gap:4px}.headingRow strong{font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:-1px}#headingDial{width:48px;height:48px;color:#174d67}#headingDial svg{width:100%;height:100%}.headingInstrument>span{font-size:9px;display:block}
.floatingHelm{position:fixed;left:18px;bottom:18px;z-index:3;pointer-events:none;text-align:center}.helmAssembly{position:relative;width:154px;height:154px;touch-action:none;user-select:none;filter:drop-shadow(0 2px 3px #08263e99)}#wheel{position:absolute;inset:0;touch-action:none;pointer-events:none;cursor:grab}#wheel:active{cursor:grabbing}#wheel svg{height:100%;width:100%;transform:rotate(var(--wheel-turn,0deg));fill:none;stroke:#c5e2f0;pointer-events:none;stroke-linecap:round}.wheelHit{stroke:transparent;stroke-width:16;pointer-events:stroke}.wheelRim{stroke-width:2.6;pointer-events:stroke}.wheelMark{stroke:#8cddc1;stroke-width:4;pointer-events:stroke}.floatingHelm>small{display:block;color:#d2e6ef;font-size:8px;text-shadow:0 1px 4px #092e4c}
.cockpit{position:fixed;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:4}.cockpit>button{min-width:132px;display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 14px;box-shadow:0 5px 18px #051f3b33}.cockpit>button span{font-size:12px}.cockpit>button b{font-size:10px;color:#35576f}.cockpit>button[aria-expanded=true]{background:#99c4e3;outline:2px solid #b4e4e5}.popover{position:fixed;z-index:6;background:var(--panel);border:1px solid #8db7d34d;border-radius:15px;padding:18px;box-shadow:0 12px 48px #031d3d55;max-height:calc(100dvh - 170px);overflow:auto;overscroll-behavior:contain}.bottomPanel{bottom:84px;left:50%;transform:translateX(-50%);width:360px;max-width:calc(100vw - 24px)}.mainMenu{top:67px;right:20px;width:340px;max-width:calc(100vw - 24px)}.panelHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.panelHead button{font-size:13px;padding:6px 10px;background:#bdd7e81c;color:#c3deed;border:0}.optionGrid,.sailChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.optionGrid button,.sailChoices button{font-size:12px}.sailChoices button{padding:18px 10px}.popover .quiet{margin-top:5px}.popover p{margin-top:10px}#sailStatus.warning,#maneuverStatus.warning{color:#ffb6b1}.segmented{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:20px}.segmented button{flex:1;border:0;border-radius:0;background:transparent;color:#bfdae9;font-size:12px;padding:9px}.segmented button[aria-pressed=true]{background:var(--blue);color:var(--ink)}.rangeLabel{display:flex;justify-content:space-between;font-size:13px;font-weight:700;gap:12px}input[type=range]{width:100%;height:30px;accent-color:#a8cde7;touch-action:none;margin:7px 0}.trimEnds{display:flex;justify-content:space-between;font-size:10px;color:#a3c1d3;margin-bottom:17px}.advancedSails{padding-top:16px}.advancedSails>label,.sheetPair label{display:flex;justify-content:space-between;font-size:12px}.advancedSails button{font-size:11px;padding:7px}.sheetTitle{display:flex;justify-content:space-between;align-items:center;font-size:9px;margin:16px 0 10px;gap:8px}.sheetPair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sheetPair button{width:100%}details{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;font-size:12px;color:#bfdae9}.timeControl{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:18px;gap:16px}select{padding:9px;font-size:12px;background:#163b54;color:#d3e8f3}.voyageContext{font-size:10px;color:#8eaec2;line-height:1.8;margin-top:14px}#cameraHint{font-size:10px;color:#8eaec2}
#message,#sailingAlert{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:8px;max-width:min(520px,calc(100vw - 32px));width:max-content;background:#10324adb;color:#e3edf5;font-size:11px;text-align:center;pointer-events:none;z-index:2}#sailingAlert{background:#4b2935ed;color:#ffd4cf;bottom:124px;border:1px solid #ce88864d}body.panelOpen #message,body.panelOpen #sailingAlert{visibility:hidden}.rigTags{position:fixed;inset:0;pointer-events:none}.rigTags span{position:absolute;background:#102e42de;color:#e7f6fa;border:1px solid #a5d2df77;border-radius:4px;padding:4px 6px;font-size:10px;white-space:nowrap;transform:translate(-50%,-115%)}
.modal{position:fixed;inset:0;z-index:20;background:#041a2bc2;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}.panel{background:#102d40;border:1px solid #688ca466;border-radius:16px;box-shadow:0 30px 100px #00121d88;padding:26px;max-height:92dvh;overflow:auto}.eyebrow{font-size:9px;color:#a3c4d9;letter-spacing:1.6px}.intro{width:470px;text-align:center;padding:30px 40px}.captainPortrait{width:88px;height:88px;object-fit:cover;object-position:50% 18%;border-radius:50%;border:2px solid #b7d9f1;margin:15px auto;display:block}.intro h1{font-size:33px;line-height:1.2;margin:6px 0 18px}.intro h1 i{color:#b7d9f1}.introText{font-size:15px;color:#d3e3e9}.introFeatures{display:flex;gap:10px;justify-content:center;font-size:9px;color:#9ebed3;margin:22px 0}.intro .quiet{width:100%;margin-top:6px}.disclaimer{font-size:9px;margin-top:18px;color:#88a7bd}.chartPanel{width:1080px}.chartLayout{display:grid;grid-template-columns:1fr 230px;gap:22px}.chartWrap{position:relative;min-height:490px;background:#0a2432;border:1px solid var(--line);border-radius:9px;overflow:hidden}#chart{width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:crosshair}.mapLegend{position:absolute;bottom:12px;left:14px;font-size:9px;color:#95b4c4;line-height:1.8;pointer-events:none}.chartSide{display:flex;flex-direction:column;gap:10px}.chartSide label{font-size:10px;letter-spacing:1px}.chartSide button{font-size:12px}.chartSide p,#portInfo{font-size:11px;line-height:1.6;color:#a9c6d6}.routeDetails{border-bottom:1px solid var(--line);padding-bottom:10px}.routeDetails p{margin-top:6px}.routeStats{display:flex;gap:25px;padding:13px 0}.routeStats small{display:block;font-size:8px;margin-bottom:4px;color:#8fb4cb}.routeStats strong{font-size:18px;font-weight:600}.routeStats em{font-size:10px;font-style:normal}.routeStats #bearingArrow{display:inline-block;color:#96d5cd;margin-right:4px}.weatherPanel{width:590px}.weatherPanel p{margin:14px 0}.weatherPanel>select{display:block;width:100%;margin:8px 0}.badge{font-size:9px;background:#23475f;padding:10px;border-radius:6px;color:#c3dfed}.weatherValues{display:flex;gap:40px;border-block:1px solid var(--line);padding:18px 0;margin:18px 0}.weatherValues small{display:block;color:#93adbd;font-size:8px}.weatherValues strong{display:block;margin-top:7px;font-size:23px}.meteoLinks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.meteoLinks a{border:1px solid #668fa477;border-radius:6px;padding:12px;text-decoration:none;font-size:11px}.helpPanel{width:600px}.helpPanel ol{padding-left:20px;color:#b9cdd7;font-size:13px;line-height:1.7}.helpPanel li{padding-bottom:12px}.helpPanel b{color:#e9f3f7}.helpPanel>.primary{margin-top:18px}.captainPanel{width:460px}.captainPanel h2{font-size:20px}.captainPanel>img{display:block;width:100%;max-height:65dvh;object-fit:contain;border-radius:8px}.captainPanel p{margin-top:12px}#fatal{position:fixed;inset:0;z-index:99;background:#102d3b;padding:30vh 12vw;line-height:2}
@media(max-width:650px){header{top:10px;left:12px;right:12px}.brand{font-size:13px;gap:5px}.emblem{font-size:24px}nav{gap:5px}nav button{padding:9px 10px;font-size:11px}.topInstruments{top:58px;left:12px;gap:10px;padding:9px 11px}.motionReadings{min-width:65px;gap:5px}.motionReadings strong{font-size:22px}.motionReadings small,.windInstrument small,.headingInstrument>small{font-size:7px}.windInstrument{width:61px}#windDial{width:52px;height:50px}.windInstrument>span{font-size:8px}.headingInstrument{padding-left:10px;min-width:99px}.headingRow strong{font-size:20px}#headingDial{width:43px;height:43px}.headingInstrument>span{font-size:8px}.floatingHelm{left:5px;bottom:14px}.helmAssembly{width:121px;height:121px}.floatingHelm>small{font-size:7px}.cockpit{left:137px;right:12px;transform:none;bottom:max(20px,env(safe-area-inset-bottom));gap:5px;justify-content:flex-end}.cockpit>button{min-width:0;flex:1;max-width:125px;padding:10px 7px;flex-direction:column;gap:3px;white-space:nowrap;border-radius:8px}.cockpit>button span{font-size:10px}.cockpit>button b{font-size:9px}.bottomPanel{bottom:89px}.popover{padding:16px;max-height:calc(100dvh - 160px)}.mainMenu{top:55px;right:12px}.modal{padding:12px}.panel{padding:20px}.intro{padding:24px}.intro h1{font-size:28px}.introFeatures{font-size:8px;gap:8px}.chartLayout{display:flex;flex-direction:column}.chartWrap{min-height:290px}.chartSide{gap:8px}.chartSide .routeDetails{padding-bottom:5px}.routeStats{padding:9px 0}.meteoLinks{grid-template-columns:1fr}#message{font-size:10px;bottom:91px;max-width:calc(100vw - 32px)}#sailingAlert{bottom:128px;font-size:10px}}
@media(max-width:380px){.brand i{display:none}.topInstruments{gap:6px;padding:8px}.motionReadings{min-width:58px}.headingInstrument{min-width:92px;padding-left:8px}.cockpit{left:121px}.cockpit>button span{font-size:9px}.helmAssembly{width:108px;height:108px}}
@media(max-height:550px){.brand{font-size:14px}.topInstruments{top:58px;padding:7px 10px;gap:9px}.motionReadings strong{font-size:20px}.motionReadings{min-width:70px}.headingRow strong{font-size:20px}#headingDial{width:38px;height:38px}#windDial{height:44px}.floatingHelm{bottom:8px}.helmAssembly{width:120px;height:120px}.cockpit{bottom:12px}.bottomPanel{bottom:70px;max-height:calc(100dvh - 85px)}.mainMenu{max-height:calc(100dvh - 70px)}#message{bottom:72px}#sailingAlert{bottom:105px}.modal .panel{max-height:94dvh}}

#proaError{color:#ffb6b1;background:#5c283c55;padding:9px;border-radius:7px}

.destinationInstrument{width:62px;align-self:stretch;border-left:1px solid #346a8133;padding-left:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.destinationInstrument small{font-size:8px}.destinationInstrument svg{width:48px;height:43px;overflow:visible}#destinationNeedle{stroke:#a25230;stroke-width:3.2;fill:#a25230;stroke-linecap:round;stroke-linejoin:round}#destinationNeedle path{fill:none}.destinationInstrument strong{font-size:12px;line-height:1.2}.destinationInstrument>span{font-size:9px;margin-top:2px}#coastMap{position:fixed;right:20px;top:80px;width:275px;height:210px;pointer-events:none;background:transparent}
@media(max-width:650px){.destinationInstrument{width:58px;padding-left:8px}.destinationInstrument small{font-size:7px}.destinationInstrument svg{width:43px;height:39px}.destinationInstrument strong{font-size:11px}.destinationInstrument>span{font-size:8px}#coastMap{top:167px;right:12px;width:190px;height:150px}}
@media(max-width:380px){.destinationInstrument{width:51px;padding-left:5px}.destinationInstrument svg{width:39px;height:37px}}
@media(max-height:550px) and (min-width:651px){#coastMap{top:65px;width:205px;height:155px}}

.cameraZoom{position:fixed;right:20px;bottom:96px;display:flex;flex-direction:column;gap:6px;z-index:4}.cameraZoom button{width:44px;height:44px;padding:0;font-size:25px;line-height:1;box-shadow:0 3px 14px #07233b33}.cameraZoom button:disabled{opacity:.45}#sailShape .rangeLabel{margin-top:16px}#loadReading.warning{color:#ffb6b1}
@media(max-width:650px){.cameraZoom{right:12px;bottom:96px}.cameraZoom button{width:40px;height:40px;font-size:24px}}
@media(max-height:550px){.cameraZoom{bottom:76px;right:12px}}

/* Docked controls: the scene has its own viewport, never behind the drawer. */
:root{--dock-width:0px;--dock-space:0px;--scene-width:100vw;--hud-bottom:200px}
#world,.vignette{right:var(--dock-space)}
.cockpit{left:calc(var(--scene-width)/2)}
.cameraZoom{right:calc(var(--dock-space) + 20px)}
#coastMap{right:calc(var(--dock-space) + 20px);z-index:2}
.popover{top:68px;bottom:16px;right:12px;left:auto;transform:none;width:var(--dock-width);max-width:none;max-height:none;border-radius:14px;padding:18px;scrollbar-width:thin}
.modal:not(#intro){inset:68px 12px 16px auto;width:var(--dock-width);padding:0;background:transparent;backdrop-filter:none;z-index:6;display:block}
.modal:not(#intro)>.panel{width:100%;height:100%;max-height:none;padding:18px;border-radius:14px;overscroll-behavior:contain;scrollbar-width:thin}
.popover .panelHead,.modal:not(#intro) .panelHead{position:sticky;top:-18px;margin:-18px -18px 16px;padding:18px 18px 12px;background:#112d40;z-index:2;border-bottom:1px solid var(--line)}
.panelHead button{background:#efb6b2;color:#66262a;min-width:34px;min-height:34px;flex-shrink:0}
.chartLayout{display:flex;flex-direction:column;gap:16px}.chartWrap{min-height:300px}.chartSide{gap:10px}.mapLegend{font-size:8px;left:8px;bottom:8px;right:8px}
#message,#sailingAlert{left:calc(var(--scene-width)/2);max-width:min(520px,calc(var(--scene-width) - 24px))}
body.panelOpen #message,body.panelOpen #sailingAlert{visibility:visible}
.orientationHelp{border-top:1px solid var(--line);padding-top:10px}
.boatGuide{position:fixed;inset:0 var(--dock-space) 0 0;pointer-events:none;z-index:3;overflow:hidden}
.boatGuide svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.boatGuide line{stroke-width:1.5;stroke-dasharray:3 2}.portGuide{stroke:#ffc4c0;fill:#ffc4c0}.starboardGuide{stroke:#a4e9c9;fill:#a4e9c9}
.boatGuide span{position:absolute;transform:translate(-50%,-50%);padding:5px 8px;background:#112d40ed;border:1px solid currentColor;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 2px 10px #07233833}
.portLabel{color:#ffc4c0}.starboardLabel{color:#a4e9c9}
#deckSides{position:fixed;top:auto;bottom:200px;left:20px;width:min(280px,calc(var(--scene-width) - 32px));padding:9px 10px;border-radius:9px;background:#112d40e6;pointer-events:none;z-index:3;text-align:center}
#deckSides small{font-size:8px;color:#cee3ec}#deckSides>div{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:10px}
@media(max-width:900px){
 body.panelOpen #coastMap{width:175px;height:135px;top:var(--hud-bottom)}
 body.panelOpen .topInstruments{gap:7px;padding:9px 10px}
 body.panelOpen .motionReadings{min-width:66px}body.panelOpen .headingInstrument{min-width:96px;padding-left:8px}
}
@media(max-width:650px){
 .popover,.modal:not(#intro){top:55px;bottom:12px;right:8px}
 .popover,.modal:not(#intro)>.panel{padding:12px;border-radius:10px}
 .popover .panelHead,.modal:not(#intro) .panelHead{top:-12px;margin:-12px -12px 12px;padding:12px 10px 10px;gap:5px}
 .panelHead h2{font-size:19px}.popover button,.chartSide button{font-size:11px;padding:10px 7px}
 .popover .optionGrid,.popover .sailChoices{grid-template-columns:1fr}.popover .segmented{margin-bottom:14px}.popover .segmented button{font-size:10px;padding:10px 5px}
 .rangeLabel{font-size:11px;flex-wrap:wrap;gap:4px}.popover .trimEnds{font-size:9px;gap:8px}.popover summary{font-size:11px;line-height:1.5}
 .sheetPair{grid-template-columns:1fr;gap:14px}.sheetTitle{flex-wrap:wrap}.timeControl{flex-wrap:wrap;gap:7px}.timeControl select{width:100%}
 .popover p,.chartSide p,#portInfo{font-size:10px}.popover .fullWidth{font-size:10px}.weatherValues{gap:15px;flex-wrap:wrap}.weatherValues strong{font-size:19px}
 .chartWrap{min-height:245px}.chartPanel .eyebrow{font-size:7px}.routeStats{gap:13px}.chartSide select{width:100%;min-width:0;font-size:10px}
 .mapLegend{font-size:7px}.helpPanel ol{font-size:11px;padding-left:15px}.captainPanel h2{font-size:16px}.meteoLinks a{padding:9px;font-size:10px}
 .cameraZoom{right:calc(var(--dock-space) + 12px)}
 .cockpit{left:137px}.cameraZoom button{width:40px;height:40px}
 body.panelOpen .cockpit{display:none}
 body.panelOpen .brand>span:last-child{font-size:10px;max-width:calc(var(--scene-width) - 50px)}
 body.panelOpen .topInstruments{left:8px;top:58px;display:grid;grid-template-columns:1fr 1fr;width:calc(var(--scene-width) - 16px);gap:6px;padding:8px}
 body.panelOpen .motionReadings{grid-column:1/-1;flex-direction:row;justify-content:space-between;min-width:0;gap:8px}
 body.panelOpen .motionReadings>div{column-gap:2px}body.panelOpen .motionReadings strong{font-size:19px}body.panelOpen .motionReadings span{font-size:9px}
 body.panelOpen .windInstrument{width:auto}body.panelOpen #windDial{height:36px;width:40px}
 body.panelOpen .headingInstrument{min-width:0;padding-left:4px}body.panelOpen #headingDial{width:32px;height:32px}body.panelOpen .headingRow{gap:1px}body.panelOpen .headingRow strong{font-size:16px}
 body.panelOpen .headingInstrument>span{font-size:7px}body.panelOpen .windInstrument>span{font-size:7px}
 body.panelOpen .destinationInstrument{grid-column:1/-1;flex-direction:row;width:100%;border-left:0;border-top:1px solid #346a8133;padding:3px 0 0;gap:5px}
 body.panelOpen .destinationInstrument svg{width:28px;height:28px}body.panelOpen .destinationInstrument small{font-size:6px}body.panelOpen .destinationInstrument strong{font-size:10px}body.panelOpen .destinationInstrument>span{font-size:7px}
 body.panelOpen #coastMap{right:calc(var(--dock-space) + 8px);top:var(--hud-bottom);width:calc(var(--scene-width) - 16px);height:118px}
 body.panelOpen .floatingHelm{left:1px;bottom:12px}body.panelOpen .helmAssembly{width:94px;height:94px}
 body.panelOpen .cameraZoom{bottom:20px;right:calc(var(--dock-space) + 10px)}
 body.panelOpen .cameraZoom button{width:36px;height:36px}
 body.panelOpen #message{bottom:120px;font-size:9px}body.panelOpen #sailingAlert{bottom:165px;font-size:9px}
 .boatGuide span{font-size:9px;padding:4px 5px}#deckSides{left:8px;bottom:155px;width:calc(var(--scene-width) - 16px)}body.panelOpen #deckSides{bottom:130px}body.panelOpen #deckSides>div{flex-direction:column;gap:4px}
}
@media(max-height:550px) and (min-width:651px){
 .popover,.modal:not(#intro){top:60px;bottom:8px}
 body.panelOpen #coastMap{top:65px;width:145px;height:110px;right:calc(var(--dock-space) + 12px)}
 body.panelOpen .topInstruments{gap:5px;padding:7px;max-width:310px}
 body.panelOpen .cockpit{gap:5px}body.panelOpen .cockpit>button{min-width:0;padding:10px;font-size:10px;gap:6px}
 body.panelOpen .floatingHelm{bottom:70px;left:0}body.panelOpen .helmAssembly{width:90px;height:90px}
}

.wingButton{margin-top:8px}#mainSide{width:100%;margin:8px 0 18px}

.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.storyIntro{display:grid;grid-template-columns:280px 1fr;gap:30px;width:850px;text-align:left;padding:24px;max-height:94dvh}
.introPortrait{position:relative;min-height:380px;border-radius:12px;overflow:hidden;background:#204b65}
.introPortrait>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:50% 30%}
.introPortrait>span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#102d40f5);padding:60px 18px 20px;color:#e2f0f5;font-size:10px;font-weight:700;line-height:1.8;letter-spacing:1px}
.introStory{padding:12px 10px 10px 0}.introStory h1{font-size:34px;margin:12px 0 20px}
.captainQuote{color:#d6eceb;font-family:Georgia,serif;font-size:19px;line-height:1.5}.smallQuote{font-size:15px;margin:16px 0 22px}
.introBiography{font-size:13px;margin-top:12px;line-height:1.7}
.introStory>button{margin-top:9px}.introStory .quiet{margin-top:4px}.resumeStory{background:#a2d5bf}
.captainMini{display:flex;gap:14px;align-items:flex-start;margin:10px 0 18px}
.captainMini img{width:72px;height:92px;object-fit:cover;object-position:50% 20%;border-radius:10px;flex-shrink:0}
.captainMini p{font-family:Georgia,serif;font-size:15px;color:#d3e5ee;margin:0;line-height:1.6}
.coachPortrait{flex-direction:column}.coachPortrait img{width:105px;height:125px}
.coachPortrait p{font-size:17px}
.missionCard{margin:14px 0;border:1px solid #90bdd74d;background:#1c4054;border-radius:12px;padding:16px}
.missionCard>small{color:#acd6e8;font-size:9px}.missionCard h3{font-family:Georgia,serif;font-size:21px;font-weight:500;margin:7px 0}
.missionCard p{font-size:12px;line-height:1.6}.missionMeta{font-size:10px;color:#b9d5e4;margin:14px 0 6px;line-height:1.7}
.missionCard .missionBest{font-size:10px;color:#b5e5d0;margin:8px 0 14px}.missionRules{font-size:10px;line-height:1.6;margin:16px 0;color:#a2bfd0}
.lessonTask,.trainingHint{border-left:3px solid #a2d5bf;background:#234a5e;padding:12px;color:#e0eff3!important;line-height:1.7}
#trainingTrimHint{margin:0 0 16px}.missionTimer{padding:18px 0;font-size:19px;color:#aee0ce;font-variant-numeric:tabular-nums}
#lessonPanel>button{margin:8px 0}.missionTimeButtons{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 0}
.missionTimeButtons button{padding:9px 4px;font-size:12px}#missionTimeControls p{font-size:10px;margin:8px 0 16px}
.missionChip{position:fixed;z-index:4;left:calc(var(--scene-width)/2);transform:translateX(-50%);bottom:80px;width:min(340px,calc(var(--scene-width) - 30px));text-align:left;padding:10px 14px;background:#bad8eef2;box-shadow:0 4px 16px #092b4344}
.missionChip>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.missionChip>small{display:block;margin-top:4px;letter-spacing:0;font-size:10px;color:#264b60}
body:has(#lessonPanel:not([hidden])) .missionChip{display:none}
#missionBeacon{position:fixed;z-index:2;transform:translate(-50%,-100%);pointer-events:none;background:#123b4cde;border:1px solid #a2d5bf;color:#d7eee4;font-size:10px;padding:5px 7px;border-radius:6px;white-space:nowrap}
body.boatEditing .missionChip,body.boatEditing #missionBeacon{display:none!important}
@media(max-width:650px){
 .storyIntro{display:block;width:100%;padding:18px;max-height:94dvh}
 .introPortrait{min-height:180px;height:180px}.introPortrait>img{object-position:50% 0%}.introPortrait>span{font-size:8px;padding:35px 12px 10px}
 .introStory{padding:18px 0 0}.introStory h1{font-size:28px;margin:8px 0 12px}.captainQuote{font-size:17px}.smallQuote{font-size:14px;margin:12px 0}
 .introBiography{font-size:12px}.introStory .disclaimer{margin-top:12px}
 .captainMini{flex-direction:column;gap:10px}.captainMini img{width:65px;height:78px}.captainMini p{font-size:13px}
 .missionCard{padding:12px 9px}.missionCard h3{font-size:18px}.missionMeta{font-size:9px}.missionTimer{font-size:15px;line-height:1.5}
 .missionChip{left:137px;right:12px;bottom:92px;width:auto;transform:none;padding:9px}
 .missionChip>span{font-size:10px}.missionChip>small{font-size:9px}
 body.panelOpen .missionChip{display:none}.missionRules{font-size:9px}
 #missionBeacon{font-size:9px}
}

/* The boat stays visible beside the shipyard, with only orbit and zoom controls. */
body.boatEditing .topInstruments,body.boatEditing .floatingHelm,body.boatEditing .cockpit,body.boatEditing #coastMap,body.boatEditing #message,body.boatEditing #sailingAlert,body.boatEditing .boatGuide,body.boatEditing #deckSides,body.boatEditing header nav{display:none!important}
body.boatEditing .brand{pointer-events:none}
.boatPresets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:18px 0 22px}
.boatPresets button{font-size:11px;padding:12px 7px;line-height:1.5}
#boatLengthValue{color:#bce8dd;white-space:nowrap;font-variant-numeric:tabular-nums}
.designStats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 12px}
.designStats>div{background:#204459;border:1px solid #86b3ca33;border-radius:9px;padding:12px}
.designStats dt{font-size:10px;color:#b6d0de;line-height:1.4}
.designStats dd{margin:7px 0 0;color:#f0f8fb;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
#designCharacter{color:#c7e4e1;min-height:40px}
.designTradeoffs{padding:15px 0;margin-top:12px;border-block:1px solid var(--line)}
.designTradeoffs small{display:block;color:#a7c9db;font-size:8px;letter-spacing:1px;margin-bottom:12px}
.designTradeoffs>div{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin:8px 0;color:#b9d0dd}
.designTradeoffs b{color:#e4f4fa;font-variant-numeric:tabular-nums}
#boatEditor .designFootnote,#boatEditor .designHint{font-size:10px;line-height:1.5;color:#a6c1d2}
#launchBoat{margin:18px 0 8px;background:#a2d5bf;color:#123e34}
#launchBoat:hover{background:#b8e2d0}
@media(max-width:650px){
 .boatPresets{grid-template-columns:1fr;gap:5px;margin:14px 0}
 .boatPresets button{padding:8px}
 .designStats{gap:6px;margin:12px 0}
 .designStats>div{padding:9px 7px;min-width:0}
 .designStats dt{font-size:9px;min-height:26px}
 .designStats dd{font-size:17px;white-space:nowrap}
 #boatEditor .eyebrow{font-size:7px;letter-spacing:1px}
 .designTradeoffs>div{font-size:10px;gap:6px}
 .designTradeoffs small{line-height:1.6}
 #boatEditor .designHint,#boatEditor .designFootnote{font-size:9px}
}

#trainingReturn{margin-bottom:8px}
/* Direct sail handling: keep the sea free of the former three-button console. */
#proaToggle,#sailsToggle{display:none}.directSailPanel{position:fixed;z-index:12;right:16px;bottom:90px;width:min(310px,calc(100vw - 32px));max-height:calc(100dvh - 170px);overflow:auto;background:#102d40f5;border:1px solid #8cb5c477;border-radius:14px;padding:16px;box-shadow:0 12px 40px #00121d77}.directSailPanel h2{font-size:17px}.directSailPanel>button{margin:4px;min-height:44px}.directSailPanel>label{display:block;font-size:12px;margin:12px 4px 0}.directSailPanel p{font-size:12px;line-height:1.5;color:#b9d1de}.clewHandle{position:fixed;z-index:3;transform:translate(-50%,-50%);width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;touch-action:manipulation}.clewHandle::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#e53935;border:1px solid #fff9;pointer-events:none}.clewHandle:focus-visible{outline:3px solid #fff}.directSailPanel[hidden],.clewHandle[hidden]{display:none}

/* Reserve a separate lane for zoom beside the mission card on phones. */
@media(max-width:650px){.missionChip{right:68px}.directSailPanel{max-height:calc(100dvh - 190px)}.directSailPanel .trimEnds{margin:0 0 10px;font-size:10px}}

@media(max-width:650px){body.directControlsOpen .cameraZoom{bottom:max(20px,env(safe-area-inset-bottom));right:calc(var(--dock-space) + 145px);flex-direction:row}}
#chartExpand{background:#bad8ee;color:#10212a;margin-left:auto;font-size:12px;white-space:nowrap}
body.chartExpanded #chartModal.modal{inset:0;width:100%;height:100dvh;z-index:30;background:#102d40}
body.chartExpanded #chartModal>.chartPanel{border:0;border-radius:0;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden}
body.chartExpanded #chartModal .panelHead{position:static;margin:0 0 12px;padding:0 0 12px;flex-shrink:0}
body.chartExpanded .chartLayout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;flex:1;min-height:0}
body.chartExpanded .chartWrap{min-height:0;height:100%}
body.chartExpanded .chartSide{min-height:0;overflow:auto}
@media(max-width:650px){body.chartExpanded .chartLayout{display:flex;gap:10px}body.chartExpanded .chartWrap{flex:1;min-height:180px}body.chartExpanded .chartSide{max-height:155px;flex-shrink:0}body.chartExpanded .chartSide .routeDetails{display:none}body.chartExpanded #portSelect{order:-3}body.chartExpanded #setRoute{order:-2}body.chartExpanded #clearRoute{order:-1}body.chartExpanded .chartSide>label{display:none}body.chartExpanded .chartPanel h2{font-size:17px}body.chartExpanded #chartExpand{font-size:11px;padding:9px}body.chartExpanded .eyebrow{font-size:7px}}
@media(max-height:500px){body.chartExpanded .chartLayout{display:grid;grid-template-columns:minmax(0,1fr) 210px}body.chartExpanded .chartSide{max-height:none}body.chartExpanded .chartWrap{min-height:120px}}
#feedbackForm{display:flex;flex-direction:column;gap:12px}#feedbackForm label{font-size:12px;font-weight:700}#feedbackForm textarea{width:100%;resize:vertical;min-height:120px;padding:12px;border:1px solid #688ca4;border-radius:8px;background:#173d50;color:#edf5fa;font:inherit}#feedbackForm p{font-size:12px;line-height:1.5}#feedbackStatus{color:#b8e5ce;min-height:2em}

/* Short landscape viewports also occur inside the mobile browser's viewer. */
@media (orientation:landscape) and (max-height:550px) and (max-width:1100px){
 header{top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:calc(var(--dock-space) + 12px);justify-content:flex-start;z-index:5}
 header .brand{display:none}
 nav{gap:6px}nav button{padding:9px 12px;font-size:12px;min-height:38px}
 .popover,.modal:not(#intro){top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));right:8px}
 .popover,.modal:not(#intro)>.panel{padding:12px}
 .popover .panelHead,.modal:not(#intro) .panelHead{top:-12px;margin:-12px -12px 12px;padding:10px 12px;gap:8px}
 .panelHead h2{font-size:19px}.panelHead .eyebrow{font-size:8px;letter-spacing:1px}
 .topInstruments,body.panelOpen .topInstruments{top:54px;left:max(12px,env(safe-area-inset-left));padding:6px 8px;gap:7px}
 .floatingHelm,body.panelOpen .floatingHelm{bottom:8px;left:max(8px,env(safe-area-inset-left))}
 .helmAssembly,body.panelOpen .helmAssembly{width:90px;height:90px}
 .cameraZoom,body.panelOpen .cameraZoom{bottom:12px;right:calc(var(--dock-space) + 12px)}
 .cameraZoom button{width:36px;height:36px}
 .captainMini,.coachPortrait{flex-direction:row;gap:12px;margin:8px 0 12px}
 .captainMini img,.coachPortrait img{width:48px;height:60px}
 .captainMini p,.coachPortrait p{font-size:13px;line-height:1.5}
 #lessonPanel .lessonTask{padding:9px;font-size:12px}
 body.panelOpen #coastMap{display:none}
}

#accountDialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:22px;border:1px solid #688ca4;border-radius:14px;background:#102d40;color:#dcecf4;overscroll-behavior:contain}
#accountDialog::backdrop{background:#041a2bd9;backdrop-filter:blur(4px)}
#accountDialog .panelHead{margin-bottom:12px}#accountDialog h2{font-size:24px}
#accountForm{display:flex;flex-direction:column;gap:14px;margin-top:16px}#accountForm label{font-size:12px;font-weight:700;display:block}
#accountForm input:not([type=checkbox]){display:block;width:100%;margin-top:6px;border:1px solid #688ca4;border-radius:8px;background:#173d50;color:#edf5fa;padding:12px;font:inherit;font-size:16px;min-width:0}
.accountPasswordField{display:flex;align-items:center;gap:6px}.accountPasswordField input{flex:1}.accountPasswordField button{padding:10px;font-size:11px}
#accountForm .accountCheck{display:flex;gap:9px;align-items:flex-start;font-weight:400;line-height:1.6}.accountCheck input{margin-top:4px;accent-color:#a2d5bf}
.accountLinks{display:flex;flex-wrap:wrap;gap:5px}.accountLinks button{padding:7px;font-size:11px;background:#bad8ee;color:#102c3d}
#accountStatus{margin:15px 0;color:#b8e5ce;min-height:1.5em}#accountIdentity{overflow-wrap:anywhere;margin:15px 0}#accountDialog .accountLocal{font-size:11px;border-top:1px solid var(--line);padding-top:12px}.accountCatalog{display:block;margin-top:14px;font-size:12px}

/* The captain speaks over the full scene; this is not a side drawer. */
.captainCoach{position:fixed;right:16px;bottom:16px;z-index:9;width:min(420px,calc(100vw - 24px));display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:10px;pointer-events:none}
.coachAvatar{width:48px;height:60px;object-fit:cover;object-position:50% 20%;border:2px solid #a2d5bf;border-radius:12px;box-shadow:0 4px 16px #00121d66}
.coachBubble{position:relative;padding:14px;border:1px solid #8ebfd3;border-radius:14px;background:#102d40f5;box-shadow:0 8px 30px #00121d55;pointer-events:auto;max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin}
.coachBubble::before{content:'';position:absolute;left:-6px;top:18px;width:10px;height:10px;background:#102d40;border-left:1px solid #8ebfd3;border-bottom:1px solid #8ebfd3;transform:rotate(45deg)}
.coachHeading{display:flex;justify-content:space-between;gap:8px;align-items:start;margin-bottom:8px}.coachHeading h2{font-size:19px}.coachHeading .eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:4px}
#coachClose{padding:4px 10px;min-height:30px;background:#efb6b2;color:#66262a;flex-shrink:0}
#captainSpeech{font-size:14px;line-height:1.5;color:#dfedf3}#lessonTask{font-size:11px;line-height:1.4;color:#b8d9df;margin-top:8px}#lessonTask:empty{display:none}
.coachFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.coachFooter>span{font-size:11px;color:#aecfdf;white-space:nowrap}.coachFooter #lessonNext{width:auto;font-size:12px;min-height:40px;padding:10px 16px;margin:0}
.coachOptions{border-top:0;padding-top:0;margin-top:8px}.coachOptions summary{font-size:10px}.coachOptionsBody{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:160px;overflow:auto}.coachOptionsBody button{font-size:11px}.coachOptionsBody .missionTimer{padding:0;font-size:12px}
#coachTrimControl{margin-top:10px}#coachTrimControl label{font-size:11px;font-weight:700}#coachTrimControl input{height:26px;margin:2px 0}#coachTrimControl .trimEnds{margin:0;font-size:10px}
.coachFocus{outline:5px solid #ff3038!important;outline-offset:5px;border-radius:9px;box-shadow:0 0 0 3px #102d40;filter:drop-shadow(0 0 5px #ff303899)}
.clewHandle.coachFocus{outline-width:5px!important;outline-offset:2px;box-shadow:0 0 0 3px #102d40,0 0 14px #ff3038}
body.coachVisible .cockpit,body.coachVisible .missionChip{display:none}
body.coachVisible #message,body.coachVisible #sailingAlert{display:none}
@media(max-width:650px){
 .captainCoach{right:12px;bottom:max(12px,env(safe-area-inset-bottom));grid-template-columns:40px minmax(0,1fr);gap:8px}
 .coachAvatar{width:40px;height:50px}.coachBubble{padding:12px}.coachHeading h2{font-size:17px}#captainSpeech{font-size:13px}
 body.coachVisible .floatingHelm{bottom:calc(var(--coach-height,220px) + 25px)}
 body.coachVisible .cameraZoom{bottom:calc(var(--coach-height,220px) + 25px)}
}
@media(orientation:landscape) and (max-height:550px){
 .captainCoach{right:12px;bottom:10px;width:min(400px,42vw);grid-template-columns:36px minmax(0,1fr);gap:7px}
 .coachAvatar{width:36px;height:46px}.coachBubble{padding:10px;max-height:calc(100dvh - 20px)}.coachHeading{margin-bottom:5px}.coachHeading h2{font-size:16px}.coachHeading .eyebrow{font-size:7px}
 #captainSpeech{font-size:12px;line-height:1.4}#lessonTask{font-size:10px;margin-top:5px}.coachFooter{margin-top:8px}.coachFooter #lessonNext{min-height:36px;padding:8px 12px;font-size:11px}
 body.coachVisible .floatingHelm{left:8px;bottom:8px}body.coachVisible .cameraZoom{left:116px;right:auto;bottom:12px;flex-direction:row}
 body.coachVisible #coastMap{display:none}
 .coachOptions{margin-top:5px}
}
@media(prefers-reduced-motion:reduce){.coachFocus{filter:none}}

#weatherNotice{position:fixed;top:calc(var(--hud-bottom,100px) + 8px);left:12px;max-width:calc(var(--scene-width,100vw) - 24px);z-index:30;background:#173442;color:#fff3cb;padding:8px 12px;border-radius:10px;font-size:12px;pointer-events:none}#liveWeatherOptions p{font-size:12px;line-height:1.5}#liveWeatherStatus{font-weight:700;color:#c4f3e6}

/* Destination postcards share the existing lateral drawer. */
.placePanel #placeImage{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin:4px 0 0}.placeCaption{font-size:9px;letter-spacing:.1em;color:#99c6cf}.placePanel blockquote{margin:20px 0;padding:0 0 0 14px;border-left:2px solid #93c6d4;font:italic 18px/1.5 Georgia,serif;color:#edf3ed}.placeNote{font-size:11px;line-height:1.55;color:#b0c8ce}.placePanel>a{display:block;font-size:12px;color:#b4def1;margin:18px 0}.placePanel .fullWidth{margin-top:10px}#arrivalCard{position:fixed;right:calc(var(--dock-space,0px) + 16px);bottom:102px;z-index:12;width:min(278px,calc(var(--scene-width,100vw) - 30px));background:#c4e0ee;color:#102a3c;border:1px solid #d7edf5;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px #03172250}#arrivalOpen{display:flex;gap:10px;align-items:center;width:100%;padding:8px 30px 8px 8px;text-align:left;background:transparent;border:0;color:#102a3c}#arrivalOpen img{width:74px;height:66px;object-fit:cover;border-radius:7px}#arrivalOpen small{display:block;font-size:8px;letter-spacing:.08em}#arrivalOpen strong{display:block;font-size:13px;margin:4px 0}#arrivalOpen span span{font-size:10px}#arrivalDismiss{position:absolute;right:3px;top:3px;padding:5px;background:transparent;box-shadow:none;border:0;color:#102a3c}@media(max-width:650px){body.panelOpen #arrivalCard{display:none}#arrivalCard{bottom:94px;width:230px}#arrivalOpen img{width:56px;height:56px}.placePanel blockquote{font-size:14px}.placeCaption{font-size:8px}}

/* Fixed controls inside the rotating helm rim. */
.helmAssembly{width:190px;height:190px}.pilotControls{position:absolute;inset:0;pointer-events:none}.pilotControls button{position:absolute;pointer-events:auto;touch-action:manipulation;padding:0;min-width:0;border:1px solid #9cc2d3;box-shadow:0 2px 5px #08263855;background:#bddded;color:#0b2433;font-size:12px;font-weight:800;line-height:1;border-radius:9px}.pilotControls button:focus-visible{outline:3px solid #8ae6c3;outline-offset:2px}#pilotToggle{left:38%;top:41%;width:24%;height:24%;border-radius:50%;background:#a8dfc8}.pilotActive #pilotToggle{background:#e8aca9}#pilotHeading{position:absolute;left:25%;top:23%;width:50%;color:#e0f3ff;font-size:13px;font-weight:800;text-shadow:0 1px 3px #07314c}.pilotControls button[data-pilot-step]{width:23%;height:18%}.pilotControls [data-pilot-step="-1"]{left:13%;top:35%}.pilotControls [data-pilot-step="1"]{right:13%;top:35%}.pilotControls [data-pilot-step="-10"]{left:13%;top:56%}.pilotControls [data-pilot-step="10"]{right:13%;top:56%}.pilotActive .wheelRim{stroke:#b2ebd7}.floatingHelm>small{font-size:9px;font-weight:700;letter-spacing:.06em}.pilotControls button:disabled{opacity:.45}
@media(max-width:650px){.helmAssembly{width:180px;height:180px}.cockpit{left:190px}body.panelOpen .helmAssembly{width:164px;height:164px}body.panelOpen .cameraZoom{bottom:188px}.floatingHelm{left:3px}.pilotControls button{font-size:11px}#pilotHeading{font-size:12px}}
@media(max-height:550px){.helmAssembly,body.panelOpen .helmAssembly{width:154px;height:154px}.pilotControls button{font-size:10px}#pilotHeading{font-size:11px}body.panelOpen .floatingHelm{bottom:8px}}
/* Personal screen: same dimensions as zoom, with a bounded scrolling rail. */
.screenShortcuts{position:fixed;right:calc(var(--dock-space) + 20px);bottom:198px;z-index:4;display:grid;grid-template-columns:repeat(2,44px);gap:6px;max-height:calc(100dvh - 390px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px;align-content:start;touch-action:pan-y}
.screenShortcuts button{width:44px;height:44px;padding:0;font-size:11px;font-weight:800;letter-spacing:.2px;box-shadow:0 3px 14px #07233b33;flex-shrink:0}.screenShortcuts button[aria-pressed=true],.screenShortcuts button[aria-expanded=true]{background:#99dfc4;outline:2px solid #237e69;outline-offset:-2px}.screenShortcuts button:focus-visible{outline:3px solid #fff;outline-offset:-3px}.screenConfigButton{margin-bottom:10px;background:#b5e1d4}
#screenConfig{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 28px);margin:auto;padding:22px;border:1px solid #6d98aa;border-radius:18px;background:#112d40;color:#d7eaf3;overflow:auto;overscroll-behavior:contain;box-shadow:0 16px 70px #001a2b88}#screenConfig::backdrop{background:#051a2ac4;backdrop-filter:blur(4px)}.screenConfigHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.screenConfigHead small{font-size:10px;letter-spacing:2px;color:#9acac6}.screenConfigHead h2{font-size:24px;margin:5px 0 12px}.screenConfigHead button{width:40px;height:40px;padding:0;flex-shrink:0}#screenConfig p{font-size:12px;line-height:1.6;margin:10px 0;color:#adcbd9}#shortcutCount{font-weight:bold;color:#b9ead7!important}#shortcutOptions{display:grid;grid-template-columns:1fr 1fr;gap:7px}#shortcutOptions label{display:flex;align-items:center;gap:9px;padding:10px 8px;border:1px solid #31546a;border-radius:9px;cursor:pointer;font-size:12px;min-height:52px}#shortcutOptions label:has(input:checked){background:#224c54;border-color:#91d2bf}#shortcutOptions input{width:17px;height:17px;flex-shrink:0;accent-color:#a8dfc9}.shortcutBadge{display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:6px;background:#bfdced;color:#173c50;font-weight:bold;font-size:9px}.screenConfigActions{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:-22px;background:#112d40;padding:14px 0 8px}.screenConfigActions button{font-size:12px;flex:1}#screenConfigDone{min-width:90px}
@media(max-width:650px){.screenShortcuts{right:calc(var(--dock-space) + 12px);bottom:190px;grid-template-columns:repeat(2,40px);max-height:calc(100dvh - 370px)}.screenShortcuts button{width:40px;height:40px;font-size:10px}body.panelOpen .screenShortcuts{bottom:280px;grid-template-columns:repeat(2,36px);max-height:calc(100dvh - 470px)}body.panelOpen .screenShortcuts button{width:36px;height:36px}#screenConfig{padding:16px}#shortcutOptions{grid-template-columns:1fr}.screenConfigActions{bottom:-16px}.screenConfigHead h2{font-size:22px}body.directControlsOpen .screenShortcuts{display:none}body.coachVisible .screenShortcuts{display:none}}
@media(orientation:landscape) and (max-height:550px){.screenShortcuts,body.panelOpen .screenShortcuts{bottom:104px;max-height:calc(100dvh - 160px);grid-template-columns:repeat(2,36px);right:calc(var(--dock-space) + 12px)}.screenShortcuts button,body.panelOpen .screenShortcuts button{width:36px;height:36px;font-size:10px}}

/* Keep the mission summary above the whole helm, away from pilot and shortcuts. */
.missionChip{left:20px;right:auto;bottom:250px;transform:none;width:min(280px,calc(var(--scene-width) - 140px))}
@media(max-width:650px){.missionChip{left:12px;right:auto;bottom:230px;width:min(260px,calc(var(--scene-width) - 124px))}}
@media(orientation:landscape) and (max-height:550px){.missionChip{left:max(12px,env(safe-area-inset-left));bottom:210px;width:min(260px,calc(var(--scene-width) - 124px))}}

/* One preparation message at a time, with the launch action only at the end. */
#boatEditor .boatStepProgress{font-size:12px;font-weight:700;color:#a9dbc9;margin:0 0 8px}#boatStepTitle{font-size:22px;line-height:1.2;margin:0 0 14px;color:#d7eaf3}#boatStepTitle:focus{outline:none}#boatEditor [data-boat-step]>p{font-size:14px;line-height:1.6;margin:0 0 15px}.boatStepNavigation{display:flex;gap:8px;margin:18px 0 10px}.boatStepNavigation button{flex:1;min-height:42px}#boatEditor #launchBoat{width:100%;margin:12px 0 0}#boatEditor #cancelBoat{font-size:12px}#boatEditor .designStats{margin:16px 0}#boatEditor #editorMission{padding:12px}#boatEditor .designFootnote{font-size:11px}
@media(max-width:650px){#boatStepTitle{font-size:19px}#boatEditor [data-boat-step]>p{font-size:12px}#boatEditor .boatPresets{margin:10px 0}.boatStepNavigation{flex-wrap:wrap}.boatStepNavigation button{font-size:11px;min-width:65px}#boatEditor .panelHead h2{font-size:18px}}

/* Mission details stay behind an optional info button in the bottom controls. */
.cockpit #missionChip{position:static;inset:auto;transform:none;display:flex;justify-content:center;align-items:center;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px;padding:0;text-align:center;border-radius:50%;align-self:center;background:#bad8ee;color:#163d53;font:700 25px Georgia,serif;box-shadow:0 3px 14px #07233b33}
#missionChip::before{content:'i'}#missionChipTitle,#missionChipTime{display:none!important}#missionChip[data-status=complete]{background:#a5d8bb}#missionChip[data-status=failed]{background:#edb1ac}
#gameSettings{width:min(390px,calc(100vw - 24px));margin:auto;padding:22px;border:1px solid #6d98aa;border-radius:18px;background:#112d40;color:#d7eaf3;max-height:90dvh;overflow:auto}#gameSettings::backdrop{background:#051a2ac4;backdrop-filter:blur(4px)}#gameSettings .fullWidth{margin-top:12px;min-height:44px}#gameSettings p{font-size:12px;line-height:1.6;margin-top:16px}#returnHome{margin:8px 0 14px}#introSettings{margin-top:8px}
@media(max-width:650px){.cockpit #missionChip{flex-basis:40px;width:40px;min-width:40px;max-width:40px;height:40px;font-size:23px}}
@media(orientation:landscape) and (max-height:550px){.cockpit #missionChip{flex-basis:36px;width:36px;min-width:36px;max-width:36px;height:36px;font-size:21px}}

#sailGuide{box-sizing:border-box;width:min(650px,calc(100vw - 24px));max-height:90dvh;overflow:auto;margin:auto;padding:22px;border:1px solid #6d98aa;border-radius:18px;background:#112d40;color:#e0edf4;line-height:1.6}#sailGuide::backdrop{background:#051a2ac9}#sailGuide .panelHead{align-items:flex-start}#sailGuide .panelHead button{flex-shrink:0}#sailGuide h2{font-size:24px}#sailGuide h3{margin:0}#sailGuide p,#sailGuide li{font-size:14px}#sailGuide li{margin:8px 0}#sailGuide summary{font-weight:700;cursor:pointer;padding:12px 0;color:#c1dfef}#sailGuide details{border-top:1px solid #537183;margin-top:12px}#sailGuide a{color:#a8d8f5;text-decoration:underline}#sailGuide .guideNow{background:#264b60;padding:14px;border-radius:12px;margin:16px 0}#sailGuide .guideNow small{font-size:12px}#sailGuide .fullWidth{margin-top:18px}[data-sail-guide]{margin:10px 0}@media(max-width:650px){#sailGuide{padding:16px;max-height:calc(100dvh - 20px)}#sailGuide h2{font-size:21px}}
/* Pastel families retain red/green action semantics and clear selected states. */
button{color:#102c3b;font-weight:700;background-color:#aed3ee;border-color:#7faecc;box-shadow:0 3px 10px #06253c30}
#menuToggle,#introSettings,#gameSettingsButton,#settingsScreen,#screenConfigButton,#qualityButton,#settingsQuality,[data-shortcut="qualityButton"],[data-shortcut="panorama"]{background:#c6b9e8;border-color:#9c8bc9}
#mapButton,#weatherButton,#maneuverToggle,[data-panel="sailsPanel"],[data-panel="proaPanel"],[data-shortcut="sails"],[data-shortcut="proa"],[data-shortcut="weatherButton"],[data-shortcut="map"]{background:#9edbdc;border-color:#66b4bc}
#soundButton,#settingsSound,[data-shortcut="soundButton"],#helpButton,[data-shortcut="helpButton"],#captainButton{background:#bec6ee;border-color:#929fcd}
button.primary,#saveButton,[data-shortcut="saveButton"],button[aria-pressed="true"]{background:#a2dbbd;border-color:#539879;color:#102d25}
button.danger,#cancelBoat,#returnHome,[data-close],[data-dismiss],#closeGameSettings,#screenConfigClose,#sailGuideClose{background:#eeb3b5;border-color:#bf7e88;color:#421e2a}
button[data-sail-guide]{background:linear-gradient(120deg,#8ce2e6,#b9ccfa);color:#082c3d;border:2px solid #8ceaf0;box-shadow:0 0 0 3px #65dbe333,0 0 20px #54dbe875,0 5px 15px #031d3555;font-weight:800;min-height:48px;white-space:normal;line-height:1.4;padding:12px}
button[data-sail-guide]:hover,button[data-sail-guide]:focus-visible{box-shadow:0 0 0 4px #72e7ef66,0 0 26px #54dbe899;outline:2px solid #1c5369;outline-offset:3px}
button:focus-visible{outline:3px solid #f0a2ba;outline-offset:3px}button:disabled{opacity:.48;box-shadow:none}#gameSettings .rangeLabel{margin-top:18px}#gameSettings .audioCredit{font-size:10px;line-height:1.5}#gameSettings a{color:#acd9ed;text-decoration:underline}

/* 0.15 · Paleta Canary Options (azul, verde, violeta, coral) */
:root{--co-blue:#1688B4;--co-yellow:#E3BB32;--co-orange:#E17B46;--co-green:#77A56B;--co-coral:#D15B63;--co-violet:#8174B3;--co-grey:#8B929B}
button.primary,#startButton,#launchBoat,#saveButton,.resumeStory,#boatStepNext,#lessonNext{background:var(--co-green)!important;border-color:#5e8a54!important;color:#fff!important}
button.primary:hover,#startButton:hover,#launchBoat:hover{background:#86b47a!important}
#introMissions,#mapButton,#weatherButton,#maneuverToggle,[data-panel="sailsPanel"],[data-panel="proaPanel"],[data-shortcut="sails"],[data-shortcut="proa"],[data-shortcut="weatherButton"],[data-shortcut="map"]{background:var(--co-blue)!important;border-color:#0f6d92!important;color:#fff!important}
#menuToggle,#introSettings,#gameSettingsButton,#settingsScreen,#screenConfigButton,#qualityButton,#settingsQuality,[data-shortcut="qualityButton"],[data-shortcut="panorama"]{background:var(--co-violet)!important;border-color:#685b9c!important;color:#fff!important}
.danger,.panelHead button{background:var(--co-coral)!important;color:#fff!important;border-color:#b2474f!important}
.coachAvatar{border-color:var(--co-yellow)}
.lessonTask,.trainingHint{border-left-color:var(--co-yellow)}
#missionBeacon{border-color:var(--co-yellow)}
#sailingAlert{background:#7a2f37f0;border-color:var(--co-coral)}
.wheelMark{stroke:var(--co-yellow)}
/* Minimapa como carta dentro de un panel */
#coastMap{background:radial-gradient(120% 120% at 30% 20%,#14506fe6,#0b2e44eb);border:1px solid #8fc3dc55;border-radius:16px;box-shadow:0 8px 26px #04192a55;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media(max-width:650px){#coastMap{width:150px;height:116px;opacity:.9}}

/* 0.16 · Minimapa a la izquierda (bajo los instrumentos) y botonera en una columna */
#coastMap{left:20px!important;right:auto!important;top:var(--hud-bottom)!important;width:230px;height:170px}
@media(max-width:650px){#coastMap{left:12px!important;width:150px;height:116px}}
@media(orientation:landscape) and (max-height:550px){#coastMap{left:auto!important;right:calc(var(--dock-space) + 64px)!important;top:12px!important;width:170px;height:118px}}
.screenShortcuts{grid-template-columns:44px!important;max-height:calc(100dvh - var(--hud-bottom,200px) - 210px)!important}
@media(max-width:650px){.screenShortcuts{grid-template-columns:40px!important;max-height:calc(100dvh - var(--hud-bottom,200px) - 200px)!important}body.panelOpen .screenShortcuts{grid-template-columns:36px!important}}
@media(orientation:landscape) and (max-height:550px){.screenShortcuts,body.panelOpen .screenShortcuts{grid-template-columns:36px!important;max-height:calc(100dvh - 120px)!important}}

/* Cada botón con un color de la paleta */
.screenShortcuts button{color:#fff!important;border-color:#0000002e!important;text-shadow:0 1px 2px #0003}
.screenShortcuts button[data-shortcut=outside],.screenShortcuts button[data-shortcut=coastToggle],.screenShortcuts button[data-shortcut=dockButton],.screenShortcuts button[data-shortcut=saveButton]{background:var(--co-green)!important}
.screenShortcuts button[data-shortcut=deck],.screenShortcuts button[data-shortcut=map],.screenShortcuts button[data-shortcut=weatherButton]{background:var(--co-blue)!important}
.screenShortcuts button[data-shortcut=panorama],.screenShortcuts button[data-shortcut=captainButton],.screenShortcuts button[data-shortcut=qualityButton],.screenShortcuts button[data-shortcut=account]{background:var(--co-violet)!important}
.screenShortcuts button[data-shortcut=sails],.screenShortcuts button[data-shortcut=soundButton],.screenShortcuts button[data-shortcut=engineButton]{background:var(--co-orange)!important}
.screenShortcuts button[data-shortcut=proa],.screenShortcuts button[data-shortcut=pauseButton],.screenShortcuts button[data-shortcut=feedbackButton]{background:var(--co-coral)!important}
.screenShortcuts button[data-shortcut=rigLabels],.screenShortcuts button[data-shortcut=missionsButton],.screenShortcuts button[data-shortcut=helpButton],.screenShortcuts button[data-shortcut=time]{background:var(--co-yellow)!important;color:#2e2508!important;text-shadow:none}
.screenShortcuts button[data-shortcut=cameraReset],.screenShortcuts button[data-shortcut=fullscreenButton],.screenShortcuts button[data-shortcut=anchorButton]{background:var(--co-grey)!important}
.screenShortcuts button[aria-pressed=true],.screenShortcuts button[aria-expanded=true]{outline:3px solid #fff!important;outline-offset:-3px!important;box-shadow:0 0 0 2px #0b2e44,0 3px 14px #07233b55!important}
.cameraZoom button{background:var(--co-grey)!important;color:#fff!important;border-color:#6f767e!important}
#pilotToggle{background:var(--co-green)!important;color:#fff!important}
.pilotActive #pilotToggle{background:var(--co-coral)!important}
#maneuverToggle{background:var(--co-orange)!important;border-color:#bf6233!important;color:#fff!important}
#maneuverToggle b{color:#fff!important}
.cockpit #missionChip{background:var(--co-yellow)!important;color:#2e2508!important}.cockpit #missionChip[data-status=complete]{background:var(--co-green)!important;color:#fff!important}.cockpit #missionChip[data-status=failed]{background:var(--co-coral)!important;color:#fff!important}
/* 0.17 · Botón de ayuda de velas en todos los menús de velas */
[data-sail-guide]{background:var(--co-yellow)!important;color:#2e2508!important;border-color:#b9951f!important;margin:0 0 12px;font-weight:800}
.directSailPanel [data-sail-guide]{margin-bottom:10px}

/* 0.18 · Menú agrupado, interruptores ON/OFF y pausa en pantalla */
.menuGroup{margin-top:14px}.menuGroup>small{display:block;color:#9fc0d3;font-weight:800;margin:0 0 8px}
.menuGroup .timeControl{margin-top:10px}
#mainMenu [data-in-rail]{display:none!important}
#mainMenu .optionGrid button{min-height:46px}
#mainMenu [data-panel="sailsPanel"]{background:var(--co-orange)!important;border-color:#bf6233!important;color:#fff!important}
#mainMenu [data-panel="proaPanel"]{background:var(--co-coral)!important;border-color:#b2474f!important;color:#fff!important}
#missionsButton{background:var(--co-yellow)!important;color:#2e2508!important;border-color:#b9951f!important}
#captainButton{background:var(--co-green)!important;color:#fff!important;border-color:#5e8a54!important}
#returnHome,#feedbackButton{background:#2a4a5e!important;color:#d8eaf3!important;border-color:#47697d!important}
.switchButton{display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%;background:#1b3d52!important;color:#e6f2f7!important;border:1px solid #4d7488!important;text-align:left}
.switchButton .sw{min-width:52px;padding:5px 0;border-radius:20px;text-align:center;font-size:12px;letter-spacing:.5px}
.switchButton .sw.on{background:var(--co-green);color:#fff;box-shadow:inset 0 0 0 2px #ffffff55}
.switchButton .sw.off{background:var(--co-grey);color:#fff}
.autoHint{font-size:11px!important;margin:6px 0 10px!important;color:#b9d3e0!important}
#playPause{flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;align-self:center;background:var(--co-blue)!important;color:#fff!important;font-size:15px;box-shadow:0 3px 14px #07233b33}
#playPause.paused{background:var(--co-green)!important;font-size:17px}
@media(max-width:650px){#playPause{flex-basis:40px;width:40px;min-width:40px;height:40px}}
#viewButton{background:var(--co-blue)!important;color:#fff!important;border-color:#0f6d92!important}
#cameraReset,#fullscreenButton{background:var(--co-grey)!important;color:#fff!important;border-color:#6f767e!important}
#coastToggle{background:var(--co-green)!important;color:#fff!important;border-color:#5e8a54!important}
#rigLabels{background:var(--co-violet)!important;color:#fff!important;border-color:#685b9c!important}
#helpButton{background:var(--co-orange)!important;color:#fff!important;border-color:#bf6233!important}
#coastToggle[aria-pressed=false],#rigLabels[aria-pressed=false]{opacity:.85}

/* 0.19 · Partidas */
#menuSaveGame{background:var(--co-green)!important;color:#fff!important;border-color:#5e8a54!important}
#menuLoadGame,#introLoad{background:var(--co-blue)!important;color:#fff!important;border-color:#0f6d92!important}
#introLoad{margin-top:8px}
#savesDialog{width:min(460px,calc(100vw - 24px));max-height:88dvh;overflow:auto;background:#102d40;color:#dcecf4;border:1px solid #688ca466;border-radius:16px;padding:18px}
#savesDialog::backdrop{background:#041a2bb0;backdrop-filter:blur(4px)}
#savesDialog .savesClose{background:var(--co-coral)!important;color:#fff!important;min-width:34px;min-height:34px;padding:6px 10px}
.savesNote{font-size:12px;margin:8px 0 12px}
.saveCard{background:#173a50;border:1px solid #3e6479;border-left:4px solid var(--co-yellow);border-radius:12px;padding:12px;margin-bottom:10px}
.saveCard.auto{border-left-color:var(--co-grey)}
.saveCard strong{display:block;font-size:14px}.saveCard span{display:block;font-size:11px;color:#a9c6d6;margin:3px 0 10px}
.saveActions{display:flex;gap:6px}.saveActions button{flex:1;padding:9px 6px;font-size:12px;color:#fff}
.saveActions .save{background:var(--co-green)}.saveActions .load{background:var(--co-blue)}.saveActions .del{background:var(--co-coral);flex:0 0 auto}

/* 0.21 · Escota del foque en una línea y consejos del capitán */
.jibLineBox{margin:12px 0 4px;padding:12px;border:1px solid #4d7488;border-radius:12px;background:#173a50}
.jibEnds{display:flex;justify-content:space-between}
#jibLine{accent-color:var(--co-orange)}
#jibFlip{background:var(--co-orange)!important;color:#fff!important;border-color:#bf6233!important;margin-top:4px}
.directSailPanel input[type=range][min="-100"]{accent-color:var(--co-orange)}
#captainTip{position:fixed;z-index:15;left:50%;transform:translateX(-50%);top:calc(var(--hud-bottom,200px) + 6px);width:min(380px,calc(100vw - 24px));display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:#102d40f2;border:1px solid #8cb5c477;border-left:4px solid var(--co-yellow);border-radius:14px;box-shadow:0 10px 30px #00121d77;animation:tipIn .25s ease-out}
#captainTip img{width:42px;height:52px;object-fit:cover;object-position:50% 18%;border-radius:10px;flex-shrink:0}
#captainTip small{color:var(--co-yellow);font-weight:800;font-size:9px}#captainTip p{margin:3px 0 0;font-size:13px;color:#e8f3f8;line-height:1.45}
#captainTip button{background:transparent!important;color:#b8d2df!important;border:0;padding:2px 4px;font-size:14px}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* 0.22 · Rendimiento de las velas y noche */
.sailEff{font-size:12px!important;margin:4px 0 10px!important;color:#cfe3ec!important}
.sailEff b{padding:2px 7px;border-radius:10px;color:#fff;font-size:11px}
.sailEff b.good{background:var(--co-green)}.sailEff b.mid{background:var(--co-yellow);color:#2e2508}.sailEff b.bad{background:var(--co-coral)}
body.isNight .brand{color:#dbe9f1;text-shadow:0 1px 6px #000a}
body.isNight .floatingHelm>small{color:#dbe9f1}

/* 0.23 · Aviso de destino bloqueado y botón de navegación libre */
.routeWrap{display:block}.routeWrap>button{width:100%}
.routeWrap>button:disabled{pointer-events:none;opacity:.55}
.lockHint{background:#4a3a14;border:1px solid var(--co-yellow);border-radius:10px;padding:10px 12px!important;color:#fbe9b5!important;font-size:12px!important;line-height:1.5}
.lockHint b{color:#fff}
.lockHint.flash{animation:lockFlash .9s ease-out 2}
@keyframes lockFlash{0%{box-shadow:0 0 0 0 #E3BB32cc}100%{box-shadow:0 0 0 10px #E3BB3200}}
#freeStart{background:var(--co-orange)!important;color:#fff!important;border-color:#bf6233!important;margin-top:8px;padding:13px 14px;font-weight:800}
.designLook{margin-top:8px!important;padding:8px 10px;border-left:3px solid var(--co-orange);background:#173a50;border-radius:8px;color:#e3eff5!important}


/* 0.24.1: all navigation readings share the HUD, clear of shortcut rails. */
.topInstruments,body.panelOpen .topInstruments{flex-wrap:wrap;max-width:calc(var(--scene-width,100vw) - 28px);box-sizing:border-box}
.headingInstrument,body.panelOpen .headingInstrument{min-width:0;width:76px;text-align:center;padding-left:7px;flex-shrink:0}
.headingRow,body.panelOpen .headingRow{display:block}
#headingDial,body.panelOpen #headingDial{position:relative;width:70px;height:70px;margin:auto;color:#174d67}
#headingRose>circle{stroke:currentColor;stroke-width:1.6}
.compassCardinals{font:700 9px system-ui}
#headingNeedle{fill:#b43f39;stroke:#b43f39;stroke-width:1}
#headingDial #heading,body.panelOpen #headingDial #heading{position:absolute;inset:0;display:grid;place-items:center;font:800 20px/1 system-ui;letter-spacing:-1px;color:#102c3b}
#courseName{white-space:nowrap}
#effHud,body.panelOpen #effHud{position:static;inset:auto;z-index:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;min-width:76px;max-width:100%;padding:5px 0 5px 9px;margin:0;border:0;border-left:1px solid #346a8133;border-radius:0;background:transparent;box-shadow:none;color:#102c3b;pointer-events:auto;cursor:pointer}
#effHud>small{font:700 8px system-ui;letter-spacing:.6px}
#effHud .effReadings{display:flex;flex-direction:column;gap:4px}
#effHud .effReadings>span{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:63px;padding:5px 6px;border-radius:7px;font:800 13px/1 system-ui;color:#102c3b}
#effHud i{font:800 10px system-ui;width:16px;height:16px;border-radius:50%;background:#ffffff60;display:grid;place-items:center}
#effHud .good{background:#a2dbbd}#effHud .mid{background:#b6d4ef}#effHud .bad{background:#eeb3b5}
#effHud[hidden],body.panelOpen #effHud[hidden],body.boatEditing #effHud{display:none!important}
@media(max-width:650px){
 .topInstruments{gap:7px}
 .headingInstrument,body.panelOpen .headingInstrument{width:67px;padding-left:5px}
 #headingDial,body.panelOpen #headingDial{width:62px;height:62px}
 #headingDial #heading,body.panelOpen #headingDial #heading{font-size:18px}
 #effHud,body.panelOpen #effHud{flex:1 0 100%;grid-column:1/-1;flex-direction:row;border-left:0;border-top:1px solid #346a8133;padding:5px 0 0}
 #effHud .effReadings{flex-direction:row;gap:8px}
}
@media(orientation:landscape) and (max-height:550px){
 #headingDial,body.panelOpen #headingDial{width:62px;height:62px}
 .headingInstrument,body.panelOpen .headingInstrument{width:67px}
 #headingDial #heading,body.panelOpen #headingDial #heading{font-size:18px}
 #effHud .effReadings>span{font-size:12px;padding:4px 5px}
}
@media(max-width:650px){
 body.panelOpen #effHud{flex-wrap:wrap;gap:4px}
 body.panelOpen #effHud .effReadings{flex-wrap:wrap;justify-content:center;gap:4px}
 body.panelOpen #effHud .effReadings>span{min-width:55px;font-size:11px;padding:4px}
}
@media(orientation:landscape) and (max-height:550px) and (max-width:740px){
 .topInstruments,body.panelOpen .topInstruments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:calc(var(--scene-width,100vw) - 80px);max-width:none;gap:5px;padding:6px}
 .motionReadings,body.panelOpen .motionReadings{min-width:0;grid-column:auto;flex-direction:column}
 .motionReadings strong,body.panelOpen .motionReadings strong{font-size:18px}
 .windInstrument,body.panelOpen .windInstrument{width:auto}
 #windDial,body.panelOpen #windDial{width:42px;height:42px}
 .headingInstrument,body.panelOpen .headingInstrument{width:auto;padding-left:0}
 #headingDial,body.panelOpen #headingDial{width:58px;height:58px}
 .headingInstrument>span,body.panelOpen .headingInstrument>span{font-size:7px}
 .destinationInstrument,body.panelOpen .destinationInstrument{width:auto;grid-column:auto;flex-direction:column;padding-left:3px;border-top:0;border-left:1px solid #346a8133}
 .destinationInstrument svg,body.panelOpen .destinationInstrument svg{width:32px;height:32px}
 #effHud,body.panelOpen #effHud{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;border-left:0;border-top:1px solid #346a8133;padding:4px 0 0;min-width:0}
 #effHud .effReadings{flex-direction:row}
}
@media(orientation:portrait) and (max-width:650px){
 .screenShortcuts,body.panelOpen .screenShortcuts{top:var(--hud-bottom,220px);max-height:max(0px,calc(100dvh - var(--hud-bottom,220px) - 200px))!important}
 body.panelOpen .screenShortcuts{max-height:max(0px,calc(100dvh - var(--hud-bottom,220px) - 290px))!important}
}


/* Chart zoom stays inside its map, clear of the drawer and route controls. */
.chartZoom{position:absolute;top:8px;left:8px;right:8px;z-index:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;pointer-events:none}
.chartZoom button{pointer-events:auto;min-width:44px;min-height:44px;padding:5px 10px;border-radius:9px;background:#aed3ee!important;color:#102c3b!important;font-weight:800;box-shadow:0 2px 8px #001b3155}
#chartZoomIn,#chartZoomOut{font-size:25px;line-height:1}#chartCenter{font-size:12px}
#chartZoomLevel{padding:5px 8px;border-radius:6px;background:#102d40e8;color:#dbedf6;font-size:10px;white-space:nowrap}
.chartZoom button:disabled{opacity:.45}
@media(max-width:450px){.chartZoom{gap:4px}.chartZoom button{min-width:40px;min-height:40px;padding:4px 8px}#chartCenter{font-size:11px}#chartZoomLevel{font-size:9px}}

/* 0.63 · Patrones contratados */
.skipperBoat{background:#173a50;border:1px solid #3e6479;border-left:4px solid var(--co-yellow,#E3BB32);border-radius:12px;padding:10px 12px;margin:10px 0}
.skipperBoat strong{display:block;font-size:14px;color:#fff}.skipperBoat p,.skipperNote{font-size:12px!important;color:#cfe3ec!important;margin:6px 0!important;line-height:1.5}
.skipperBoat button{background:var(--co-green,#77A56B)!important;color:#fff!important;font-weight:800;text-align:left;white-space:normal}