:root{color:#f2ead6;font-synthesis:none;text-rendering:geometricprecision;--timber-dark:#140e09;--timber:#241a12;--timber-edge:#c9a15a8c;--parchment:#e7d8b0;--parchment-dim:#e7d8b0b8;--ink:#f7f1e0;--brass:#c9a15a;--brass-bright:#f0d9a0;--rope:#b89b6a;--storm:#102f40;--good:#7ee2b8;--warn:#f5d47a;--bad:#f08a8a;background:#0b1620;font-family:Avenir Next,Avenir,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#0b1620;min-width:320px}#app{background:radial-gradient(120% 90% at 50% 0,#143a4d 0%,#0b1620 60%,#070d12 100%);position:relative}#game-canvas{touch-action:none;outline:none;width:100vw;height:100vh;display:block}#hud{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));right:max(14px, env(safe-area-inset-right));pointer-events:none;color:var(--ink);text-transform:uppercase;letter-spacing:.02em;flex-direction:column;align-items:flex-start;gap:8px;display:flex;position:absolute}.hud-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.hud-metric,.sail-gauge{border:1px solid var(--timber-edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 6px,#e7d8b00a 6px 8px),linear-gradient(160deg,#2c2118 0%,#171008 100%);border-radius:3px;position:relative;box-shadow:0 8px 24px #00000080,inset 0 1px #e7d8b029,inset 0 0 0 1px #00000059}.hud-metric:before,.hud-metric:after,.sail-gauge:before,.sail-gauge:after{content:"";background:radial-gradient(circle at 32% 30%, var(--brass-bright), #8a6a34);pointer-events:none;border-radius:50%;width:4px;height:4px;position:absolute;box-shadow:0 0 4px #c9a15ab3}.hud-metric:before,.sail-gauge:before{top:3px;left:3px}.hud-metric:after,.sail-gauge:after{bottom:3px;right:3px}.hud-metric{min-width:88px;padding:7px 10px}.hud-metric span,.sail-gauge-name{color:var(--parchment-dim);letter-spacing:.08em;text-shadow:0 1px #0009;font-size:.62rem;display:block}.hud-metric strong{font-variant-numeric:tabular-nums;color:var(--ink);text-shadow:0 1px #0000008c;margin-top:2px;font-size:1rem;display:block}#connection-value[data-status=connected]{color:var(--good)}#connection-value[data-status=connecting]{color:var(--warn)}#connection-value[data-status=disconnected],#connection-value[data-status=error]{color:var(--bad)}#role-value[data-role=helm]{color:var(--brass-bright)}#role-value[data-role=sail]{color:var(--good)}#wind-indicator{background:radial-gradient(circle at 50% 50%, #e7d8b024, transparent 62%), repeating-conic-gradient(#c9a15a1f 0 6deg, #0000 6deg 12deg), linear-gradient(160deg, #241c12 0%, #120c06 100%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid #c9a15ab8;border-radius:50%;flex:none;width:72px;height:72px;position:relative;box-shadow:0 8px 24px #00000080,inset 0 0 0 3px #00000047,inset 0 0 14px #c9a15a38}#wind-indicator:after{content:"";border-left:5px solid #0000;border-right:5px solid #0000;border-top:7px solid var(--brass-bright);filter:drop-shadow(0 0 3px #c9a15acc);width:0;height:0;margin-left:-5px;position:absolute;top:-2px;left:50%}#wind-compass-label{letter-spacing:.08em;color:var(--parchment-dim);text-shadow:0 1px #0009;font-size:.5rem;position:absolute;top:5%;left:50%;transform:translate(-50%)}#wind-arrow{transform-origin:50%;transition:transform .12s linear;position:absolute;inset:0}#wind-arrow:before{content:"";background:linear-gradient(to bottom, #f0d9a066, var(--brass-bright));border-radius:1px;width:2px;height:23%;margin-left:-1px;position:absolute;top:27%;left:50%}#wind-arrow:after{content:"";border-left:5px solid #0000;border-right:5px solid #0000;border-bottom:8px solid var(--brass-bright);filter:drop-shadow(0 0 4px #f0d9a0b3);margin-left:-5px;position:absolute;top:17%;left:50%}#wind-hub{background:radial-gradient(circle at 35% 30%, var(--brass-bright), #8a6a34);border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute;top:50%;left:50%}#wind-strength{min-width:96px}#wind-strength strong{font-size:.86rem}#wind-strength-bar{background:#0006;border-radius:3px;height:5px;margin-top:5px;overflow:hidden;box-shadow:inset 0 1px 2px #0009}#wind-strength-fill{background:linear-gradient(90deg, var(--good) 0%, var(--warn) 55%, var(--bad) 100%);border-radius:3px;width:0%;height:100%;transition:width .2s linear}#wind-strength-value{color:var(--parchment-dim);text-shadow:0 1px #0009;margin-top:3px;font-size:.55rem;display:block}.sail-gauge{--sail-color:#e7d8b099;flex-direction:column;align-items:center;gap:3px;min-width:92px;padding:6px 8px;transition:border-color .16s linear;display:flex}.sail-gauge.good{--sail-color:var(--good);border-color:#7ee2b8a6}.sail-gauge.ok{--sail-color:var(--warn);border-color:#f5d47a99}.sail-gauge.bad{--sail-color:var(--bad);border-color:#f08a8a99}.sail-gauge strong{font-variant-numeric:tabular-nums;color:var(--sail-color);text-shadow:0 1px #0009;font-size:.78rem;transition:color .16s linear}.sail-dial{background:radial-gradient(circle at 50% 42%,#e7d8b029,#0000 70%),linear-gradient(160deg,#e7d8b02e,#140f0ae6);border:1px solid #c9a15a8c;border-radius:50%;width:42px;height:42px;position:relative;box-shadow:inset 0 0 0 2px #00000040}.sail-dial:after{content:"";border:1px dashed #b89b6a66;border-radius:50%;position:absolute;inset:5px}.sail-boom{transform-origin:50%;transition:transform .12s linear;position:absolute;inset:0}.sail-boom:before{content:"";background:var(--sail-color);border-radius:1px;width:2px;height:15px;margin-left:-1px;transition:background .16s linear;position:absolute;top:6px;left:50%}.sail-boom:after{content:"";background:var(--sail-color);opacity:.85;clip-path:polygon(0 0,100% 100%,0 100%);width:7px;height:11px;margin-left:1px;transition:background .16s linear;position:absolute;top:6px;left:50%}.sail-hint{border:1px solid var(--sail-color);width:16px;height:16px;color:var(--sail-color);text-shadow:0 1px #0009;background:#140f0af2;border-radius:50%;place-items:center;font-size:.62rem;line-height:1;display:grid;position:absolute;bottom:-3px;right:-3px}#status-line{border-left:3px solid var(--brass);text-transform:none;min-width:160px;max-width:min(520px,82vw);color:var(--ink);text-shadow:0 1px #0009;background:linear-gradient(#e7d8b024,#e7d8b00f),#140f0ae0;border-radius:0 3px 3px 0;padding:8px 12px;font-size:.72rem;font-weight:700;box-shadow:0 6px 18px #00000073,inset 0 0 0 1px #c9a15a52}#controls-help{left:max(14px, env(safe-area-inset-left));bottom:max(14px, env(safe-area-inset-bottom));max-width:min(420px,78vw);color:var(--parchment-dim);letter-spacing:normal;text-transform:none;text-shadow:0 1px #0009;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 6px),#140f0ac7;border:1px solid #c9a15a66;border-radius:3px;padding:6px 10px;font-size:.68rem;font-weight:500;line-height:1.4;position:absolute}#look-resume{left:50%;bottom:max(14px, env(safe-area-inset-bottom));z-index:15;max-width:min(420px,86vw);color:var(--parchment-dim);letter-spacing:normal;text-transform:none;text-shadow:0 1px #0009;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 6px),#140f0adb;border:1px solid #c9a15a73;border-radius:3px;align-items:center;gap:10px;padding:8px 12px;font-size:.7rem;font-weight:500;line-height:1.35;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 8px 22px #00000080}#look-resume[hidden]{display:none}#look-resume button{border:1px solid var(--timber-edge);color:var(--brass-bright);font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;pointer-events:auto;background:linear-gradient(#e7d8b024,#e7d8b00d),#241a12e6;border-radius:2px;flex:none;padding:5px 10px;font-size:.68rem;font-weight:700}#look-resume button:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px}#loading-screen{z-index:40;text-align:center;background:radial-gradient(90% 70% at 50% 38%,#c9a15a1a,#0000 60%),radial-gradient(140% 100% at 50% 0,#123044 0%,#0a141d 55%,#060b10 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;transition:opacity .5s;display:flex;position:fixed;inset:0}#loading-screen.hidden{opacity:0;display:none}.loading-title{letter-spacing:.12em;color:var(--parchment);text-shadow:0 0 30px #c9a15a59,0 2px #00000080;margin:0;font-family:Georgia,Times New Roman,Times,serif;font-size:clamp(1.7rem,5.5vw,3rem);font-weight:600}.loading-status{letter-spacing:.08em;color:var(--parchment-dim);align-items:baseline;gap:2px;margin:0;font-size:clamp(.85rem,2.4vw,1.05rem);display:flex}.loading-dots{gap:5px;margin-left:4px;display:inline-flex}.loading-dots i{background:var(--brass-bright);border-radius:50%;width:5px;height:5px;animation:1.2s ease-in-out infinite loading-pulse}.loading-dots i:nth-child(2){animation-delay:.18s}.loading-dots i:nth-child(3){animation-delay:.36s}@keyframes loading-pulse{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}@media (prefers-reduced-motion:reduce){.loading-dots i{opacity:.7;animation:none}}#perf-overlay{left:max(14px, env(safe-area-inset-left));z-index:60;border:1px solid var(--timber-edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:min(560px,92vw);color:var(--ink);letter-spacing:normal;text-transform:none;pointer-events:auto;background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 6px),linear-gradient(160deg,#2c2118f0 0%,#171008f5 100%);border-radius:3px;flex-direction:column;gap:5px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;line-height:1.35;display:flex;position:fixed;bottom:92px;overflow:hidden;box-shadow:0 8px 24px #00000080,inset 0 1px #e7d8b029,inset 0 0 0 1px #00000059}#perf-overlay[hidden]{display:none}#perf-stats{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--parchment);text-shadow:0 1px #0009}#perf-hitches{white-space:pre;font-variant-numeric:tabular-nums;color:var(--parchment-dim);text-shadow:0 1px #0009}#perf-hitches:empty{display:none}#perf-title{cursor:move;-webkit-user-select:none;user-select:none;color:var(--parchment);letter-spacing:.14em;opacity:.7}#input-telemetry{top:calc(max(14px, env(safe-area-inset-top)) + 160px);right:max(14px, env(safe-area-inset-right));z-index:60;border:1px solid var(--timber-edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:min(340px,92vw);color:var(--ink);letter-spacing:normal;text-transform:none;pointer-events:none;background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 6px),linear-gradient(160deg,#2c2118f0 0%,#171008f5 100%);border-radius:3px;flex-direction:column;gap:5px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;line-height:1.4;display:flex;position:fixed;box-shadow:0 8px 24px #00000080,inset 0 1px #e7d8b029,inset 0 0 0 1px #00000059}#input-telemetry[hidden]{display:none}#input-telemetry-title{cursor:move;-webkit-user-select:none;user-select:none;color:var(--parchment);letter-spacing:.14em;opacity:.7}#input-telemetry-body{white-space:pre;font-variant-numeric:tabular-nums;color:var(--parchment);text-shadow:0 1px #0009;margin:0}body:not(.debug-open) [data-debug-panel]{display:none!important}#debug-dock-button{left:max(14px, env(safe-area-inset-left));bottom:max(52px, calc(env(safe-area-inset-bottom) + 52px));z-index:70;border:1px solid var(--timber-edge);color:var(--parchment);letter-spacing:.12em;cursor:pointer;background:linear-gradient(160deg,#2c2118f0 0%,#171008f5 100%);border-radius:3px;padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;position:fixed}#debug-dock-button:hover{color:#fff;border-color:var(--parchment-dim)}#build-tour-controls{left:max(14px, env(safe-area-inset-left));bottom:max(88px, calc(env(safe-area-inset-bottom) + 88px));z-index:70;flex-direction:column;align-items:stretch;gap:5px;display:flex;position:fixed}#build-tour-controls button{border:1px solid var(--timber-edge);color:var(--parchment);letter-spacing:.08em;cursor:pointer;text-align:left;background:linear-gradient(160deg,#2c2118f0 0%,#171008f5 100%);border-radius:3px;padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem}#build-tour-controls button:hover{color:#fff;border-color:var(--parchment-dim)}#build-tour-panel{left:50%;top:max(14px, env(safe-area-inset-top));z-index:15;max-width:min(460px,86vw);color:var(--parchment-dim);letter-spacing:normal;text-transform:none;text-shadow:0 1px #0009;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 6px),#140f0adb;border:1px solid #c9a15a80;border-radius:3px;padding:8px 14px;font-size:.72rem;line-height:1.4;position:absolute;transform:translate(-50%)}#build-tour-panel strong{color:var(--brass-bright);letter-spacing:.1em;font-size:.7rem}#build-tour-panel[hidden]{display:none}#defeat-overlay{z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;background:radial-gradient(circle at 50% 40%,#400c1099,#0a0f14e6);justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}#defeat-overlay[hidden]{display:none}.defeat-panel{text-align:center;background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 6px),linear-gradient(160deg,#2a1412 0%,#120a08 100%);border:1px solid #f08a8a80;border-radius:3px;flex-direction:column;align-items:center;gap:14px;max-width:420px;padding:32px 40px;display:flex;box-shadow:0 24px 64px #0009,inset 0 1px #f08a8a29}.defeat-panel h1{letter-spacing:.16em;text-transform:uppercase;color:var(--bad);text-shadow:0 0 24px #f08a8a66;margin:0;font-size:clamp(2rem,7vw,3.4rem)}.defeat-panel p{color:#f7f1e0d9;text-transform:none;max-width:32ch;margin:0;font-size:.9rem;line-height:1.5}#restart-button{color:#221608;background:linear-gradient(180deg, var(--brass-bright), var(--brass));letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px #ffffff4d;cursor:pointer;border:1px solid #c9a15a99;border-radius:3px;padding:12px 38px;font-size:1rem;font-weight:800;transition:background .14s,transform .14s;box-shadow:0 6px 16px #0006}#restart-button:hover,#restart-button:focus-visible{background:linear-gradient(180deg, #ffe4ad, var(--brass-bright));outline-offset:3px;outline:2px solid #f0d9a0b3;transform:translateY(-1px)}#touch-controls{right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));left:max(18px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:flex-end;display:none;position:absolute}#touch-stick{aspect-ratio:1;pointer-events:auto;touch-action:none;background:radial-gradient(circle,#e7d8b014,#0000 66%),#140f0a99;border:2px solid #c9a15a99;border-radius:50%;width:clamp(104px,26vw,140px);position:relative;box-shadow:inset 0 0 0 3px #00000040}#touch-knob{aspect-ratio:1;background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass));border:1px solid #c9a15a8c;border-radius:50%;width:42%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 24px #c9a15a66}#action-button{aspect-ratio:1;color:#221608;background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass));text-shadow:0 1px #ffffff4d;pointer-events:auto;touch-action:none;border:2px solid #c9a15a99;border-radius:50%;width:clamp(76px,20vw,100px);font-size:.9rem;font-weight:800}@media (pointer:coarse),(width<=760px){.hud-metric{min-width:68px;padding:6px 7px}.hud-metric strong{font-size:.86rem}#wind-indicator{width:56px;height:56px}.sail-gauge{min-width:76px;padding:5px 6px}.sail-gauge strong{font-size:.7rem}#touch-controls{display:flex}#controls-help{bottom:calc(max(18px, env(safe-area-inset-bottom)) + 148px);font-size:.64rem}}