:root{--ink: #0f1214;--sand: #2a2620;--oak: #d9c49a;--chalk: #f2ece0;--brass: #b98b3a;--alarm: #cf5340;--sea: #7fb3a4;--panel: rgba(17, 20, 22, .82);--line: rgba(242, 236, 224, .16);--muted: rgba(242, 236, 224, .58);font-family:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;color:var(--chalk);background:var(--ink);color-scheme:dark}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--ink);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}#app{position:relative;isolation:isolate}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;background-image:radial-gradient(circle at 30% 20%,rgba(242,236,224,.09),transparent 55%),linear-gradient(180deg,rgba(10,14,16,.5),transparent 40%,rgba(10,12,10,.55));mix-blend-mode:soft-light}.topbar{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px;pointer-events:none}.brand{display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 6px rgba(0,0,0,.7)}.brand strong{font-size:19px;letter-spacing:.34em;font-weight:500}.brand span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}.top-actions{display:flex;gap:6px;pointer-events:auto}.utility{padding:7px 10px;font-size:9px;letter-spacing:.2em;color:var(--chalk);background:var(--panel);border:1px solid var(--line);transition:border-color .14s ease,color .14s ease}.utility:hover{border-color:var(--brass);color:var(--brass)}.utility[aria-pressed=false]{color:var(--muted)}.ledger{position:absolute;z-index:4;left:18px;top:78px;display:flex;flex-direction:column;gap:12px;pointer-events:none}.gauge{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:7px 9px;background:var(--panel);border-left:2px solid var(--brass)}.gauge-label{font-size:8px;letter-spacing:.24em;color:var(--muted)}.marks{display:flex;gap:4px}.mark{width:7px;height:13px;border:1px solid var(--chalk);opacity:.85}.mark.spent{background:var(--alarm);border-color:var(--alarm);opacity:.9}.gauge-value{font-size:13px;min-width:14px;text-align:right;font-variant-numeric:tabular-nums}.hold{position:absolute;z-index:4;left:18px;bottom:22px;display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--panel);border-left:2px solid var(--oak);pointer-events:none}.hold-label{font-size:8px;letter-spacing:.22em;color:var(--muted)}.hold-slat{width:54px;height:9px;background:var(--oak);transition:width .16s ease}.hold-slat.wet{background:#5f4c35;box-shadow:inset 0 0 0 1px #7fb3a480}.hold-note{font-size:8px;letter-spacing:.2em;color:var(--sea);opacity:0}.hold-note.on{opacity:1}.event-strip{position:absolute;z-index:4;left:50%;bottom:24px;transform:translate(-50%);padding:8px 16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--chalk);background:#111416b3;border:1px solid var(--line);pointer-events:none;transition:opacity .32s ease}.event-strip[data-tone=break]{color:var(--alarm);border-color:#cf534080}.event-strip[data-tone=bell]{color:var(--brass)}.event-strip[data-tone=wind]{color:var(--sea)}.event-strip[data-tone=shear]{color:var(--alarm)}.desk-actions{position:absolute;z-index:4;right:20px;bottom:20px;display:flex;flex-direction:column;gap:7px}.desk-button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:168px;padding:11px 13px;font-size:10px;letter-spacing:.2em;color:var(--chalk);background:var(--panel);border:1px solid var(--line);transition:border-color .14s ease,color .14s ease,background .14s ease}.desk-button:hover{border-color:var(--brass);color:var(--brass)}.desk-button:disabled{opacity:.36;cursor:default}.desk-button.primary{border-color:var(--oak)}.desk-button kbd{font:inherit;font-size:9px;padding:2px 5px;color:var(--muted);border:1px solid var(--line)}.heel-pads{position:absolute;z-index:4;right:14px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:12px}.heel-pad{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:16px 6px;background:var(--panel);border:1px solid var(--line);transition:transform .12s ease,border-color .12s ease}.heel-pad .pad-glyph{font-size:20px;line-height:1}.heel-pad .pad-label{font-size:7px;letter-spacing:.16em;text-align:center;color:var(--muted)}.heel-pad.port:active{transform:rotate(-8deg) translate(-4px);border-color:var(--oak)}.heel-pad.starboard:active{transform:rotate(8deg) translate(4px);border-color:var(--oak)}.heel-pad:disabled{opacity:.34}.desk-actions[hidden],.heel-pads[hidden],.hold[hidden]{display:none}.screen{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,#0c0f11b8,#080a0bf0);backdrop-filter:blur(2px)}.screen[hidden]{display:none}.card{width:min(640px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:34px 36px 30px;background:linear-gradient(180deg,#1c1a16f5,#101213f5);border:1px solid var(--line);border-top:2px solid var(--brass);box-shadow:0 30px 70px #0000008c}.kicker{margin:0 0 10px;font-size:9px;letter-spacing:.3em;color:var(--brass)}.card h1{margin:0;font-size:clamp(38px,7vw,60px);letter-spacing:.2em;font-weight:500;line-height:1}.card h2{margin:0 0 4px;font-size:clamp(30px,6vw,46px);letter-spacing:.16em;font-weight:500;line-height:1.05}.tagline{margin:8px 0 18px;font-size:13px;letter-spacing:.16em;color:var(--oak)}.brief{margin:0 0 20px;font-size:14px;line-height:1.62;color:#f2ece0db}.verbs{margin:0 0 24px;display:grid;gap:10px}.verbs>div{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:baseline;padding-top:9px;border-top:1px solid var(--line)}.verbs dt{font-size:10px;letter-spacing:.24em;color:var(--brass)}.verbs dd{margin:0;font-size:12.5px;line-height:1.55;color:#f2ece0c7}.tally{margin:0 0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.tally>div{padding:11px 12px;background:#141618eb}.tally dt{font-size:8px;letter-spacing:.22em;color:var(--muted);margin-bottom:4px}.tally dd{margin:0;font-size:19px;font-variant-numeric:tabular-nums}.big-button{display:block;width:100%;padding:15px;font-size:12px;letter-spacing:.28em;color:var(--ink);background:var(--oak);transition:background .15s ease}.big-button:hover{background:var(--chalk)}.ghost-button{display:block;width:100%;margin-top:9px;padding:12px;font-size:10px;letter-spacing:.22em;color:var(--muted);border:1px solid var(--line)}.ghost-button:hover{color:var(--chalk);border-color:var(--brass)}.ghost-button[hidden]{display:none}.fineprint{margin:16px 0 0;font-size:10px;line-height:1.7;letter-spacing:.08em;color:var(--muted)}.notes{position:absolute;z-index:7;inset:auto 20px 20px;max-width:520px;max-height:calc(100dvh - 120px);overflow:auto;padding:24px 26px;background:#0e1012f5;border:1px solid var(--line);border-top:2px solid var(--brass)}.notes[hidden]{display:none}.notes h2{margin:0 0 14px;font-size:20px;letter-spacing:.2em;font-weight:500}.notes p{margin:0 0 12px;font-size:12.5px;line-height:1.65;color:#f2ece0cc}@media(max-width:900px){.heel-pads{display:flex}.desk-actions{display:none!important}.hold{bottom:16px}.event-strip{bottom:74px}.card{padding:26px 22px 22px}.notes{inset:auto 12px 12px;padding:18px}}@media(max-width:520px){.topbar{padding:10px 12px}.brand strong{font-size:15px;letter-spacing:.26em}.brand span{font-size:8px}.utility{padding:6px 7px;font-size:8px;letter-spacing:.14em}.ledger{left:12px;top:62px;gap:8px}.gauge{padding:5px 7px;gap:6px}.mark{width:6px;height:11px}.gauge-value{font-size:11px}.hold{left:12px;gap:8px;padding:6px 9px}.hold-slat{width:40px;height:8px}.heel-pad{width:62px;padding:12px 4px}.heel-pad .pad-label{font-size:6px}.event-strip{font-size:9px;padding:6px 12px;max-width:76vw;white-space:normal;text-align:center}.card h1{font-size:34px}.brief{font-size:12.5px}.verbs>div{grid-template-columns:64px 1fr}}@media(prefers-reduced-motion:reduce){*{transition-duration:1ms!important}}