@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#07151c;--paper:#eeeade;--muted:#afbdc0;--gold:#e9c990;--teal:#a4d5cd;--red:#ff8779;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:var(--sans)}button,a{-webkit-tap-highlight-color:transparent}button{font:500 14px var(--sans);color:var(--paper);cursor:pointer;border:0;background:none;min-height:44px}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}#game{height:100svh;width:100%;position:relative;isolation:isolate;overflow:hidden}#world{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,12,18,.83),transparent 70%),linear-gradient(0deg,rgba(2,10,15,.86),transparent 27%,transparent 78%,rgba(2,10,15,.55));transition:background 1s}body.playing .vignette{background:linear-gradient(0deg,rgba(2,10,15,.8),transparent 30%,transparent 73%,rgba(2,10,15,.4))}#lightning{position:absolute;inset:0;background:#b1c8de;opacity:0;pointer-events:none;mix-blend-mode:screen}.masthead{position:absolute;top:0;left:0;width:100%;padding:26px 42px;display:flex;align-items:center;justify-content:space-between;gap:15px;z-index:10}.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);font-size:13px;letter-spacing:.18em;font-weight:600}.wordmark small{display:block;font-size:10px;letter-spacing:.29em;color:var(--muted);margin-top:6px}.mark{display:block;width:40px;height:44px;border:1px solid #b5c2c333;text-align:center;padding-top:4px;font:25px var(--serif);color:var(--gold)}.mark span{display:block;font-size:17px;line-height:8px}.tools{display:flex;gap:6px}.tools button{padding:8px 14px;color:#d5dedf;background:#0a1a2366;border:1px solid #b3c9d21a;border-radius:3px;font-size:13px}.tools button:hover{border-color:#dec89777;color:var(--gold)}.intro{position:absolute;left:8%;top:22%;max-width:680px}.eyebrow{font:500 12px var(--sans);letter-spacing:.2em;color:var(--gold);display:flex;align-items:center;gap:12px;line-height:1.5}.eyebrow>span{display:inline-block;width:26px;height:1px;background:var(--gold)}h1{font:400 clamp(64px,6.6vw,110px)/.88 var(--serif);letter-spacing:-.03em;margin:24px 0 24px;text-shadow:0 6px 25px #00101855}h1 em{font-weight:400;color:var(--gold)}.premise{font-size:16px;line-height:1.65;color:#c9d3d4;margin:0 0 28px}.start-row{display:flex;align-items:center;gap:24px}.primary{background:var(--gold);color:#15242a;min-height:52px;padding:15px 30px;font-size:15px;font-weight:700;border:1px solid #efd5a7;border-radius:2px;transition:background .2s,transform .2s}.primary:hover{background:#f9e0b1;transform:translateY(-1px)}.duration{font-size:10px;letter-spacing:.15em;color:#d0dada;line-height:1.9}.duration b{font-size:12px;font-weight:400;letter-spacing:0;color:#9cabad;display:block}.intro-instructions{display:flex;gap:28px;border-top:1px solid #b9c6c226;padding-top:19px;margin-top:30px;font-size:12px;color:#c0cacc}.intro-instructions b{color:var(--gold);font-size:10px;margin-right:7px;font-weight:500}.intro-note{position:absolute;right:5%;bottom:19%;text-align:right;pointer-events:none}.intro-note>span{font-size:10px;letter-spacing:.16em;color:#bbced0}.intro-note p{font:italic 24px/1.35 var(--serif);color:var(--paper)}.intro-note b{font-size:18px;font-weight:400;color:var(--muted)}#intro-footer{position:absolute;bottom:25px;left:42px;right:42px;display:flex;justify-content:space-between;gap:18px;font-size:9px;letter-spacing:.17em;color:#91a3a8}#hud{position:absolute;inset:0;pointer-events:none}.watch{position:absolute;top:114px;left:42px;width:282px}.watch-line{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 13px;font-size:18px;color:#dce4e2}.watch-line b{font-size:34px;font-family:var(--serif);font-weight:500;color:var(--gold)}#timer{font:20px var(--serif);font-variant-numeric:tabular-nums;color:#d1dadb}.time-track{height:2px;background:#9eb6bc33}.time-track i{display:block;width:100%;height:100%;background:var(--gold)}#objective{font-size:14px;line-height:1.5;color:#c1d0d2;margin-top:12px}.fleet{position:absolute;top:120px;right:34px;width:244px;pointer-events:auto}.fleet-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.09em;margin:0 0 10px;color:#b4c7cb}#tracking{color:var(--gold)}#fleet-cards{display:flex;flex-direction:column;gap:8px}.vessel{width:100%;text-align:left;background:linear-gradient(110deg,#0c212adc,#0b1b24a8);border:1px solid #aec9d529;border-radius:3px;padding:12px 13px;transition:border-color .2s,background .2s;backdrop-filter:blur(8px)}.vessel.selected{border-color:#e7c589c2;background:linear-gradient(110deg,#22343cd9,#10252bd9)}.vessel.waiting{opacity:.54}.vessel.lost{border-color:#c96b6466}.vessel-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:15px}.vessel-top small{color:#879fa6;font-size:11px}.vessel-status{display:flex;justify-content:space-between;margin:7px 0 7px;font-size:11px;letter-spacing:.015em;color:#afc1c5}.vessel-status b{font-weight:500;color:var(--gold)}.coursebar{display:block;height:3px;background:#71899133;position:relative}.coursebar i{display:block;height:100%;width:80%;background:var(--teal);transition:width .2s}.coursebar:after{content:'';position:absolute;left:25%;top:-2px;height:7px;width:1px;background:#d8857088}.voyage{display:block;height:1px;background:#7e9c9c22;margin-top:6px}.voyage i{display:block;height:100%;width:0;background:#cedbd566}.bottom-hud{position:absolute;bottom:67px;left:42px;right:34px;display:flex;justify-content:space-between;gap:20px;align-items:end}.radio{max-width:540px}.radio-label{font-size:10px;letter-spacing:.15em;color:var(--gold)}#caption{font:italic 25px/1.25 var(--serif);margin:9px 0 0;text-shadow:0 2px 10px #000}.actions{display:flex;gap:8px;pointer-events:auto;align-items:center}#horn{min-width:200px;text-align:left;border:1px solid #d8c19077;background:#12232be6;padding:11px 16px;border-radius:3px}#horn span{display:block;color:var(--gold);font-size:14px}#horn small{display:block;margin-top:5px;font-size:10px;color:#9eb2b9}.secondary{border:1px solid #9aaeb348;padding:12px 16px;background:#12232bbd;border-radius:3px;color:#c7d3d5}.control-hint{position:absolute;bottom:27px;left:42px;color:#9eb1b8;font-size:11px}.touch-hint{display:none}.marker{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:flex;align-items:center;flex-direction:column;transition:opacity .4s;pointer-events:auto;background:none;padding:0 10px 13px;border:0;min-width:90px;min-height:44px;filter:drop-shadow(0 2px 5px #000)}.marker:after{content:'';height:10px;width:1px;background:#c7dadd88;position:absolute;bottom:0}.marker-name{font:500 11px var(--sans);letter-spacing:.06em;color:#e0e6df;white-space:nowrap;background:#07151c99;padding:4px 6px;border-radius:2px}.marker.selected .marker-name{color:var(--gold);border:1px solid #d9c19266}.marker-bar{width:34px;height:2px;background:#112b34;margin-top:4px}.marker-bar i{height:100%;display:block;background:var(--teal)}#aim{position:absolute;width:32px;height:32px;border:1px solid #edd59c77;border-radius:50%;transform:translate(-50%,-50%);opacity:.8}#aim:before,#aim:after{content:'';position:absolute;background:#f0d69a88}#aim:before{width:1px;height:8px;top:11px;left:15px}#aim:after{height:1px;width:8px;top:15px;left:11px}.overlay{position:absolute;inset:0;z-index:25;background:#030e17b8;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}.dialog{width:100%;max-width:540px;border:1px solid #a7c0ca29;background:linear-gradient(140deg,#142b36ed,#091922f5);padding:38px 42px;box-shadow:0 25px 100px #0005}.dialog h2{font:400 55px/.95 var(--serif);margin:20px 0;color:var(--paper);letter-spacing:-.02em}.dialog h2 em{color:var(--gold);font-weight:400}.dialog p{color:#bdcdd1;line-height:1.6;font-size:15px}.dialog>.primary{margin-top:10px}.dialog>.secondary{margin-left:8px}.help-dialog{max-width:580px}.help-dialog h2{font-size:46px}.help-dialog ol{padding-left:20px;margin:22px 0}.help-dialog li{font-size:14px;line-height:1.6;margin:12px 0;color:#b6c7cc;padding-left:8px}.help-dialog strong{color:var(--paper);font-weight:500}.dialog .keyguide{font-size:12px;color:#97b2bc;padding-top:15px;border-top:1px solid #91acb533}.result-stats{display:flex;gap:45px;border-top:1px solid #b3c6cb33;border-bottom:1px solid #b3c6cb33;padding:18px 0;margin:24px 0}.result-stats b{font:40px var(--serif);color:var(--gold);display:block}.result-stats span{font-size:10px;letter-spacing:.12em;color:#a3b8be}#manifest{list-style:none;padding:0;margin:0 0 22px}#manifest li{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:#d1dadc}#manifest span{color:var(--teal);font-size:12px}.dialog .credit{font-size:11px;color:#91a7af;line-height:1.6;margin-top:23px}
@media(min-width:1600px){.intro{top:23%}.fleet{right:50px;width:275px}.masthead{padding:34px 50px}}
@media(max-height:760px) and (min-width:760px){.intro{top:20%}h1{font-size:75px;margin:16px 0}.premise{margin-bottom:20px}.intro-instructions{margin-top:24px}.intro-note{bottom:22%}.dialog{padding:25px 32px}.help-dialog h2{font-size:38px}.help-dialog li{margin:8px 0}}
@media(max-width:760px){.masthead{padding:18px 20px}.wordmark{font-size:11px;letter-spacing:.12em;gap:9px}.wordmark small{font-size:9px}.mark{width:33px;height:38px;font-size:22px}.tools{gap:4px}.tools button{font-size:12px;padding:6px 9px;min-height:38px}#help{font-size:0}#help:after{content:'?';font-size:16px}.intro{left:25px;right:25px;top:22%;max-width:500px}h1{font-size:clamp(64px,13vw,94px);margin:24px 0}.premise{font-size:14px;line-height:1.6;margin-bottom:24px}.eyebrow{font-size:10px}.start-row{gap:14px}.primary{padding:14px 21px;font-size:14px}.duration{font-size:9px}.duration b{font-size:10px;max-width:145px;line-height:1.6}.intro-instructions{gap:17px;font-size:10px;margin-top:26px;flex-wrap:wrap}.intro-instructions b{font-size:9px;margin-right:3px}.intro-note{display:none}#intro-footer{bottom:20px;left:25px;right:25px;font-size:8px}#intro-footer span:last-child{display:none}.watch{left:20px;top:87px;width:calc(100% - 40px)}.watch .eyebrow{font-size:10px}.watch-line{margin:3px 0 5px;font-size:15px}.watch-line b{font-size:26px}#timer{font-size:20px}#objective{font-size:12px;margin:9px 0 0;max-width:90%}.fleet{top:auto;bottom:115px;right:15px;left:15px;width:auto}.fleet-heading{font-size:9px;margin-bottom:7px}#fleet-cards{flex-direction:row;gap:6px}.vessel{flex:1;min-width:0;padding:10px 8px}.vessel-top{font-size:12px;gap:2px;display:block}.vessel-top small{display:none}.vessel-status{font-size:9px;display:block;line-height:1.6;margin:4px 0}.vessel-status b{display:block;font-size:10px}.coursebar{display:block;height:3px}.voyage{margin-top:5px}.bottom-hud{left:15px;right:15px;bottom:39px;gap:8px}.radio{position:absolute;bottom:202px;left:3px;right:3px;max-width:95%}.radio-label{font-size:9px}#caption{font-size:19px;line-height:1.2;margin-top:5px}.actions{width:100%;gap:8px}#horn{min-width:0;flex:1;padding:9px 12px}#horn span{font-size:13px}#horn small{font-size:9px;margin-top:3px}.actions .secondary{font-size:12px;min-height:53px;padding:8px 14px}.control-hint{bottom:14px;left:16px;font-size:10px}.desktop-hint{display:none}.touch-hint{display:inline}.marker-name{font-size:10px}.marker{padding-bottom:12px}.dialog{padding:24px;max-height:calc(100svh - 30px);overflow:auto}.dialog h2{font-size:43px}.dialog p{font-size:14px}.dialog .eyebrow{font-size:9px}.help-dialog h2{font-size:38px}.help-dialog li{font-size:13px}.dialog>.secondary{margin:10px 0 0}.result-stats{margin:18px 0;padding:14px 0}.overlay{padding:15px}.tools #pause{font-size:11px}}
@media(max-width:760px) and (max-height:670px){.intro{top:20%}h1{font-size:58px;margin:18px 0}.premise{font-size:13px;margin-bottom:19px}.intro-instructions{margin-top:18px;gap:12px}.watch{top:77px}#objective{max-width:80%;font-size:11px}.radio{bottom:187px}#caption{font-size:17px}.fleet{bottom:108px}.fleet-heading{display:none}.vessel{padding:8px 7px}.dialog h2{font-size:36px}}
@media(max-height:520px) and (min-width:650px){.masthead{padding:12px 22px}.intro{top:21%;left:5%}h1{font-size:51px;margin:12px 0}.premise{font-size:12px;margin-bottom:13px}.intro-instructions{display:none}.intro-note{bottom:17%}.watch{left:22px;top:80px;width:230px}.fleet{top:77px;width:200px;right:22px}.vessel{padding:7px 10px}.vessel-top{font-size:12px}.vessel-status{margin:3px 0;font-size:10px}.bottom-hud{bottom:37px;left:22px;right:22px}#caption{font-size:19px;max-width:350px}.radio-label{font-size:9px}.control-hint{bottom:14px;left:22px}.dialog{max-height:94svh;overflow:auto}.intro-footer{bottom:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:760px) and (max-height:740px){.radio{position:fixed;top:180px;bottom:auto;left:20px;right:20px;max-width:calc(100% - 40px)}.radio-label{display:none}#caption{font-size:17px;max-width:310px}}
/* Readable game-critical labels on small screens. */
.vessel-top{font-size:16px}.vessel-status{font-size:12px}.vessel-status b{font-size:14px}.marker-name{font-size:12px}.control-hint{font-size:12px}.fleet-heading,.radio-label{font-size:12px}#horn small{font-size:12px}.intro-instructions{font-size:14px}.help-dialog li,.dialog p{font-size:16px}
@media(max-width:760px){.vessel-top{font-size:14px;line-height:1.3}.vessel-status{font-size:12px;line-height:1.45}.vessel-status b{font-size:14px}.vessel{padding:10px 7px}.marker-name{font-size:12px}.fleet-heading{font-size:11px}.control-hint{font-size:12px;right:14px;line-height:1.3;bottom:10px}#objective{font-size:14px;line-height:1.4}.premise{font-size:16px}.intro-instructions{font-size:12px}.radio-label{font-size:12px}#horn span{font-size:14px}#horn small{font-size:12px}.actions .secondary{font-size:14px}.actions{align-items:stretch}.bottom-hud{bottom:48px}.fleet{bottom:128px}.radio{bottom:232px}.help-dialog li{font-size:15px}.dialog p{font-size:16px}}
@media(max-width:760px) and (max-height:740px){.radio{top:188px;bottom:auto}.fleet{bottom:119px}.bottom-hud{bottom:42px}.vessel{padding:8px 7px}.vessel-status .status-text{font-size:11px}.control-hint{font-size:11px}.premise{font-size:15px}}
/* The gallery keeps the sea visible; the fleet remains within reach. */
.intro{left:6%;top:21%;max-width:570px}.intro h1{font-size:clamp(64px,6.4vw,98px)}.intro-note{right:5%;bottom:14%}.vignette{background:linear-gradient(90deg,rgba(2,12,18,.84),rgba(2,12,18,.38) 37%,transparent 67%),linear-gradient(0deg,rgba(2,10,15,.82),transparent 24%,transparent 83%,rgba(2,10,15,.45))}.actions{gap:8px}#binoculars[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#253439}.binocular-view .radio{max-width:420px}.binocular-view #objective{background:#06131bb0;padding:8px 10px;border-left:1px solid var(--gold)}.binocular-view .watch{width:260px}
@media(max-width:760px){.intro{left:25px;right:25px;top:22%}.intro h1{font-size:clamp(60px,13vw,85px)}.actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px}#horn{min-width:0;padding:8px 10px}#horn span{font-size:13px}#horn small{font-size:11px}.actions .secondary{padding:8px 10px;font-size:12px}#release{max-width:65px}.bottom-hud{bottom:47px}.fleet{bottom:132px}.binocular-view .watch{width:calc(100% - 40px)}.binocular-view .radio{max-width:calc(100% - 40px)}.intro-instructions{gap:15px}.intro-note{display:none}}
@media(max-width:760px) and (max-height:740px){.intro{top:20%}.intro h1{font-size:58px}.fleet{bottom:121px}.bottom-hud{bottom:43px}.radio{top:186px}}
@media(max-height:520px) and (min-width:650px){.intro{top:21%}.intro h1{font-size:51px}.actions .secondary{padding:8px 10px;font-size:12px}#horn{min-width:150px}.radio{max-width:280px}}
/* Keep keeper captions clear of the central lantern on phones. */
@media(max-width:760px){.radio{position:fixed;top:185px;bottom:auto;left:20px;right:20px;max-width:calc(100% - 40px)}.radio-label{display:none}#caption{font-size:17px;max-width:330px}.binocular-view .radio{top:210px}}

/* Compact vessel controls leave the harbour approach unobstructed. */
.fleet{width:198px}
#fleet-cards{gap:5px}
.vessel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 8px;padding:9px 10px;min-height:46px}
.vessel-top{display:block;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vessel-top small,.vessel-status .status-text,.voyage{display:none}
.vessel-status{display:block;margin:0;line-height:1.3}
.vessel-status b{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.coursebar{grid-column:1/-1;height:2px}
.coursebar:after{top:-1px;height:4px}
.fleet-heading{font-size:10px;margin-bottom:7px}
@media(max-width:760px){
 .fleet{top:auto;bottom:84px;left:12px;right:12px;width:auto}
 .fleet-heading{display:none}
 .vessel{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:7px 6px;min-height:58px}
 .vessel-top{font-size:13px}
 .vessel-status b{font-size:13px;line-height:1.2}
 .coursebar{margin-top:auto}
 .bottom-hud{bottom:30px;left:12px;right:12px}
 .actions{gap:5px}
 #horn,.actions .secondary{min-height:44px;padding:7px 9px}
 #horn small{display:none}
 #horn span{font-size:12px;line-height:1.2}
 #release{max-width:none}
 .control-hint{bottom:8px;font-size:10px;line-height:1.2}
}
.course-text{opacity:.62}
.tools .icon-tool{display:grid;place-items:center;width:44px;padding:0}
.tools .icon-tool svg{display:block;width:18px;height:18px}
.tools .icon-tool.playing{color:var(--gold);border-color:#dec897aa}
.tools .icon-tool.playing svg{animation:hear-pulse 1.6s ease-in-out infinite}
@keyframes hear-pulse{50%{opacity:.45}}
body.playing #hear{display:none}