.sea-screen{position:absolute;inset:0;z-index:18;color:#ddd8c7;font-family:Georgia,serif;pointer-events:none;text-shadow:0 1px 2px #000;overflow:hidden}
.sea-screen[hidden]{display:none}.sea-screen button,.sea-screen aside,.sea-chart{pointer-events:auto}.has-sea-travel>.location-hud,.has-sea-travel>.crosshair{display:none}
.sea-framed{background:#101b1bec;border:16px solid transparent;border-image:url('./assets/ui/sea/UI_SEA_PANEL_FRAME_9S.png') 48 stretch;box-sizing:border-box;box-shadow:0 8px 26px #0005}
.sea-screen h1,.sea-screen h2,.sea-screen p{margin:0}.sea-screen h1{font-size:clamp(1.3rem,2.4vw,2.8rem);font-weight:400;line-height:1.2;color:#e2decd}.sea-screen h2{font-size:clamp(1rem,1.3vw,1.45rem);font-weight:400;color:#c5ad78}.sea-screen small{font-size:.9rem;color:#b4a176}
.sea-map-layout{position:absolute;inset:0;padding:1.2%;background:#101b1d;display:grid;grid-template-columns:minmax(0,7fr) minmax(240px,3fr);gap:1.2%;pointer-events:auto}
.sea-chart{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8px;overflow:hidden}.sea-chart h2{padding:0 12px}.sea-chart-art{position:relative;width:100%;aspect-ratio:1672/941;flex-shrink:0}.sea-map-base{width:100%;height:100%;display:block;object-fit:contain}.sea-chart-art>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sea-route{fill:none;stroke:#a4c3c9;stroke-width:2.1;stroke-dasharray:8 6}.sea-route.blocked{stroke:#95665c}.sea-port{position:absolute!important;transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible;display:block!important;opacity:1!important}.sea-port img{width:38px;height:38px;filter:drop-shadow(0 2px 4px #000)}.sea-port span{position:absolute;left:38px;top:9px;background:#091517d9;padding:3px 7px;color:#e9e2cf;font-size:clamp(13px,1vw,18px);white-space:nowrap}.sea-port:not(:disabled):hover img,.sea-port.selected img{filter:drop-shadow(0 0 6px #c5e1ee);transform:scale(1.13)}.sea-port:disabled{cursor:default}.sea-moving-ship{position:absolute;transform:translate(-50%,-50%);pointer-events:none}.sea-moving-ship img{width:28px;height:28px}
.sea-map-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.82rem;color:#aeb7b2;padding:0 12px}.sea-destination{display:flex;min-height:0;flex-direction:column;padding:clamp(8px,1.5vw,26px);gap:clamp(6px,1vh,16px);overflow:auto}.sea-origin{color:#b1b8b1;font-size:1rem}.sea-destination>img{align-self:center;width:clamp(40px,7vw,96px);height:auto;margin:auto}.sea-map-actions{display:grid;gap:9px;margin-top:auto;padding-top:12px}
.sea-button{display:flex!important;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;padding:8px 14px!important;font-family:Georgia,serif;font-size:clamp(14px,1.1vw,19px);color:#e2dbc6!important;border:2px solid #8e927b!important;border-radius:3px;background:#203943 url('./assets/ui/sea/UI_SEA_BUTTON_NORMAL.png') center/100% 100%!important;box-shadow:none!important;text-align:left;line-height:1.15}.sea-button img{width:30px;height:30px;flex-shrink:0}.sea-button:hover:not(:disabled){background-image:url('./assets/ui/sea/UI_SEA_BUTTON_HOVER.png')!important;color:#fff!important}.sea-button.selected{background-image:url('./assets/ui/sea/UI_SEA_BUTTON_SELECTED.png')!important;border-color:#dec792!important}.sea-button:disabled{background-image:url('./assets/ui/sea/UI_SEA_BUTTON_DISABLED.png')!important;opacity:.48;cursor:default}.sea-button:focus-visible,.sea-port:focus-visible{outline:2px solid #e1d39f!important;outline-offset:4px}
.sea-stat{display:flex;gap:8px;align-items:center;border-bottom:1px solid #53615b66;padding:8px 0;font-family:Georgia,serif;font-size:clamp(13px,1vw,17px)}.sea-stat img{width:23px;height:23px}.sea-stat>span{color:#a8b4ac}.sea-stat strong{margin-left:auto;font-weight:400;color:#e2decd;text-align:right}
.sea-heading{position:absolute;left:3%;top:4%;max-width:64%;padding:10px 18px;background:linear-gradient(90deg,#0c171ab5,transparent)}.sea-heading>span{display:block;color:#ccc6ad;font-size:.9rem;margin-bottom:5px}.sea-status,.sea-orders,.sea-story{position:absolute;right:2%;top:5%;width:clamp(225px,27%,380px);padding:12px;max-height:70%;overflow:auto}.sea-orders{display:grid;gap:10px}.sea-hint,.sea-status p{font-size:.9rem;line-height:1.45;color:#b8b8ac;margin-top:10px!important}.sea-hull{height:4px;background:#29332c;margin:8px 0}.sea-hull i{height:100%;display:block;background:#8b9c79}
.sea-bottom{position:absolute;bottom:0;left:0;right:0;padding:20px 3% 14px;background:linear-gradient(transparent,#0a1318ed 25%);pointer-events:auto}.sea-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.sea-actions .sea-button{flex:1 1 100px;max-width:290px}.sea-progress{height:3px;background:#777e7366;max-width:680px;margin:auto}.sea-progress i{height:100%;background:#bad0ce;display:block}.sea-progress-label{max-width:680px;display:flex;justify-content:space-between;gap:12px;margin:8px auto 14px;font-size:.9rem;color:#d1cdbd}.sea-progress-label [data-sea-remaining]{color:#adb7b5;font-size:.8rem}
.sea-arrival{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(85%,530px);padding:26px;display:grid;gap:18px;pointer-events:auto}.sea-arrival p,.sea-story p{font-size:1rem;line-height:1.6}.sea-story .sea-button{margin-top:18px}
@media(max-width:900px){.sea-map-layout{grid-template-columns:minmax(0,6fr) minmax(220px,4fr)}.sea-framed{border-width:10px}.sea-destination>img{display:none}.sea-stat{padding:5px 0}.sea-chart{padding:0}.sea-status{top:3%;max-height:60%}.sea-heading{max-width:56%;left:1%}.sea-button{padding:6px!important;gap:6px}.sea-button img{width:24px;height:24px}.sea-bottom{padding-left:2%;padding-right:2%}}
@media(max-width:620px){.sea-map-layout{grid-template-columns:1fr;overflow:auto;grid-template-rows:auto auto}.sea-chart{min-height:210px}.sea-destination{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sea-destination h1,.sea-destination small,.sea-destination .sea-origin{grid-column:1/-1}.sea-map-actions{grid-column:1/-1;display:flex}.sea-map-actions button{flex:1}.sea-status,.sea-orders,.sea-story{width:47%;right:1%;padding:6px}.sea-heading{max-width:47%;padding:5px}.sea-actions{gap:4px}.sea-actions .sea-button{font-size:12px}.sea-actions img{display:none}.sea-progress-label{font-size:12px}.sea-progress-label [data-sea-remaining]{display:none}}