/* Atlantic 6.1 — soft blue, green, coral red and butter yellow over ink. */
:root {
  --bg:#0d131d; --panel:#172532; --panel2:#1c2f3d; --line:#344858;
  --ink:#eef3f5; --muted:#a1b4c3; --blue:#8dc5ed; --green:#95d6af;
  --red:#eda2a9; --yellow:#efd68c; --mint:var(--green); --gold:var(--yellow);
  --section-accent:var(--blue); --tutorial-height:0px;
}
body {background:radial-gradient(ellipse at 88% 0%,#20344880,transparent 43%),radial-gradient(ellipse at 5% 85%,#19352b50,transparent 35%),var(--bg)}
body[data-page=market],body[data-page=crew] {--section-accent:var(--green)}
body[data-page=fleet] {--section-accent:var(--yellow)}
body[data-page=ranking] {--section-accent:var(--red)}
.sidebar {background:linear-gradient(175deg,#101925,#101c27 60%,#112821);border-right-color:#324754}
.topbar {background:linear-gradient(110deg,#172c3bba,#14251ec4);border-bottom-color:#375361}
.accounts>div {border-left:2px solid #69a887;padding-left:12px}
.accounts .worth {border-left-color:#c2aa65}
#worth {color:var(--yellow)}
.avatar {background:#273c33;color:var(--green);border-color:#577d68}
.brand-mark {color:var(--blue)}
.brand-mark span {color:var(--yellow)}
.brand b {color:#e5e6c8}
.live-dot {box-shadow:0 0 10px #97dfb23b}
#navigation button {--nav-color:var(--blue);--nav-tint:#28495f55;--nav-border:#5683a5}
#navigation button[data-page=market],#navigation button[data-page=crew] {--nav-color:var(--green);--nav-tint:#34574555;--nav-border:#5f987a}
#navigation button[data-page=fleet] {--nav-color:var(--yellow);--nav-tint:#5a513155;--nav-border:#9d8f57}
#navigation button[data-page=ranking] {--nav-color:var(--red);--nav-tint:#5a374555;--nav-border:#9d636c}
#navigation button .nav-icon {color:var(--nav-color);background:var(--nav-tint);border:1px solid #ffffff12;width:31px;height:31px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:17px}
#navigation button.active {background:var(--nav-tint);color:var(--nav-color);border-color:var(--nav-border)}
#navigation button:hover {color:var(--nav-color)}
.page-heading h1 {color:#e9f0f5}
.page-heading h1::after {content:'';display:block;width:46px;height:3px;background:var(--section-accent);border-radius:3px;margin-top:12px}
.panel {background:linear-gradient(135deg,#1e34402b,transparent 60%),var(--panel);border-color:#344a59;box-shadow:0 8px 25px #00000012}
.panel-head {background:linear-gradient(100deg,#263d4c85,#1b2e37a1);border-bottom-color:#38515f}
.panel-head h2 {color:var(--section-accent)}
.map-panel .panel-head h2 {color:var(--blue)}
.selected-ship .panel-head {background:linear-gradient(100deg,#2a414e,#263d32)}
.selected-ship .panel-head h2 {color:#edf3e7}
.eyebrow {color:var(--section-accent)}
.map-area {background:radial-gradient(ellipse at 46% 40%,#29526a,#142c42 82%)}
.map-actions button {background:#213c50f5;border-color:#52758b;color:#c4e5fa}
.map-caption {color:#9ab9ce}
.map-legend {background:#152c3d}
.map-compass {color:#aacbe3}
.map-compass span {color:#7397b0}
.ship-image {background:radial-gradient(ellipse at 57% 45%,#3a5d6c,#243e51 55%,#172c36 95%)}
.ship-image::after {background:linear-gradient(transparent 66%,#172532)}
.ship-tag {background:#294a3add;border-color:#638975;color:#b8e9c8}
.ship-number {color:#c4d6e0}
.metric-grid>div {border-left:2px solid #629aba;padding-left:9px}
.metric-grid>div:nth-child(4n+2) {border-left-color:#b9a264}
.metric-grid>div:nth-child(4n+3) {border-left-color:#77b090}
.metric-grid>div:nth-child(4n+4) {border-left-color:#be7e87}
.metric-grid small {color:#a7bbc9}
button {background:#29414f;border-color:#456170}
button.primary {background:var(--green);border-color:var(--green);color:#13291e}
button.primary:hover {background:#b4e6c5;border-color:#b4e6c5}
button.active {background:#2a4638;border-color:#7eb996;color:#bbe8c8}
button.danger {background:#55313b;border-color:#a56a73;color:#ffd0d1}
button.danger:hover {background:#663c48}
input,select {background:#102330;border-color:#466171}
.time-control {background:#283c50;border-color:#486985}
.time-control button {background:#36516a;color:#d3eafa}
.time-control select {color:#d3eafa}
.throttle button[data-value=eco] {color:#b4e3c4;background:#233e31;border-color:#50755e}
.throttle button[data-value=cruise] {color:#c3e2fa;background:#263f53;border-color:#54768f}
.throttle button[data-value=full] {color:#f1c2c6;background:#49333d;border-color:#80565f}
.throttle button {display:grid;justify-items:center;align-content:center;gap:5px;min-height:76px;border-width:2px}
.throttle button small {font-size:10px;color:inherit;opacity:.9}
.throttle-lamp {display:grid;place-items:center;width:17px;height:17px;border-radius:50%;color:#7e949e;font-size:12px;line-height:1}
.throttle button.active {font-weight:750}
.throttle button[data-value=eco].active {background:var(--green);border-color:#c7f4d7;color:#143325;box-shadow:0 0 16px #85c7a14d,inset 0 0 0 1px #ffffff66}
.throttle button[data-value=cruise].active {background:var(--blue);border-color:#d2edff;color:#15354d;box-shadow:0 0 16px #73b8e34d,inset 0 0 0 1px #ffffff66}
.throttle button[data-value=full].active {background:var(--red);border-color:#ffd4d9;color:#4a2430;box-shadow:0 0 16px #dc939b4d,inset 0 0 0 1px #ffffff66}
.throttle button.active .throttle-lamp {background:#fff9;color:inherit;box-shadow:0 0 9px #ffffffb0}
.throttle-status {display:flex;align-items:center;gap:6px;font-size:11px;color:#c9e2ec;margin:13px 0 11px}
.status-lamp {width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 7px var(--blue)}
.throttle-status[data-regime=eco] .status-lamp {background:var(--green);box-shadow:0 0 7px var(--green)}
.throttle-status[data-regime=full] .status-lamp {background:var(--red);box-shadow:0 0 7px var(--red)}
.throttle-rates {display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;background:#102330;border-radius:9px}
.throttle-rates small {display:block;font-size:9px;margin-bottom:5px}
.throttle-rates strong {font-size:12px;color:#d5e8ef}
.throttle-help {margin:8px 0 12px;line-height:1.6}
.voyage-forecast {display:grid;grid-template-columns:1fr 1fr;gap:13px;background:#254352;padding:13px;border:1px solid #527b8c;border-radius:9px}
.voyage-forecast>div:first-child {grid-column:1/-1}
.voyage-forecast #routeEta {font-size:20px;color:var(--blue);font-weight:650}
.throttle-comparison {overflow-x:auto;margin:16px 0;border:1px solid #45636b;border-radius:9px}
.throttle-comparison table {width:100%;font-size:12px;white-space:normal}
.throttle-comparison th,.throttle-comparison td {padding:11px 10px}
.throttle-comparison tbody th {text-transform:none;letter-spacing:0;font-size:11px;text-align:left}
.throttle-comparison tbody td:last-child {color:var(--yellow);font-weight:650}
button.throttle-cancel {width:100%;margin-top:9px}
.trade-form {background:linear-gradient(155deg,#25493666,#152736 65%)}
.trade-total {color:var(--yellow)}
.buy-sell button[data-side=buy] {color:var(--green)}
.buy-sell button[data-side=sell] {color:var(--yellow)}
.buy-sell button[data-side=sell].active {background:#50492e;border-color:#c3ac69}
th {background:#203b4a;color:#bfd0db}
tbody tr.active {background:#2b493c}
tbody tr[data-good]:hover {background:#294657}
.good-icon {background:#43513866;color:#d8e9b0}
tbody tr:nth-child(4n+2) .good-icon {background:#2e526a77;color:var(--blue)}
tbody tr:nth-child(4n+3) .good-icon {background:#62434a66;color:var(--red)}
tbody tr:nth-child(4n+4) .good-icon {background:#685a3366;color:var(--yellow)}
.pill {background:#294337;border-color:#5e896c;color:#bce8c9}
.pill.gold {background:#49412b;border-color:#8e7a49;color:#f0d99f}
.notice {background:#243c30;border-color:#537661;color:#c7e1d0}
.notice.warning {background:#453c27;border-color:#8f7b4a;color:#f2dda3}
.notice.danger {background:#472f38;border-color:#90616c;color:#f7bec4}
.fleet-card {border-top:3px solid #6b9fba}
.fleet-card:nth-child(4n+2) {border-top-color:#78b790}
.fleet-card:nth-child(4n+3) {border-top-color:#c4aa68}
.fleet-card:nth-child(4n+4) {border-top-color:#c48a91}
.fleet-card.selected {border-color:#b49e63}
.crew-avatar {background:#335244;border:1px solid #5e8770;color:#c2e6ce}
.score-card .rank {color:var(--blue)}
.score-card:first-child .rank {color:var(--yellow)}
.score-card.me {border-color:#83ae95;background:linear-gradient(110deg,#294739,#1d333e)}
.score-card .score {color:#e7dea9}
.info-grid>.panel {border-top:3px solid #70a7c8;background:linear-gradient(135deg,#28465980,#192832)}
.info-grid>.panel:nth-child(4n+2) {border-top-color:#80b795;background:linear-gradient(135deg,#33533d80,#192832)}
.info-grid>.panel:nth-child(4n+3) {border-top-color:#c2a766;background:linear-gradient(135deg,#514a3080,#192832)}
.info-grid>.panel:nth-child(4n+4) {border-top-color:#b67b85;background:linear-gradient(135deg,#51394280,#192832)}
.feed time {color:#a2cbb4}
.finish-banner {background:linear-gradient(115deg,#355d44,#294557 65%,#5d4d32);border-color:#aaa271}
.heading-actions {display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tutorial-launch {background:#293f53;border-color:#668fb0;color:#cbe8ff;font-weight:600}
.tutorial-launch:hover {background:#375771;border-color:#98c7e7}
#tutorialPanel {border-color:#6288a1;background:linear-gradient(125deg,#28495d70,#1a303c)}
#tutorialPanel .panel-head h2 {color:var(--blue)}
/* Welcome and the optional second question. */
dialog {background:linear-gradient(140deg,#213c4b,#172b36 65%,#22372c);border-color:#7395a1}
dialog .eyebrow {color:var(--blue)}
.welcome-art {height:105px;position:relative;overflow:hidden;border-radius:12px;margin:6px 0 24px;background:linear-gradient(115deg,#214156,#3c6276 65%,#496747);border:1px solid #60809366}
.welcome-art::after {content:'';position:absolute;bottom:-35px;left:-8%;right:-8%;height:84px;border-radius:50%;background:#84b9d522;border-top:1px solid #acd9e448;transform:rotate(-6deg)}
.welcome-sun {position:absolute;right:39px;top:17px;width:39px;height:39px;background:var(--yellow);border-radius:50%;box-shadow:0 0 35px #f2da9040}
.welcome-boat {position:absolute;left:25px;top:13px;color:#cbebf3;font-size:48px;z-index:1;transform:rotate(-9deg)}
.welcome-route {position:absolute;left:83px;right:89px;top:51px;border-top:2px dashed #b9dcea88;transform:rotate(-8deg)}
.welcome-buoy {position:absolute;width:10px;height:10px;border-radius:50%;top:44px;left:100px;background:var(--red);box-shadow:0 0 0 5px #eea2aa22}
.buoy-two {left:auto;right:101px;top:26px;background:var(--green);box-shadow:0 0 0 5px #a0deb122}
.welcome-caption {position:absolute;right:16px;bottom:14px;letter-spacing:2px;font-size:8px;color:#d7e9df;z-index:1}
.welcome-choices {display:grid;gap:9px;margin:22px 0 8px}
.welcome-choices .primary {margin:0}
.welcome-choices button {min-height:46px}
.welcome-footnote {font-size:11px!important;color:#abc1c9!important;margin:16px 0 0!important;line-height:1.6!important}
.welcome-pills {display:flex;gap:8px;flex-wrap:wrap;font-size:10px;color:#d1e4e4}
.welcome-pills span {background:#31534d;border:1px solid #628375;border-radius:30px;padding:6px 10px}
.welcome-complete {width:59px;height:59px;border-radius:18px;background:#3d6850;color:#cef0d4;display:grid;place-items:center;font-size:35px;margin:0 0 20px}
.welcome-recipe {display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.welcome-recipe span {padding:8px 11px;border-radius:7px;background:#335943;color:#c9ecd0;font-size:11px}
.welcome-recipe span:nth-child(2) {background:#355975;color:#c9e6fa}
.welcome-recipe span:nth-child(3) {background:#655735;color:#f1dfab}
/* A persistent, skippable guide. Game operations stay available while it is open. */
.tutorial-guide {--guide-accent:var(--blue);position:sticky;top:10px;z-index:65;margin:18px 32px 0;padding:19px 22px 14px;border:1px solid #6d9baf;border-top:3px solid var(--guide-accent);border-radius:15px;background:#1c3343;box-shadow:0 15px 35px #030b1488}
.tutorial-guide[data-tone=green] {--guide-accent:var(--green);background:#203b32;border-color:#688d74}
.tutorial-guide[data-tone=red] {--guide-accent:var(--red);background:#3b2b36;border-color:#9e7279}
.tutorial-guide[data-tone=yellow] {--guide-accent:var(--yellow);background:#3a3626;border-color:#9b8c5b}
.guide-heading {display:grid;grid-template-columns:45px minmax(0,1fr) 26px;gap:15px;align-items:start}
.guide-step {font-size:26px;font-weight:600;line-height:1.1;color:var(--guide-accent);padding-top:4px}
.guide-step small {display:block;color:#abc2c9;font-size:10px;margin-top:6px}
.guide-copy .eyebrow {color:var(--guide-accent);font-size:9px;margin-bottom:5px}
.guide-copy h2 {font-size:19px;color:#edf4ef;margin-bottom:7px}
.guide-copy p {font-size:12px;line-height:1.65;color:#d2e0e3;max-width:900px}
.guide-exit {min-height:27px;height:27px;width:27px;padding:0;border:0;background:transparent;font-size:23px;color:#b6cbd2}
.guide-tip {font-size:11px;color:var(--guide-accent);padding-left:60px;margin-top:10px;line-height:1.6}
.guide-bottom {display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:15px}
.guide-clock {font-size:10px;color:#b5cdd1}
.guide-buttons {display:flex;gap:7px;align-items:center}
.guide-buttons button {min-height:38px}
.guide-buttons button.primary {background:var(--guide-accent);border-color:var(--guide-accent);color:#152832}
.guide-progress {display:flex;gap:5px;margin-top:14px}
.guide-progress i {height:3px;background:#b8dbe121;flex:1;border-radius:3px}
.guide-progress i.done {background:var(--guide-accent)}
.tutorial-highlight {outline:3px solid var(--guide-accent,var(--blue))!important;outline-offset:4px;box-shadow:0 0 0 8px #a9d9e915,0 10px 32px #0003!important;scroll-margin-top:calc(var(--tutorial-height) + 38px);scroll-margin-bottom:100px;border-radius:10px}
.tutorial-active .app-footer {padding-bottom:36px}
@media(max-width:1200px){.tutorial-guide{margin-left:22px;margin-right:22px}}
@media(max-width:1000px){#navigation button .nav-icon{width:31px;height:31px}.heading-actions{gap:7px}}
@media(max-width:700px){
  .sidebar{background:#101c28f7;border-top-color:#54737f}
  #navigation button .nav-icon{width:25px;height:25px;font-size:16px;border-radius:6px}
  #navigation button{gap:3px;padding:4px 2px}
  .accounts>div{padding-left:9px}
  .heading-actions{width:100%;justify-content:flex-start;display:grid;grid-template-columns:1fr}
  .heading-actions>.tutorial-launch{justify-self:start;min-height:36px}
  .heading-actions .time-control{width:100%}
  .tutorial-guide{position:relative;top:0;margin:14px 14px 0;padding:17px 15px 13px;box-shadow:0 10px 26px #0003}
  .guide-heading{grid-template-columns:31px minmax(0,1fr) 23px;gap:9px}
  .guide-step{font-size:23px}
  .guide-copy h2{font-size:18px;line-height:1.35}
  .guide-copy p{font-size:12px;line-height:1.7}
  .guide-copy .eyebrow{font-size:8px;letter-spacing:1.2px}
  .guide-tip{padding-left:40px;font-size:11px;line-height:1.65}
  .guide-bottom{position:fixed;left:12px;right:12px;bottom:calc(79px + env(safe-area-inset-bottom));z-index:72;background:#1a303e;border:1px solid #668b99;border-radius:12px;padding:10px 12px;display:grid;gap:7px;box-shadow:0 5px 25px #0009}
  .guide-clock{font-size:9px;text-align:center;color:#bfd5dc}
  .guide-buttons{display:grid;grid-template-columns:1fr .85fr 1.2fr;gap:7px}
  .guide-buttons button{font-size:11px;min-height:38px;padding:7px 5px}
  .guide-progress{margin-top:15px}
  .tutorial-highlight{scroll-margin-top:20px;scroll-margin-bottom:185px}
  .tutorial-active .app-footer{padding-bottom:calc(190px + env(safe-area-inset-bottom))}
  .welcome-art{height:95px;margin-bottom:20px}
  .welcome-choices{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.tutorial-highlight{scroll-behavior:auto}}

/* Sound controls are local to this device and stay within the normal layout. */
.sound-toggle {display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0;border-radius:12px;background:#294459;color:var(--blue);border-color:#6088a2}
.sound-toggle[aria-pressed=false] {background:#203039;color:#9db0b8;border-color:#4a606b}
.sound-panel {grid-column:1/-1;border-color:#547f91;background:linear-gradient(115deg,#213d50,#1c352e)}
.sound-panel .panel-head h2 {margin-top:6px;color:#dbeff5}
.sound-settings {display:grid;grid-template-columns:1fr 1fr;gap:26px 42px}
.sound-settings p {font-size:12px;line-height:1.7}
.sound-switch-row {display:flex;align-items:center;justify-content:space-between;gap:18px;margin:17px 0;color:#d9e9e7;font-size:13px}
.sound-switch-row small {display:block;margin-top:6px;font-size:11px;font-weight:400}
.sound-switch-row button {flex-shrink:0;min-width:98px}
.sound-volume>span {display:flex;justify-content:space-between;gap:12px;align-items:center}
.sound-volume output {color:var(--blue);font-size:15px;font-weight:650}
.sound-volume input {width:100%;padding:8px 0;background:transparent;border:0;accent-color:var(--blue);cursor:pointer}
.sound-previews {display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 13px}
.sound-previews button {border-color:#598779;color:#c9e7d4}
.sound-waves {display:flex;gap:5px;align-items:center;height:36px;padding:0 6px}
.sound-waves i {width:4px;height:12px;border-radius:4px;background:var(--blue)}
.sound-waves i:nth-child(2n) {height:26px;background:var(--green)}
.sound-waves i:nth-child(3) {height:36px;background:var(--yellow)}
@media(max-width:700px){
  .topbar>div:first-child{min-width:0}
  .topbar .accounts{display:grid;grid-template-columns:minmax(44px,1fr) 34px;min-width:108px;gap:6px 8px;flex-shrink:0}
  .topbar .accounts>div:first-child{grid-column:1/-1;text-align:right}
  .topbar .accounts .avatar{align-self:center}
  .sound-settings{grid-template-columns:1fr;gap:10px}
  .sound-switch-row{gap:12px}
  .sound-previews button{min-height:44px}
}

/* 6.3: a full ship portrait with soft surfaces; preserve the mast and hull. */
.ship-image,.fleet-card .ship-image,.selected-ship .ship-image,dialog .ship-image {
  height:auto;min-height:0;aspect-ratio:3/2;align-self:start;background:#214555;
}
.ship-image .ship-art {width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.ship-image:hover .ship-art {transform:scale(1.025)}
.ship-image::after {background:linear-gradient(transparent 80%,#172532aa);pointer-events:none}
.ship-number {color:#e2f2f5;text-shadow:0 1px 7px #071725}
.ship-tag {backdrop-filter:blur(7px)}
.crew-readiness {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin:16px 0 20px;padding:13px;border:1px solid #84764d;border-left:3px solid var(--yellow);border-radius:10px;background:#383929}
.crew-readiness.complete {border-color:#517b65;border-left-color:var(--green);background:#223f33}
.crew-readiness small {display:block;color:#d7d2b4;font-size:9px;letter-spacing:.6px;margin-bottom:6px}
.crew-readiness strong {font-size:19px;color:var(--yellow)}
.crew-readiness.complete strong {color:var(--green)}
.crew-readiness strong span {font-size:11px;font-weight:500}
.crew-readiness p {grid-column:1/-1;color:#d4ddcf;font-size:11px;line-height:1.6;margin:0}
.crew-readiness button {min-height:40px;border:1px solid #7a997f;color:#e0efdd;padding:8px 10px;white-space:nowrap}
.crew-costs {margin:20px 0}
.crew-hire {width:100%;min-height:46px;margin-bottom:10px;white-space:normal}
.crew-vacancy .crew-avatar {background:#3c3d2c;color:var(--yellow);border-color:#857b51;flex-shrink:0}
.crew-vacancy h3 {color:#efdfb9}
.crew-vacancy p {color:#c8b986}
.crew-row>div:not(.salary) {min-width:0}
.crew-row .salary {flex-shrink:0;white-space:nowrap;font-size:12px}
@media(max-width:420px){.crew-readiness{gap:8px}.crew-readiness button{font-size:10px;padding:7px}.crew-row{gap:9px}.crew-row h3{font-size:11px}}
@media(prefers-reduced-motion:reduce){.ship-image .ship-art{transition:none}.ship-image:hover .ship-art{transform:none}}

/* 6.4: ship scenes and the shared maritime forecast. */
.ship-scene {isolation:isolate}
.ship-scene .ship-art {transform:none;transition:none}
.ship-scene:hover .ship-art {transform:none}
.ship-scene .ship-tag {font-size:9px;z-index:3;pointer-events:none}
.ship-scene .ship-number {left:13px;right:auto;top:auto;bottom:14px;font-size:10px;z-index:3;pointer-events:none}
.ship-scene .scene-open {position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:12px;display:flex;justify-content:flex-end;align-items:flex-end;background:transparent;border:0;border-radius:0;z-index:4;cursor:zoom-in}
.ship-scene .scene-open:hover {background:linear-gradient(transparent 65%,#06182144)}
.scene-open span {background:#173a4be8;border:1px solid #9ac9dd88;border-radius:8px;color:#ecf7ff;padding:7px 9px;font-size:10px}
.scene-open:focus-visible {outline:3px solid var(--yellow);outline-offset:-4px}
.at-sea .ship-art {animation:ocean-drift 12s ease-in-out infinite;animation-delay:var(--scene-phase)}
.at-sea[data-sea="2"] .ship-art,.at-sea[data-sea="3"] .ship-art {animation-name:rough-drift;filter:brightness(.78) saturate(.78)}
.sea-shimmer {display:none;position:absolute;inset:60% 0 0;pointer-events:none;background:repeating-linear-gradient(168deg,transparent 0 34px,#d7f4ff10 37px,transparent 40px 82px);mix-blend-mode:screen;z-index:1}
.at-sea .sea-shimmer {display:block;animation:water-glide 6s linear infinite;animation-delay:var(--scene-phase)}
.scene-rain {position:absolute;inset:-20%;background:repeating-linear-gradient(108deg,transparent 0 28px,#ddedfa30 29px,transparent 30px 49px);opacity:.4;pointer-events:none;animation:rain-fall 1.1s linear infinite;z-index:2}
.vessel-dialog {width:min(940px,calc(100vw - 28px));max-width:940px}
.vessel-dialog .ship-image {border-radius:12px;margin:0 0 20px}
.vessel-dialog .scene-caption {margin:0 0 20px}
.vessel-dialog .metric-grid {grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}
.vessel-dialog .metric-grid strong {font-size:16px}
.departing::before {content:'SALIENDO DE PUERTO';position:absolute;inset:0;display:grid;place-items:center;background:#0b23366b;color:#f2f8fc;letter-spacing:3px;font-size:13px;z-index:5;pointer-events:none;animation:departure-title 3s ease-out both}
.weather-route {padding:13px;border:1px solid #4e7e92;background:#233e50;border-radius:10px;margin:14px 0;color:#dcebf0}
.weather-route[data-alert="true"] {background:#443d2a;border-color:#b39854}
.weather-route strong {font-size:12px;color:var(--blue)}
.weather-route[data-alert="true"] strong {color:var(--yellow)}
.weather-route p {font-size:11px;line-height:1.7;margin:8px 0}
.weather-route small {font-size:10px;line-height:1.6;display:block;color:#c4cdd1}
.weather-table {overflow-x:auto;margin:18px 0;border:1px solid #436478;border-radius:10px}
.weather-table table {min-width:620px;width:100%;font-size:11px}
.weather-table th,.weather-table td {padding:11px 9px;white-space:normal}
.weather-table tbody th {text-transform:none;letter-spacing:0;font-size:11px;text-align:left}
.weather-table td small {display:block;margin-top:5px;color:#b4c5ce}
.weather-table td[data-sea="0"] {color:var(--green)}
.weather-table td[data-sea="1"] {color:var(--blue)}
.weather-table td[data-sea="2"] {color:var(--yellow);background:#a88e331a}
.weather-table td[data-sea="3"] {color:var(--red);background:#c9768426}
.map-panel .panel-head {flex-wrap:wrap;gap:10px}
.map-panel .panel-head select {max-width:100%;min-width:0}
@keyframes ocean-drift {0%,100%{transform:scale(1.014) translateY(-.15%) rotate(-.08deg)}50%{transform:scale(1.014) translateY(.15%) rotate(.08deg)}}
@keyframes rough-drift {0%,100%{transform:scale(1.022) translateY(-.35%) rotate(-.2deg)}50%{transform:scale(1.022) translateY(.35%) rotate(.2deg)}}
@keyframes water-glide {from{background-position:0 0}to{background-position:82px 30px}}
@keyframes rain-fall {from{transform:translate(0,-15px)}to{transform:translate(-20px,45px)}}
@keyframes departure-title {0%,30%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.vessel-dialog{padding:18px}.vessel-dialog .metric-grid{grid-template-columns:1fr 1fr;gap:17px}.weather-route .row{gap:8px}.ship-scene .ship-tag{font-size:8px}.ship-scene .ship-number{font-size:9px}}
@media(prefers-reduced-motion:reduce){.ship-scene .ship-art,.sea-shimmer,.scene-rain,.departing::before{animation:none!important;transform:none!important}.departing::before{display:none}}
.departure-port {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:3;animation:leave-quay 3s ease-in-out both;pointer-events:none}
@keyframes leave-quay {0%,15%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){.departure-port{display:none}}

/* Ship paint, lettering and wear share the same animated coordinate frame. */
.ship-image .ship-art{position:relative;display:block;width:100%;height:100%;min-width:0;isolation:isolate}
.ship-portrait{display:block;width:100%;height:auto;aspect-ratio:3/2}
.departure-port .ship-portrait{width:100%;height:100%}
.livery-fleet-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:12px 0}
.livery-fleet-row small{color:var(--muted);font-size:11px}
.livery-dialog{width:min(1100px,calc(100vw - 24px));max-width:1100px}
.livery-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,1fr);gap:24px;margin-top:22px}
.livery-layout>div{min-width:0}.livery-layout .ship-image{border-radius:16px}
.livery-preview-controls{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;align-items:end;margin-top:14px}
.livery-preview-controls label,.livery-form label{display:block;font-size:10px;letter-spacing:.08em;color:var(--muted)}
.livery-preview-controls select,.livery-form input{width:100%;margin-top:8px}
.livery-preview-controls input[type=range]{width:100%;min-height:44px;padding:0;accent-color:#82b9ce}
.livery-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 22px}
.livery-swatch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:83px;padding:10px 5px;font-size:11px;border:1px solid #405064;background:#152330;border-radius:12px;line-height:1.3;transition:border-color .15s,background .15s}
.livery-swatch span{display:block;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 1px 2px #ffffff38,0 2px 5px #0005;border:1px solid #ffffff28}
.livery-swatch[aria-pressed=true]{border-color:#9bd9cc;background:#203c40;box-shadow:0 0 0 1px #9bd9cc}
.livery-swatch[aria-pressed=true] span:after{content:'✓';display:grid;place-items:center;height:100%;color:#fff;text-shadow:0 1px 2px #000;font-size:18px}
.livery-swatch:focus-visible{outline:3px solid #83bced;outline-offset:3px}
.livery-status{padding:14px 16px;border-radius:12px;background:#213641;margin:16px 0}.livery-status strong{font-size:13px}.livery-status p{font-size:12px;margin:8px 0 0;line-height:1.65}
.livery-footer{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.livery-footer button{flex:1;min-height:46px}
#liverySaveNote{font-size:12px;line-height:1.65;padding:12px}
@media(max-width:800px){.livery-layout{grid-template-columns:minmax(0,1fr);gap:16px}.livery-dialog{max-height:calc(100dvh - 24px);padding:22px 16px}.livery-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.livery-preview-controls{grid-template-columns:1fr 1fr}}

/* Logistics: quiet colors, clear capacities and room for touch controls. */
.warehouse-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid #375566;background:linear-gradient(120deg,#203c46,#172531 75%);border-radius:20px;padding:24px 30px;margin-bottom:20px}.warehouse-hero h2{font-size:26px;margin:10px 0}.warehouse-hero p{color:#afc5cd;max-width:630px;line-height:1.75}.warehouse-glyph{display:block;width:190px;max-width:100%;height:auto;flex-shrink:0}.warehouse-summary .panel{padding:18px}.warehouse-tabs{display:flex;gap:8px;margin:22px 0;flex-wrap:wrap}.warehouse-tabs button{min-height:44px;background:#182733;border-color:#344b5a;padding:12px 20px}.warehouse-tabs button.active{background:#29534f;border-color:#86c5ad;color:#d9fff1}.warehouse-empty{text-align:center;padding:34px 24px}.warehouse-empty .warehouse-glyph{margin:0 auto 20px}.warehouse-empty p{max-width:620px;margin:14px auto;line-height:1.75}.warehouse-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:24px}.warehouse-card{text-align:left;padding:18px;white-space:normal}.warehouse-card strong{display:block;font-size:17px;margin:9px 0}.warehouse-card small,.warehouse-card>span:last-child{display:block;font-size:11px;color:#aabcc8;line-height:1.7}.warehouse-card .progress{margin:12px 0}.warehouse-card.selected{border-color:#82bfac;background:#203b3e}.warehouse-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(285px,350px);gap:20px}.warehouse-detail>*,.warehouse-expand>*{min-width:0}.warehouse-order{padding:24px;align-self:start}.warehouse-order label{display:block;margin:18px 0 10px}.warehouse-order select,.warehouse-order input{width:100%;margin-top:8px}.warehouse-order>button{width:100%;margin-top:12px;min-height:44px}.warehouse-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px}.warehouse-actions button{min-height:44px}.warehouse-margin{padding:16px;border-radius:12px;background:#244138;margin-top:14px}.warehouse-margin.negative{background:#402d31}.warehouse-margin small{display:block}.warehouse-margin strong{display:block;font-size:24px;margin:7px 0}.warehouse-margin p{font-size:11px;line-height:1.6;color:#c0cec8}.warehouse-expand{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}.warehouse-expand label{display:block;margin:18px 0}.warehouse-expand select{width:100%;margin-top:8px}.warehouse-expand .warehouse-glyph{margin:15px auto}.warehouse-expand .primary{width:100%;margin:22px 0 6px;min-height:48px}.warehouse-license{border:1px solid #8e7951;background:#393429;border-radius:12px;padding:16px;line-height:1.7}.warehouse-license.licensed{border-color:#568d79;background:#223b35}.warehouse-license p{font-size:12px}.warehouse-level{padding:18px 0;border-bottom:1px solid #334450}.warehouse-level h3{margin:12px 0}.warehouse-level strong,.warehouse-level small{display:block;margin:7px 0}.warehouse-country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.country-card{padding:21px;display:flex;flex-direction:column;align-items:start;gap:10px}.country-card h3,.country-card p{margin:0}.country-card p{font-size:12px;line-height:1.7;color:#acbdc8;flex:1}.country-card strong{font-size:13px}.country-card button{width:100%;margin-top:8px;min-height:44px}.fiscal-panel p{line-height:1.75}.fiscal-panel details{margin-top:18px}.fiscal-panel summary{cursor:pointer;padding:12px 0}
@media(max-width:1100px){.warehouse-detail{grid-template-columns:minmax(0,1fr)}.warehouse-order{width:100%}}
@media(max-width:900px){.warehouse-expand{grid-template-columns:minmax(0,1fr)}.warehouse-hero{padding:20px;gap:12px}.warehouse-hero h2{font-size:22px}.warehouse-hero .warehouse-glyph{width:110px}}
@media(max-width:500px){.warehouse-hero .warehouse-glyph{display:none}.warehouse-cards{grid-template-columns:minmax(0,1fr)}.warehouse-tabs{gap:6px}.warehouse-tabs button{padding:10px 12px;flex:1;font-size:11px}.warehouse-order{padding:20px}.warehouse-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.warehouse-actions button{flex:1;min-width:140px}#navigation button{font-size:8px}.warehouse-detail .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:700px){#navigation{grid-template-columns:repeat(7,minmax(0,1fr))}#navigation button{padding:5px 2px;min-height:47px}}

/* Available even when a file preview does not execute the game. */
#gameShell[hidden],#startupNotice[hidden]{display:none!important}
.startup-notice{position:fixed;inset:0;z-index:1000;overflow:auto;background:#101d29;padding:28px 18px;padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom));display:grid;align-items:center}
.startup-card{width:100%;max-width:610px;margin:auto;background:linear-gradient(145deg,#203b46,#172631);border:1px solid #3e5c6b;border-radius:22px;padding:clamp(22px,5vw,40px)}
.startup-card h1{margin:18px 0;font-size:clamp(26px,6vw,34px)}
.startup-card p{font-size:15px;line-height:1.7;color:#c0d1d8}
.startup-tip{margin:24px 0;padding:20px;border:1px solid #50776e;border-radius:14px;background:#203d3d}
.startup-tip h2{font-size:18px;line-height:1.4;margin-bottom:12px;color:#bce4d5}
.startup-card .startup-error{color:#efd096;margin-top:18px}
.startup-reload{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:24px;padding:12px 20px;background:#a0d3bf;color:#102b29;border-radius:10px;font-weight:650;text-decoration:none}