@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital@0;1&display=swap');
/* The UI is copied from the old sim (Marlinspike, 2026-10-06): the painted fittings (compass and
   gun stations: mahogany, a brass rule, Fell), the dark glass cards, and the Battle Builder's chart. */
/* IM Fell English (OFL, fonts/OFL.txt); subset to Latin-1. */
@font-face { font-family: 'IM Fell English'; src: url(fonts/IMFellEnglish-Regular.woff2) format('woff2'); font-style: normal; }
@font-face { font-family: 'IM Fell English'; src: url(fonts/IMFellEnglish-Italic.woff2) format('woff2'); font-style: italic; }
:root { --panel: rgba(6, 22, 32, 0.78); --text: #e8f1f5; --dim: #8fb3c4; --accent: #ffb347;
  --wood: linear-gradient(160deg, #4a2717, #2e170e 70%); --cream: #f1e6c8; --tan: #c9a678; --brass: #c9a052;
  --gilt: #e0b85a; --vermilion: #ff5a36; --fell: 'IM Fell English', Georgia, serif;
  --inlay: inset 0 0 0 1px #6b3a22, inset 0 0 0 4px #2e170e, inset 0 0 0 5px var(--brass);
  --crown: #3b5fae; --cabal: #d21f26; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a2c40; color: var(--text);
  font: 13px/1.4 system-ui, -apple-system, sans-serif; }
#game { position: fixed; inset: 0; }
#view { display: block; width: 100%; height: 100%; touch-action: none; }
.panel { position: absolute; background: var(--panel); border-radius: 8px; padding: 10px 12px; }

/* The compass panel: a painted card on mahogany with a brass rule, lettered in Fell. */
.hud-compass { left: 12px; bottom: 12px; min-width: calc(230px * var(--hud, 1)); border-radius: 3px; color: var(--cream); pointer-events: none;
  font: calc(14px * var(--hud, 1))/1.3 var(--fell); background: var(--wood); box-shadow: var(--inlay), 0 2px 10px rgba(0, 0, 0, 0.4); }
.rose { display: block; margin: 0 auto 2px; }
.hud-compass .big { font-size: 2.4em; line-height: 1.05; }
.spd { display: inline-block; min-width: 1.6em; }
.hud-compass .big small { font-size: 0.5em; font-style: italic; color: var(--tan); }
.hud-compass .big small.aground { color: #ff6b5b; font-style: normal; font-weight: 600; }
.hud-compass dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 4px 0 0; font-size: 1.25em; }
.hud-compass dt { font-style: italic; color: var(--tan); } .hud-compass dd { margin: 0; }
.hud-compass dd.struck { color: #ff6b5b; font-weight: 600; }
/* The rudder: a scale ticked in eighths, amidships marked long, and a bright pointer over it. */
.bar { position: relative; height: 1.1em; margin-top: 0.35em; border-bottom: 1px solid var(--tan);
  background: repeating-linear-gradient(to right, var(--tan) 0 1px, transparent 1px 12.5%) 0 0 / calc(100% + 1px) 45% no-repeat; }
.bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--tan); }
.rudder-mark { position: absolute; top: -0.15em; width: 0; height: 0; margin-left: -0.55em; z-index: 1;
  border: 0.55em solid transparent; border-top: 0.9em solid var(--vermilion); filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }

/* The shot tally, top centre. */
.tally { left: 50%; top: 12px; transform: translateX(-50%); padding: 6px 12px; white-space: nowrap; color: var(--dim);
  font-size: calc(13px * var(--hud, 1)); font-variant-numeric: tabular-nums; pointer-events: none; }
.tally span { color: var(--text); font-weight: 600; }
/* Your ship has struck: the notice, large and in the middle. */
.strike-notice { left: 50%; top: 22%; transform: translateX(-50%); width: min(calc(560px * var(--hud, 1)), 86vw);
  padding: calc(18px * var(--hud, 1)) calc(26px * var(--hud, 1)); font-size: calc(22px * var(--hud, 1));
  line-height: 1.35; text-align: center; color: var(--accent); font-weight: 600; pointer-events: none; }

/* Which way the mouse goes, top right: the camera, or the cursor. */
.cursor-hint { right: 12px; top: 12px; color: var(--accent); font-weight: 600; text-align: right; pointer-events: none; }
.cursor-hint small { display: block; color: var(--dim); font-weight: 400; }
/* The signal list: the signals, and what is flying. Under the cursor hint. */
.signal-list { right: 12px; top: 72px; min-width: 250px; display: flex; flex-direction: column; }
.signal-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.signal-list .signal { width: 100%; margin: 2px 0; padding: 4px 8px; text-align: left; background: none; border-color: transparent; display: flex; align-items: center; gap: 10px; }
.signal-hoist { display: flex; flex-direction: column; gap: 2px; width: 24px; flex: none; }
.signal-hoist canvas { width: 24px; height: 16px; display: block; }
.signal-list .signal:hover, .signal-list .signal.chosen { border-color: var(--dim); }
.signal.in-force { color: var(--accent); }
.signal-answered { margin: 6px 0 0; color: var(--dim); }
.signal-answered:empty { display: none; }

button { font: inherit; color: var(--text); background: var(--panel); border: 1px solid #2c5b73;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; }
button:hover { border-color: var(--dim); }
button.on { border-color: var(--accent); color: var(--accent); }
a.button { font: inherit; color: var(--text); background: var(--panel); border: 1px solid #2c5b73;
  border-radius: 6px; padding: 6px 10px; text-decoration: none; }
a.button:hover { border-color: var(--dim); }

/* The station bar, bottom centre. A gun station is one block, all of it the order button: the side,
   then the order over its crew and guns loaded. Painted like the compass: mahogany, a brass rule
   that turns gilt on Load and vermilion on Fire at Will. */
.stations { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; display: flex; gap: 8px; align-items: stretch; }
.stations.struck { opacity: 0.45; pointer-events: none; }
.station { --state: var(--tan); --rule: var(--brass); position: relative; display: flex; flex-direction: column; min-width: 190px;
  background: var(--wood); border-radius: 3px; overflow: hidden; color: var(--cream); font-family: var(--fell);
  box-shadow: inset 0 0 0 1px #6b3a22, inset 0 0 0 4px #2e170e, inset 0 0 0 5px var(--rule), 0 2px 10px rgba(0, 0, 0, 0.4); }
.station[data-state="load"] { --state: var(--gilt); --rule: var(--gilt); }
.station[data-state="fire"] { --state: var(--vermilion); --rule: var(--vermilion); }
.station .side { display: block; padding: 3px 0 0; font-size: 12px; letter-spacing: 0.06em; color: var(--tan); }
.station .order { flex: 1; border: 0; border-radius: 0; background: none; padding: 7px 118px 11px 14px; white-space: nowrap; text-align: left; color: inherit; font-family: inherit; }
.station .order:hover { background: rgba(255, 240, 210, 0.06); }
.station .state { display: block; font-size: 20px; line-height: 1.15; color: var(--state); }
.station[data-state="down"] .state { font-size: 17px; }
.station .counts { font-style: italic; color: var(--tan); }
.station .counts span { font-style: normal; color: var(--cream); }
/* The reload, while the order is Load: a bar along the station's foot, full when every gun is loaded. */
.station .load { display: none; position: absolute; left: 5px; bottom: 5px; height: 4px; max-width: calc(100% - 10px); background: var(--state); pointer-events: none; }
.station[data-state="load"] .load { display: block; }
/* The ammunition switch, on the order's line at the right: a small brass-ruled plate naming the shot
   ordered; gilt when it is anything but ball, so a side loading chain or double shows at a glance. */
.station .ammo { position: absolute; top: 29px; right: 10px; padding: 1px 7px 2px; border: 1px solid var(--brass); border-radius: 2px;
  background: rgba(0, 0, 0, 0.28); color: var(--cream); font-family: inherit; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.station .ammo:hover { background: rgba(255, 240, 210, 0.1); }
.station .ammo:not([data-ammo="ball"]) { border-color: var(--gilt); color: var(--gilt); }
.post { min-width: 104px; padding: 9px 14px; text-align: left; color: var(--cream); font-family: var(--fell);
  background: var(--wood); border: 0; border-radius: 3px; box-shadow: var(--inlay), 0 2px 10px rgba(0, 0, 0, 0.4); }
.post b, .post em { display: block; font-size: 13px; font-weight: 400; }
.post em { font-style: italic; color: var(--tan); }
.post span { color: var(--tan); }

.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; padding-top: 8px; text-align: center; white-space: nowrap;
  font: 12px/14px system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; align-items: center;
  text-shadow: -1px -1px 0 #2b2118, 1px -1px 0 #2b2118, -1px 1px 0 #2b2118, 1px 1px 0 #2b2118, 0 0 3px #2b2118; }
.label.friend { color: #6aaaff; }
.label.foe { color: #ff5a4a; }
/* Morale: a bar in the side's colour under the name, or STRUCK. */
.label-bar { width: 40px; height: 5px; margin-top: 4px; background: #2b2118; outline: 1px solid var(--text); }
.label-fill { height: 100%; background: currentColor; }
.label-struck { color: var(--accent); }

/* The telescope's eyepiece: a round field, black outside it; its magnification and bearing just
   inside the top of the field (whose radius is 50vmin), under the tally. */
.scope { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle closest-side, transparent 95%, rgba(0, 0, 0, 0.7) 97%, #000 100%); }
.scope-brg { position: absolute; left: 50%; top: calc(50% - 50vmin + 52px); transform: translateX(-50%);
  color: var(--accent); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); }

/* Start screen, pause menu, controls panel: a dark glass card over the sea. */
.minimap { position: absolute; right: 12px; bottom: 12px; cursor: pointer; border-radius: 2px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.chart { position: absolute; inset: 0; z-index: 3; cursor: grab; touch-action: none; }
.chart:active { cursor: grabbing; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(3, 12, 18, 0.55); z-index: 4; }
.card { background: rgba(6, 22, 32, 0.94); border-radius: 10px; padding: 20px 24px; width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow: auto; }
.card h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: 0.04em; }
.card h2 { margin: 18px 0 8px; font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.card p { margin: 0 0 12px; color: var(--dim); }
.menu-logo { display: block; max-width: 320px; width: 100%; margin: 0 auto 8px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.row label { min-width: 80px; color: var(--dim); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 12px; }
.keys dt { font-weight: 600; white-space: nowrap; } .keys dd { margin: 0; color: var(--dim); }
.actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.actions .primary { background: var(--accent); color: #10202a; border-color: var(--accent); font-weight: 600; }
.no-webgl { max-width: 32em; margin: 20vh auto; padding: 0 16px; }
.no-webgl a { color: var(--accent); }


/* Under 960 px the station bar moves into the right corner, clear of the compass. */
@media (max-width: 960px) { .stations { left: auto; right: 12px; transform: none; } .tally { left: 12px; transform: none; } }
@media (max-width: 640px) { .post { min-width: 0; } .station { min-width: 0; } }

/* BATTLE BUILDER: one sheet, the two lines facing each other across it, each under its side's
   ensign. Parchment, iron-gall ink, a ruled border. */
.sheet { position: absolute; inset: 0; z-index: 5; overflow: auto; background: #0a2c40; padding: 24px 16px; }
.bb {
  --bb-ink: #2c1810; --bb-rule: #8b6f3f; --bb-paper: #efe5cf; --bb-crown: #2b3a67; --bb-cabal: #b22234;
  max-width: 980px; margin: 0 auto; color: var(--bb-ink);
  font-family: 'IM Fell DW Pica', Georgia, serif; font-size: 18px; line-height: 1.35;
  padding: 20px 18px 24px; border: 2px solid var(--bb-rule); border-radius: 8px;
  background: linear-gradient(to right, #e6d9c0 0%, #d4c4a8 30%, #c8b896 70%, #d0c2a6 100%);
  box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25);
}
.bb button { margin: 0; padding: 0; border-radius: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.bb button:disabled { cursor: default; }
.bb :focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 2px; }
.bb p { color: inherit; }
.bb-wind { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; font-style: italic; }
.bb-arrow path { fill: none; stroke: var(--bb-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The sea: the two lines, with open water between them. */
.bb-sea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
.bb-crown { --bb-side: var(--bb-crown); }
.bb-cabal { --bb-side: var(--bb-cabal); }
/* A line's heading: the ensign it flies. */
.bb-side { display: flex; align-items: center; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 3px solid var(--bb-side); }
.bb-crown .bb-side { justify-content: flex-end; }
.bb-flag { display: block; width: 72px; height: 36px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.bb-ships { list-style: none; margin: 0; padding: 0; }
.bb-ship { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(139, 111, 63, 0.35); }
/* The Cabal's rows are the Crown's in a mirror: each ship's bow lies toward the water between. */
.bb-cabal .bb-ship { flex-direction: row-reverse; }
/* A ship: its name over its plan, against the water. */
.bb .bb-hull { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; padding: 2px 0; }
.bb-cabal .bb-hull { align-items: flex-start; }
.bb-name { border-bottom: 1px dotted var(--bb-rule); white-space: nowrap; line-height: 1.15; }
.bb-hull:hover .bb-name, .bb-hull[aria-expanded="true"] .bb-name { border-bottom-style: solid; }
.bb-plan { flex: none; overflow: visible; }
.bb-plan polygon { fill: var(--bb-side); fill-opacity: 0.2; stroke: var(--bb-side); stroke-width: 1.4; stroke-linejoin: round; }
.bb-plan circle { fill: var(--bb-ink); }
/* Who commands: one of two, the one in ink. */
.bb-who { flex: none; display: inline-flex; border: 1px solid var(--bb-ink); border-radius: 3px; overflow: hidden; }
.bb .bb-who button { padding: 3px 9px; font-size: 16px; line-height: 1.2; }
.bb .bb-who button[aria-pressed="true"] { background: var(--bb-ink); color: var(--bb-paper); }
.bb .bb-remove { flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 22px; line-height: 1; }
.bb .bb-remove:hover:not(:disabled) { background: rgba(44, 24, 16, 0.12); }
.bb .bb-remove:disabled { visibility: hidden; }
.bb .bb-add { display: block; width: 100%; margin-top: 10px; padding: 7px 10px; border: 1px dashed var(--bb-rule); border-radius: 3px; }
.bb .bb-add:hover:not(:disabled), .bb .bb-add[aria-expanded="true"] { border-style: solid; background: rgba(239, 229, 207, 0.6); }
.bb .bb-add:disabled { border-color: transparent; font-style: italic; }
/* The classes to choose from, side by side at the one scale. */
.bb-picking { list-style: none; }
.bb-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 8px 0; padding: 10px;
  border: 1px solid var(--bb-rule); border-radius: 3px; background: var(--bb-paper); }
.bb .bb-choice { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 3px; font-size: 16px; line-height: 1.15; }
.bb .bb-choice:hover { border-color: var(--bb-ink); }
.bb-choice-guns { font-style: italic; font-size: 14px; }
.bb-tally { margin: 12px 0 0; font-style: italic; }
.bb-crown .bb-tally { text-align: right; }
.bb-note { max-width: 62ch; margin: 22px auto 0; text-align: center; font-size: 16px; font-style: italic; }
.bb-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.bb-hint { margin: 0; font-style: italic; }
.bb .bb-button { padding: 6px 16px; border: 1px solid var(--bb-ink); border-radius: 3px; }
.bb .bb-start:not(:disabled) { background: var(--bb-ink); color: var(--bb-paper); }
.bb .bb-button:disabled { opacity: 0.4; }
/* A ship added comes into the line from its own side. */
@keyframes bb-in { from { opacity: 0; transform: translateX(var(--bb-from)); } }
.bb-new { animation: bb-in 0.28s ease-out; }
.bb-crown .bb-new { --bb-from: -28px; }
.bb-cabal .bb-new { --bb-from: 28px; }
@media (prefers-reduced-motion: reduce) { .bb-new { animation: none; } }
@media (max-width: 760px) {
  .bb { padding: 16px 14px 20px; }
  .bb-sea { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .bb-crown .bb-side { justify-content: flex-start; }
  .bb-crown .bb-tally { text-align: left; }
}

/* The tutorial (copied from the old sim, Marlinspike's design, 2026-09-29 to 10-02): the step as a
   caption over the sea, top centre under the tally, no box; a met step turns amber. */
.tutorial { position: absolute; left: 50%; top: calc(20px + 32px * var(--hud, 1)); transform: translateX(-50%); width: min(720px, calc(100vw - 32px));
  text-align: center; font-size: calc(22px * var(--hud, 1)); font-weight: 600; pointer-events: none; z-index: 3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6); transition: color 0.2s; }
.tutorial[hidden] { display: none; }
.tutorial.done { color: var(--accent); }
/* The arrow: a shaft and a head, its tip just over the part of the HUD a step points at, bobbing.
   Big, to pull the eye down from the caption (Marlinspike, 2026-10-02). */
.tutorial-arrow { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)); animation: tutorial-point 0.7s ease-in-out infinite alternate; }
.tutorial-arrow::before { content: ''; position: absolute; left: calc(-10px * var(--hud, 1)); bottom: calc(50px * var(--hud, 1));
  width: calc(20px * var(--hud, 1)); height: calc(100px * var(--hud, 1)); background: var(--accent); border-radius: calc(4px * var(--hud, 1)) calc(4px * var(--hud, 1)) 0 0; }
.tutorial-arrow::after { content: ''; position: absolute; left: calc(-32px * var(--hud, 1)); bottom: calc(6px * var(--hud, 1));
  border: calc(32px * var(--hud, 1)) solid transparent; border-bottom: 0; border-top: calc(46px * var(--hud, 1)) solid var(--accent); }
.tutorial-arrow[hidden] { display: none; }
@keyframes tutorial-point { from { transform: translateY(calc(-20px * var(--hud, 1))); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tutorial-arrow { animation: none; } }
@media (max-width: 960px) { .tutorial { left: 16px; transform: none; width: calc(100vw - 200px); text-align: left; } }
/* The list of tutorials: one block each, title, briefing and Start. */
.tutorial-item { border-top: 1px solid rgba(143, 179, 196, 0.25); padding-top: 4px; }
.tutorial-item h2 { color: var(--text); font-size: 15px; text-transform: none; letter-spacing: 0.02em; }
.tutorial-item .primary { background: var(--accent); color: #10202a; border-color: var(--accent); font-weight: 600; }