:root{--brass: #d4a560;--brass-bright: #f0c678;--brass-dim: #8a6f42;--cream: #e8d8b0;--paper: #f4e9cf;--paper-dark: #d9c89a;--ink: #3a2a1e;--ink-dim: #6e5840;--leather: #2a1e16;--leather-mid: #4a3726;--warn: #e06244;--font-display: Georgia, "Playfair Display", "IM Fell English", "Times New Roman", serif;--font-body: "Segoe UI", system-ui, -apple-system, sans-serif;--shadow-soft: 0 2px 8px rgba(0,0,0,.6);--shadow-text: 0 2px 8px rgba(0,0,0,.7)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font-body);color:var(--cream);cursor:crosshair}#game-canvas{display:block;width:100%;height:100%}#ui-layer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#ui-layer>*{pointer-events:auto}#hud{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;font-size:14px;-webkit-user-select:none;user-select:none}.hud-panel{position:absolute;padding:10px 14px;background:linear-gradient(180deg,#2a1e16b8,#1a100ad1);border:1px solid var(--brass-dim);border-radius:6px;box-shadow:0 0 0 1px #f0c67814 inset,0 4px 14px #00000080;color:var(--cream);pointer-events:none}.panel-label{display:block;font-family:var(--font-display);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass-dim);margin-bottom:4px}.panel-value{font-family:var(--font-display);font-size:22px;line-height:1;color:var(--cream)}.panel-value .unit{font-size:13px;color:var(--brass-dim);margin-left:2px}#hud-life{top:18px;left:18px;min-width:150px}#hud-depth{margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed rgba(138,111,66,.35)}#hud-air{display:flex;align-items:center;gap:12px}#hud-tanks{flex:1}#tank-pips{display:flex;gap:4px}#hud-haul{top:18px;right:18px;text-align:right;min-width:150px}#hud-gold{font-family:var(--font-display);font-weight:500;font-size:24px;color:var(--brass-bright);text-shadow:0 1px 3px rgba(0,0,0,.6);letter-spacing:.5px;margin-bottom:6px;padding-bottom:8px;border-bottom:1px dashed rgba(138,111,66,.35)}#hud-gold .unit{font-size:12px;color:var(--brass-dim);margin-left:4px;letter-spacing:2px;text-transform:uppercase}#gold-amount{display:inline-block;transform-origin:center}#gold-amount.bump{animation:goldBump .32s ease-out}@keyframes goldBump{0%{transform:scale(1)}30%{transform:scale(1.28);color:#fff2c2}to{transform:scale(1);color:var(--brass-bright)}}.pickup-float{position:fixed;pointer-events:none;transform:translate(-50%,-50%);font-size:18px;font-weight:700;color:#ffd760;text-shadow:0 0 8px rgba(255,220,100,.6),0 2px 6px rgba(0,0,0,.85);animation:pickupFloat 1s cubic-bezier(.22,.8,.35,1) forwards;z-index:15;letter-spacing:.5px}.pickup-float.rare{color:#fff0a8;font-size:22px;text-shadow:0 0 12px rgba(255,240,168,.9),0 0 4px rgba(255,255,255,.7),0 2px 6px rgba(0,0,0,.85)}@keyframes pickupFloat{0%{opacity:0;transform:translate(-50%,-50%) translateY(0) scale(.8)}12%{opacity:1;transform:translate(-50%,-50%) translateY(-6px) scale(1.1)}25%{opacity:1;transform:translate(-50%,-50%) translateY(-14px) scale(1)}to{opacity:0;transform:translate(-50%,-50%) translateY(-70px) scale(.9)}}#hud-depth{font-family:var(--font-display);color:var(--cream);letter-spacing:.5px}#hud-oxygen{width:52px;height:52px;flex-shrink:0;transition:opacity .3s;filter:drop-shadow(0 0 3px rgba(212,165,96,.3))}#oxygen-ring{width:100%;height:100%}.oxygen-bg{fill:none;stroke:#3a2a1e99;stroke-width:7}.oxygen-fill{fill:none;stroke:var(--brass);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .1s,stroke .3s;filter:drop-shadow(0 0 4px rgba(212,165,96,.6))}#hud-oxygen.warning .oxygen-fill{stroke:var(--warn);animation:oxygenBlink .5s infinite}@keyframes oxygenBlink{0%,to{opacity:1}50%{opacity:.3}}.tank-pip{width:11px;height:18px;border-radius:3px 3px 2px 2px;border:1px solid var(--brass-dim);background:#140e0859;position:relative}.tank-pip:before{content:"";position:absolute;top:-2px;left:2px;right:2px;height:2px;border-radius:1px;background:var(--brass-dim)}.tank-pip.full{background:linear-gradient(to top,#b58347 0%,var(--brass) 60%,var(--brass-bright) 100%);border-color:var(--brass);box-shadow:0 0 8px #d4a56080}.tank-pip.full:before{background:var(--brass-bright)}.tank-pip.active{background:linear-gradient(to top,#d4a56038,#f0c6786b);border-color:#d4a5608c;animation:tankPulse 1.6s ease-in-out infinite}@keyframes tankPulse{0%,to{opacity:.55}50%{opacity:.95}}#cargo-slots{display:flex;gap:3px;justify-content:flex-end;flex-wrap:wrap;max-width:132px;margin-left:auto}.cargo-slot{width:14px;height:14px;border:1px solid var(--brass-dim);border-radius:2px;background:#140e084d}.cargo-slot.filled{background:var(--brass);border-color:var(--brass-bright);box-shadow:0 0 5px #d4a56073}#hud-compass{bottom:20px;left:18px;display:flex;align-items:center;gap:12px;padding:10px 14px}#compass-arrow{font-size:26px;line-height:1;color:var(--brass-bright);filter:drop-shadow(0 0 4px rgba(240,198,120,.6));transition:transform .1s}.compass-info{display:flex;flex-direction:column;gap:1px;line-height:1.2}#compass-label{font-size:10px;letter-spacing:2.5px;color:var(--brass-dim);text-transform:uppercase;font-family:var(--font-display)}#compass-dist{font-size:15px;color:var(--cream);font-family:var(--font-display);font-weight:500}#harbor-menu{display:none;position:fixed;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background:#00000080;z-index:20}.harbor-panel{background:radial-gradient(ellipse at top,#332418 0%,var(--leather) 65%,#1a0f08 100%);border:1px solid var(--brass-dim);border-radius:6px;padding:28px 36px;min-width:420px;max-height:82vh;overflow-y:auto;pointer-events:auto;box-shadow:0 0 0 1px #d4a56026 inset,0 20px 60px #0009}.harbor-panel h2{text-align:center;margin-bottom:20px;font-size:28px;letter-spacing:8px;font-family:var(--font-display);font-weight:400;color:var(--brass-bright);text-shadow:0 2px 6px rgba(0,0,0,.7)}.harbor-tabs{display:flex;gap:4px;margin-bottom:18px}.tab{flex:1;padding:10px 8px;background:#3a2a1e8c;border:1px solid var(--brass-dim);border-radius:4px;color:var(--cream);cursor:pointer;font-size:13px;font-family:var(--font-display);letter-spacing:2px;transition:background .2s,border-color .2s,color .2s}.tab.active{background:#d4a5602e;color:var(--brass-bright);border-color:var(--brass)}.tab-content{display:none}.tab-content.active{display:block}.sell-item{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed rgba(138,111,66,.35);color:var(--cream)}.sell-item span:last-child{color:var(--brass-bright);font-family:var(--font-display)}.empty{color:var(--brass-dim);text-align:center;padding:16px;font-style:italic}.upgrade-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(138,111,66,.35)}.upgrade-info{display:flex;flex-direction:column;gap:3px}.upgrade-info strong{font-family:var(--font-display);color:var(--cream);letter-spacing:1px;font-weight:500}.upgrade-level{font-size:12px;color:var(--brass-dim)}.maxed{color:var(--brass-bright);font-size:12px;font-family:var(--font-display);letter-spacing:2px}.harbor-btn{padding:9px 16px;background:#d4a5601f;border:1px solid var(--brass-dim);border-radius:4px;color:var(--brass-bright);cursor:pointer;font-size:13px;margin-top:8px;font-family:var(--font-body);letter-spacing:.5px;transition:background .2s,border-color .2s}.harbor-btn:hover{background:#d4a56038;border-color:var(--brass)}.harbor-btn.disabled{opacity:.35;pointer-events:none}.harbor-btn.leave{display:block;width:100%;margin-top:18px;background:#d4a5602e;border-color:var(--brass);color:var(--brass-bright);font-family:var(--font-display);letter-spacing:4px;font-size:14px;padding:12px;text-transform:uppercase}.upgrade-btn{font-size:12px;white-space:nowrap}#hint-display{position:fixed;bottom:40%;left:50%;transform:translate(-50%);font-size:22px;font-weight:400;letter-spacing:4px;text-shadow:0 2px 12px rgba(0,0,0,.85);color:var(--cream);font-family:var(--font-display);opacity:0;transition:opacity .5s;pointer-events:none}#hud-prompt{position:fixed;bottom:12%;left:50%;transform:translate(-50%);font-size:15px;font-weight:400;letter-spacing:3px;padding:9px 22px;background:#1a0f08b8;border:1px solid var(--brass-dim);border-radius:4px;color:var(--brass-bright);font-family:var(--font-display);opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 2px 12px #0006}#title-screen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transition:opacity 1.5s;z-index:30}.title-text{font-size:84px;font-weight:400;letter-spacing:26px;font-family:var(--font-display);text-shadow:0 0 40px rgba(240,198,120,.4),0 4px 30px rgba(0,0,0,.8);color:var(--brass-bright);padding-left:26px}.title-sub{margin-top:24px;font-size:14px;letter-spacing:6px;text-transform:uppercase;color:var(--brass-dim);font-family:var(--font-display)}#pause-menu{display:none;position:fixed;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background:#0009;z-index:25}.pause-panel{text-align:center;min-width:280px;padding:24px 32px;background:radial-gradient(ellipse at top,#332418 0%,var(--leather) 70%,#1a0f08 100%);border:1px solid var(--brass-dim);border-radius:6px;box-shadow:0 0 0 1px #d4a5601f inset,0 16px 50px #0009}.pause-panel h2{font-size:34px;letter-spacing:10px;margin-bottom:24px;font-weight:400;font-family:var(--font-display);color:var(--brass-bright)}.pause-btn{display:block;width:100%;padding:11px;margin:8px 0;background:#d4a56014;border:1px solid var(--brass-dim);border-radius:4px;color:var(--cream);font-size:15px;font-family:var(--font-display);letter-spacing:2px;cursor:pointer;transition:background .2s,border-color .2s}.pause-btn:hover{background:#d4a5602e;border-color:var(--brass);color:var(--brass-bright)}#controls-info{margin-top:16px;text-align:left;font-size:13px;color:var(--brass-dim);line-height:1.8;font-family:var(--font-body)}#endscreen{display:none;position:fixed;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background:#000000d1;z-index:30}.end-panel{text-align:center;min-width:480px;max-width:560px;padding:40px 48px 36px;background:radial-gradient(ellipse at top,var(--paper) 0%,var(--paper-dark) 100%);color:var(--ink);border:1px solid var(--brass-dim);border-radius:4px;box-shadow:0 0 0 1px #ffebb959 inset,0 20px 60px #000000bf;position:relative}.end-panel:before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px dashed rgba(110,88,64,.35);border-radius:2px;pointer-events:none}.end-panel h1{font-size:56px;font-weight:400;letter-spacing:18px;font-family:var(--font-display);color:var(--ink);margin-bottom:4px;padding-left:18px}.end-subtitle{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px;font-family:var(--font-display)}.end-subtitle:before,.end-subtitle:after{content:"·";margin:0 10px;color:var(--brass)}.end-log-header{font-family:var(--font-display);font-style:italic;color:var(--ink-dim);font-size:13px;margin:18px 0 24px;letter-spacing:.5px}.end-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;margin-bottom:28px;padding:20px 16px;border-top:1px solid rgba(110,88,64,.4);border-bottom:1px solid rgba(110,88,64,.4)}.stat{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}.stat-label{font-size:11px;color:var(--ink-dim);letter-spacing:2.5px;text-transform:uppercase;font-family:var(--font-display)}.stat-value{font-size:30px;font-weight:400;color:var(--ink);font-family:var(--font-display)}.end-signature{font-family:var(--font-display);font-style:italic;color:var(--ink-dim);font-size:13px;margin-top:8px;margin-bottom:20px;letter-spacing:.5px}.end-panel .pause-btn{background:#3a2a1e14;border:1px solid var(--brass-dim);color:var(--ink);font-family:var(--font-display);letter-spacing:3px;text-transform:uppercase;font-size:14px;padding:10px 24px;display:inline-block;width:auto}.end-panel .pause-btn:hover{background:#d4a56047;border-color:var(--brass);color:var(--ink)}