@font-face{font-family:RV;src:local('Segoe UI')}*{box-sizing:border-box}body{margin:0;background:#edf2ef;color:#142e35;font-family:RV,'Segoe UI',Arial,sans-serif;font-size:14px}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:8px;transition:background .16s,transform .12s;color:inherit}button:active{transform:translateY(1px);filter:brightness(.93)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #dcaa4b;outline-offset:3px}button:disabled{opacity:.4;cursor:default}button[hidden],[hidden]{display:none!important}a{color:inherit}h1,h2,p{margin-top:0}.topbar{height:84px;background:#071d2b;display:flex;align-items:center;justify-content:space-between;padding:0 32px;color:#fff;border-bottom:1px solid #ffffff15;gap:20px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;letter-spacing:1.5px;font-size:11px;font-weight:800}.brand-mark{font-size:26px;letter-spacing:-2px;position:relative}.brand-mark>span{color:#7ddbc0;font-size:20px}.brand small{display:block;font-size:8px;letter-spacing:2.4px;color:#9baeb7;margin-top:6px}.product{font-size:10px;letter-spacing:2px;display:flex;gap:10px;align-items:center;color:#91a9b1}.product strong{font-size:16px;color:white}.version{font-size:8px;letter-spacing:1px;border:1px solid #536772;padding:6px;border-radius:4px}.back{font-size:12px;color:#c9d8dc;text-decoration:none}.back:hover{color:#7ddbc0}#app{display:grid;grid-template-columns:270px minmax(0,1fr);max-width:1900px;margin:auto;min-height:calc(100dvh - 84px)}.mission-panel{padding:29px 25px;background:#f8faf7;border-right:1px solid #d5e0dc}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:800;color:#558078;display:block;margin-bottom:14px}h1{font-size:34px;line-height:1.1;letter-spacing:-1.5px;margin-bottom:14px}h1 em{font-style:normal;color:#288775}.intro{font-size:12px;line-height:1.7;color:#6b7e80;margin-bottom:21px}.choose{background:#e8f0e9;border:1px solid #cbdcd2;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;padding:12px;margin-bottom:24px;gap:8px}.choose small{display:block;font-size:8px;letter-spacing:1.1px;color:#5b7970;margin-bottom:5px}.choose strong{font-size:13px}.choose>span:last-child{font-size:24px;color:#4d8274}.section-label{font-size:9px;letter-spacing:1.2px;font-weight:800;color:#6b8380}.task>p{font-size:13px;line-height:1.6;margin:10px 0 13px}.check{font-size:11px;color:#627c78;padding:5px 0;display:flex;align-items:center;gap:7px}.check:before{content:'○';font-size:15px;line-height:1}.check.met{color:#177858}.check.met:before{content:'✓'}.progress-line{display:flex;justify-content:space-between;font-size:10px;color:#6c8580;margin-top:14px}progress{appearance:none;width:100%;height:5px;border:none;border-radius:9px;margin:8px 0 17px;background:#dfe9e3}progress::-webkit-progress-bar{background:#dfe9e3;border-radius:9px}progress::-webkit-progress-value{background:#288775;border-radius:9px}progress::-moz-progress-bar{background:#288775}.outline{border:1px solid #c8d9d2;background:transparent;width:100%;padding:12px;font-size:12px}.outline:hover{background:#e1eee7}.environment{border-top:1px solid #dce5de;margin-top:23px;padding-top:19px}.env-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:13px}.env-row strong{display:block;font-size:13px;margin-top:5px}.env-button{font-size:10px;border:1px solid #d4e1da;background:#edf4ee;padding:9px}.direction{font-size:10px;color:#55756f;background:transparent;padding:8px 0;text-align:left;text-decoration:underline;text-underline-offset:3px}.model-note{font-size:10px;color:#728983;line-height:1.6;margin:20px 0 0}.model-note button{font-size:10px;color:#376e61;background:none;padding:0;text-decoration:underline}.simulation{min-width:0;padding:20px 22px 0;display:flex;flex-direction:column;gap:12px}.scene-wrap{position:relative;isolation:isolate;border-radius:14px;overflow:hidden;background:#285569;height:min(64vh,720px);min-height:430px;flex:1}#scene{display:block;width:100%;height:100%;touch-action:none}#minimap{position:absolute;width:136px;height:112px;bottom:58px;right:17px;border:1px solid #b8dfd14d;border-radius:8px;background:#092d36bb;backdrop-filter:blur(10px)}.scene-top{position:absolute;top:16px;left:18px;right:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}.live-tag{font-size:8px;font-weight:700;letter-spacing:1px;color:#fff;background:#102e3dba;padding:10px 12px;border-radius:6px;backdrop-filter:blur(8px)}.live-tag i{display:inline-block;background:#7ddbb2;width:5px;height:5px;border-radius:50%;margin-right:5px}.live-tag span{color:#b5d3d2}.views{display:flex;background:#102e3dde;padding:3px;border-radius:8px;pointer-events:auto}.views button{background:transparent;color:#cfdddf;font-size:11px;font-weight:500;border-radius:5px;padding:9px 13px}.views button.selected{background:#e7f4ec;color:#143b35}.telemetry{display:flex;position:absolute;top:66px;left:18px;gap:25px;color:#fff;text-shadow:0 1px 10px #123b4c}.telemetry span{font-size:7px;letter-spacing:1px;display:block;margin-bottom:4px}.telemetry strong{font-size:25px;font-weight:600;letter-spacing:-.7px}.telemetry small{font-size:11px;margin-left:2px;letter-spacing:0;font-weight:400}.scene-controls{position:absolute;left:18px;bottom:58px;display:flex;gap:6px}.scene-controls button{background:#092d36de;color:#e2f0e9;font-size:11px;padding:10px 12px;border:1px solid #a6cdb735;backdrop-filter:blur(8px)}.scene-controls button:hover{background:#245966}.scene-bottom{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#071f30ca);color:white;padding:22px 18px 16px;display:flex;justify-content:space-between;gap:20px;font-size:11px;pointer-events:none}.scene-bottom>span:last-child{font-size:9px;opacity:.75;white-space:nowrap}.helm{display:grid;grid-template-columns:1fr 1.08fr .85fr;gap:20px;background:#fff;border-radius:12px;padding:18px 20px;border:1px solid #d7e3dc;flex-shrink:0}.control-title{font-size:9px;display:flex;justify-content:space-between;gap:6px;letter-spacing:1px;margin-bottom:12px;color:#6f8582}.control-title strong{font-size:10px;color:#355e54;letter-spacing:0}.control-buttons{display:flex;gap:5px}.control-buttons button{flex:1;white-space:nowrap;background:#e8efeb;border:1px solid #d4e0d8;font-size:11px;min-height:45px;padding:9px 8px}.control-buttons .port{border-bottom:3px solid #bd675e}.control-buttons .starboard{border-bottom:3px solid #35876e}.control-buttons .neutral{background:#0b302e;border-color:#0b302e;color:white;font-size:10px}.control-buttons button:hover{background:#d0e5d9}.control-buttons .neutral:hover{background:#16514a}#rudder{width:100%;accent-color:#328975;height:12px;margin:17px 0 0;cursor:pointer}.scale{display:flex;justify-content:space-between;font-size:8px;color:#82978f;letter-spacing:.5px;margin-top:4px}.engine-level{height:5px;background:#e1e9e2;margin:20px 2px 8px;position:relative;border-radius:9px}.level-fill{position:absolute;top:0;height:5px;background:#469b81;left:50%;width:0}.level-center{position:absolute;height:9px;top:-2px;width:2px;background:#668376;left:50%}#twin-controls{display:flex;gap:4px;justify-content:space-between;margin-top:9px;align-items:center;font-size:9px}#twin-controls button{padding:7px;background:#edf4ef}#twin-controls output{white-space:nowrap}.weigh{display:block;font-size:10px;width:100%;background:transparent;color:#55756b;margin-top:10px;min-height:28px}.under-helm{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#7a8e88;padding:0 2px 13px;gap:10px}.under-helm kbd{font-family:inherit;background:#e0e8e2;border:1px solid #c8d7cb;padding:2px 4px;border-radius:3px;font-size:8px;margin:0 2px}.under-helm button{font-size:10px;white-space:nowrap;background:transparent;color:#537d6f;padding:6px}.loading,.render-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0c3441;color:white;z-index:5;padding:35px;text-align:center}.spinner{width:35px;height:35px;border:2px solid #80bdb442;border-top-color:#a4e6c9;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.render-error button{padding:15px;background:#dbf6e8;color:#1a5147}.pause-screen{position:absolute;inset:0;background:#0a26326b;backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;gap:13px;z-index:3}.pause-screen strong{font-size:26px}.pause-screen span{font-size:12px}.pause-screen button{padding:13px 24px;background:#dff9e9;margin-top:10px;color:#174438}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#102d30;color:#fff;box-shadow:0 8px 35px #071f3633;border:1px solid #709b8b;border-radius:9px;padding:15px 22px;max-width:min(92vw,520px);z-index:30;opacity:0;pointer-events:none;font-size:13px;transition:.2s}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #d2e2d8;border-radius:18px;padding:32px;max-width:720px;width:calc(100% - 32px);background:#f8faf6;color:#183d36;box-shadow:0 30px 80px #0004;max-height:90dvh;overflow:auto}dialog::backdrop{background:#031b2ba6;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.dialog-top .eyebrow{margin-bottom:0}.close{background:#e7eee8;border-radius:50%;width:34px;height:34px;flex:none;font-size:22px;font-weight:400}h2{font-size:31px;letter-spacing:-1px;line-height:1.15;margin-bottom:14px}dialog>p{font-size:14px;line-height:1.7;color:#5b776e}dialog .dialog-note{font-size:11px;color:#728c7e;margin-top:18px;line-height:1.6}.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.mission-card{border:1px solid #d4e2d9;background:#fff;text-align:left;padding:18px;position:relative;min-height:135px}.mission-card:hover{background:#e5f1e6;border-color:#64a78b}.mission-card .number{display:block;color:#538775;font-size:11px;margin-bottom:13px;letter-spacing:1px}.mission-card strong{font-size:16px;display:block;margin-bottom:6px}.mission-card small{font-size:10px;color:#778d81}.mission-card .badge{position:absolute;top:17px;right:15px;font-size:9px;color:#25865c;background:#e0f1e3;padding:4px 6px;border-radius:4px}.primary{padding:14px 20px;background:#155c48;color:#f2fff6;display:block;width:100%;margin:17px 0 8px}.primary:hover{background:#247258}ol{padding-left:24px;margin:24px 0}ol li{font-size:14px;line-height:1.7;padding:7px 0 7px 8px}ol li::marker{color:#268163;font-weight:800}.tip{background:#e7efe1;border-left:3px solid #6da881;padding:17px;font-size:13px;line-height:1.6;border-radius:0 7px 7px 0}.result-symbol{font-size:38px;background:#dff0da;color:#2d8c61;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin:12px 0 20px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.result-stats>div{padding:17px;background:#e7eee7;border-radius:10px}.result-stats strong{display:block;font-size:22px;margin-top:8px}.result-stats span{font-size:10px;color:#668273}.boat-photo{width:100%;height:auto;border-radius:10px;margin:10px 0 20px}.noscript{padding:40px;position:fixed;inset:100px 20px;background:#fff;z-index:10}.error-note{color:#af6555}
@media(min-width:1450px){#app{grid-template-columns:300px minmax(0,1fr)}.mission-panel{padding:35px 30px}.simulation{padding:25px 30px 0}.scene-wrap{min-height:510px}h1{font-size:40px}.helm{padding:23px 25px}.control-buttons button{font-size:12px;min-height:49px}.telemetry strong{font-size:32px}}
@media(max-width:1150px){.product .version{display:none}#app{grid-template-columns:240px minmax(0,1fr)}.mission-panel{padding:24px 20px}.simulation{padding:14px 14px 0}.helm{gap:10px;padding:14px 12px}.control-buttons{gap:4px}.control-buttons button{font-size:10px;padding:8px 5px}.live-tag span{display:none}.under-helm>span{font-size:0}.under-helm kbd{display:none}}
@media(max-width:900px){.topbar{height:68px;padding:0 20px}.product{font-size:8px;gap:6px}.product strong{font-size:13px}.brand{font-size:9px;letter-spacing:1px}.brand small{font-size:7px}.back{font-size:10px}#app{display:flex;flex-direction:column;min-height:auto}.simulation{order:0;padding:14px 14px 0;gap:10px}.mission-panel{order:1;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:6px 14px 20px;padding:20px;border:1px solid #d7e3dc;border-radius:12px}.mission-panel>h1,.mission-panel>.intro,.mission-panel>.eyebrow{display:none}.choose{grid-column:1/-1;margin-bottom:16px;min-height:52px}.task{grid-row:2/5}.mission-panel>.outline{grid-column:2;height:45px}.environment{margin-top:16px;padding-top:16px}.model-note{grid-column:1/-1;margin-top:15px}.scene-wrap{flex:none;height:53dvh;min-height:340px}.helm{gap:12px;padding:15px}.control-buttons button{font-size:11px;min-height:46px}.control-title{font-size:8px}.control-title strong{font-size:9px}.under-helm{padding-bottom:0}.telemetry strong{font-size:25px}.live-tag{font-size:7px}.views button{padding:8px 12px}.scene-controls button{min-height:38px}.telemetry{top:60px}}
@media(max-width:600px){.topbar{height:60px;padding:0 14px}.brand-mark{font-size:22px}.brand{gap:8px;font-size:8px;letter-spacing:.9px}.brand small{font-size:6px;letter-spacing:1.7px}.product{font-size:0;gap:0}.product strong{font-size:12px;letter-spacing:1px}.back{display:none}.simulation{padding:9px 9px 0}.scene-wrap{border-radius:10px;height:45dvh;min-height:290px}.scene-top{top:10px;left:10px;right:10px;align-items:center}.live-tag{font-size:6px;padding:9px 8px;letter-spacing:.5px}.live-tag i{width:4px;height:4px;margin-right:3px}.views button{font-size:10px;padding:9px}.telemetry{left:12px;top:59px;gap:22px}.telemetry span{font-size:6px}.telemetry strong{font-size:24px}.scene-controls{left:10px;bottom:48px;gap:4px}.scene-controls button{padding:8px;font-size:10px}#minimap{width:85px;height:70px;bottom:48px;right:10px}.scene-bottom{padding:18px 12px 12px;font-size:9px;gap:5px}.scene-bottom>span:last-child{font-size:8px}.helm{grid-template-columns:1fr 1fr;gap:14px 10px;padding:13px 12px}.steering{grid-column:1/-1}.control-title{margin-bottom:8px;font-size:9px}.control-title strong{font-size:10px}.control-buttons button{min-height:46px;font-size:11px;padding:10px 7px}.steering .control-buttons button{flex:1}.steering input{margin-top:12px!important}.steering .scale{margin-top:2px}.engine .control-buttons{flex-wrap:wrap}.engine .control-buttons .neutral{order:3;flex-basis:100%;min-height:40px;font-size:11px}.engine-level{margin-top:13px}.anchor-control .control-buttons{flex-direction:column}.weigh{min-height:34px;margin-top:6px}.anchor-control .control-title strong{font-size:9px}.mission-panel{margin:6px 9px 14px;padding:16px;gap:0 15px;grid-template-columns:1fr}.task{grid-row:auto}.mission-panel>.outline{grid-column:auto}.environment{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.environment>.section-label{grid-column:1/-1}.environment .env-row:nth-of-type(1){grid-column:1;grid-row:2}.environment #wind-dir{grid-column:1;grid-row:3}.environment .env-row:nth-of-type(2){grid-column:2;grid-row:2}.environment #current-dir{grid-column:2;grid-row:3}.direction{font-size:9px;min-height:38px}.choose strong{font-size:14px}.task>p{font-size:12px}.check{font-size:12px;padding:5px 0}.under-helm{justify-content:flex-end}.under-helm>span{display:none}dialog{padding:24px 20px;width:calc(100% - 20px);border-radius:14px}h2{font-size:27px}.mission-grid{gap:8px}.mission-card{padding:14px;min-height:138px}.mission-card strong{font-size:14px}.mission-card small{font-size:9px}.mission-card .badge{font-size:8px;right:9px;top:13px}.result-stats>div{padding:12px}.result-stats strong{font-size:19px}.toast{bottom:14px;padding:13px 17px;font-size:12px}.pause-screen strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.spinner{animation:none}}
#twin-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:5px;margin-top:12px}#twin-controls button{min-height:36px;padding:7px 5px;font-size:10px}#twin-controls output{min-width:43px;text-align:center;font-size:10px}.helm{grid-template-columns:1fr 1.2fr .8fr}
@media(min-width:901px){.simulation{position:sticky;top:0;align-self:start}.scene-wrap{height:clamp(280px,calc(100dvh - 405px),700px);min-height:280px;flex:none}}
@media(max-width:600px){.helm{grid-template-columns:1fr 1fr}.engine{grid-column:1/-1}.engine .control-buttons{flex-wrap:nowrap}.engine .control-buttons .neutral{order:0;flex-basis:auto}.anchor-control{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}.anchor-control .control-title{grid-column:1/-1}.anchor-control .control-buttons{flex-direction:row}.weigh{margin:0;min-height:46px;background:#eef3ed}#twin-controls{grid-template-columns:1fr 60px 1fr}#twin-controls button{min-height:42px;font-size:12px}#twin-controls output{font-size:12px}}
.player-level{padding:14px 0 4px;display:flex;flex-direction:column;gap:6px}.player-level strong{font-size:12px}.player-level span{font-size:10px;color:#648174}.player-level progress{margin:4px 0 13px}.game-cover{background:linear-gradient(90deg,#092d37f5 8%,#092d3766 75%),url('./salacia.jpg') center 48%/cover;border-radius:12px;padding:25px 24px;margin-bottom:20px;color:white;min-height:220px}.game-cover>div>span{font-size:8px;letter-spacing:2px;color:#b8dfcb}.game-cover h2{font-size:34px;margin:17px 0 0;letter-spacing:-1px;line-height:1.06}.game-cover em{font-style:normal;color:#a6dfbe}.boat-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 19px}.boat-option{text-align:left;border:1px solid #d1ded3;padding:14px;background:#edf2e9}.boat-option strong,.boat-option small{display:block}.boat-option strong{font-size:14px;margin-bottom:5px}.boat-option small{font-size:10px;color:#678675}.boat-option.selected{border-color:#2c8467;background:#dceee0;box-shadow:inset 0 0 0 1px #2c8467}.mode-tabs{display:flex;gap:5px;padding:4px;background:#e4ece2;border-radius:8px;margin:16px 0}.mode-tabs button{flex:1;min-height:43px;background:transparent;font-size:13px}.mode-tabs button.selected{background:#153f38;color:#fff;box-shadow:0 2px 9px #163c3522}#category-description{font-size:12px;margin:12px 0}.campaign-card{grid-column:1/-1;background:#173f3c;color:#fff;min-height:110px;border-color:#173f3c}.campaign-card .number{color:#a9d8b4}.campaign-card small{color:#b8cfc3}.campaign-card:hover{background:#245d50;color:#fff}#ranking-open{margin:9px 0}#boats-open{margin-bottom:0}.points-hud strong{color:#ffe1a5}.points-hud span{color:#e5c593}.visible-lights{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.light{display:inline-flex;align-items:center;gap:6px;font-size:10px;padding:7px 8px;background:#e4ece5;border-radius:5px}.light:before{content:'';display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:#fff;border:1px solid #93a59c;box-shadow:0 0 5px #fff}.light.roja:before{background:#e95b53;border-color:#c95951}.light.verde:before{background:#46b277;border-color:#3e9867}.ripa-options{display:grid;gap:8px;margin:20px 0}.ripa-options button{min-height:48px;text-align:left;padding:12px 16px;background:#e3eee3;border:1px solid #c8daca}.ripa-options button:hover{background:#cfe5cf}.result-errors{padding-left:20px;font-size:12px;line-height:1.7;color:#5e776c}.result-errors li{padding:7px 0}.ranking-table{border-collapse:collapse;width:100%;font-size:13px;margin:20px 0}.ranking-table th{text-align:left;font-size:10px;color:#6c8277;text-transform:uppercase;letter-spacing:1px}.ranking-table td,.ranking-table th{padding:13px 10px;border-bottom:1px solid #dbe6d9}.ranking-table tr.me{background:#ddecdb;font-weight:700}.ranking-table td:last-child{text-align:right}#ranking-content .primary{text-align:center;text-decoration:none}#ripa-lights{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
@media(max-width:900px){.mission-panel{display:block}.mission-panel>.player-level{margin-bottom:8px}.mission-panel>.environment{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.mission-panel>.environment>.section-label{grid-column:1/-1}.mission-panel>.environment>.env-row:nth-of-type(1){grid-column:1;grid-row:2}.mission-panel>.environment>#wind-dir{grid-column:1;grid-row:3}.mission-panel>.environment>.env-row:nth-of-type(2){grid-column:2;grid-row:2}.mission-panel>.environment>#current-dir{grid-column:2;grid-row:3}}
@media(max-width:600px){.game-cover{min-height:175px;padding:21px}.game-cover h2{font-size:28px}.boat-option{padding:12px}.boat-option small{font-size:9px}.telemetry{gap:16px}.telemetry strong{font-size:21px}.telemetry span{letter-spacing:.5px;font-size:6px}.mode-tabs button{font-size:12px}.campaign-card{min-height:115px}.points-hud strong{font-size:21px}}