*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#04101c;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#e8f0f6;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}#app canvas{display:block}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#hud>*{pointer-events:auto}.obj-card{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));max-width:min(360px,44vw);background:#061422d1;border:1px solid rgba(120,190,235,.35);border-radius:10px;padding:10px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.obj-title{font-size:11px;font-weight:700;letter-spacing:.14em;color:#6fd3ff;margin-bottom:4px}.obj-text{font-size:12.5px;line-height:1.45;color:#d5e6f2}.obj-text b{color:#ffd479}.gauges{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:205px;background:#061422d1;border:1px solid rgba(120,190,235,.35);border-radius:10px;padding:8px 10px;font-size:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.g-vessel{font-weight:800;letter-spacing:.08em;color:#7fdcff;font-size:12px;margin-bottom:4px;white-space:nowrap;overflow:hidden}.g-row{display:flex;align-items:baseline;gap:6px;margin:2px 0}.g-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#7a97ab;width:34px;flex:none}.g-val{font-variant-numeric:tabular-nums;font-weight:600;color:#eaf4fb;flex:1}.g-bar-row{display:flex;align-items:center;gap:6px;margin:4px 0}.g-bar{flex:1;height:9px;border-radius:5px;background:#ffffff1a;overflow:hidden}.g-fill{height:100%;border-radius:5px;transition:width .2s}.g-fill.fuel{background:linear-gradient(90deg,#2ec27e,#57e39a)}.g-fill.fuel.low{background:linear-gradient(90deg,#d3401f,#f07030);animation:pulse 1s infinite alternate}.g-fill.tension{background:#4fd170}.g-fill.tension.yellow{background:#e8c02e}.g-fill.tension.red{background:#e8402e;animation:pulse .5s infinite alternate}.g-fill.chafe{background:linear-gradient(90deg,#8a6b2e,#d3872f)}.g-fill.integrity{background:linear-gradient(90deg,#6db6e8,#9fd5f5)}.g-fill.integrity.low{background:linear-gradient(90deg,#d3401f,#f07030);animation:pulse .7s infinite alternate}@keyframes pulse{0%{filter:brightness(.85)}to{filter:brightness(1.3)}}.tow-only,.ship-only{display:none!important}#hud.towing .tow-only,#hud.has-ship .ship-only{display:flex!important}.unit-row{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:6px}.unit-chip{font:700 11px/1 system-ui,sans-serif;letter-spacing:.07em;color:#bcd8ea;background:#081828d9;border:1px solid rgba(120,190,235,.35);border-radius:20px;padding:9px 13px;cursor:pointer}.unit-chip.active{color:#06202f;background:#5fd0ff;border-color:#9fe4ff}.toast{position:absolute;top:16%;left:50%;transform:translate(-50%) translateY(-8px);max-width:min(480px,86vw);background:#081828eb;border:1px solid rgba(120,190,235,.4);border-radius:10px;padding:10px 16px;font-size:13px;text-align:center;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none!important}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.toast b{color:#ffd479}.banner{position:absolute;top:34%;left:50%;transform:translate(-50%) scale(.94);font-size:clamp(18px,4vw,30px);font-weight:900;letter-spacing:.1em;color:#ffe9b0;text-shadow:0 2px 18px rgba(0,0,0,.8);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none!important;text-align:center;white-space:nowrap}.banner.show{opacity:1;transform:translate(-50%) scale(1)}.hint-bar{position:absolute;bottom:max(56px,calc(env(safe-area-inset-bottom) + 48px));left:50%;transform:translate(-50%);font-size:11px;color:#c8e1f0a6;pointer-events:none!important;text-align:center}.touch-controls{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20}.dpad{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:158px;height:158px;pointer-events:auto}.dpad-btn{position:absolute;width:52px;height:52px;border-radius:12px;border:1px solid rgba(140,200,240,.5);background:#0a1e32b8;color:#bfe4fa;font-size:17px;display:flex;align-items:center;justify-content:center;touch-action:none}.dpad-btn.held{background:#5fd0ffd9;color:#062030}.dpad-up{left:53px;top:0}.dpad-down{left:53px;bottom:0}.dpad-left{left:0;top:53px}.dpad-right{right:0;top:53px}.dpad-center{position:absolute;left:60px;top:60px;width:38px;height:38px;border-radius:50%;background:#78beeb1f}.touch-cluster{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,56px);gap:9px;pointer-events:auto;justify-items:end}.tbtn{width:56px;height:46px;border-radius:12px;border:1px solid rgba(140,200,240,.5);background:#0a1e32b8;color:#bfe4fa;font:700 11px/1 system-ui,sans-serif;letter-spacing:.05em;touch-action:none}.tbtn.held{background:#5fd0ffd9;color:#062030}.tbtn-big{width:56px;height:56px;border-radius:50%;background:#ffb03cd9;border-color:#ffd79a;color:#3a2200;font-size:12px}.tbtn-release{background:#b43228b3;border-color:#ff8c7899;color:#ffd8d0}#map-view{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:30;background:#06182e}#hookup-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25}.hookup-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.hookup-line{stroke:#ffd479;stroke-width:3;stroke-dasharray:8 6}.mount-marker{position:absolute;left:0;top:0;pointer-events:none;text-align:center}.mount-ring{width:64px;height:64px;margin:0 auto;border:4px solid rgba(240,90,70,.9);border-radius:50%;box-shadow:0 0 22px #f05a4680;transition:border-color .12s,box-shadow .12s}.mount-marker.open .mount-ring{border-color:#4fe07a;box-shadow:0 0 26px #4fe07abf;animation:ringPulse .7s infinite alternate}@keyframes ringPulse{0%{transform:scale(1)}to{transform:scale(1.12)}}.mount-label{margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.06em;color:#ffe9b0;text-shadow:0 1px 6px #000}.mount-label small{font-weight:500;color:#bcd8ea}.hook-chip{position:absolute;left:0;top:0;width:62px;height:62px;margin:-31px 0 0 -31px;padding:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;color:#ffd479;background:radial-gradient(circle,#142e46f2 40%,#142e4600 70%);border:2px solid rgba(255,212,121,.8);cursor:grab;touch-action:none;box-sizing:content-box}.hook-chip:active{cursor:grabbing}.hookup-info{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);max-width:min(460px,88vw);background:#061422e6;border:1px solid rgba(255,212,121,.45);border-radius:10px;padding:10px 16px;font-size:13px;text-align:center;pointer-events:none}.hookup-cancel{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);padding:10px 26px;border-radius:22px;border:1px solid rgba(255,140,120,.6);background:#781e18cc;color:#ffd8d0;font:700 13px/1 system-ui,sans-serif;letter-spacing:.1em;cursor:pointer}.screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#0a2846b8,#030a14e6);overflow-y:auto}.title-inner{text-align:center;padding:26px 18px calc(26px + env(safe-area-inset-bottom));max-width:620px;width:100%}.title-kicker{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:#7fb8d8;margin-bottom:10px}.title-logo{font-size:clamp(40px,10vw,76px);font-weight:900;letter-spacing:.06em;background:linear-gradient(180deg,#fff 20%,#7fd0f8 65%,#2a7fb8);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}.title-sub{font-size:clamp(14px,3.4vw,22px);font-weight:800;letter-spacing:.42em;color:#ffd479;margin:8px 0 14px}.title-blurb{font-size:13.5px;line-height:1.5;color:#c4dcea;max-width:440px;margin:0 auto 20px}.title-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}.big-btn{font:800 15px/1 system-ui,sans-serif;letter-spacing:.1em;padding:16px 30px;border-radius:12px;border:none;cursor:pointer;color:#06202f;background:linear-gradient(180deg,#8fe0ff,#46b8ec);box-shadow:0 4px 22px #46b8ec66}.big-btn.alt{color:#dceef8;background:#143250d9;border:1px solid rgba(140,200,240,.5);box-shadow:none}.big-btn:active{transform:translateY(1px)}.free-opts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.08em;color:#7fa8c4;margin-bottom:18px}.free-opts label{display:flex;flex-direction:column;gap:6px;align-items:center}.free-opts select,.free-opts input[type=range]{accent-color:#5fd0ff;background:#0a1e32cc;color:#dceef8;border:1px solid rgba(140,200,240,.4);border-radius:7px;padding:5px 8px;font-size:12px}.title-foot{font-size:11px;line-height:1.7;color:#a0c3dabf}.title-foot a{color:#7fd0f8;font-weight:700;text-decoration:none}.results-title{font-size:clamp(26px,6vw,44px);font-weight:900;letter-spacing:.06em;margin-bottom:10px}.results-title.success{color:#7fe89a}.results-title.fail{color:#f0704f}.medal{font-size:clamp(16px,3.6vw,24px);font-weight:800;color:#ffd479;margin-bottom:14px}.fail-reason{font-size:14px;color:#e8b4a4;margin-bottom:14px}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px 20px;max-width:420px;margin:0 auto 16px;font-size:13px}.stats-grid div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(120,190,235,.18);padding:5px 0}.stats-grid span{color:#8fb4cc}.ratings{max-width:320px;margin:0 auto 20px;font-size:13px}.ratings div{display:flex;justify-content:space-between;padding:4px 0}.ratings span{color:#8fb4cc}.stars{color:#ffd479;letter-spacing:.2em}.stars-empty{color:#ffd47938}@media(orientation:portrait){.obj-card{max-width:calc(100vw - 24px);right:max(10px,env(safe-area-inset-right));font-size:12px}.obj-text{font-size:11.5px}.gauges{top:auto;bottom:max(196px,calc(env(safe-area-inset-bottom) + 186px));right:max(8px,env(safe-area-inset-right));width:172px;font-size:11px;opacity:.94}.unit-row{bottom:auto;top:max(10px,env(safe-area-inset-top));left:auto;right:max(10px,env(safe-area-inset-right));transform:none;flex-direction:column;align-items:flex-end}.obj-card{max-width:56vw}.unit-chip{padding:7px 11px;font-size:10px}.hint-bar{display:none}.dpad{width:176px;height:176px}.dpad-btn{width:58px;height:58px}.dpad-up,.dpad-down{left:59px}.dpad-left,.dpad-right{top:59px}.touch-cluster{grid-template-columns:repeat(2,60px)}.tbtn{width:60px;height:50px}.tbtn-big{width:60px;height:60px}}html:not(.touch-ui) .touch-controls{display:none}html.touch-ui .hint-bar{bottom:max(180px,calc(env(safe-area-inset-bottom) + 172px))}
