:root { color-scheme: dark; --ink:#072b32; --ink-deep:#062229; --paper:#e9e5d7; --muted:#a0b5b1; --line:#38575a; --teal:#75ccbb; --gold:#efbf70; --danger:#f1a38e; --blocked:#7b8b89; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink-deep); color:var(--paper); min-width:300px; background-image:radial-gradient(ellipse at 12% 5%, #16474b 0, transparent 55%), linear-gradient(125deg, transparent 60%, #13373c55); }
button, select, input, textarea { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.4; }
button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
button { touch-action:manipulation; }
[hidden] { display:none !important; }
.game-shell { max-width:1120px; margin:auto; padding:38px 42px 22px; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; gap:14px; align-items:center; }
.brand-mark { font-size:45px; line-height:1; color:var(--gold); }
h1,h2,h3,p { margin:0; }
h1 { font-family:Georgia, "Times New Roman", serif; font-weight:normal; font-size:36px; letter-spacing:.01em; }
.wordmark p { font-size:11px; color:var(--muted); letter-spacing:.11em; text-transform:uppercase; margin-top:5px; }
.chart-picker { display:grid; gap:7px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
select { background:#0c333b; color:var(--paper); border:1px solid #5b7272; border-radius:5px; padding:10px 34px 10px 12px; font-size:13px; max-width:250px; }
.crossing { padding-top:27px; }
.chart-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; }
.eyebrow { font-size:10px; letter-spacing:.2em; color:var(--teal); margin-bottom:8px; }
h2 { font-family:Georgia, "Times New Roman", serif; font-size:30px; font-weight:normal; }
.lesson { color:var(--gold); text-align:right; font-size:12px; max-width:290px; line-height:1.5; }
.brief { color:var(--muted); font-size:13px; line-height:1.6; margin:12px 0 23px; max-width:700px; }
.play-layout { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(260px, 1fr); gap:32px; align-items:start; }
.chart-panel { min-width:0; background:#0a3139; border:1px solid #547276; border-radius:8px; padding:15px 18px 17px; box-shadow:0 16px 48px #00171d3d; }
.chart-meta { display:flex; justify-content:space-between; font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:10px; letter-spacing:.035em; color:#b5ccc6; text-transform:uppercase; gap:8px; }
.chart-forecast { display:none; color:var(--teal); font-size:11px; line-height:1.5; margin-top:9px; }
.live-dot { display:inline-block; width:5px; height:5px; background:var(--teal); border-radius:100%; margin-right:4px; vertical-align:middle; }
.board-surround { padding:24px 6px 18px; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:#75a99d #133d43; scrollbar-width:thin; }
.board { width:100%; min-width:calc(var(--columns, 7) * 39px - 3px); display:grid; gap:3px; margin:auto; }
.chart-scroll-hint { color:var(--gold); font-size:10px; line-height:1.5; text-align:center; margin:3px 0 12px; }
.chart-scroll-hint span { padding-right:5px; font-size:14px; }
.board-row { display:grid; grid-template-columns:repeat(var(--columns,7),minmax(0,1fr)); gap:3px; }
.cell { position:relative; display:grid; place-items:center; padding:0; width:100%; aspect-ratio:1; border:1px solid #74abac38; border-radius:3px; background:#174a55; font-family:Georgia, "Times New Roman", serif; min-width:0; isolation:isolate; }
.cell::after { content:""; position:absolute; inset:5px; border-radius:2px; pointer-events:none; opacity:0; border:1px solid currentColor; }
.cell .depth { font-size:clamp(12px, 1.8vw, 21px); color:#9dc6c2; font-style:italic; line-height:1; }
.cell.deep .depth { font-size:19px; color:#6eaaa9; }
.cell.wet.depth-1 { background:#246873; }
.cell.wet.depth-2 { background:#3a777e; }
.cell.dry { background:#67664f; border-color:#9290775e; background-image:repeating-linear-gradient(135deg,transparent,transparent 5px,#b7b59512 5px,#b7b59512 6px); }
.cell.dry .depth { color:#dfd7ad; }
.cell.stone { background:#1d4145; border-color:#4560616b; }
.cell.stone .depth { color:#617775; font-size:17px; font-style:normal; }
.cell[data-safety="safe"] { border-color:#83d4bc; }
.cell[data-safety="safe"]::after { opacity:.5; color:var(--teal); }
.cell[data-safety="danger"] { border-color:var(--danger); }
.cell[data-safety="danger"]::after { opacity:.7; color:var(--danger); border-style:dashed; }
.cell[data-safety="blocked"] { border-color:#80918b; }
.cell[data-safety]::before { content:""; width:5px; height:5px; position:absolute; right:5px; bottom:5px; border-radius:50%; background:var(--teal); }
.cell[data-safety="danger"]::before { background:var(--danger); border-radius:0; transform:rotate(45deg); }
.cell[data-safety="blocked"]::before { background:var(--blocked); width:7px; height:2px; }
.cell:not(.stone):hover { filter:brightness(1.15); }
.cell.current { border:2px solid var(--gold); z-index:1; box-shadow:0 0 22px #edba6433; }
.cell.current .depth { position:absolute; right:4px; top:4px; font-size:10px; }
.cell.current::after { opacity:0; }
.skiff { width:64%; height:72%; filter:drop-shadow(0 3px 3px #071a1f80); overflow:visible; }
.harbor { font-size:clamp(19px, 3.5vw, 35px); color:#f6d798; line-height:1; }
.cell.goal .depth { position:absolute; right:5px; top:4px; font-size:10px; }
.cell.grounded .skiff { transform:rotate(-16deg); }
.cell.current.grounded { background-color:#694b40; border:3px dashed var(--danger); box-shadow:none; }
.grounding-mark { position:absolute; left:3px; bottom:0; color:#ffe0d2; font:bold 18px/1 ui-sans-serif,system-ui,sans-serif; text-shadow:0 1px 2px #351e18; }
.cell.won { box-shadow:0 0 22px #f1bf6680; background:#466456; }
.chart-instruction { font-size:11px; line-height:1.7; text-align:center; color:#bdccc5; }
.inline-lantern { color:var(--gold); width:13px; height:16px; vertical-align:-4px; }
.chart-key { display:grid; grid-template-columns:1fr 1fr; gap:10px 8px; border-top:1px solid var(--line); padding-top:14px; margin-top:14px; font-size:10px; color:#b5c5c0; }
.chart-key span { display:flex; align-items:center; gap:7px; }
.chart-key i { font-style:normal; font-family:Georgia,serif; display:grid; place-items:center; width:20px; height:20px; border-radius:3px; border:1px solid #83b3ad55; color:#d3dfcb; flex-shrink:0; }
.key-deep { background:#174a55; }.key-shelf { background:#246873; }.key-shoal { background:#67664f; }.key-stone { background:#1d4145; }
.navigation { padding-top:3px; }
.navigation > section { min-width:0; }
.section-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; }
h3 { font-size:13px; font-weight:600; }
.section-heading > span { font-size:10px; color:var(--muted); }
.tide-track { list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; padding:0; margin:16px 0 11px; }
.tide-beat { position:relative; height:59px; border:1px solid #4c6a6c; border-radius:4px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; text-align:center; padding:6px 0 5px; color:#c5d1c8; font-size:10px; isolation:isolate; }
.tide-beat::before { content:""; position:absolute; z-index:-1; background:#276470; border-top:1px solid #548e92; height:calc(12px + var(--water) * 11px); bottom:0; left:0; right:0; }
.tide-beat strong { font-family:Georgia,serif; font-weight:normal; font-size:19px; line-height:1; }
.tide-beat span { font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.tide-beat.active { border-color:var(--gold); color:#fff1c9; box-shadow:0 0 0 1px #efbf704d; }
.tide-beat.active::before { background:#3d6d65; border-color:#b5bd86; }
.tide-beat.upcoming { border-style:dashed; border-color:#94b7ac; }
.next-tide { color:var(--teal); font-size:12px; line-height:1.5; }
.rule-note { color:var(--muted); font-size:11px; line-height:1.6; margin-top:6px; }
.hold-section { margin:23px 0; }
.section-heading .charge-count { color:var(--gold); }
.hold-button { width:100%; display:flex; text-align:left; gap:12px; align-items:center; margin-top:12px; padding:12px 11px; background:#143c41; border:1px solid #8d845f; border-radius:5px; }
.hold-button:hover { background:#204a4b; }
.hold-button[aria-pressed="true"] { background:#4c503a; border-color:var(--gold); box-shadow:inset 0 0 0 1px #eebc6344; }
.hourglass { color:var(--gold); font-size:24px; }
.hold-button strong { display:block; font-size:12px; color:#f1cf94; font-weight:600; }
.hold-button small { display:block; font-size:10px; color:#b9c6b7; margin-top:4px; line-height:1.4; }
kbd { font-family:inherit; font-size:10px; color:var(--muted); border:1px solid #607777; border-radius:3px; padding:2px 5px; box-shadow:0 1px 0 #607777; }
.hold-button kbd { margin-left:auto; }
.helm { display:grid; grid-template-columns:1fr 1.25fr 1fr; grid-template-rows:38px 48px 38px; gap:5px; margin:14px auto 11px; width:215px; max-width:100%; }
.helm button { border:1px solid #587477; background:#16434b; border-radius:4px; color:#d0e0d4; }
.helm button:hover { background:#245962; }
.helm button[data-safety="safe"] { border-color:var(--teal); }
.helm button[data-safety="danger"] { border-color:var(--danger); border-style:dashed; color:var(--danger); }
.helm button[data-safety="blocked"] { border-color:#738885; color:#8da6a2; }
.direction { font-size:22px; }
.north { grid-area:1 / 2; }.west { grid-area:2 / 1; }.east { grid-area:2 / 3; }.south { grid-area:3 / 2; }
.wait-button { grid-area:2 / 2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.wait-button span { font-size:12px; }.wait-button small { font-size:9px; color:var(--muted); }
.action-preview { text-align:center; font-size:11px; min-height:34px; line-height:1.55; color:#bcd1c8; }
.safety-key { display:flex; justify-content:center; gap:16px; font-size:9px; color:var(--muted); margin-top:6px; }
.safety-key span { display:flex; align-items:center; gap:5px; }.safety-key i { width:5px; height:5px; border-radius:50%; display:inline-block; }.safe-dot { background:var(--teal); }.danger-dot { background:var(--danger); }.blocked-dot { background:var(--blocked); }
.voyage-status { display:flex; align-items:center; gap:15px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 2px; margin-top:27px; min-height:86px; }
.status-mark { font-size:27px; color:var(--gold); width:29px; text-align:center; flex-shrink:0; }
.status-copy { flex:1; }
#status-heading { font-family:Georgia,serif; font-size:18px; margin-bottom:5px; }
#status-message { font-size:12px; line-height:1.55; color:var(--muted); }
.voyage-status[data-status="grounded"] #status-heading,.voyage-status[data-status="grounded"] .status-mark { color:var(--danger); }
.voyage-status[data-status="won"] #status-heading { color:var(--gold); }
.next-button { background:var(--gold); color:#213837; border:0; border-radius:4px; padding:12px 14px; font-size:12px; white-space:nowrap; }
.next-button span { margin-left:10px; }
.game-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; }
.history-controls { display:flex; gap:8px; }
.game-footer button { font-size:11px; border:1px solid #466569; background:transparent; border-radius:4px; padding:9px 11px; }
.game-footer button:hover:not(:disabled) { background:#20474d; }
.game-footer kbd { margin-left:10px; font-size:9px; }
.game-footer .hint-button { color:var(--gold); border-color:transparent; padding-right:0; }
.terminal-controls .voyage-status { margin-top:0; padding:13px 0; min-height:0; }
.terminal-controls .game-footer { padding-top:12px; }
.terminal-controls .voyage-status { flex-wrap:wrap; }
.terminal-controls .status-copy { min-width:190px; }
.terminal-controls .next-button { margin-left:44px; }
.chart-panel[data-terminal="true"] .chart-instruction,
.chart-panel[data-terminal="true"] .chart-key { display:none; }
.hint-button span { margin-left:7px; }
.hint-message { font-size:12px; line-height:1.7; color:#e2d4ad; background:#233f3e; border-left:2px solid var(--gold); margin-top:15px; padding:10px 14px; }
.field-guide { margin-top:23px; color:var(--muted); font-size:11px; line-height:1.8; }
.field-guide summary { width:fit-content; cursor:pointer; color:#bfccc4; padding:3px 0; }
.field-guide div { padding-top:9px; display:grid; gap:8px; max-width:790px; }
.field-guide strong { color:#d4dece; font-weight:600; }
.colophon { text-align:center; font-family:Georgia,serif; font-style:italic; font-size:12px; color:#779793; padding-top:32px; }
.fatal-message { background:#542e28; border:1px solid var(--danger); color:#ffe2d3; padding:20px; line-height:1.5; }
@media (min-width:1000px) { .board-surround { padding-left:13px; padding-right:13px; }.chart-panel { padding:17px 20px; } }
@media (max-width:800px) { .game-shell { padding:25px 24px 20px; }.play-layout { gap:22px; grid-template-columns:minmax(0,1.4fr) minmax(235px,1fr); }.chart-panel { padding:12px; }.chart-key { grid-template-columns:1fr; gap:6px; }.lesson { max-width:230px; } }
@media (max-width:650px) { .game-shell { max-width:520px; padding:21px 16px 18px; }.masthead { align-items:start; padding-bottom:20px; gap:12px; }.wordmark { gap:8px; }.brand-mark { font-size:32px; }h1 { font-size:29px; }.wordmark p { font-size:8px; letter-spacing:.055em; }.chart-picker { font-size:8px; letter-spacing:.06em; gap:6px; max-width:150px; }select { max-width:150px; font-size:11px; padding:8px 4px; }.crossing { padding-top:21px; }.chart-heading { display:block; }h2 { font-size:27px; }.lesson { text-align:left; max-width:none; margin-top:9px; font-size:11px; }.brief { margin:9px 0 17px; font-size:12px; }.play-layout { display:flex; flex-direction:column; gap:22px; }.chart-panel { width:100%; padding:14px; }.board-surround { padding:18px 2px 15px; }.cell .depth { font-size:20px; }.cell .harbor { font-size:31px; }.chart-key { grid-template-columns:1fr 1fr; gap:8px; }.navigation { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; }.tide-section { grid-column:1 / -1; }.tide-track { margin-top:12px; }.tide-beat { height:53px; }.hold-section { margin:0; }.helm-section .section-heading { display:block; }.helm-section .section-heading > span { display:block; margin-top:5px; font-size:9px; }.hold-button { padding:10px 8px; gap:7px; min-height:86px; }.hold-button kbd { display:none; }.hold-button strong { font-size:11px; }.hold-button small { font-size:10px; }.hourglass { font-size:20px; }.hold-section .section-heading { display:block; }.charge-count { display:block; margin-top:5px; }.helm { width:170px; grid-template-rows:34px 44px 34px; margin-top:10px; }.safety-key { gap:10px; font-size:8px; }.action-preview { font-size:10px; min-height:46px; }.voyage-status { margin-top:22px; flex-wrap:wrap; gap:11px; padding:15px 0; }.status-copy { flex-basis:calc(100% - 42px); }.next-button { margin-left:40px; }.game-footer { align-items:start; }.game-footer button { font-size:10px; padding:9px; }.game-footer kbd { display:none; }.game-footer .hint-button { padding-left:2px; }.colophon { padding-top:24px; } }
.wide-chart .board { max-width:calc(var(--columns, 7) * 55px - 3px); }
.wide-chart .chart-forecast { display:block; }
.wide-chart .board-surround { padding-top:14px; padding-bottom:12px; }
.wide-chart .chart-key { margin-top:10px; padding-top:10px; }
@media (max-width:650px) {
  .chart-forecast { display:block; }
  .play-layout { gap:16px; }
  .navigation { padding-top:0; }
  .navigation .tide-section { margin-top:4px; }
  .helm { grid-template-rows:44px 44px 44px; }
  .chart-guide { width:100%; padding:0 14px; }
  .chart-scroll-hint { margin-bottom:0; }
}
@media (min-width:651px) {
  .play-layout.wide-chart { grid-template-columns:minmax(0,1fr); gap:22px; }
  .wide-chart .navigation { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:28px; width:100%; align-items:start; }
  .wide-chart .hold-section { margin:0; }
  .wide-chart .chart-key { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .wide-chart .helm-section .section-heading { display:block; }
  .wide-chart .helm-section .section-heading > span { display:block; margin-top:5px; }
}
@media (min-width:651px) and (max-width:800px) {
  .wide-chart .navigation { grid-template-columns:1fr 1fr; gap:20px; }
  .wide-chart .tide-section { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:no-preference) { button { transition:background-color .12s, border-color .12s; } }
.welcome { max-width:660px; padding:32px 0; }
.welcome p { margin:16px 0; line-height:1.65; }
.primary-button, .integration-panel button { min-height:44px; padding:10px 18px; border:1px solid var(--teal); border-radius:5px; background:#16474b; }
.save-note { color:var(--muted); font-size:13px; }
.first-crossing-guide { padding:12px 14px; margin-bottom:18px; border-left:3px solid var(--gold); background:#123c40; font-size:14px; line-height:1.6; }
.integration-panel { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; font-size:14px; line-height:1.6; }
.integration-panel p { max-width:720px; margin:10px 0; color:var(--muted); }
.integration-panel label { display:block; margin:12px 0; }
.integration-panel a { color:var(--teal); text-decoration:underline; overflow-wrap:anywhere; }
.integration-panel summary { cursor:pointer; padding:12px 0; }
.integration-panel details p { margin-top:14px; }
.integration-panel input:not([type="checkbox"]), .integration-panel textarea, .integration-panel select { display:block; width:100%; max-width:580px; margin-top:6px; background:#0c333b; color:var(--paper); border:1px solid #78918c; border-radius:4px; padding:10px; }
.integration-panel textarea { resize:vertical; }
.integration-panel input[type="checkbox"] { width:20px; height:20px; vertical-align:middle; margin-right:8px; }
.feedback-actions { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:650px) {
  .masthead { flex-wrap:wrap; }
  .chart-picker, .chart-picker select { min-width:0; max-width:100%; }
  .navigation { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .navigation > section { min-width:0; }
  .history-controls button, .game-footer button, .next-button, .field-guide summary { min-height:44px; }
}
@media (max-width:380px) {
  .navigation { grid-template-columns:minmax(0,1fr); }
  .helm { width:min(100%,210px); }
  .game-footer { flex-wrap:wrap; }
}