:root{--player-a-color:#c23b4a;--player-b-color:#3d6f8c;--ink:#1c1712;--paper:#f3ead8;--paper-edge:#d6c7a8;--gold:#c9a24a;--sea:#1f6a86}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--ink);background:#0d1b24;font-family:Iowan Old Style,Palatino,Georgia,serif;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}#app>header{color:#f4efe4;text-align:center;border-bottom:3px solid var(--gold);background:linear-gradient(#1a140e 0%,#2a2118 100%);padding:.85rem 1.25rem 1rem}#app>header h1{letter-spacing:.04em;margin:0;font-size:1.55rem;font-weight:600}.version{opacity:.75;font-size:.85rem;font-weight:400}#current-player{letter-spacing:.02em;border-radius:6px;margin-top:.55rem;padding:.4rem .75rem;font-size:1.05rem;font-weight:700}.player-a-turn{background:var(--player-a-color);color:#fff8f0}.player-b-turn{background:var(--player-b-color);color:#f3f8fc}#game-container{flex:1;display:flex;overflow:hidden}#controls{background:linear-gradient(#f7f0df 0%,#efe4cc 100%);border-right:2px solid #3a2f22;flex-direction:column;gap:.85rem;width:320px;padding:1rem;display:flex;overflow-y:auto}.debug-panel-head{border-bottom:2px solid #3a2f22;padding:0 .15rem .75rem}.debug-panel-head h2{color:#3a2a18;margin:0 0 .35rem;font-size:1.08rem}.debug-panel-head p{color:#6a5a40;margin:0 0 .45rem;font-size:.78rem;line-height:1.35}.debug-instructions-link{color:#6b4a12;text-underline-offset:.18em;background:0 0;border:0;border-radius:0;width:auto;padding:0;font-size:.88rem;font-weight:700;text-decoration:underline;display:inline}.debug-instructions-link:hover:not(:disabled){color:#3a2a18;background:0 0;transform:none}.debug-instructions-link:focus-visible{outline-offset:3px;outline:2px solid #c9a24a}.panel{border:1px solid var(--paper-edge);background:#fffcf4b3;border-radius:10px;padding:.85rem 1rem;box-shadow:inset 0 1px #ffffff80}.panel h2,.panel h3{color:#3a2a18;margin-bottom:.6rem;font-size:1.02rem}.hint{color:#6a5a40;font-size:.8rem;line-height:1.35}.wind-compass{--compass-size:196px;z-index:6;width:var(--compass-size);pointer-events:none;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:absolute;top:18px;right:18px}.wind-compass-dial{width:var(--compass-size);height:var(--compass-size);position:relative}.wind-compass-face{filter:drop-shadow(0 8px 14px #0000007a);width:100%;height:100%;display:block}.wind-compass-needle-spin{transform-origin:50%;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .45s;position:absolute;top:0;bottom:0;left:0;right:0}.wind-compass-needle{width:42.4242%;height:42.4242%;position:absolute;top:29.0849%;left:29.9758%}.wind-compass.is-calm .wind-compass-needle-spin{opacity:.42}.wind-compass-banner{filter:drop-shadow(0 4px 8px #00000059);background:url(/assets/pirate-ui-v2/group-banner.png) 50%/100% 100% no-repeat;justify-content:center;align-items:center;width:168px;height:32px;margin-top:-6px;display:flex}#wind-status{letter-spacing:.14em;color:#24180c;text-transform:uppercase;font-size:.82rem;font-weight:700;line-height:1}.wind-compass.is-calm #wind-status{color:#5c4a32;letter-spacing:.18em;font-style:italic}@media (prefers-reduced-motion:reduce){.wind-compass-needle-spin{transition:opacity .2s}}@media (max-width:1024px){.wind-compass{--compass-size:156px;top:12px;right:12px}.wind-compass-banner{width:138px;height:26px}#wind-status{font-size:.72rem}}.stat-row{border-bottom:1px solid #e4d8bc;justify-content:space-between;padding:.22rem 0;display:flex}.stat-label{font-weight:700}.stat-value{font-family:ui-monospace,Consolas,monospace;font-size:1.05rem}.range-row{border-top:2px solid #c9a24a;margin-top:.4rem;padding-top:.4rem}.range-row .stat-value{color:#c23b4a;font-weight:700}.empty-hint{text-align:center;color:#8a7a60}button{cursor:pointer;border:none;border-radius:6px;padding:.48rem .85rem;font-family:inherit;font-size:.92rem;font-weight:650;transition:transform .12s,background .15s}button:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{color:#f7fbff;background:#3d6f8c;width:100%}.btn-primary:hover:not(:disabled){background:#2d5570}.btn-secondary{background:var(--gold);color:#2a1e0c;width:100%;margin-top:auto}.btn-secondary:hover{background:#b58d38}.cpu-posture{margin-bottom:.25rem;font-weight:700}.cpu-meta,.cpu-seed{color:#6a5a40;font-size:.8rem}.cpu-reason{margin-top:.45rem;font-size:.88rem;line-height:1.35}#action-bar{--hud-scale:.26;z-index:5;scrollbar-width:thin;position:absolute;bottom:10px;left:50%;overflow-x:auto;transform:translate(-50%)}@container (width<=920px){#action-bar{--hud-scale:.22}}#action-bar .hud-button{background-color:#0000;border:0;border-radius:0;padding:0;transition:filter .12s}#action-bar .hud-button:hover:not(:disabled){transform:none}#action-bar .hud-button.is-armed:not(:disabled){filter:brightness(1.16);outline-offset:calc(-28px * var(--hud-scale));border-radius:calc(22px * var(--hud-scale));outline:2px solid #e3cf8b}#log{background:#fffdf6;border:1px solid #e4d8bc;border-radius:6px;height:360px;padding:.5rem .6rem;font-size:.84rem;overflow-y:auto}.log-entry{border-bottom:1px solid #f0e6d0;padding:.22rem 0}.log-player-a{color:var(--player-a-color);font-weight:700}.log-player-b{color:var(--player-b-color);font-weight:700}#game-board{background:var(--sea);flex:1;position:relative;overflow:hidden;container-type:inline-size}#hex-canvas{cursor:crosshair;width:100%;height:100%;display:block}.game-over-backdrop{z-index:999;background:#080e14c7;justify-content:center;align-items:center;padding:2.75rem 1.25rem 1.25rem;display:none;position:fixed;top:0;bottom:0;left:0;right:0}.game-over-backdrop.is-open{display:flex}.game-over,.instructions-sheet{background:var(--paper);border:3px solid var(--gold);border-radius:10px;position:relative;overflow:visible;box-shadow:0 16px 48px #00000073}.game-over{text-align:center;width:min(54rem,100vw - 2.5rem)}.game-over-inner,.instructions-inner{max-height:calc(100vh - 5rem);padding:1.35rem 1.2rem 1.25rem;overflow:auto}.game-over h2{color:#2a1e0c;letter-spacing:.01em;margin:0 0 .85rem;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;line-height:1.25}.end-banner{z-index:2;filter:drop-shadow(0 4px 8px #00000052);color:#2a1e0c;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;background:url(/assets/pirate-ui-v2/group-banner.png) 50%/100% 100% no-repeat;justify-content:center;align-items:center;width:min(22rem,88%);height:3.15rem;margin:0;font-size:clamp(1.05rem,2.1vw,1.4rem);font-weight:700;line-height:1;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.end-banner.is-victory{color:#5c3d0e}.end-banner.is-defeat{color:#8e2430}.end-banner.is-fled{color:#2a5570;letter-spacing:.12em}.game-over-art{background:#0d1b24;border:1px solid #3a2f22;margin:0;overflow:hidden}.game-over-art img{aspect-ratio:3/2;object-fit:cover;vertical-align:middle;width:100%;height:auto;display:block}.game-over .btn-primary,.instructions-sheet .btn-primary{width:auto;min-width:11rem;margin-top:1rem;padding:.62rem 1.7rem}.instructions-sheet{width:min(42rem,100vw - 2.5rem)}.instructions-inner{text-align:left;color:#2a1e0c}.instructions-inner h2{text-align:center;margin:0 0 .55rem;font-size:clamp(1.35rem,2.2vw,1.7rem)}.instructions-lede{margin:0 0 1.1rem;font-size:.98rem;line-height:1.45}.instructions-inner h3{color:#3a2a18;margin:1.05rem 0 .4rem;font-size:1.05rem}.instructions-inner p,.instructions-inner li{font-size:.92rem;line-height:1.45}.instructions-inner p{margin:0 0 .65rem}.instructions-inner ol,.instructions-inner ul{margin:0 0 .75rem 1.15rem}.instructions-inner li+li{margin-top:.22rem}.instructions-inner table{border-collapse:collapse;width:100%;margin:0 0 .75rem;font-size:.86rem}.instructions-inner th,.instructions-inner td{vertical-align:top;text-align:left;border-bottom:1px solid #e4d8bc;padding:.35rem .45rem}.instructions-inner th{color:#3a2a18;font-weight:700}.instructions-inner th:first-child,.instructions-inner td:first-child{white-space:nowrap}.instructions-sheet:focus{outline:none}.instructions-sheet .btn-primary{margin-left:auto;margin-right:auto;display:block}@media (prefers-reduced-motion:no-preference){.game-over-backdrop.is-open .game-over,.game-over-backdrop.is-open .instructions-sheet{animation:.28s ease-out end-screen-in}}@keyframes end-screen-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (max-width:1024px){#controls{width:270px;font-size:.9rem}}