:root{color-scheme:dark;font-family:Inter,"Segoe UI",system-ui,sans-serif;color:#e6f3f1;background:#062a3d;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{touch-action:none;-webkit-user-select:none;user-select:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ccf6e8;outline-offset:6px}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#game-container{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.ocean-vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(1,15,24,.55),transparent 25%,transparent 70%,rgba(1,15,24,.65)),radial-gradient(ellipse at center,transparent 35%,rgba(1,15,24,.18));z-index:1}
.hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px 36px;z-index:5;pointer-events:none}.brand{color:#e9f8f3;display:flex;gap:14px;align-items:center;text-decoration:none;pointer-events:auto;font-size:11px;font-weight:650;letter-spacing:.18em}.brand small{display:block;margin-top:5px;font-size:9px;font-weight:400;color:#91b9c0;letter-spacing:.35em}.brand-mark{border:1px solid #89bcbf70;padding:10px 8px;border-radius:50%;font-size:17px;letter-spacing:-1px;font-weight:500}.brand-mark span{color:#76d5c7}.instruments{display:flex;gap:34px;align-items:center}.instrument{min-width:65px}.instrument>span,.dive-stat>span{display:block;font-size:9px;color:#9ec3c7;text-transform:uppercase;letter-spacing:.16em;margin-bottom:7px}.instrument strong{font-size:28px;font-weight:350;font-variant-numeric:tabular-nums;letter-spacing:-1px}.instrument.secondary strong{font-size:19px;color:#b0cecc}.icon-button{width:42px;height:42px;color:#d5e9e5;background:#0a293a80;border:1px solid #83b8bf45;border-radius:50%;pointer-events:auto;font-size:17px}
.panel{max-width:440px}.intro{position:fixed;right:8%;top:50%;transform:translateY(-48%);z-index:3}.eyebrow{display:flex;align-items:center;gap:9px;color:#91d2cc;font-size:10px;font-weight:600;letter-spacing:.21em;margin:0 0 22px}.eyebrow span{display:block;width:5px;height:5px;background:#8fe3cc;border-radius:50%;box-shadow:0 0 13px #8fe3cc99}h1,h2{font-weight:360;letter-spacing:-.055em;line-height:1.02;margin:0;color:#f0f8f3}h1{font-size:clamp(54px,6.5vw,94px)}h2{font-size:clamp(38px,5vw,66px)}.panel-copy{font-size:14px;line-height:1.8;color:#b4cdcf;max-width:355px;margin:25px 0 28px}.primary-button{display:flex;justify-content:space-between;align-items:center;gap:50px;min-height:54px;border:1px solid #cae9db;background:#cae9db;color:#113039;padding:16px 23px;border-radius:3px;font-size:13px;font-weight:650;text-decoration:none;box-shadow:0 8px 36px #071e3240}.primary-button:hover{background:#e0f6eb}.primary-button>span{font-size:19px;font-weight:400}.intro-hint{margin-top:22px;color:#7fa9b2;font-size:11px;line-height:1.9}.intro:before{content:"";position:absolute;inset:-55px -45px;z-index:-1;background:radial-gradient(ellipse,#062331d4 8%,#06233188 45%,transparent 73%);pointer-events:none}
.dive-hud{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:end;gap:36px;padding:26px 36px;z-index:4;pointer-events:none;transition:opacity .3s}.dive-stat strong{font-size:18px;font-weight:400;font-variant-numeric:tabular-nums}.dive-stat b{font-weight:400}.dive-stat small{font-size:11px;color:#94b5b7}#health-value{font-size:15px;letter-spacing:4px;color:#a0d7bf}.boost-control{margin-left:auto;pointer-events:auto;width:132px}#boost-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 0;border:0;background:none;color:#d3e8df;font-size:12px}#boost-button span{border:1px solid #9cbeb64a;border-radius:3px;padding:3px 6px;font-size:8px;letter-spacing:.08em;color:#87aaa9}.stamina-track{width:100%;height:2px;background:#60888845}#stamina{height:100%;background:#acd7bc;transform-origin:left}
.water-caption{position:fixed;bottom:32px;left:36px;z-index:3;font-size:8px;letter-spacing:.16em;color:#7babb8}.water-caption span{padding:0 9px}body:not([data-state=idle]) .water-caption{display:none}body[data-state=idle] .dive-hud,body[data-state=over] .dive-hud{opacity:0;pointer-events:none}body[data-state=idle] .boost-control,body[data-state=over] .boost-control{pointer-events:none}#feedback{position:fixed;left:50%;top:20%;transform:translate(-50%,10px);font-size:12px;color:#e5eed1;background:#0a2c38b0;border:1px solid #8fa9a540;border-radius:30px;padding:10px 18px;z-index:8;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}#feedback.visible{opacity:1;transform:translate(-50%,0)}#damage{position:fixed;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 100px #ba785e80;opacity:0;transition:opacity .2s}#damage.visible{opacity:1}.overlay{position:fixed;inset:0;display:grid;place-items:center;background:#041b29b8;backdrop-filter:blur(12px);z-index:12;padding:30px}.overlay .panel{width:100%}.final-score{font-size:80px;font-weight:300;letter-spacing:-.06em;margin-top:25px;color:#b6e0cd}.overlay .panel-copy{margin-top:12px}
@media(max-width:700px){.hud{padding:20px;align-items:flex-start}.brand{font-size:9px;gap:9px}.brand small{font-size:8px}.brand-mark{font-size:15px;padding:9px 7px}.instruments{gap:15px}.instrument>span{font-size:8px;letter-spacing:.08em}.instrument strong{font-size:24px}.instrument.secondary{display:none}.icon-button{width:36px;height:36px}.intro{top:auto;bottom:13%;left:24px;right:24px;transform:none;max-width:350px}h1{font-size:52px}.intro .eyebrow{margin-bottom:12px}.intro .panel-copy{font-size:12px;line-height:1.7;max-width:310px;margin:16px 0 20px}.intro-hint{font-size:10px;margin-top:14px}.intro .primary-button{min-width:210px;min-height:48px}.dive-hud{padding:20px 18px;padding-bottom:max(20px,env(safe-area-inset-bottom));gap:20px}.dive-stat>span{font-size:8px}.dive-stat strong{font-size:15px}#health-value{font-size:12px;letter-spacing:2px}.boost-control{width:90px}.water-caption{bottom:25px;left:24px;font-size:7px}#feedback{top:16%}}
@media(max-height:550px) and (min-width:701px){.intro{right:8%;max-width:350px}h1{font-size:53px}.eyebrow{margin-bottom:12px}.panel-copy{margin:15px 0;font-size:12px}.intro-hint{margin-top:12px}.hud{padding:16px 25px}.water-caption{bottom:15px}.dive-hud{padding:14px 25px}}
@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important}}

html[lang=en] .intro h1{font-size:clamp(48px,5vw,72px)}

/* PixelShark brand: turquoise/purple voxels, angular typography and square controls. */
@font-face{font-family:PixelShark;src:url('/assets/fonts/ethnocentric-el-latin-ext.woff2') format('woff2');font-display:swap}
:root{background:#10132e;color:#e9f9ff}
.ocean-vignette{background:linear-gradient(180deg,#080c2b99,transparent 28%,transparent 72%,#140b3099),radial-gradient(ellipse at center,transparent 40%,#0b062e30)}
.brand{font-family:PixelShark,monospace;letter-spacing:0;font-size:10px}.brand small{font-family:monospace;letter-spacing:.28em;color:#71cdd6}
.brand-mark{border:2px solid #5de0db;border-radius:0;background:#292045;box-shadow:4px 4px 0 #7837aa;font-family:monospace}.brand-mark span{color:#b68aff}
h1,h2{font-family:PixelShark,monospace;letter-spacing:-.02em;line-height:1.2;text-shadow:3px 3px 0 #4c2b77}h1,html[lang=en] .intro h1{font-size:clamp(34px,4.1vw,59px)}h2{font-size:clamp(27px,3.2vw,44px)}
.eyebrow{color:#79eee1;letter-spacing:.15em;font-family:monospace}.eyebrow span{width:7px;height:7px;border-radius:0;background:#79eee1;box-shadow:3px 3px 0 #9652d2}
.primary-button{color:#101b36;background:#76e9dd;border:2px solid #b1ffed;border-radius:0;box-shadow:5px 5px 0 #633b9e;font-family:monospace;text-transform:uppercase;letter-spacing:.06em;font-weight:700}.primary-button:hover{background:#a0f9e9;box-shadow:7px 7px 0 #7947b4}.primary-button:disabled{opacity:.5;cursor:wait}
.panel-copy{color:#c0d7e9}.intro-hint{color:#9daed0}.intro:before{background:radial-gradient(ellipse,#111330eb 10%,#161335b0 50%,transparent 74%)}
.icon-button{border:2px solid #808bbb80;border-radius:0;background:#181c4188;box-shadow:3px 3px 0 #54337066}
.instrument>span,.dive-stat>span{color:#a6bada;font-family:monospace}.instrument strong,.dive-stat strong{font-family:monospace;font-weight:600;letter-spacing:0}.instrument.secondary strong{color:#b6a0df}
#health-value{color:#73ead5}#boost-button{color:#a1f2e5;font-family:monospace}#boost-button span{border-radius:0;border-color:#9a71c777;color:#c9b2e3}.stamina-track{height:4px;background:#70509260}#stamina{background:#6ee3dc;box-shadow:0 0 10px #53cabc44}
#feedback{border-radius:0;border:1px solid #9870c5;background:#24214be8;color:#a1ffee;box-shadow:3px 3px 0 #54308b;font-family:monospace}
.overlay{background:#0b0f2de6;backdrop-filter:none}.final-score{color:#7defdf;font-family:monospace;text-shadow:4px 4px 0 #694597}.water-caption{color:#91a0ca;font-family:monospace}
@media(max-width:700px){.intro{bottom:12%}h1,html[lang=en] .intro h1{font-size:35px}.brand{font-size:8px}.brand small{font-size:8px}.panel-copy{font-size:12px}}
@media(max-height:550px) and (min-width:701px){h1,html[lang=en] .intro h1{font-size:34px}.intro .panel-copy{margin:14px 0}.intro-hint{margin-top:13px}}

@media(pointer:coarse){#boost-button span{display:none}}

img.brand-mark{width:60px;height:36px;object-fit:contain;padding:0;border:0;box-shadow:none;background:none}