@font-face{font-family:Archivo;src:url('/game/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#f4f0df;--lantern:#ffdb9c;--muted:#b3c9cc;--edge:clamp(20px,3.3vw,48px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#04131d}
body{color:var(--ink);font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,#sea:focus-visible{outline:2px solid var(--lantern);outline-offset:5px}
[hidden]{display:none!important}
.dive{position:fixed;inset:0;isolation:isolate}.dive:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 45% 0,#266b77,#04131d 80%)}
#sea{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;outline-offset:-4px}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#00121e40,transparent 24%,transparent 70%,#01080c40)}
[data-when]{display:none}.dive[data-phase=surface] [data-when~=surface],.dive[data-phase=done] [data-when~=done],.dive[data-phase=paused] [data-when~=paused]{display:grid}
.hud{transition:opacity .5s;pointer-events:none}.dive:not([data-phase=diving]) .hud{opacity:0}
.back,.tools{position:absolute;top:max(22px,env(safe-area-inset-top));font-size:12px;z-index:3}
.back{left:var(--edge);text-decoration:none;color:#dce8df;letter-spacing:.03em;padding:10px 0}
.tools{right:var(--edge);display:flex;gap:10px}.tools button{border:1px solid #d6eeee35;color:#e0eeee;background:#051f2b4d;border-radius:99px;min-height:40px;padding:8px 14px;backdrop-filter:blur(10px)}
#pause{font-size:16px;min-width:42px;padding:6px}
.dive[data-phase=diving] .back{display:none}
.depth{position:absolute;left:var(--edge);top:max(32px,env(safe-area-inset-top));text-shadow:0 2px 24px #0009}
.depth>span{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#c1d6d4}
.depth p{margin:10px 0 0;display:flex;align-items:baseline;gap:5px}.depth b{font-size:clamp(42px,5.4vw,72px);font-weight:250;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}.depth i{font-style:normal;font-size:13px;color:#bdcfd2}
.air{position:absolute;right:var(--edge);top:32%;bottom:32%;width:3px;border-radius:2px;background:#fff2}
.air>i{position:absolute;inset:auto 0 0;height:calc(var(--air,1) * 100%);background:#d4efeb;border-radius:2px;transition:height .15s linear,background .4s}
.air>span{position:absolute;right:12px;bottom:-2px;text-align:right;text-transform:uppercase;letter-spacing:.15em;font-size:9px;color:#b2c7ca;white-space:nowrap}.air b{display:block;margin-top:4px;font-size:12px;font-weight:450;color:#dbe8e6;letter-spacing:0}
.air[data-low]>i{background:#ffc081}.air[data-low] b{color:#ffd29e}
.cargo{position:absolute;left:var(--edge);bottom:max(34px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:15px}.cargo ul{margin:0;padding:0;list-style:none;display:flex;gap:9px}.cargo li{width:7px;height:14px;border:1px solid #f9e9bf66;border-radius:3px;transition:.4s}.cargo li[data-lit]{background:var(--lantern);border-color:var(--lantern);box-shadow:0 0 18px #ffd79a99}.cargo>span{font-size:11px;letter-spacing:.025em;color:#c9d7d3}
.reticle{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border:1px solid #dffaf177;border-radius:50%}.reticle i{display:none}.dive[data-swimming=true] .reticle{box-shadow:0 0 8px #dffaf177;background:#dffaf166}
.swim-hint{position:absolute;bottom:34px;right:var(--edge);margin:0;font-size:11px;color:#c8d8d3ad}
.cargo,.swim-hint{filter:drop-shadow(0 1px 2px #000);text-shadow:0 1px 3px #000,0 0 12px #00121e}
.sighting{position:absolute;left:var(--edge);top:48%;margin:0;opacity:0;transition:opacity .55s;pointer-events:none;text-shadow:0 2px 20px #000}
.sighting[data-show]{opacity:1}.sighting b{display:block;font-weight:450;font-size:18px}.sighting i{display:block;max-width:24ch;margin-top:6px;font-style:normal;font-size:12px;color:#c6d6d9;line-height:1.5}
.say{position:absolute;left:50%;top:24%;transform:translate(-50%,8px);margin:0;text-align:center;width:min(80%,460px);font-size:17px;font-weight:450;letter-spacing:.01em;color:var(--lantern);text-shadow:0 2px 26px #000;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.say[data-live]{opacity:1;transform:translate(-50%,0)}
.card{position:absolute;inset:auto 0 0;padding:70px 24px max(34px,env(safe-area-inset-bottom));justify-items:center;text-align:center;gap:17px;background:linear-gradient(transparent,#021018a6 28%,#020c13e8)}
.eyebrow{margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#b9d4cd}
.card h1{margin:0;font-size:clamp(64px,8.5vw,122px);font-weight:540;letter-spacing:-.065em;line-height:1.05}
.card h1 span{display:block;margin-top:13px;font-size:clamp(17px,2vw,24px);font-weight:350;letter-spacing:-.01em;color:#e2e6d9}
.lead{margin:0;font-size:14px;font-weight:350;color:#b9ced0;line-height:1.55}
.go{margin-top:6px;background:var(--lantern);color:#15242b;border:1px solid #ffe4b0;border-radius:99px;padding:15px 36px;min-height:50px;font-size:15px;font-weight:650;box-shadow:0 0 38px #ffc77420;transition:background .2s,transform .2s}.go:hover:not(:disabled){transform:translateY(-2px);background:#ffebc0}
.how{margin:0;font-size:12px;color:#c5d5d5;line-height:1.7}.how span{font-size:11px;color:#8ca5ad}.fine{margin:0;font-size:11px;color:#8ca8b0;line-height:1.5;max-width:45ch}.touch-help{display:none}
.card-end{padding-bottom:max(50px,env(safe-area-inset-bottom))}.card-end h2,.pause-card h2{margin:0;font-size:clamp(36px,5vw,68px);font-weight:500;letter-spacing:-.05em;line-height:1.1}.card-end h2 em{font-style:normal;color:var(--lantern)}.card-end .found{max-width:42ch;margin:0;color:#c6d5d6;font-size:15px;line-height:1.5}.stat{display:flex;gap:34px;margin:4px 0 0}.stat span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9db6be}.stat b{display:block;margin-top:7px;font-size:24px;font-weight:400;letter-spacing:-.03em;color:#f4ecd8;text-transform:none}
.text-button{background:none;border:0;color:#b8ccd0;padding:12px;font-size:12px}
.encounters{font-size:12px;color:#b9ced0;max-width:44ch}.encounters summary{cursor:pointer;padding:4px}.encounters p{margin:10px 0 0;line-height:1.6}.encounters .field-total{margin-top:6px;color:#8ca8b0;font-size:11px}
.pause-card{position:absolute;inset:0;place-content:center;justify-items:center;gap:20px;padding:28px;text-align:center;background:#01111bd4;backdrop-filter:blur(12px)}.pause-card>p:not(.eyebrow){margin:0;color:#bbd0d3;font-size:14px}
.touch-controls{display:none}.touch-help{display:none}
@media(pointer:coarse){.touch-controls{display:flex;position:absolute;inset:auto 0 max(30px,env(safe-area-inset-bottom));align-items:center;justify-content:space-between;padding:0 26px;pointer-events:none}.stick{width:106px;height:106px;border-radius:50%;border:1px solid #d0e8e333;background:#071c2533;position:relative;touch-action:none;pointer-events:auto}.stick i{position:absolute;left:32px;top:32px;width:40px;height:40px;border:1px solid #d2eae570;border-radius:50%;background:#c1e6df16}.stick span,#swim span{position:absolute;left:0;right:0;bottom:-19px;text-align:center;font-size:10px;letter-spacing:.08em;color:#b9cccd}.touch-controls button{width:74px;height:74px;border-radius:50%;border:1px solid #e6ddbc70;background:#18343c80;color:#ffdfac;font-size:30px;position:relative;touch-action:none;pointer-events:auto}.touch-controls button[data-held]{background:#e2d6a940}.touch-help{display:block}.desktop-help,.swim-hint{display:none}.cargo{bottom:175px}.dive:not([data-phase=diving]) .touch-controls{display:none}}
@media(max-width:600px){:root{--edge:22px}.card{gap:16px;padding-top:50px}.card h1{font-size:64px}.card h1 span{font-size:17px;margin-top:13px}.card .lead{font-size:13px}.depth{top:max(76px,calc(env(safe-area-inset-top) + 54px))}.depth>span{font-size:8px;letter-spacing:.14em}.depth b{font-size:48px}.sighting{top:44%}.sighting i{max-width:18ch;font-size:11px}.sighting b{font-size:15px}.say{font-size:15px;top:25%}.stat{gap:24px}.card-end h2{font-size:38px}.back,.tools{font-size:11px}.tools{gap:7px}.tools button{padding:8px 11px}.air{right:22px;top:33%;bottom:36%}}
@media(max-height:620px){.card{gap:10px;padding:40px 20px 18px}.card h1{font-size:58px}.card h1 span{margin-top:5px;font-size:16px}.card .fine{display:none}.go{padding:11px 30px;min-height:44px}.depth b{font-size:42px}.touch-controls{bottom:24px}.cargo{bottom:155px}.card-end h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.dive[data-phase=done] #sea{animation:return-light .7s ease-out}
@keyframes return-light{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.dive[data-phase=done] #sea{animation:none}}

.expeditions{display:flex;gap:10px;width:min(650px,100%)}
.expeditions a{flex:1;text-align:left;padding:14px 17px;border:1px solid #b0d1cf35;border-radius:12px;background:#06212b9c;color:#d7e6df;text-decoration:none;transition:background .2s}
.expeditions a[aria-current]{border-color:#efce90;background:#c8aa6a17}.expeditions a:hover{background:#42706d44}
.expeditions small,.expeditions span{display:block;font-size:10px;color:#afc5c7}.expeditions small{letter-spacing:.07em}.expeditions b{display:block;margin:7px 0;font-size:16px;font-weight:500}.expeditions a[aria-current] b{color:var(--lantern)}
#end:focus{outline:none}
.end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center}.end-actions a{text-decoration:none}
.card{max-height:calc(100% - 72px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.card h1{font-size:clamp(54px,7vw,100px)}
@media(max-width:600px){.expeditions{gap:6px}.expeditions a{padding:10px 8px}.expeditions b{font-size:12px}.expeditions small,.expeditions span{font-size:8px}.card{padding-left:16px;padding-right:16px;gap:12px}.card h1{font-size:58px}.end-actions{gap:8px}.end-actions .go{font-size:12px;padding:13px 18px}}
@media(max-height:620px){.card{gap:8px;padding-top:25px}.card h1{font-size:40px}.card h1 span{font-size:14px}.expeditions a{padding:8px 10px}.expeditions b{margin:4px 0}.how{font-size:10px;line-height:1.4}.lead{max-width:55ch;font-size:12px}.card-end{padding-top:30px}}

/* Keep navigation legible against the bright refractive surface. */
.depth,.air,.say,.sighting{text-shadow:0 1px 2px #00131f,0 2px 5px #00131f,0 0 16px #00131fcc}
.swim-hint{color:#d5e4df}

.bearing{position:absolute;top:150px;left:var(--edge);margin:0;color:#c8e6df;font-size:12px;letter-spacing:.025em;text-shadow:0 1px 3px #00131f,0 0 10px #00131f;pointer-events:none}
@media(max-width:600px){.bearing{top:164px;font-size:11px;max-width:65vw}}

@view-transition{navigation:auto}

/* Relics: a quiet counter beside the lanterns. */
.relic-count{font-size:11px;color:#e9d9b0;letter-spacing:.04em;padding-left:15px;border-left:1px solid #f9e9bf33}.relic-count b{font-weight:600;color:var(--lantern)}
.relic-count[data-new]{animation:relicPop .9s ease-out}
@keyframes relicPop{0%{transform:scale(1.35);color:#fff}100%{transform:none}}
/* A jelly's sting: a pink flash at the edges of the view. */
.sting{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,#ff4fb066 80%,#ff2f9aaa 100%)}
.sting[data-on]{animation:sting .8s ease-out}
@keyframes sting{0%{opacity:1}100%{opacity:0}}
/* Six expeditions: two rows of three. */
.expeditions{flex-wrap:wrap;width:min(700px,100%)}.expeditions a{flex:1 1 30%;min-width:0}
.expeditions em{display:block;font-style:normal;font-size:10px;color:#e9d9b0;margin-top:3px}
.stat .relic-list{display:block;font-size:11px;color:#e9d9b0;margin-top:4px;font-weight:400}
@media(prefers-reduced-motion:reduce){.sting[data-on],.relic-count[data-new]{animation:none}}

/* The survey is a quiet place to plan; opening it stops the simulation. */
#chart{color:var(--ink);background:#061c24f5;border:1px solid #91b6b44d;border-radius:18px;width:min(800px,94vw);max-height:92dvh;padding:28px;overflow:auto;touch-action:pan-y;box-shadow:0 25px 100px #0009}
#chart::backdrop{background:#010c16b8;backdrop-filter:blur(9px)}
#chart header{display:flex;align-items:center;justify-content:space-between;gap:20px}#chart h2{font-weight:450;font-size:30px;letter-spacing:-.04em;margin:8px 0 10px}#chart-close{background:none;border:1px solid #b1ccca50;border-radius:50%;width:44px;height:44px;color:var(--ink);font-size:26px;flex:none}
.chart-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}#chart-map{margin:0}#chart-map svg{width:100%;max-height:490px}#chart-map .shot{stroke:#adb59d;stroke-width:1;stroke-dasharray:3 5}#chart-map .grid{stroke:#accfc512;fill:none}#chart-map text{fill:#94b7b9;font:9px Archivo,sans-serif}#chart-map .passage{fill:none;stroke:#647b8055;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}#chart-map .visited{stroke:#69b6af99}#chart-map .light{fill:#f8ce8c;stroke:#ffe7b4;stroke-width:1.5}#chart-map .taken{fill:#233c41;stroke:#718c89}#chart-map .site{fill:#99b0b166}#chart-map .recorded{fill:#a6e3d7}#chart-map .diver{fill:#f8fbf1;stroke:#061c24;stroke-width:2}#chart-map .you{fill:#f6eddc}
.chart-intro,.chart-key,#discovery-notes p{font-size:12px;line-height:1.6;color:#b7ccca}.chart-key{font-size:10px;color:#83a6a8}#chart-routes{display:grid;gap:7px}#chart-routes button{text-align:left;color:var(--ink);border:1px solid #85aaa333;border-radius:9px;padding:11px 14px;background:#9fc2b308}#chart-routes button[aria-pressed=true]{border-color:#f3ce8b99;background:#efd19a0c}#chart-routes b,#chart-routes span{display:block}#chart-routes b{font-size:12px;font-weight:500}#chart-routes span{font-size:10px;color:#9fbdbb;margin-top:4px}#chart summary{font-size:12px;cursor:pointer;padding:10px 0}
.observe{pointer-events:auto;position:absolute;bottom:92px;left:50%;transform:translateX(-50%);padding:13px 20px;color:#dfede7;background:#06202bc9;border:1px solid #a6d5c766;border-radius:25px;overflow:hidden;font-size:12px;max-width:90vw;touch-action:none}.observe i{position:absolute;bottom:0;left:0;height:3px;width:calc(var(--record,0)*100%);background:#d7e8bc}.observe span{position:relative;z-index:1}
@media(pointer:coarse){.observe{bottom:220px}.swim-hint{display:none}}
@media(max-width:600px){#chart{padding:18px}#chart h2{font-size:24px}.chart-layout{grid-template-columns:110px 1fr;gap:12px}#chart-map svg{height:390px;object-fit:contain}.chart-intro{font-size:11px}#chart-routes button{padding:10px}#chart-routes b{font-size:11px}#chart-routes span{font-size:9px}.tools{gap:5px}.tools button{font-size:10px;padding:8px 9px}.cargo{gap:8px;right:24px;flex-wrap:wrap}.cargo>span{font-size:10px}.relic-count{padding-left:8px}}

#chart-enlarge{display:none}
@media(max-width:600px){#chart-enlarge{display:block;width:100%;border:1px solid #85aaa344;border-radius:8px;padding:10px 5px;color:var(--ink);background:#9fc2b308;font-size:10px;min-height:44px}.chart-layout.expanded{grid-template-columns:1fr}.chart-layout.expanded #chart-map svg{height:auto;max-height:440px}.chart-layout.expanded #chart-enlarge{margin-bottom:12px}}
/* Demo CREDIT buy-in on the surface card, and the payout on the end card. */
.dive-credit{width:min(420px,100%)}.dive .dive-credit .game-buyin-entry,.dive .dive-credit .game-buyin-prizes strong{color:var(--lantern)}.dive-credit .game-buyin{margin:0;max-width:none;background:#06212b9c;border-color:#efce9055;color:#d7e6df}
.end-credit{margin:0;font-size:15px;font-weight:600;color:#c6d5d6}.end-credit[data-won]{color:var(--lantern)}
.end-morph{margin:0;font-size:14px}.end-morph a{color:var(--lantern);text-decoration:underline;text-underline-offset:4px}

/* A charged dive lamp, and a warning that remains usable with sound off. */
.focus-lamp{position:absolute;right:var(--edge);bottom:82px;pointer-events:auto;touch-action:none;border:1px solid #b9d5c74d;border-radius:9px;background:#041820cc;color:#dae9df;padding:13px 15px;min-height:46px;min-width:180px;display:flex;gap:16px;justify-content:space-between;overflow:hidden;font-size:11px;backdrop-filter:blur(8px)}
.focus-lamp b{font-weight:500;font-variant-numeric:tabular-nums;color:#cfe9d7}.focus-lamp i{position:absolute;left:0;bottom:0;height:2px;width:calc(var(--charge,1)*100%);background:#cae9ce}.focus-lamp[data-held]{border-color:#dfefd2;background:#34625599}.focus-lamp[data-empty]{color:#a5b4b0}.focus-lamp[data-empty] i{background:#d3b480}
.dive:not([data-phase=diving]) .focus-lamp{visibility:hidden}
/* A visible bearing around the sight, with a separate turn-back instruction.
   No flashing, input capture, or camera steering; usable with sound off. */
.threat-direction{--cue-rx:clamp(65px,9vw,124px);--cue-ry:48px;position:absolute;inset:0;color:#f6cb87;filter:drop-shadow(0 2px 3px #000) drop-shadow(0 0 9px #001018);pointer-events:none}
.threat-direction svg{position:absolute;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.threat-arrow{left:calc(50% + var(--cue-x,0)*var(--cue-rx));top:calc(50% + var(--cue-y,0)*var(--cue-ry));transform:translate(-50%,-50%) rotate(var(--cue-angle,0deg));background:radial-gradient(ellipse,#071a20bb,transparent 70%)}
.threat-lock{left:50%;top:50%;transform:translate(-50%,-50%);display:none;opacity:.85}
.threat-direction[data-centered=true] .threat-arrow{display:none}.threat-direction[data-centered=true] .threat-lock{display:block}
.threat-direction[data-closing=true]{color:#ffae83}.threat-direction[data-aligned=true]{color:#cceac9}
.dive:not([data-phase=diving]) :is(.threat,.threat-direction){visibility:hidden}
.threat{position:absolute;top:calc(50% + 78px);left:50%;transform:translateX(-50%);text-align:center;width:min(310px,80vw);padding:0 0 12px;text-shadow:0 1px 4px #001017,0 0 16px #001017;pointer-events:none}
.threat small{display:block;margin-bottom:7px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#d5bda0}
.threat b{display:block;font-weight:550;font-size:16px;letter-spacing:.01em;color:#f4d5a7}.threat span{display:block;margin-top:7px;color:#d1ddd5;font-size:11px}.threat i{display:block;height:2px;width:calc(var(--repel,0)*100%);max-width:160px;background:#d7eccb;margin:10px auto 0;box-shadow:0 0 12px #c2e5bd44}
.threat[data-closing=true] b{color:#ffbb96}.threat[data-aligned=true] b{color:#d1eacc}
.dive[data-threat=true] :is(.sighting,.say){opacity:0}.dive[data-threat=true] .reticle{width:10px;height:10px;margin:-5px;border-color:#e9d9ad}
@media(pointer:coarse){.focus-lamp{right:26px;bottom:148px;min-width:160px}.cargo{bottom:212px}.observe{bottom:264px}}
@media(max-width:600px){.focus-lamp{font-size:10px;min-width:158px}.threat{top:calc(50% + 68px)}}
@media(pointer:coarse) and (max-height:540px){.focus-lamp{bottom:126px}.cargo{bottom:24px;left:150px;right:130px}.observe{bottom:170px}.threat{top:calc(50% + 64px);width:250px}.threat b{font-size:14px}.threat small{font-size:8px;margin-bottom:5px}.threat span{font-size:10px;margin-top:5px}}

/* Short portrait screens keep the warning above the sight and away from the
   focus button. The ordinary course returns as soon as the encounter ends. */
@media(pointer:coarse) and (max-width:600px) and (max-height:680px) and (orientation:portrait){
 .threat{top:calc(50% - 105px)}.threat small{display:none}
 .threat-direction{--cue-ry:28px}
 .dive[data-threat=true] .bearing{visibility:hidden}
}