/* Base page styling. The real menu design (darker mood, data-heavy, nautical flavor —
   design.md §18, §20) is built in later milestones. */

/* One home for the palette (the written source stays ui-conventions.md §Colours). Change a colour
   here and every screen follows — no more hand-typed hex scattered through the file. Grouped: page,
   panels, borders, text, stat bands, controls, and the shared month frame (One Deck update). */
:root {
  --bg: #0a1a26;            /* page base */
  --bg-hi: #16303f;         /* radial gradient, near the top */
  --bg-lo: #04101a;         /* radial gradient, at the edges */
  --panel-flat: #14212c;    /* flat panel fill (shop market, modals) */
  --panel-grad: linear-gradient(180deg, rgba(20, 33, 44, 0.9), rgba(11, 22, 31, 0.9)); /* raised panel */
  --panel-border: #34506a;  /* panel edge */
  --border: #3c5568;        /* controls: buttons, inputs, HUD boxes */
  --divider: #2c4356;       /* section / panel divider */
  --divider-2: #23384a;     /* inner table divider */
  --text: #ecdfc6;          /* heading + value cream */
  --gold: #c8b487;          /* section titles, accents */
  --muted: #8fa5b5;         /* labels */
  --muted-2: #6d8397;       /* faint notes */
  --good: #6fb36a;          /* stat band: good */
  --warn: #d8a531;          /* stat band: warn */
  --bad: #d1614a;           /* stat band: bad */
  --hp-good: #4caf50;       /* hull / health bar green */
  --danger: #c0392b;        /* danger red (low timer, end-raid) */
  --bar-bg: #12212e;        /* meter track fill */
  --input-bg: #0c1a24;      /* number / text input slot */
  --btn: #1d3a4d;           /* button fill */
  --btn-hover: #27506a;     /* button hover */
  --go: #23503a;            /* confirm / go button fill */
  --go-border: #3c6b50;     /* confirm / go button edge */
  --go-hover: #2f6b4d;      /* confirm / go button hover */
  /* Shared month frame (One Deck update): one width + one header band across every Canon month screen. */
  --month-max: 1180px;      /* one page width for Shop, Hideout, Set sail, Waiting, Results */
  --head-bg: #0b1f2b;       /* opaque band behind the sticky screen title */
  --head-border: #1c3543;   /* rule under the header band */
  --radius-panel: 8px;      /* one panel corner radius */
  --lantern: #ffc45a;       /* warm accent — a captain who is home (Fleet screen) */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Georgia, "Times New Roman", serif;
  background: radial-gradient(circle at 50% 28%, var(--bg-hi) 0%, var(--bg) 55%, var(--bg-lo) 100%);
  color: var(--text);
}

/* Menu layer: full-screen HTML screens. One .menu-screen per screen later. */
#menu-layer { height: 100%; display: grid; place-items: center; text-align: center; }
/* The id rule above sets display:grid, which outranks the browser's [hidden]{display:none}. Without
   this guard the menu layer never truly hides when a raid starts, and the Hideout's sticky header
   (z-index) then paints on top of the sea. Restore hide-when-hidden. */
#menu-layer[hidden] { display: none; }
.menu-screen h1 { font-size: clamp(2rem, 8vw, 3.5rem); margin: 0 0 0.3rem; text-shadow: 0 2px 6px #000; }
.subtitle { color: var(--gold); margin: 0 0 1.5rem; }
button {
  font: inherit; padding: 0.6rem 1.4rem; cursor: pointer;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); border-radius: 4px;
}
button:hover { background: var(--btn-hover); }
.controls-note { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }
.health { margin-top: 2rem; font-size: 0.85rem; color: var(--muted-2); }

/* Game layer: the canvas fills the whole window; HUD and menu button sit on top. */
#game-layer { position: fixed; inset: 0; }
/* While a menu is shown, hide the game WITHOUT display:none. display:none shrinks the WebGL
   canvas to 0×0; Phaser's RESIZE scale mode then rebuilds its framebuffer at 0×0 and throws
   "Incomplete Attachment", breaking the renderer until a page reload. Keeping the canvas at
   full size but invisible (and non-interactive) avoids the resize entirely, so a second raid
   or replay starts with no reload. */
#game-layer[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
#game-mount { position: absolute; inset: 0; }
#game-mount canvas { display: block; }
#game-layer > #btn-menu { position: absolute; top: 1rem; left: 1rem; z-index: 3; }

/* Sea HUD (design.md §18: data-heavy, lots of readouts). */
#hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hud-box {
  position: absolute; right: 1rem; top: 1rem; width: 240px;
  background: rgba(4, 16, 26, 0.82); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.6rem 0.7rem; font-size: 0.8rem;
}
.hud-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0; }
.hud-label { width: 62px; color: var(--muted); flex: none; }
.hud-value { color: var(--text); white-space: nowrap; }
/* Captain standing in the raid readout: the coin sits small beside the gold, and the wanted badge
   (the same pill as the month-screen headers) sits flush in its row. */
.hud-box .coin-icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 0.15rem; }
.hud-wanted { white-space: normal; }
.hud-wanted .hideout-wanted { margin-left: 0; vertical-align: baseline; }
.hud-bar {
  flex: 1; height: 9px; background: var(--bar-bg); border: 1px solid var(--border);
  border-radius: 2px; overflow: hidden;
}
.hud-fill { display: block; height: 100%; width: 0; background: var(--hp-good); transition: width 0.15s linear; }
.hud-fill[data-level="warn"] { background: var(--warn); }
.hud-fill[data-level="bad"] { background: var(--danger); }
.hud-replay { margin-top: 0.4rem; font-size: 0.68rem; color: var(--muted-2); }
#hud-banner {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(4, 16, 26, 0.9); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.8rem 1.4rem; font-size: 1.1rem; max-width: 80%; text-align: center;
}

/* Extended HUD: raid timer, crew stations, boarding/salvage meters, ship's log,
   and the end-of-raid results sheet (design.md §18: data-heavy readouts). */

/* Status box: the countdown reads a touch larger and turns red when time runs low. */
.hud-timer { font-size: 0.95rem; font-weight: bold; }
.hud-timer[data-low="1"] { color: var(--danger); animation: hud-timer-pulse 1s ease-in-out infinite; }
@keyframes hud-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Local Play (beta) per-captain HUD (Phase 2): one corner panel per captain, built by localHud.js.
   Each panel wears the captain's colour (--accent) as a left stripe + header dot, so a boat's coloured
   name tag maps to its panel. Read-only — it never takes pointer input, so clicks fall through to the
   sea. Bars reuse the shared .hud-bar / .hud-fill. Laid out for 2 / 3 / 4 captains on a TV. */
#local-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lhud-panel {
  position: absolute; width: 214px;
  background: rgba(4, 16, 26, 0.82); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 0.45rem 0.55rem; font-size: 0.76rem;
}
/* Corners. The top panels clear the menu button (top-left) with a downward offset. */
.lhud-panel[data-corner="bl"] { left: 1rem; bottom: 1rem; }
.lhud-panel[data-corner="br"] { right: 1rem; bottom: 1rem; }
.lhud-panel[data-corner="tl"] { left: 1rem; top: 3.4rem; }
.lhud-panel[data-corner="tr"] { right: 1rem; top: 3.4rem; }
.lhud-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; }
.lhud-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 5px var(--accent);
}
.lhud-name {
  color: var(--text); font-weight: bold; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lhud-hull { color: var(--muted); font-size: 0.68rem; flex: none; }
.lhud-row { display: flex; align-items: center; gap: 0.35rem; margin: 0.18rem 0; }
.lhud-lab { width: 40px; color: var(--muted); flex: none; }
.lhud-val { color: var(--text); white-space: nowrap; }
.lhud-shot { white-space: normal; }
.lhud-haul { margin-top: 0.25rem; }
.lhud-haul .lhud-val { color: var(--muted); font-size: 0.7rem; white-space: normal; }
.lhud-ally { margin-top: 0.3rem; font-size: 0.7rem; color: var(--muted-2); min-height: 1em; }
.lhud-ally[data-state="allied"] { color: var(--go, #59d06a); font-weight: bold; }
.lhud-ally[data-state="near"] { color: var(--gold); }
.lhud-board { font-size: 0.7rem; color: var(--muted-2); min-height: 0; }
.lhud-board[data-state="ready"] { color: var(--gold); font-weight: bold; }
.lhud-board[data-state="active"] { color: var(--go, #59d06a); font-weight: bold; }
.lhud-board[data-state="cool"] { color: var(--warn); }
.lhud-sunk {
  color: var(--danger); font-weight: bold; text-transform: uppercase;
  letter-spacing: 0.08em; text-align: center; margin-top: 0.25rem;
}
.lhud-panel.is-sunk { opacity: 0.5; }

/* The captain's two control panels, stacked on the left (Controller Controls Phase 2). The wrapper
   lets clicks fall through the gaps to the sea; each box turns pointer events back on. */
#hud-controls {
  position: absolute; left: 1rem; top: 4.5rem; z-index: 2;
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
/* Crew stations box: buttons need clicks. Now placed by the #hud-controls stack, so it is static. */
.hud-crew { position: static; width: 230px; pointer-events: auto; }
.hud-crew-title { font-weight: bold; color: var(--gold); margin-bottom: 0.3rem; }
.hud-btn {
  width: 22px; height: 22px; padding: 0; line-height: 1;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer;
}
.hud-btn:hover { background: var(--btn-hover); }
.hud-station-count { min-width: 1.4em; text-align: center; }
.hud-note { font-size: 0.68rem; color: var(--muted-2); }

/* Active box (gold frame) + cursor item (highlight): shows where the player is, and is what the
   Phase-3 controller will move. Clicking any control makes that box active and moves its cursor. */
.hud-box[data-box].is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(200, 180, 135, 0.3);
}
.hud-station {
  border-radius: 4px; padding: 0.1rem 0.25rem; margin-left: -0.25rem; margin-right: -0.25rem;
  border-left: 2px solid transparent; cursor: pointer;
}
.hud-station.is-cursor { background: rgba(200, 180, 135, 0.1); border-left-color: var(--muted); }
#hud-crew-box.is-active .hud-station.is-cursor {
  background: rgba(200, 180, 135, 0.18); border-left-color: var(--gold);
}

/* Weapons box: three columns (Port normal / Starboard normal / Special), each with the weapon name
   and its loaded shot, both changed by the ◀ ▶ arrows. */
.hud-weapons { position: static; width: 336px; pointer-events: auto; }
.hud-weap-cols { display: flex; gap: 0.3rem; }
.hud-weap-col { flex: 1 1 0; min-width: 0; text-align: center; }
.hud-weap-side { color: var(--muted); font-size: 0.68rem; margin-bottom: 0.2rem; }
.hud-weap-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 0.1rem;
  border: 1px solid transparent; border-radius: 4px; padding: 0.12rem 0.08rem;
}
.hud-weap-pick.hud-weap-ammo { margin-top: 0.15rem; }
.hud-weap-pick.is-cursor { border-color: var(--muted); background: rgba(200, 180, 135, 0.08); }
#hud-weapons-box.is-active .hud-weap-pick.is-cursor {
  border-color: var(--gold); background: rgba(200, 180, 135, 0.16);
}
.hud-weap-name { flex: 1; min-width: 0; font-size: 0.7rem; line-height: 1.05; color: var(--text); white-space: normal; }
.hud-weap-shot { flex: 1; min-width: 0; font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-arrow {
  flex: none; width: 16px; height: 18px; padding: 0; line-height: 1; font-size: 0.65rem;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer;
}
.hud-arrow:hover { background: var(--btn-hover); }
.hud-arrow[disabled] { opacity: 0.3; cursor: default; }
/* End-of-raid control: top-right corner (M7.1a-10), above the status box (which drops below it). */
#btn-end-raid {
  position: absolute; top: 1rem; right: 1rem; z-index: 3; pointer-events: auto;
  font-size: 0.8rem; padding: 0.4rem 0.85rem; border-radius: 4px; cursor: pointer;
  color: var(--text); background: #4a2530; border: 1px solid #7a4050;
}
#btn-end-raid:hover { background: #5d2f3d; }
.hud-status { top: 3.4rem; }

/* Boarding window: bottom-center; the marker sweeps across the band. */
.hud-board {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  width: 320px; pointer-events: auto;
  background: rgba(4, 16, 26, 0.82); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.6rem; text-align: center;
}
#btn-board { width: 100%; font-size: 1rem; margin-bottom: 0.4rem; }
.board-bar {
  height: 14px; background: var(--bar-bg); border: 1px solid var(--border); border-radius: 2px;
  position: relative; overflow: hidden;
}
.board-zone {
  position: absolute; left: 39%; width: 22%; top: 0; bottom: 0;
  background: rgba(76, 175, 80, 0.35);
  border-left: 1px solid var(--hp-good); border-right: 1px solid var(--hp-good);
}
.board-marker { position: absolute; width: 3px; top: 0; bottom: 0; background: var(--text); }
.board-status { font-size: 0.75rem; color: var(--gold); margin-top: 0.3rem; min-height: 1em; }

/* Salvage gather meter: bottom-center, below the boarding window. */
.hud-gather {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: 300px;
  background: rgba(4, 16, 26, 0.82); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.4rem 0.6rem;
}

/* Ship's log: short messages stacked at the bottom-left. */
.hud-feed {
  position: absolute; left: 1rem; bottom: 1rem; width: 340px;
  list-style: none; margin: 0; padding: 0; font-size: 0.78rem; pointer-events: none;
}
.hud-feed li {
  background: rgba(4, 16, 26, 0.7); border-left: 3px solid var(--border);
  padding: 0.25rem 0.5rem; margin-top: 0.25rem; color: var(--text);
  border-radius: 0 3px 3px 0;
}
.hud-feed li.feed-bad { border-left-color: var(--danger); }
.hud-feed li.feed-good { border-left-color: var(--hp-good); }
.hud-feed li[data-age="old"] { opacity: 0.55; }

/* Results sheet: the data-heavy end-of-raid screen (screens.md screen 11). */
#menu-layer { overflow-y: auto; }
.menu-screen { padding: 2rem 1rem; }
.results-haul {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin: 0.8rem 0; max-width: 92vw;
}
.haul-item {
  background: rgba(4, 16, 26, 0.82); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.5rem 1rem;
}
.haul-num { font-size: 1.6rem; color: var(--text); }
.haul-label {
  font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.results-table {
  margin: 0.5rem auto; border-collapse: collapse; font-size: 0.85rem;
  max-width: 520px; width: 100%;
}
.results-table td { padding: 0.15rem 0.9rem; }
.results-table td:first-child { color: var(--muted); text-align: right; }
.results-table td:last-child { color: var(--text); text-align: left; }
.results-crew { font-size: 0.85rem; color: var(--gold); max-width: 540px; }

/* Name-this-raid box on the results sheet. */
.results-name {
  display: flex; gap: 0.4rem; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 0.6rem 0;
}
.results-name label { font-size: 0.85rem; color: var(--muted); }
#results-name-input {
  font: inherit; font-size: 0.85rem; width: min(70vw, 260px);
  background: var(--bar-bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.35rem 0.5rem;
}
.results-name-status { font-size: 0.8rem; color: var(--muted-2); }

/* Replay picker (screens.md screen 12): the saved-run table. */
.replay-list { max-width: 680px; margin-bottom: 1rem; }
.replay-list th {
  font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.15rem 0.9rem; font-weight: normal;
}
.replay-list td { text-align: left; }
.replay-list td:first-child, .replay-list td:nth-child(2) { text-align: center; color: var(--text); }
.rp-muted { color: var(--muted-2); font-size: 0.8rem; }
#btn-replay-last { margin-bottom: 0.6rem; }
#btn-replays-watch { margin-right: 0.6rem; }

/* Replay viewer controls: a bar along the bottom of the canvas. */
#replay-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.replay-bar {
  position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%);
  width: min(92vw, 860px); pointer-events: auto;
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(4, 16, 26, 0.85); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.5rem 0.7rem;
}
.replay-bar button { font-size: 0.78rem; padding: 0.35rem 0.6rem; white-space: nowrap; }
.replay-bar button[data-speed][data-active="1"] { background: var(--btn-hover); border-color: #6d8ba1; }
#rp-timeline { flex: 1; min-width: 160px; accent-color: var(--gold); }
.replay-time { font-size: 0.78rem; color: var(--gold); white-space: nowrap; }
.replay-status {
  position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%);
  font-size: 0.72rem; color: var(--muted-2); white-space: nowrap;
}
/* Side-by-side: a divider between the two half-screens and a label over each. */
#replay-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--border); opacity: 0.8;
}
.replay-run-label {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-100%);
  padding: 0.2rem 0.6rem; margin-left: -0.6rem;
  background: rgba(4, 16, 26, 0.7); border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.75rem; color: var(--gold);
}
.replay-run-label:empty { display: none; }
.replay-run-label-b { left: auto; right: 1rem; transform: none; margin-left: 0; }

/* Not Canon browser (screens.md screen 9): map lists and the per-stat boards. */
.menu-wide { max-width: 900px; width: 100%; margin: 0 auto; }
.nc-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.nc-heading { font-size: 1.05rem; color: var(--gold); margin: 1.4rem 0 0.2rem; }
.nc-list { max-width: 860px; }
.nc-list th {
  font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.15rem 0.9rem; font-weight: normal;
}
.nc-list td { text-align: left; color: var(--text); }
.nc-list td:first-child { text-align: left; color: var(--text); }
.nc-list button { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
.nc-stat-pick { font-size: 0.85rem; color: var(--muted); }
.nc-stat-pick select {
  font: inherit; margin-left: 0.4rem; background: var(--bar-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.2rem 0.4rem;
}

/* Login / create account (screens.md screen 1). */
.auth-tabs { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1rem; }
.auth-tabs button[data-active="0"] { background: var(--bar-bg); color: var(--muted); }
.auth-form {
  display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch;
  max-width: 320px; margin: 0 auto; text-align: left;
}
.auth-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.auth-form input {
  font: inherit; background: var(--bar-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 0.4rem 0.5rem;
}
.auth-form button[type="submit"] { margin-top: 0.3rem; }
.auth-hint { font-size: 0.7rem; color: var(--muted-2); }

/* Home: Canon worlds and Not Canon sections. */
.home-who { color: var(--gold); margin: -0.6rem 0 1.2rem; font-size: 0.9rem; }
.home-heading { font-size: 1.05rem; color: var(--gold); margin: 1.4rem 0 0.4rem; }
.home-worlds, .home-notcanon { max-width: 620px; margin: 0 auto; }
.home-notcanon { margin-top: 1.6rem; }
.home-notcanon button { margin: 0.2rem; }
.home-world-actions {
  display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 0.6rem;
}
.inline-form { display: flex; gap: 0.4rem; }
.inline-form input {
  font: inherit; font-size: 0.85rem; background: var(--bar-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.35rem 0.5rem; width: 160px;
}
.mono { font-family: "Courier New", monospace; letter-spacing: 0.06em; }
.home-foot { margin-top: 1.2rem; }
.link-btn {
  background: none; border: none; color: var(--muted); text-decoration: underline;
  padding: 0; font-size: 0.85rem;
}
.link-btn:hover { background: none; color: var(--gold); }

/* World lobby (screens.md screen 3). */
.lobby-invite {
  display: flex; gap: 0.4rem; justify-content: center; align-items: center;
  flex-wrap: wrap; margin: 0.6rem 0 0.3rem;
}
.lobby-invite-label { font-size: 0.8rem; color: var(--muted); }
#lobby-link {
  font: inherit; font-size: 0.85rem; width: min(60vw, 340px);
  background: var(--bar-bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.35rem 0.5rem;
}
.lobby-code { color: var(--muted); font-size: 0.8rem; margin: 0.1rem 0 0.8rem; }
.lobby-code span { font-family: "Courier New", monospace; letter-spacing: 0.1em; color: var(--gold); }
.lobby-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
#btn-start { background: #2c4a2f; border-color: #4a7050; }
#btn-start:hover { background: #3a5f3e; }
.ready-yes { color: var(--hp-good); }
.ready-no { color: var(--muted); }

/* Map editor panels (screens.md screen 10). The canvas is behind; the panels float. */
#editor-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ed-box {
  position: absolute; pointer-events: auto;
  background: rgba(4, 16, 26, 0.88); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.5rem 0.6rem; font-size: 0.78rem;
}
.ed-toolbar {
  top: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  max-width: min(94vw, 900px); justify-content: center;
}
.ed-toolbar button { font-size: 0.75rem; padding: 0.3rem 0.7rem; white-space: nowrap; }
#ed-name {
  font: inherit; font-size: 0.8rem; width: 180px;
  background: var(--bar-bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.3rem 0.5rem;
}
#ed-publish { background: #2c4a2f; border-color: #4a7050; }
#ed-publish:hover { background: #3a5f3e; }
.ed-status { font-size: 0.72rem; color: var(--muted); max-width: 100%; }
.ed-status[data-bad="1"] { color: #d8886b; }
.ed-palette {
  left: 1rem; top: 4.5rem; width: 168px; max-height: calc(100% - 6rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.ed-palette button { font-size: 0.72rem; padding: 0.3rem 0.4rem; text-align: left; }
.ed-palette button[data-active="1"] { background: var(--btn-hover); border-color: #6d8ba1; }
.ed-props, .ed-worldpanel {
  right: 1rem; top: 4.5rem; width: 250px; max-height: calc(100% - 6rem); overflow-y: auto;
}
.ed-worldpanel { right: auto; left: 50%; transform: translateX(-50%); top: 4.5rem; }
.ed-group-title {
  font-weight: bold; color: var(--gold); margin: 0.5rem 0 0.25rem;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.ed-group-title:first-child { margin-top: 0; }
.ed-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0; }
.ed-row span { width: 110px; flex: none; color: var(--muted); font-size: 0.72rem; }
.ed-row input[type="number"], .ed-row input[type="text"], .ed-row select, .ed-row textarea {
  flex: 1; min-width: 0; font: inherit; font-size: 0.75rem;
  background: var(--bar-bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.15rem 0.35rem;
}
.ed-row-wide { flex-wrap: wrap; }
.ed-note { font-size: 0.68rem; color: var(--muted-2); margin: 0.3rem 0; }
.ed-help {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  font-size: 0.75rem; color: var(--muted); background: rgba(4, 16, 26, 0.7);
  border-radius: 4px; padding: 0.3rem 0.8rem; pointer-events: none; white-space: nowrap;
  max-width: 94vw; overflow: hidden; text-overflow: ellipsis;
}

/* Canon month screens (M5B): shop, hideout, waiting, month results. They reuse the menu-screen,
   results-table, and lobby-actions styles; these are the few extra touches. */
.shop-priceshift { color: var(--gold); font-size: 0.85rem; margin: 0.3rem 0; }
/* Section blocks still used by the hideout screen. */
.shop-section { margin: 0.8rem 0; }
.shop-section-head { display: flex; align-items: center; gap: 0.8rem; }

/* Shop screen is a WIDE, desktop-first layout (not the narrow centered column the other menus use):
   the market's Sell and Buy panels sit side by side, Cargo spans the full width below, and a sticky
   bar at the bottom holds the running total and the Confirm/Back buttons. */
.shop-screen { width: 100%; max-width: 1040px; text-align: left; padding-bottom: 5.5rem; }
.shop-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin-top: 0.8rem;
}
/* One panel shape across the month screens: the raised gradient fill, panel border, and radius the
   Boat / My Hideout boxes use (.store-panel below), so every box on Shop and Hideout matches. */
.shop-panel {
  background: var(--panel-grad); border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel); padding: 0.8rem 1rem;
}
.shop-panel-wide { grid-column: 1 / -1; }
.shop-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  margin-bottom: 0.3rem;
}
.shop-panel-tools { display: flex; gap: 0.4rem; }
.shop-toolbtn {
  font: inherit; font-size: 0.78rem; padding: 0.2rem 0.7rem; cursor: pointer;
  background: #1b2f3f; color: var(--gold); border: 1px solid var(--border); border-radius: 3px;
}
.shop-toolbtn:hover { background: var(--btn-hover); }
.shop-h { font-size: 1rem; color: var(--gold); margin: 0.4rem 0; letter-spacing: 0.03em; }
.shop-market { width: 100%; }
/* Subheader row grouping the Buy list (Goods / Ammunition). */
.shop-subhead td {
  color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding-top: 0.6rem; border-bottom: 1px solid var(--divider-2);
}
/* Per-row "max" button in the Sell table (fills that row to the amount held). */
.shop-maxbtn {
  font: inherit; font-size: 0.7rem; padding: 0.1rem 0.45rem; margin-left: 0.35rem; cursor: pointer;
  background: #1b2f3f; color: var(--muted); border: 1px solid var(--border); border-radius: 3px;
}
.shop-maxbtn:hover { background: var(--btn-hover); color: var(--text); }
/* Sticky action bar: total on the left, buttons on the right, always in view while scrolling. */
.shop-bar {
  position: sticky; bottom: 0; margin-top: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 0.9rem; background: rgba(4, 16, 26, 0.94);
  border: 1px solid var(--divider); border-radius: 6px; backdrop-filter: blur(3px);
}
.shop-bar-info { margin: 0; }
.shop-bar .shop-total, .shop-bar .health { margin: 0.1rem 0; }
.shop-bar .lobby-actions { margin: 0; }
.shop-go, .month-go { background: var(--go); border-color: var(--go-border); }
.shop-go:hover, .month-go:hover { background: var(--go-hover); }

/* Shop screen reuses the Hideout's wide layout: the same boat + My Hideout boxes on top, the market
   below. Header, purse coin, boxes, and number boxes all share the Hideout's building blocks. */
#screen-shop { max-width: 1180px; }
.shop-notes { margin: 0.1rem 0 0.6rem; }
.shop-notes .subtitle { margin: 0.2rem 0; }
#shop-who { margin: 0; font-size: 1.5rem; color: var(--text); }
#shop-who .coin-icon { width: 24px; height: 24px; vertical-align: -5px; margin-right: 0.2rem; }
#shop-who b { color: var(--text); }
.shop-market-panel { margin-top: 0; }
.shop-price { color: var(--text); }
/* "Sell" button on the boat / hideout boxes: a text button (not the fixed-width icon size), gold text
   with a gold tint on hover so it reads as money. */
.inv-icon-btn.inv-sell {
  width: auto; padding: 0 0.55rem; font: inherit; font-size: 0.8rem; font-weight: 600; color: #e8c55a;
}
.inv-icon-btn.inv-sell:hover { background: #4a3a10; color: #f4d67a; border-color: #a97b12; }
@media (max-width: 720px) {
  .shop-grid { grid-template-columns: 1fr; }
}
/* Hideout reuses the shop's wide panel grid; these settle the panelled content left and full-width
   (the standalone rules below centre the same blocks for other contexts). */
#screen-hideout { max-width: 1180px; }
.shop-panel .hideout-health { max-width: none; margin: 0 0 0.7rem; }
.shop-panel .hideout-repair { margin: 0.2rem 0 0.7rem; }
/* Panel tables (Buildings, Shipyard, Tavern): fill the panel, the name/effect column takes the free
   width and reads left, and the action-button column is only as wide as its button. Without this the
   global results-table rule right-aligns the name and lets the button column steal the width, which
   wraps every name and blurb into thin one-word ribbons and makes the panels far too tall. */
.shop-panel .results-table { max-width: none; width: 100%; margin: 0.3rem 0; }
.shop-panel .results-table td:first-child { text-align: left; width: 100%; }
.shop-panel .results-table td.hideout-b-action { width: 1%; }
.hideout-trophy {
  color: var(--gold); font-size: 0.9rem; margin: 0.5rem 0;
  border-left: 3px solid var(--gold); padding-left: 0.6rem;
}
/* Hideout layout: a persistent Boat panel on top, then a tab bar; one tab's panel shows at a time. */
.hideout-layout { margin-top: 0.8rem; }
.hideout-layout > .shop-panel { margin-bottom: 1rem; }

/* The boat and My Hideout share ONE panel shape, side by side above the tabs. */
.store-panel {
  background: var(--panel-grad);
  border: 1px solid var(--panel-border); border-radius: var(--radius-panel);
  padding: 0.9rem 1.1rem; display: flex; flex-direction: column;
}
.hideout-top > .store-panel { flex: 1 1 360px; min-width: 320px; }

/* Shared head row: title on the left, a capacity read-out on the far right, with a divider under it. */
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--divider-2); margin-bottom: 0.5rem;
}
.panel-title { color: var(--text); font-weight: 600; font-size: 1.1rem; }
.panel-icon { color: var(--gold); margin-right: 0.35rem; }
.panel-icon svg { width: 18px; height: 18px; vertical-align: -3px; }
.panel-cap { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.panel-cap b { color: var(--text); font-weight: 600; margin-left: 0.15rem; }
.boat-tier { color: var(--muted); font-size: 0.85rem; font-weight: 400; margin-left: 0.4rem; }

/* Boat head: no divider under the name; the divider sits under the Hull/Crew line instead. Applies to
   the Hideout's boat box and the Shop's copy of it. */
#boat-stats .panel-head,
#shop-boat-stats .panel-head { border-bottom: none; padding-bottom: 0; margin-bottom: 0.5rem; }
/* Stat line — plain text (no pills), same style as the hideout's weight read-out. */
.boat-chips {
  display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 0.5rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--divider-2);
}
.boat-chip { color: var(--muted); font-size: 0.9rem; }
.boat-chip b { color: var(--text); font-weight: 600; margin-left: 0.2rem; }
.boat-chip .bs-good { color: var(--good); }
.boat-chip .bs-mid { color: var(--warn); }
.boat-chip .bs-low { color: var(--bad); }
.panel-cap .bs-low { color: var(--bad); }
/* Round-shot warning chip in the boat panel (item 2): yellow, sits right of the hull chip. */
.boat-ammo-warn { color: #e6c34a; font-size: 0.9rem; font-weight: 600; align-self: center; }

/* Sub-heading above the boat's goods table ("Hold"). */
.store-section-head { color: var(--gold); font-weight: 600; font-size: 0.9rem; margin: 0.5rem 0 0.35rem; letter-spacing: 0.03em; }
.store-table .inv-table { width: 100%; }

/* Hideout tab bar: one section shown at a time. */
.hideout-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--divider); margin-bottom: 1rem; }
.htab {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 0.5rem 1rem; margin-bottom: -1px;
  color: var(--muted); font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.htab:hover { color: var(--text); background: rgba(20, 33, 44, 0.5); }
.htab[data-active="1"] {
  color: var(--text); background: linear-gradient(180deg, rgba(20, 33, 44, 0.95), rgba(11, 22, 31, 0.5));
  border-color: var(--panel-border); border-bottom: 1px solid #0b161f;
}
.shop-market th {
  color: var(--muted); font-size: 0.78rem; font-weight: normal; text-align: left;
  padding: 0.15rem 0.9rem; border-bottom: 1px solid var(--divider-2);
}
.shop-market td { padding: 0.2rem 0.9rem; color: var(--text); text-align: left; }
.shop-qty {
  width: 5.5rem; font: inherit; background: var(--bar-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.15rem 0.4rem;
}
.shop-line { color: var(--muted); font-size: 0.85rem; }
.shop-sellall {
  font: inherit; font-size: 0.8rem; padding: 0.15rem 0.7rem; cursor: pointer;
  background: #1b2f3f; color: var(--gold); border: 1px solid var(--border); border-radius: 3px;
}
.shop-empty { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.shop-total { color: var(--text); font-size: 0.95rem; margin: 0.6rem 0 0.2rem; }
.shop-total-short { color: #e08a6a; }
/* Running totals line under the Exchange button (item 7): its own row below the two buttons. */
.shop-head-totals { flex-basis: 100%; text-align: right; margin: 0.3rem 0 0; font-size: 0.9rem; }
.shop-head-totals b { color: var(--text); font-weight: 600; }
.hideout-repair { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0; flex-wrap: wrap; }
.hideout-repair span { color: var(--muted); font-size: 0.82rem; }

/* Unified boat-condition strip across the Canon play screens (M7.1a-9). */
.boat-strip {
  max-width: 820px; margin: 0.6rem auto 0.8rem; padding: 0.4rem 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; justify-content: center;
  background: rgba(4, 16, 26, 0.6); border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.82rem; color: var(--muted);
}
.boat-strip .bs-ship { color: var(--gold); font-weight: 600; }
.boat-strip b { color: var(--text); font-weight: 600; }
.boat-strip .bs-good { color: var(--hp-good); }
.boat-strip .bs-mid { color: var(--warn); }
.boat-strip .bs-low { color: var(--danger); }

/* Drag-to-change number boxes (Cargo, Shop, recruit): no spinner arrows; drag left/right to change,
   still typeable. The pointer drag is driven by canon.js (initScrub). */
input.scrub { cursor: ew-resize; -moz-appearance: textfield; appearance: textfield; }
input.scrub::-webkit-outer-spin-button,
input.scrub::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.scrub.scrubbing { background: #22384a; border-color: var(--gold); }

/* Ship rename control in the shipyard (M7.1a-8). */
.ship-rename { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.ship-rename-input {
  flex: 1; max-width: 220px; font: inherit; font-size: 0.9rem;
  color: var(--text); background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.3rem 0.55rem; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.ship-rename-input:hover { border-color: #6d8ba1; }
.ship-rename-input:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(200, 180, 135, 0.28); }
.hideout-b-name { color: var(--text); font-size: 0.95rem; }
.hideout-b-level { color: var(--muted); font-size: 0.8rem; margin-left: 0.4rem; }
.hideout-b-blurb { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.hideout-b-action { text-align: right; white-space: nowrap; }
.hideout-build-btn { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
.hideout-build-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hideout-maxed { color: #7f8f7a; font-size: 0.82rem; }
.ship-activate-btn, .ship-buy-btn, .ship-upgrade-btn, .ship-send-btn { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
.ship-activate-btn:disabled, .ship-buy-btn:disabled, .ship-upgrade-btn:disabled, .ship-send-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ship-send-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.ship-active { color: #8fc98a; font-size: 0.8rem; margin-left: 0.3rem; }
.ship-upg-head { margin-top: 0.7rem; color: var(--text); }

/* Fleet view — one card per ship, then a buy row (2026-08-29 Fleet Phase 1). */
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; margin: 0.2rem 0 0.6rem; }
.fleet-card { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(20, 33, 44, 0.9), rgba(11, 22, 31, 0.9)); border: 1px solid var(--panel-border); border-radius: 8px; padding: 0.7rem; }
.fleet-card.is-flagship { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(200, 180, 135, 0.35); }
.fleet-card.is-wrecked { border-color: #7a4a40; }
.fleet-card.is-away { opacity: 0.9; }
.fleet-art { height: 96px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(circle at 50% 118%, rgba(34, 80, 106, 0.35), transparent 68%); border-radius: 6px; margin-bottom: 0.5rem; }
.fleet-svg { width: 150px; max-width: 100%; height: 100%; }
.fleet-canvas { width: 150px; max-width: 100%; height: 94px; display: block; }
.fleet-head { margin-bottom: 0.45rem; }
.fleet-name { color: var(--text); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.fleet-sub { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; flex-wrap: wrap; }
.fleet-tier { color: var(--muted); font-size: 0.78rem; }
.fleet-badge { font-size: 0.66rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid; }
.fleet-badge.is-flagship { color: #1b2b1c; background: var(--gold); border-color: var(--gold); }
.fleet-badge.is-port { color: #8fc98a; background: rgba(111, 179, 106, 0.14); border-color: #4a7050; }
.fleet-badge.is-away { color: var(--warn); background: rgba(216, 165, 49, 0.12); border-color: #7a6636; }
.fleet-badge.is-wrecked { color: #e08a76; background: rgba(209, 97, 74, 0.14); border-color: #7a4a40; }
.fleet-cond { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.45rem; }
.fleet-cond .hp-track { flex: 1; }
.fleet-cond-pct { color: var(--muted); font-size: 0.78rem; min-width: 3.4rem; text-align: right; }
.fleet-chips { display: flex; gap: 0.9rem; margin-bottom: 0.45rem; }
.fleet-chip { color: var(--muted); font-size: 0.82rem; }
.fleet-chip b { color: var(--text); margin-left: 0.25rem; }
.fleet-uchips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.fleet-uchip { font-size: 0.72rem; color: #cbe0d0; background: rgba(74, 112, 80, 0.18); border: 1px solid #3d5a44; border-radius: 4px; padding: 0.1rem 0.35rem; }
.fleet-uchips-none { color: #6d7d8a; font-size: 0.76rem; font-style: italic; }
.fleet-card .ship-rename { margin-bottom: 0.45rem; }
.fleet-card .ship-rename-input { flex: 1; min-width: 0; }
.fleet-body { margin-top: auto; }
.fleet-status-note { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.4rem; }
.fleet-send { margin-top: 0.5rem; }
.fleet-send-label { color: var(--muted); font-size: 0.78rem; margin-bottom: 0.3rem; }
.fleet-send-note { color: #6d7d8a; font-size: 0.72rem; font-style: italic; margin-top: 0.35rem; }
/* Away-task send buttons (Fleet Phase 3): a small stacked card with a risk tag, name, and ≈ terms. */
.ship-send-opts .ship-send-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; text-align: left; padding: 0.35rem 0.5rem; min-width: 6.6rem; }
.fleet-send-name { color: var(--text); font-weight: 600; font-size: 0.8rem; }
.fleet-send-terms { color: #9fb2c0; font-size: 0.72rem; }
.fleet-risk { align-self: flex-start; font-size: 0.6rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 999px; border: 1px solid; }
.fleet-risk.risk-safe { color: #8fc98a; border-color: #4a7050; background: rgba(111, 179, 106, 0.14); }
.fleet-risk.risk-recovery { color: #7fc0c6; border-color: #3a6670; background: rgba(90, 170, 180, 0.14); }
.fleet-risk.risk-scout { color: #d8c531; border-color: #7a6c36; background: rgba(216, 197, 49, 0.12); }
.fleet-risk.risk-risky { color: #e0a331; border-color: #7a6636; background: rgba(216, 150, 49, 0.14); }
.fleet-risk.risk-aggressive { color: #e08a76; border-color: #7a4a40; background: rgba(209, 97, 74, 0.16); }
/* The result of a ship's last finished away task, shown on its card until it is sent again. */
.fleet-last { color: #cbe0d0; font-size: 0.78rem; margin: 0 0 0.4rem; padding: 0.3rem 0.45rem; background: rgba(74, 112, 80, 0.14); border-left: 2px solid #4a7050; border-radius: 4px; }
.fleet-upg-title { color: var(--gold); font-size: 0.85rem; margin: 0.55rem 0 0.3rem; }
.fleet-upg-table td { padding: 0.25rem 0.3rem; }
.fleet-buy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }
.fleet-buy-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--panel-flat); border: 1px solid var(--divider); border-radius: 8px; padding: 0.7rem; }
.fleet-buy-art { height: 84px; display: flex; align-items: flex-end; justify-content: center; }
.fleet-buy-art .fleet-svg { width: 130px; height: 100%; }
.fleet-buy-name { color: var(--text); font-weight: 600; margin: 0.35rem 0 0.15rem; }
.fleet-tier { color: var(--muted); font-size: 0.78rem; }
.fleet-buy-blurb { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.55rem; }

.hideout-crew-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hideout-crew-row input { width: 5rem; }
.hideout-note { color: var(--muted); font-size: 0.85rem; margin: 0.4rem 0; }
.hideout-over { color: #e08a6a; }

/* Tavern: missions + intel (M6.2c). */
.mission-accept-btn, .intel-buy-btn { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
.mission-accept-btn:disabled, .intel-buy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mission-met { color: #8fc98a; font-size: 0.82rem; white-space: nowrap; }
.intel-readout { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; text-align: left; }
.intel-card { flex: 1 1 240px; background: var(--panel-flat); border: 1px solid var(--divider); border-radius: 6px; padding: 0.5rem 0.7rem; }
.intel-card h4 { margin: 0 0 0.3rem; color: var(--text); font-size: 0.88rem; }
.intel-card p { margin: 0.15rem 0; color: #b8c6d0; font-size: 0.82rem; }
.intel-card ul { margin: 0.2rem 0 0; padding-left: 1.1rem; color: #b8c6d0; font-size: 0.82rem; }
.intel-title { color: var(--text); font-size: 1rem; margin: 0.8rem 0 0.2rem; }

/* Start-the-round button pulled to the top of the hideout screen. */
.hideout-top-actions { margin-top: 0.8rem; margin-bottom: 0.2rem; }

/* Boat health status bar. */
.hideout-health { text-align: left; margin: 0; }
.hideout-health:empty { display: none; }
.hideout-health .hp-hint { margin: 0.3rem 0 0; }
.hideout-health-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; }
.hideout-health-label { color: var(--text); font-size: 0.9rem; }
.hideout-health-pct { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.hp-track { height: 12px; border-radius: 6px; background: #1b2b38; border: 1px solid var(--divider); overflow: hidden; }
.hp-fill { height: 100%; border-radius: 6px 0 0 6px; transition: width 0.2s ease; }
.hp-fill.hp-good { background: var(--good); }
.hp-fill.hp-mid { background: #d6b24a; }
.hp-fill.hp-low { background: var(--bad); }
.inv-panel { display: flex; gap: 1rem; flex-wrap: wrap; }
.inv-col { flex: 1 1 260px; min-width: 240px; }
.inv-head { color: var(--text); font-weight: 600; margin-bottom: 0.2rem; }
.inv-table { font-size: 0.85rem; }
.inv-table td { padding: 0.2rem 0.3rem; vertical-align: middle; }
.inv-qty { width: 4rem; }
.inv-acts { white-space: nowrap; text-align: right; }
.inv-btn { font-size: 0.72rem; padding: 0.2rem 0.4rem; margin-left: 0.2rem; }
.inv-have { text-align: right; color: var(--muted); }
.inv-table thead th {
  text-align: left; color: #7f93a3; font-weight: 600; font-size: 0.72rem;
  padding: 0 0.3rem 0.25rem; border-bottom: 1px solid var(--divider-2);
}
.inv-table thead th.inv-sendto-h { text-align: right; }
/* Send-to icon buttons: a boat / hideout-chest / wave glyph with a native tooltip (title). */
.inv-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; margin-left: 0.3rem;
  background: var(--btn); color: #cfe0ec; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
}
.inv-icon-btn:hover { background: var(--btn-hover); color: var(--text); }
.inv-icon-btn.inv-sea:hover { background: #23506a; color: #bfe0f2; }
.inv-icon-btn svg { display: block; }
/* Gold line with the coin icon. */
.coin-icon { vertical-align: -3px; margin-right: 0.15rem; }
.gold-line b { color: var(--text); }
.gold-line span { color: #7f93a3; }
#hideout-who .coin-icon { vertical-align: -3px; }
#hideout-who b { color: var(--text); }

/* Wanted-level badge (The New NPC update, Phase 1): the player's 0–100 heat with the navy + hunters,
   shown beside the gold on the hideout header. Colour deepens with the tier. */
.hideout-wanted { display: inline-block; font-size: 0.72rem; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid; margin-left: 0.5rem; vertical-align: 2px; cursor: help; }
.hideout-wanted.wanted-0 { color: #9fb0a0; background: rgba(120, 140, 120, 0.12); border-color: #4a5a4c; }
.hideout-wanted.wanted-1 { color: #d8c26a; background: rgba(216, 194, 106, 0.10); border-color: #6a6236; }
.hideout-wanted.wanted-2 { color: #e0a531; background: rgba(224, 165, 49, 0.13); border-color: #7a6636; }
.hideout-wanted.wanted-3 { color: #e8895f; background: rgba(232, 137, 95, 0.15); border-color: #7a4a3a; }
.hideout-wanted.wanted-4 { color: #f2d0c4; background: rgba(209, 74, 74, 0.28); border-color: #b23b3b; }

/* One Deck — the shared month header band. Title + the captain's standing (purse + wanted) on the
   left, the screen's actions on the right, pinned to the top of the scrolling menu layer so the same
   identity strip sits on top of every Canon month screen (Shop, Hideout, Set sail, Waiting, Results).
   Pinning also means pressing Tab — which scrolls a below-the-fold control into view — never carries
   the heading off the top; the opaque band keeps scrolling content from showing through the title. */
.month-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5;
  background: var(--head-bg); border-bottom: 1px solid var(--head-border);
  padding-top: 0.4rem; padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.month-head-left {
  display: flex; align-items: baseline; gap: 0.7rem 0.9rem; flex-wrap: wrap; min-width: 0;
}
.month-head-left h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.8rem); }
/* Captain status cluster: purse (coin + gold) then the wanted badge — same on every month screen. */
.month-status { display: inline-flex; align-items: baseline; gap: 0.1rem; font-size: 1.5rem; color: var(--text); }
.month-status b { color: var(--text); font-weight: 600; }
.month-status:empty { display: none; }
.month-status .coin-icon, #hideout-who .coin-icon, #shop-who .coin-icon {
  width: 24px; height: 24px; vertical-align: -5px; margin-right: 0.2rem;
}
#hideout-who b { color: var(--text); }

/* Top row: boat (left) and My Hideout (right), each half, side by side, equal height. */
.hideout-top { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 1rem; }

/* Cargo heading with its help text right beside it (heading stays put, text follows). */
.cargo-head { justify-content: flex-start; gap: 0.9rem; }
.cargo-head-note { margin: 0; }

/* Themed number box (replaces the plain white input): a dark slot with a brass focus glow. */
.inv-qty {
  width: 3.6rem; text-align: center; font: inherit; font-size: 0.9rem;
  color: var(--text); background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.25rem 0.3rem; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.inv-qty:hover { border-color: #6d8ba1; }
.inv-qty:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(200, 180, 135, 0.28); }
.inv-qty.scrubbing { border-color: var(--gold); background: #14283a; }
.inv-weight { margin: 0.2rem 0 0.4rem; font-size: 0.82rem; }

/* Feedback line under the panels — plain text, no bar; empty by default so nothing shows. */
.hideout-status-line { min-height: 1.2rem; margin: 0.6rem 0 0; color: #e08a6a; font-size: 0.9rem; }
/* margin-left:auto keeps the action buttons on the right even when the header wraps to a second line
   (a long title like "Month 10 — Shop" pushes them down; without this they would left-align there). */
.month-head-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-left: auto; }

/* Hull bar as a repair button when the ship is damaged. */
.hp-clickable { cursor: pointer; }
.hp-clickable:hover .hp-track { border-color: var(--gold); }
.hp-hint { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--gold); }

/* Repair dialog. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 8, 14, 0.72);
}
/* The display:flex above would override the `hidden` attribute, so restore hide-when-hidden. */
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--panel-flat); border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 1.1rem 1.3rem; max-width: 380px; width: calc(100% - 2rem); text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.modal-box h3 { margin: 0 0 0.5rem; color: var(--text); }
.modal-box p { margin: 0 0 1rem; color: #b8c6d0; font-size: 0.92rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* In-raid pause menu (Controller Controls): the options stack and the controller's highlight ring
   shows which one A will pick. Works with mouse hover too. */
.pause-box { text-align: center; max-width: 320px; }
.pause-box h3 { text-align: center; }
.pause-hint { text-align: center; color: #8ea3b2; font-size: 0.82rem; }
.pause-actions { flex-direction: column; align-items: stretch; justify-content: center; gap: 0.55rem; }
.pause-opt { font-size: 1rem; padding: 0.6rem 1rem; }
.pause-opt.is-selected {
  outline: 2px solid var(--go); outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(90, 170, 90, 0.25);
}

/* Ship design picker (Fleet Phase 2). */
.appear-box { max-width: 420px; }
.appear-preview-wrap {
  display: flex; justify-content: center; margin: 0 0 0.9rem;
  background: radial-gradient(circle at 50% 120%, rgba(34, 80, 106, 0.4), transparent 70%);
  border: 1px solid var(--divider); border-radius: 6px; padding: 0.3rem;
}
.appear-preview { width: 220px; max-width: 100%; height: 180px; display: block; }
.appear-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.appear-row { display: flex; align-items: center; gap: 0.5rem; }
.appear-label { width: 3.6rem; color: var(--muted); font-size: 0.9rem; }
.appear-arrow {
  width: 2rem; height: 2rem; flex: none; padding: 0; line-height: 1;
  background: var(--btn); border: 1px solid var(--border); border-radius: 4px; color: var(--text); cursor: pointer;
}
.appear-arrow:hover { background: var(--btn-hover); }
.appear-val { flex: 1; text-align: center; color: var(--text); font-size: 0.92rem; }
.appear-tint { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
.appear-tint .appear-label { padding-top: 0.3rem; }
.appear-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.appear-swatch {
  width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer;
}
.appear-swatch[data-selected="1"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(200, 180, 135, 0.4); }
.appear-swatch-none { background: var(--input-bg); color: var(--muted); font-size: 0.8rem; line-height: 1; }
.waiting-count { font-size: 1.05rem; color: var(--text); margin: 0.4rem 0; }

/* ===== One Deck: the shared Canon month frame ==========================================
   Every month screen (Shop, Hideout, Set sail, Waiting, Results) wears this frame so moving
   between them reads as turning around on one ship, not loading new pages: one width, one header
   band (above), and a gentle appear. Sparse screens centre their body inside the same width. */
.month-screen {
  width: 100%; max-width: var(--month-max); margin: 0 auto;
  text-align: left; padding: 1.1rem 1.1rem 3rem;
  /* The menu layer is a centred grid; without this a short month screen (Set sail, Waiting, Results)
     is centred vertically and its header floats in the middle. Pin the screen to the top so the
     header band sits at the top of the window and its `position: sticky` can hold it there. */
  align-self: start;
}
.month-screen[hidden] { display: none; }
/* A short rise + fade when a month screen is shown (the [hidden] attribute is removed on route). */
.month-screen:not([hidden]) { animation: month-appear 170ms ease-out both; }
@keyframes month-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .month-screen:not([hidden]) { animation: none; } }
/* Sparse screens (Waiting, Results) centre their body content in a readable column under the full
   width header, so a short table or a stat row does not sit lost at the far left. */
.month-body-center { max-width: 760px; margin: 0.4rem auto 0; text-align: center; }
.month-body-center .results-table { margin-left: auto; margin-right: auto; }

/* ===== The Fleet — the "Waiting for the fleet" destination ==============================
   A living page while the month closes: an animated sea band with a ship per captain, a progress
   line, and tabs (Fleet, Your Haul; The World and Crew & Records come in later phases). Built to
   read richer than the other screens — depth on the cards, a warm lantern accent for captains home. */

/* Animated sea band: a canvas the full width of the frame. */
.fleet-sea {
  margin: 0.2rem 0 0.9rem; border: 1px solid var(--panel-border); border-radius: var(--radius-panel);
  overflow: hidden; background: #0a1c28; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}
.fleet-sea canvas { display: block; width: 100%; height: auto; }

/* Progress line: count, a rope-style bar, and who is still at sea. */
.fleet-progress { text-align: center; margin-bottom: 0.6rem; }
.fleet-progress .waiting-count { font-size: 1.1rem; color: var(--text); margin: 0.2rem 0; }
.fleet-bar {
  height: 10px; max-width: 460px; margin: 0.4rem auto; border-radius: 999px;
  background: #0c1c27; border: 1px solid var(--panel-border); overflow: hidden;
}
.fleet-bar-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3c6b50, var(--lantern));
  box-shadow: 0 0 8px rgba(255, 196, 90, 0.5); transition: width 0.4s ease;
}
.fleet-atsea { color: var(--gold); font-size: 0.9rem; margin: 0.2rem 0; }

/* Tab bar reuses .hideout-tabs / .htab; centre it on this screen. */
.fleet-tabs { justify-content: center; }
.fleet-tabpanel { animation: month-appear 160ms ease-out both; }
.fleet-sub { text-align: center; color: var(--gold); margin: 1.2rem 0 0.4rem; }

/* Group totals strip. */
.fleet-totals {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: center;
  color: var(--muted); font-size: 0.92rem; margin: 0.2rem 0 1rem;
}
.fleet-total b { color: var(--text); font-weight: 600; margin-right: 0.15rem; }
.fleet-total .coin-icon { width: 15px; height: 15px; vertical-align: -2px; }

/* Rogues' Gallery — a card per captain. */
.rogues-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem; margin: 0 0 1rem;
}
.rogue-card {
  position: relative; text-align: center; padding: 0.9rem 0.8rem 0.8rem;
  background: var(--panel-grad); border: 1px solid var(--panel-border); border-radius: var(--radius-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.rogue-card.is-sailing { opacity: 0.72; }
.rogue-card.is-me { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 16px rgba(0, 0, 0, 0.3); }
.rogue-card.is-home { border-top: 2px solid var(--lantern); }
.rogue-lantern {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--lantern);
  box-shadow: 0 0 10px 3px rgba(255, 196, 90, 0.6);
}
.rogue-art {
  width: 120px; height: 96px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 120%, rgba(34, 80, 106, 0.4), transparent 70%);
  border-radius: 6px;
}
.rogue-art canvas { width: 120px; height: 96px; }
.rogue-name { font-weight: 700; color: var(--text); font-size: 1.02rem; }
.rogue-you {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lantern);
  border: 1px solid rgba(255, 196, 90, 0.5); border-radius: 999px; padding: 0 0.35rem; vertical-align: 1px;
}
.rogue-nums { display: flex; gap: 0.9rem; justify-content: center; margin: 0.15rem 0; }
.rogue-num { display: flex; flex-direction: column; align-items: center; color: var(--text); font-weight: 600; }
.rogue-num small { color: var(--muted); font-size: 0.66rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; }
.rogue-num .coin-icon { width: 14px; height: 14px; vertical-align: -2px; }
.rogue-blurb { color: var(--muted); font-size: 0.82rem; font-style: italic; line-height: 1.35; min-height: 2.2em; }
.rogue-sailing { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.rogue-watch {
  margin-top: 0.2rem; font-size: 0.82rem; padding: 0.3rem 0.9rem;
  background: var(--go); border: 1px solid var(--go-border); color: var(--text); border-radius: 4px; cursor: pointer;
}
.rogue-watch:hover { background: var(--go-hover); }
.rogue-watch:disabled { opacity: 0.4; cursor: default; }

/* Standings table. */
.fleet-standings-wrap { overflow-x: auto; }
.fleet-standings { width: 100%; max-width: 720px; margin: 0.2rem auto; border-collapse: collapse; font-size: 0.9rem; }
.fleet-standings th, .fleet-standings td { padding: 0.35rem 0.7rem; border-bottom: 1px solid var(--divider-2); }
.fleet-standings th.fleet-sort { color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; text-align: left; }
.fleet-standings th.num, .fleet-standings td.num { text-align: right; }
.fleet-standings th.fleet-sort:hover { color: var(--text); }
.fleet-standings td.muted { color: var(--muted); }
.fleet-standings .fleet-cap { color: var(--text); }
.fleet-standings .fleet-row-me { background: rgba(200, 180, 135, 0.08); }
.fleet-standings .fleet-row-me .fleet-cap { color: var(--gold); }

/* Finisher ticker — the Gazette-style raid reports. */
.fleet-ticker { list-style: none; padding: 0; margin: 1rem auto 0; max-width: 720px; }
.fleet-ticker li {
  border-left: 3px solid var(--gold); background: rgba(4, 16, 26, 0.4);
  padding: 0.3rem 0.7rem; margin: 0.3rem 0; font-size: 0.88rem; color: var(--text); border-radius: 0 3px 3px 0;
}
.fleet-ticker .fleet-ticker-empty { border-left-color: var(--muted); color: var(--muted); font-style: italic; }

/* Your Haul tab. */
.fleet-empty { color: var(--muted); font-style: italic; text-align: center; margin: 2rem 0; }
.haul-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0.4rem 0 1rem; }
.haul-big {
  min-width: 200px; text-align: center; padding: 0.7rem 1.2rem;
  background: var(--panel-grad); border: 1px solid var(--panel-border); border-radius: var(--radius-panel);
}
.haul-big-num { display: block; font-size: 1.7rem; color: var(--text); }
.haul-big-num .coin-icon { width: 22px; height: 22px; vertical-align: -3px; }
.haul-big-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.haul-load { max-width: 520px; margin: 0 auto 1.2rem; }
.haul-load-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.9rem; margin-bottom: 0.3rem; }
.haul-load-row b { color: var(--text); }
.haul-load-note { color: var(--muted); font-size: 0.82rem; font-style: italic; margin: 0.3rem 0 0; text-align: center; }
.haul-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem;
  max-width: 720px; margin: 0 auto;
}
.haul-stat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.35rem 0.6rem; background: rgba(4, 16, 26, 0.4);
  border: 1px solid var(--divider-2); border-radius: 5px;
}
.haul-k { color: var(--muted); font-size: 0.8rem; }
.haul-v { color: var(--text); font-weight: 600; }

/* The World tab. */
.world-card {
  max-width: 720px; margin: 0 auto 1rem; padding: 0.8rem 1rem;
  background: var(--panel-grad); border: 1px solid var(--panel-border); border-radius: var(--radius-panel);
}
.world-h { color: var(--gold); margin: 0 0 0.5rem; font-size: 1.02rem; }
.world-brief { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-bottom: 0.4rem; }
.world-fact { color: var(--muted); font-size: 0.9rem; }
.world-fact b { color: var(--text); margin-right: 0.15rem; }
.world-line { color: var(--text); font-size: 0.9rem; margin: 0.3rem 0; }
.world-sub { color: var(--muted); font-size: 0.82rem; margin: 0.3rem 0 0; font-style: italic; }
.world-postcard { margin-top: 0.7rem; display: flex; justify-content: center; }
#world-map { width: 360px; max-width: 100%; height: auto; border: 1px solid var(--panel-border); border-radius: 6px; }

/* State of the seas — a tiny bar chart of loot price per month. */
.seas-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 90px; padding: 0.3rem 0; }
.seas-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.seas-bar span { display: block; width: 70%; min-height: 2px; background: linear-gradient(180deg, var(--lantern), #3c6b50); border-radius: 3px 3px 0 0; }
.seas-bar small { color: var(--muted); font-size: 0.66rem; margin-top: 0.2rem; }

/* Heat + company standings rows. */
.heat-row { display: flex; align-items: center; gap: 0.7rem; margin: 0.3rem 0; color: var(--muted); font-size: 0.9rem; }
.heat-row span { min-width: 8.5rem; }
.heat-row b { color: var(--text); }
.heat-track { flex: 1; max-width: 220px; }

/* World logbook. */
.logbook { list-style: none; padding: 0; margin: 0; }
.logbook li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--divider-2); }
.logbook li:last-child { border-bottom: none; }
.log-month { color: var(--gold); font-weight: 600; min-width: 5rem; }
.log-top { color: var(--text); font-size: 0.9rem; }
.log-head { color: var(--muted); font-size: 0.82rem; font-style: italic; flex-basis: 100%; }

/* Crew & Records tab. */
.crew-tag {
  display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.05rem 0.45rem; border-radius: 999px; margin-right: 0.35rem; vertical-align: 1px;
}
.crew-in { color: var(--lantern); border: 1px solid rgba(255, 196, 90, 0.5); }
.crew-out { color: var(--bad); border: 1px solid rgba(209, 97, 74, 0.5); }
.crew-roster { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.crew-hand {
  font-size: 0.85rem; color: var(--text); background: rgba(4, 16, 26, 0.5);
  border: 1px solid var(--divider-2); border-radius: 4px; padding: 0.2rem 0.55rem;
}
.crew-hand.crew-more { color: var(--muted); font-style: italic; }

/* The Gazette — a real newspaper column on the Results screen, no longer the in-game combat feed
   (.hud-feed) which pinned it to the bottom-left corner. A centred, ruled column with a masthead. */
.gazette { max-width: 620px; margin: 0.6rem auto 0; text-align: left; }
.gazette-masthead {
  text-align: center; color: var(--gold); font-variant: small-caps; letter-spacing: 0.08em;
  font-size: 1.15rem; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
  padding: 0.3rem 0; margin: 0 0 0.6rem;
}
.gazette ul { list-style: none; padding: 0; margin: 0; }
.gazette li {
  border-bottom: 1px solid var(--divider-2); padding: 0.45rem 0.2rem 0.45rem 0.8rem;
  font-size: 0.95rem; line-height: 1.45; color: var(--text); position: relative;
}
.gazette li::before { content: "❧"; position: absolute; left: 0; color: var(--gold); opacity: 0.7; }
.gazette li:last-child { border-bottom: none; }

/* Readiness pill in the Fleet top bar: grey and non-clickable while captains are still at sea. The
   green Continue button (.month-go) replaces it once every captain is home and the month closes. */
.fleet-ready {
  font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted); background: rgba(120, 140, 120, 0.12);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.34rem 0.85rem;
}

/* The closed-month outcome + The Gazette, at the bottom of the Fleet screen (was screen-canon-results).
   A rope divider marks it off from the live fleet above; it is hidden until the month resolves. */
.fleet-outcome {
  max-width: 92vw; margin: 1.4rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--border); text-align: center;
}
.fleet-outcome-title { margin-bottom: 0.15rem; }
.fleet-outcome .subtitle { margin-top: 0.2rem; }

/* M6.2b combat variety: selected shot type in the HUD, and the rum ration picker. */
.shot-sel { font-weight: 700; color: #ffd479; }
/* Damage update Phase 2: shot types the active gun cannot load (e.g. the King's Cannon greys
   chain/grape/fire) — dimmed and struck through so the player sees they will not fire. */
.shot-off { opacity: 0.4; text-decoration: line-through; }
.rum-picker {
  margin: 0.6rem 0; padding: 0.5rem 0.7rem;
  background: rgba(4, 16, 26, 0.5); border-left: 3px solid var(--gold); border-radius: 4px;
}
.rum-picker label { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; }
.rum-picker select { padding: 0.3rem 0.5rem; font-size: 0.9rem; }

/* M6.3a settings: rebind controls + audio sliders. */
.settings-block { max-width: 560px; margin: 1.2rem auto; text-align: left; }
.settings-controls { width: 100%; }
.settings-controls th { color: var(--muted); text-align: left; font-weight: normal; padding: 0.15rem 0.9rem; }
.settings-controls td:first-child { color: var(--text); text-align: left; }
.settings-controls td:nth-child(2) { color: var(--gold); text-align: left; font-weight: 700; }
.settings-controls td:last-child { text-align: right; }
.settings-rebind { padding: 0.3rem 0.9rem; font-size: 0.85rem; }
.settings-rebind.is-capturing { background: #6b4a1d; border-color: var(--gold); }
.settings-conflict-cell { color: #e08a5a !important; }
.settings-hint { color: #e08a5a; font-size: 0.85rem; margin: 0.2rem 0 0.6rem; }

/* Drawn controller picture in Settings (Controller Controls Phase 4). Colours reuse the menu tokens
   so it matches the rest of the screen; gold = a rebindable action (click to rebind), muted = fixed. */
.pad-pic { max-width: 470px; margin: 0.5rem auto 0.3rem; }
.pad-pic svg { width: 100%; height: auto; display: block; }
.pad-cap-note { color: var(--muted); font-size: 0.82rem; margin: 0.1rem 0 0.6rem; }
.pad-body { fill: #14212C; stroke: var(--panel-border); stroke-width: 2; }
.pad-btn { fill: #1D3A4D; stroke: var(--border); stroke-width: 2; }
.pad-btn.pad-on { stroke: var(--gold); stroke-width: 2.5; }
.pad-btn.pad-hot { stroke: var(--gold); stroke-width: 3.5; }
.pad-stickbase { fill: #0C1A24; stroke: var(--border); stroke-width: 2; }
.pad-stickbase.pad-on { stroke: var(--gold); stroke-width: 2.5; }
.pad-stickbase.pad-hot { stroke: var(--gold); stroke-width: 3.5; }
.pad-stickcap { fill: #24445C; stroke: var(--border); stroke-width: 2; }
.pad-glyph { fill: var(--gold); font: 700 15px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.pad-glyph-sm { font-size: 10px; fill: var(--muted); }
.pad-lead { stroke: var(--muted); stroke-width: 1; opacity: 0.5; }
.pad-fixed text { fill: var(--muted); font: 400 12px system-ui, sans-serif; }
.pad-hit { cursor: pointer; }
.pad-hit text { fill: var(--gold); font: 600 12px system-ui, sans-serif; }
.pad-hit .pad-lbl-bg { fill: #1D3A4D; stroke: var(--border); stroke-width: 1; }
.pad-hit:hover .pad-lbl-bg { fill: #27506A; }
.pad-hit.pad-capturing text { fill: #FFFFFF; }
.pad-hit.pad-capturing .pad-lbl-bg { fill: #6b4a1d; stroke: var(--gold); }
.settings-slider {
  display: grid; grid-template-columns: 6rem 1fr 3rem; align-items: center; gap: 0.7rem;
  margin: 0.5rem 0;
}
.settings-slider-name { color: var(--muted); }
.settings-slider input[type="range"] { width: 100%; }
.settings-pct { color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }

/* M6.4b email notifications: two server-backed toggles + the one-click unsubscribe notice. */
.settings-toggle {
  display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.5rem 0;
  color: var(--text); cursor: pointer; line-height: 1.4;
}
.settings-toggle input[type="checkbox"] { margin-top: 0.2rem; flex: none; }
#menu-notice {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #2b4a26; color: #eaf6e2; border-bottom: 1px solid #4c7a44;
  padding: 0.7rem 1rem; text-align: center; font-size: 0.9rem; cursor: pointer;
}

/* M6.3b How to Play — the full reference (a table-heavy field guide). */
.howto-content { text-align: left; max-width: 820px; margin: 0 auto; }
.howto-section {
  margin: 0 0 1.6rem; padding: 0 0 1.2rem; border-bottom: 1px solid #223846;
}
.howto-h {
  font-size: 1.25rem; color: var(--gold); margin: 0.4rem 0 0.5rem;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.howto-p { color: #d6c7a8; line-height: 1.5; margin: 0.4rem 0; font-size: 0.95rem; }
.howto-list { color: #d6c7a8; line-height: 1.55; margin: 0.4rem 0; padding-left: 1.3rem; }
.howto-list li { margin: 0.2rem 0; }
.howto-list strong { color: var(--text); }

/* Reference tables: their own style (the results-table label/value colouring does not fit). */
.howto-table-wrap { overflow-x: auto; margin: 0.6rem 0; }
.howto-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; min-width: 380px; }
.howto-table th {
  text-align: left; font-weight: normal; color: var(--muted); border-bottom: 1px solid var(--border);
  padding: 0.3rem 0.7rem; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem;
}
.howto-table td {
  padding: 0.28rem 0.7rem; color: var(--text); border-bottom: 1px solid #172a37;
  vertical-align: top;
}
.howto-table tbody tr:hover { background: rgba(39, 80, 106, 0.25); }

/* A building/upgrade sub-block with its own small levels table. */
.howto-sub { margin: 0.8rem 0; padding-left: 0.8rem; border-left: 2px solid #2b4657; }
.howto-sub-h { font-size: 1rem; color: var(--text); margin: 0.2rem 0; }
.howto-sub-blurb { color: #9fb2c0; font-size: 0.88rem; margin: 0.1rem 0 0.3rem; }

/* Update history (collapsible). */
.howto-history-toggle { margin: 0.4rem 0; font-size: 0.9rem; }
.howto-history { margin-top: 0.6rem; }
.howto-change { margin: 0 0 0.9rem; }
.howto-change-head { margin: 0.2rem 0; display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.howto-change-ver { color: var(--text); font-weight: 700; }
.howto-change-meta { color: var(--muted-2); font-size: 0.8rem; }
.howto-change-notes { color: #d6c7a8; font-size: 0.9rem; margin: 0.2rem 0; padding-left: 1.2rem; line-height: 1.5; }

/* Comment layer: highlights, the floating add button, the section badge, and the thread bubble. */
mark.howto-mark {
  background: rgba(216, 165, 49, 0.28); color: inherit; cursor: pointer;
  border-bottom: 1px dashed var(--warn); border-radius: 2px; padding: 0 1px;
}
mark.howto-mark:hover { background: rgba(216, 165, 49, 0.45); }
.howto-count {
  font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 10px;
  background: #24455a; border-color: var(--border); color: var(--gold);
}
.howto-orphans {
  margin: 0.3rem 0 0.6rem; padding: 0.4rem 0.7rem; border-left: 2px solid #6b4a1d;
  background: rgba(107, 74, 29, 0.12);
}
.howto-orphans-head { color: #b08a4a; font-size: 0.8rem; margin: 0 0 0.3rem; }
.howto-orphan {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--gold); font-size: 0.82rem; padding: 0.15rem 0; cursor: pointer;
}
.howto-orphan:hover { color: var(--text); text-decoration: underline; }
.howto-add-btn {
  position: absolute; z-index: 40; transform: translate(-50%, -100%);
  font-size: 0.78rem; padding: 0.25rem 0.6rem; white-space: nowrap;
  background: #6b4a1d; border-color: var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.howto-bubble {
  position: absolute; z-index: 41; width: min(90vw, 320px); text-align: left;
  background: #0f2431; border: 1px solid var(--border); border-radius: 6px;
  padding: 0.7rem 0.8rem; box-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
.howto-bubble-quote {
  color: var(--gold); font-style: italic; font-size: 0.85rem; margin: 0 0 0.5rem;
  border-left: 2px solid #6b4a1d; padding-left: 0.5rem;
}
.howto-thread { max-height: 40vh; overflow-y: auto; margin-bottom: 0.4rem; }
.howto-comment { margin: 0 0 0.6rem; }
.howto-comment-meta {
  display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.1rem; font-size: 0.78rem;
}
.howto-comment-author { color: #7fb0c8; font-weight: 700; }
.howto-comment-del { color: #a06a5a; font-size: 0.75rem; }
.howto-comment-body { color: var(--text); font-size: 0.9rem; margin: 0; line-height: 1.4; white-space: pre-wrap; }
.howto-bubble-input {
  width: 100%; font: inherit; font-size: 0.88rem; resize: vertical;
  background: var(--bar-bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.4rem 0.5rem; margin-bottom: 0.4rem;
}
.howto-bubble-actions { display: flex; gap: 0.6rem; align-items: center; }
.howto-bubble-save { font-size: 0.85rem; padding: 0.3rem 0.9rem; }

/* M6.3c The Log Book — the player's own career with graphs. */
.logbook-content { text-align: left; max-width: 860px; margin: 0 auto; }
.logbook-block { margin: 0 0 1.4rem; }
.logbook-empty { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0; }

/* Career totals: a grid of number tiles. */
.logbook-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem;
  margin: 0.6rem 0;
}
.logbook-tile {
  background: #0f2431; border: 1px solid #223846; border-radius: 6px;
  padding: 0.6rem 0.7rem; text-align: center;
}
.logbook-tile-num { color: var(--gold); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.logbook-tile-label { color: var(--muted); font-size: 0.76rem; margin-top: 0.15rem; line-height: 1.2; }

/* World picker. */
.logbook-picker { display: flex; align-items: center; gap: 0.7rem; margin: 0.5rem 0 0.8rem; }
.logbook-picker-label { color: var(--muted); font-size: 0.9rem; }
.logbook-select {
  font: inherit; font-size: 0.9rem; background: var(--bar-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.3rem 0.5rem;
}

/* Graphs: two per row on wide screens, one per row when narrow. */
.logbook-graphs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;
  margin: 0.4rem 0 1.2rem;
}
.logbook-graph {
  background: #0f2431; border: 1px solid #223846; border-radius: 6px; padding: 0.6rem 0.7rem;
}
.logbook-graph-h { color: var(--gold); font-size: 0.95rem; margin: 0.1rem 0 0.5rem; }
.logbook-chart { width: 100%; height: auto; display: block; }

/* Month list + drill-down raid sheet. */
.logbook-months { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0; }
.logbook-month-btn {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  width: 100%; text-align: left; padding: 0.5rem 0.8rem;
  background: #0f2431; border: 1px solid #223846; border-radius: 5px; cursor: pointer;
}
.logbook-month-btn:hover:not(:disabled) { background: rgba(39, 80, 106, 0.3); }
.logbook-month-btn.is-open { border-color: var(--gold); }
.logbook-month-btn.is-empty { opacity: 0.5; cursor: default; }
.logbook-month-n { color: var(--text); font-weight: 700; }
.logbook-month-sum { color: var(--muted); font-size: 0.84rem; }
.logbook-sheet {
  background: #0c1c27; border: 1px solid #223846; border-radius: 5px;
  padding: 0.6rem 0.8rem; margin: 0.1rem 0 0.4rem;
}

/* Admin Notifications panel (M6.4a) — connect a Discord webhook for the month recap. */
.notify-help { background: #0c1c27; border: 1px solid #223846; border-radius: 5px; padding: 0.5rem 0.8rem; margin: 0.2rem 0 0.6rem; }
.notify-steps { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; color: #b9c6d0; font-size: 0.85rem; }
.notify-steps li { margin: 0.2rem 0; }
.notify-help a { color: var(--gold); }
.notify-status-line { color: #b9c6d0; font-size: 0.9rem; margin: 0.4rem 0; }
.notify-ok { color: #7fc98a; }
.notify-off { color: #d98a8a; }
.notify-field { display: block; margin: 0.5rem 0; }
.notify-field span { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.2rem; }
.notify-field input {
  width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem;
  background: #0f2431; border: 1px solid #34506180; border-radius: 5px;
  color: var(--text); font-size: 0.9rem;
}
.notify-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }
.notify-danger { border-color: #7a3b3b; color: #e0a0a0; }
.notify-toggle { display: flex; align-items: center; gap: 0.4rem; color: #b9c6d0; font-size: 0.9rem; margin: 0.5rem 0; }
.notify-toggle.notify-dim { opacity: 0.55; }
.notify-msg { min-height: 1.1rem; font-size: 0.86rem; margin: 0.3rem 0; }

/* On-screen touch controls (M7.2). Overlaid low on the sea canvas; each button drives the same
   input as the keyboard. Hidden by default — the sea scene shows it on a touch device or when the
   player forces it on in Settings. #hud is pointer-events:none, so the buttons re-enable clicks. */
#touch-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0.8rem 1rem 1rem; gap: 0.6rem; pointer-events: none;
}
#touch-controls[hidden] { display: none; }
.tc-pad { display: flex; pointer-events: none; }
.tc-left-pad { flex-direction: column; align-items: center; gap: 0.3rem; }
.tc-mid-pad { flex-direction: column; gap: 0.4rem; align-self: center; }
.tc-right-pad { align-items: center; gap: 0.4rem; }
.tc-row { display: flex; gap: 0.3rem; }
.tc-btn {
  pointer-events: auto; user-select: none; touch-action: none;
  min-width: 62px; min-height: 62px; padding: 0.4rem;
  background: rgba(20, 44, 60, 0.68); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; cursor: pointer;
}
.tc-btn.is-down { background: rgba(60, 110, 150, 0.85); border-color: var(--gold); }
.tc-small { min-width: 58px; min-height: 46px; font-size: 0.8rem; }
.tc-fire { background: rgba(96, 42, 32, 0.7); }
.tc-board { background: rgba(40, 72, 42, 0.7); }

/* ---- Admin / Developer section (Phase 1) -------------------------------------------------
   Plain tool styling on purpose: a neutral dark slate, a system sans-serif, and left-aligned
   data. It deliberately does NOT use the pirate serif theme — this area is tools, not game.
   Everything is scoped to .admin-screen so it never touches the game screens. */
.admin-screen {
  text-align: left;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: #d7dde3;
  max-width: 1040px; width: 100%; margin: 0 auto;
  align-self: start;
}
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-title { font-size: 1.5rem; margin: 0; color: #eef2f6; text-shadow: none; letter-spacing: 0.02em; }
.admin-screen .admin-btn {
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.8rem; cursor: pointer;
  background: #273443; color: #d7dde3; border: 1px solid #3d4d5e; border-radius: 4px;
}
.admin-screen .admin-btn:hover { background: #32475a; }
.admin-btn-warn { border-color: #7a4a4a; color: #f0c9c9; }
.admin-btn-warn:hover { background: #4a2b2b; }

/* Entry button on the home screen (kept subtle, above the game buttons). */
.admin-enter {
  font-size: 0.85rem; padding: 0.45rem 1rem; background: #223142; border: 1px solid #3d4d5e; color: #cdd6de;
}
.admin-enter:hover { background: #2e4258; }

/* Tabs */
.admin-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid #33414f; margin-bottom: 1.2rem; }
.admin-tab {
  font: inherit; font-size: 0.9rem; padding: 0.5rem 1rem; cursor: pointer;
  background: transparent; color: #93a2b1; border: none; border-bottom: 2px solid transparent; border-radius: 0;
}
.admin-tab:hover { color: #d7dde3; background: transparent; }
.admin-tab[data-active="1"] { color: #eef2f6; border-bottom-color: #4d8fc0; }

/* Stat cards */
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.4rem; }
.admin-card { background: #1a2531; border: 1px solid #2c3a48; border-radius: 6px; padding: 0.9rem 1rem; }
.admin-card-value { font-size: 1.7rem; font-weight: 600; color: #eef2f6; line-height: 1.1; }
.admin-card-label { font-size: 0.8rem; color: #9aa9b8; margin-top: 0.2rem; }
.admin-card-sub { font-size: 0.72rem; color: #6f8091; margin-top: 0.15rem; }

/* Blocks and columns */
.admin-block { background: #16202b; border: 1px solid #2a3742; border-radius: 6px; padding: 1rem; margin-bottom: 1.2rem; }
.admin-h2 { font-size: 0.95rem; margin: 0 0 0.8rem; color: #c5d0da; font-weight: 600; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 700px) { .admin-two-col { grid-template-columns: 1fr; } }

/* Mini bar charts (last-30-days series) */
.admin-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; overflow-x: auto; }
.admin-bar { flex: 1 0 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 14px; height: 100%; }
.admin-bar-fill { width: 70%; min-height: 2px; background: #4d8fc0; border-radius: 2px 2px 0 0; }
.admin-bar-n { font-size: 0.6rem; color: #8698a8; margin-top: 2px; }
.admin-bar-day { font-size: 0.55rem; color: #5f7182; transform: rotate(-45deg); white-space: nowrap; margin-top: 2px; }

/* Server health list */
.admin-health-row { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid #222d38; font-size: 0.85rem; }
.admin-health-row:last-child { border-bottom: none; }
.admin-health-row span:first-child { color: #93a2b1; display: flex; align-items: center; }
.admin-mono { font-family: "Consolas", "SF Mono", ui-monospace, monospace; color: #cdd6de; }

/* Status dot before a health value (green ok / red error / grey neutral) */
.admin-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.5rem; flex: 0 0 auto; }
.admin-dot-ok { background: #3fae5a; box-shadow: 0 0 0 2px rgba(63,174,90,0.18); }
.admin-dot-bad { background: #d3564f; box-shadow: 0 0 0 2px rgba(211,86,79,0.18); }
.admin-dot-neutral { background: #5a6a79; }

/* Copy-report button sits at the right of the Server heading */
.admin-copy-btn { float: right; font-size: 0.75rem; padding: 0.2rem 0.6rem; }

/* Overview chart range picker */
.admin-range-row { align-items: center; gap: 0.7rem; margin: -0.6rem 0 1rem; }
.admin-range-label { color: #6f8091; font-size: 0.8rem; font-weight: 400; }

/* Overview live-alerts panel */
.admin-alerts { border-left: 3px solid #c9922e; }
.admin-alert-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.admin-alert { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.55rem 0.7rem; border-radius: 5px; font-size: 0.85rem; background: #1a2531; border: 1px solid #2c3a48; }
.admin-alert-bad { border-color: #6a3330; background: #26191a; }
.admin-alert-warn { border-color: #6a5a2e; background: #262218; }
.admin-alert-go { flex: 0 0 auto; }

/* Users table */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #2a3742; white-space: nowrap; }
.admin-table th { color: #8fa0b0; font-weight: 600; }
.admin-table tr:hover td { background: #182430; }
.admin-tag { background: #1f3a52; color: #9cd0f5; font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 10px; }

.admin-note { color: #8698a8; font-size: 0.85rem; }
.admin-msg { min-height: 1.2rem; font-size: 0.85rem; margin-top: 0.6rem; }
.admin-ok { color: #7fd0a0; }
.admin-bad { color: #e79a9a; }

/* Balance editor (Phase 2). Reuses the admin blocks/tables; adds inputs, staged/overridden marks,
   and the presets / backups / change-log rows. */
.admin-input {
  background: #0f1822; border: 1px solid #33414f; color: #e7edf2; border-radius: 4px;
  padding: 0.35rem 0.5rem; font-size: 0.85rem; min-width: 0;
}
.admin-input:focus { outline: none; border-color: #4d8fc0; }
.admin-balance-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.admin-balance-bar #balance-note { flex: 1 1 220px; }
.admin-balance-bar #balance-version { margin-right: auto; }
.admin-inline { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.admin-inline .admin-input { flex: 1 1 auto; }

.balance-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.balance-group-head .admin-h2 { margin: 0; }
.balance-table { margin-top: 0.6rem; }
.balance-table td { vertical-align: middle; }
.balance-label { color: #c5d0da; }
.balance-input { width: 6.5rem; background: #0f1822; border: 1px solid #33414f; color: #e7edf2;
  border-radius: 4px; padding: 0.3rem 0.45rem; font-size: 0.85rem; }
.balance-input:focus { outline: none; border-color: #4d8fc0; }
.balance-default { font-family: "Consolas", "SF Mono", ui-monospace, monospace; }
.balance-reset { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
/* An overridden value (differs from default) gets a left accent; a staged unsaved edit glows. */
.balance-table tr[data-overridden="1"] .balance-label { border-left: 3px solid #4d8fc0; padding-left: 0.5rem; }
.balance-table tr[data-staged="1"] .balance-input { border-color: #d0a24d; background: #241d0f; }

.balance-preset { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.35rem 0; border-bottom: 1px solid #222d38; font-size: 0.85rem; }
.balance-preset:last-child { border-bottom: none; }
.balance-preset .admin-btn { font-size: 0.72rem; padding: 0.2rem 0.5rem; }

/* --- Broadcast banner (admin Phase 3) -------------------------------------
   Shown to every player at the top of the menu. Colour comes from the tone the owner picks.
   Lives outside .admin-screen because it appears on the login and home screens too. */
.site-banner {
  margin: 0 auto 1rem; max-width: 900px; padding: 0.7rem 1.1rem; border-radius: 6px;
  font-size: 0.95rem; line-height: 1.4; text-align: center; border: 1px solid;
}
.site-banner-info { background: #12354e; border-color: #2f6d99; color: #d4ecff; }
.site-banner-good { background: #123a28; border-color: #2f8f5f; color: #cdf2dd; }
.site-banner-warn { background: #40320f; border-color: #9a7a2c; color: #f6e6b8; }

/* --- Site + Worlds admin tabs (admin Phase 3) ----------------------------- */
.admin-h3 { font-size: 0.85rem; margin: 0 0 0.5rem; color: #b3c0cc; font-weight: 600; }
.admin-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: #c5d0da;
  padding: 0.3rem 0; cursor: pointer; }
.admin-check input { width: 1rem; height: 1rem; accent-color: #4d8fc0; }
.admin-textarea { width: 100%; min-height: 3.4rem; margin-top: 0.7rem; resize: vertical;
  font-family: inherit; line-height: 1.4; }
.admin-input-wide { flex: 1 1 100%; }
/* Notifications tab (Admin v2 Phase 3): the Manage block's webhook field, toggles, and status line. */
.admin-field { display: block; margin-top: 0.8rem; }
.admin-field > span { display: block; font-size: 0.82rem; color: #9fb0bd; margin-bottom: 0.3rem; }
.admin-field .admin-input { width: 100%; }
.admin-notify-toggles { margin-top: 0.7rem; }
.admin-notify-msg { min-height: 1.1rem; margin-top: 0.6rem; }
.site-banner-preview { margin-top: 0.9rem; }
.site-banner-preview .admin-note { display: block; margin-bottom: 0.4rem; }
.site-banner-preview .site-banner { margin: 0; max-width: none; text-align: left; }

.admin-tag-warn { background: #4a2b2b; color: #f0c9c9; }
/* A guarded-danger area reads slightly warmer so destructive controls stand apart. */
.admin-danger { border-top: 1px solid #3a2a2a; margin-top: 1rem; padding-top: 0.9rem; }
.admin-danger .admin-h3 { color: #d8b3b3; }
.admin-danger-delete { align-items: center; }
.admin-danger-delete .admin-note { flex: 1 1 auto; }
#admin-world-detail .admin-two-col { gap: 1.4rem; margin: 0.6rem 0 0.4rem; }
#admin-worlds-status { margin: 0; flex: 1 1 auto; }

/* --- Wake tab (admin Phase 3) --------------------------------------------- */
.wake-stage { border: 1px solid #22404e; border-radius: 8px; overflow: hidden; background: #0b2432; margin-bottom: 0.9rem; }
#wake-canvas { display: block; width: 100%; height: auto; }
.wake-dials { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.wake-dial { background: #0f1822; border: 1px solid #2a3742; border-radius: 6px; padding: 0.5rem 0.7rem; }
.wake-dial-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; color: #c5d0da; }
.wake-dial-val { font-family: "Consolas", "SF Mono", ui-monospace, monospace; color: #d0a24d; font-size: 0.8rem; }
.wake-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px;
  background: #2c505f; outline: none; margin: 0.5rem 0 0.1rem; }
.wake-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #d7e7ec; border: 2px solid #0b2432; cursor: pointer; }
.wake-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #d7e7ec;
  border: 2px solid #0b2432; cursor: pointer; }

/* --- Messages tab (admin Phase 3) ----------------------------------------- */
.admin-textarea-tall { min-height: 12rem; font-family: "Consolas", "SF Mono", ui-monospace, monospace; }
.text-line { margin-bottom: 0.9rem; }
.text-line-label { display: block; font-size: 0.85rem; color: #c5d0da; margin-bottom: 0.3rem; }
.text-gazette-input { min-height: 2.6rem; }
#text-samples { color: #cdd6de; line-height: 1.7; margin: 0.3rem 0 0.6rem; }

/* --- Boats tab (admin Phase 3) -------------------------------------------- */
.boats-card { background: #0f1822; border: 1px solid #2a3742; border-radius: 6px; padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; cursor: pointer; }
.boats-card[data-selected="1"] { border-color: #4d8fc0; }
.boats-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: #e7edf2; }
.boats-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #33414f; display: inline-block; }
.boats-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.2rem 0; }
.boats-stat-row label { font-size: 0.82rem; color: #9aa9b8; }
.boats-stat-row .admin-input { width: 6.5rem; }
.boats-stat-row input[type="color"] { width: 3rem; height: 1.7rem; padding: 0; border: 1px solid #33414f; background: #0f1822; border-radius: 4px; cursor: pointer; }
.boats-preview-wrap { background: #0b2432; border: 1px solid #22404e; border-radius: 8px; padding: 0.5rem; display: flex; justify-content: center; }
#boats-canvas { max-width: 100%; height: auto; }

/* --- Player inspector (admin Phase 3) ------------------------------------- */
.admin-gold-edit { align-items: center; }
.admin-gold-edit .admin-input { width: 8rem; flex: 0 0 auto; }
.admin-json { margin-top: 0.6rem; border: 1px solid #2a3742; border-radius: 6px; }
.admin-json > summary { cursor: pointer; padding: 0.45rem 0.7rem; color: #c5d0da; font-size: 0.85rem; user-select: none; }
.admin-json pre { margin: 0; padding: 0.6rem 0.8rem; overflow-x: auto; font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 0.78rem; color: #cdd6de; background: #0f1822; border-top: 1px solid #2a3742; max-height: 20rem; }

/* --- Admin v2 Phase 4: content-editor upgrades ---------------------------- */
/* Balance: per-field description/range line, replay tag, search row, history diff. */
.balance-desc { display: block; font-size: 0.74rem; color: #6f8496; margin-top: 0.15rem; line-height: 1.35; }
.balance-sim-tag { background: #3a2f16; color: #e2c98a; font-weight: 500; }
.balance-search-row { align-items: center; margin: 0 0 0.8rem; }
.balance-search-row .admin-search { flex: 1 1 240px; }
.balance-history-row { padding: 0.35rem 0; border-bottom: 1px solid #222d38; }
.balance-history-row:last-child { border-bottom: none; }
.balance-history-diff { margin: 0.15rem 0 0; font-size: 0.78rem; color: #7f92a2; }
#balance-io { min-height: 4.5rem; font-family: "Consolas", "SF Mono", ui-monospace, monospace; font-size: 0.8rem; }

/* Messages: add-word row, duplicate warning, per-line preview. */
.text-addword-row { margin: 0.2rem 0 0.5rem; }
.text-addword-row .admin-input { flex: 1 1 auto; }
.text-addword-row .admin-btn { flex: 0 0 auto; }
.text-dupes { margin: 0.35rem 0 0; font-size: 0.78rem; }
.text-gaz-preview { margin: 0.2rem 0 0; color: #b9c6d1; font-style: italic; min-height: 0.9rem; }

/* Boats: read-only "more stats", per-card tools, preview controls. */
.boats-more { margin-top: 0.5rem; }
.boats-more > summary { cursor: pointer; font-size: 0.8rem; color: #9aa9b8; user-select: none; }
.boats-readonly { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.5rem; }
.boats-ro-item { font-size: 0.78rem; color: #cdd6de; }
.boats-ro-k { color: #8698a8; margin-right: 0.3rem; }
.boats-card-tools { align-items: center; flex-wrap: wrap; }
.boats-card-tools .boats-copy-target { flex: 0 1 auto; width: auto; }
.boats-card-tools .admin-btn { font-size: 0.74rem; padding: 0.25rem 0.55rem; }
.boats-preview-controls { align-items: center; margin-bottom: 0.6rem; }
.boats-preview-controls .admin-btn { flex: 0 0 auto; font-size: 0.78rem; }

/* Weapons & Damage tab (damage update Phase 3). Ammo rows, per-hull multiplier rows, fit matrix. */
.weapons-ammo-row { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid #222d38; }
.weapons-ammo-row:last-child { border-bottom: none; }
.weapons-ammo-name { flex: 0 0 8.5rem; padding-top: 1.1rem; color: #e7edf2; font-weight: 600; font-size: 0.86rem; }
.weapons-cells { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.weapons-cell { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.72rem; color: #9fb0bd; }
.weapons-cell .admin-input { width: 6.5rem; }
.weapons-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid #222d38; }
.weapons-row:last-child { border-bottom: none; }
.weapons-row-name { color: #c5d0da; font-size: 0.86rem; }
.weapons-row .admin-input { width: 6.5rem; flex: 0 0 auto; }
.weapons-row-strong .weapons-row-name { color: #f0d68a; font-weight: 600; }
.weapons-fit-table th, .weapons-fit-table td { text-align: center; padding: 0.4rem 0.7rem; }
.weapons-fit-table .weapons-fit-name { text-align: left; color: #e7edf2; }
.weapons-fit-table th { color: #9fb0bd; font-weight: 600; text-transform: capitalize; }
.weapons-fit-box { width: 1.1rem; height: 1.1rem; cursor: pointer; }

/* Site: banner schedule, feature descriptions, banner history. */
.site-schedule { gap: 1rem; margin-top: 0.6rem; }
.site-flag-desc { margin: 0 0 0.5rem 1.55rem; font-size: 0.78rem; }
.site-banner-hist-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid #222d38; }
.site-banner-hist-row:last-child { border-bottom: none; }
.site-banner-hist-row .admin-btn { flex: 0 0 auto; font-size: 0.74rem; padding: 0.2rem 0.5rem; }
.site-hist-text { color: #c5d0da; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-hist-tone-info { background: #12354e; color: #d4ecff; }
.site-hist-tone-good { background: #123a28; color: #cdf2dd; }
.site-hist-tone-warn { background: #40320f; color: #f6e6b8; }

/* --- Admin v2 Phase 1: help line, shared table tools, "?" help, confirm modal ---------------------- */

/* Per-tab help line under the tab bar. */
.admin-help-line { color: #8698a8; font-size: 0.85rem; line-height: 1.45; margin: -0.6rem 0 1.1rem; }

/* Shared list toolbar (Users, Worlds, Audit): search + last-refreshed + auto-refresh + Refresh. */
.admin-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.admin-toolbar .admin-search { flex: 1 1 240px; }
.admin-refreshed { white-space: nowrap; }
.admin-toolbar .admin-auto { margin: 0; padding: 0; white-space: nowrap; }

/* Click-a-header sorting: header shows a pointer and the active column an arrow. */
.admin-table th[data-sort] { cursor: pointer; user-select: none; }
.admin-table th[data-sort]:hover { color: #cdd6de; }
.admin-table th[data-sort-active="asc"]::after { content: " \25B2"; font-size: 0.7em; color: #4d8fc0; }
.admin-table th[data-sort-active="desc"]::after { content: " \25BC"; font-size: 0.7em; color: #4d8fc0; }

/* A small round "?" button next to a control; opens a plain-language help bubble. */
.admin-help-btn {
  font: inherit; font-size: 0.72rem; line-height: 1; width: 1.2rem; height: 1.2rem; padding: 0;
  border-radius: 50%; border: 1px solid #3d4d5e; background: #1c2836; color: #9cc4e2; cursor: pointer;
  vertical-align: middle; margin-left: 0.35rem; flex: 0 0 auto;
}
.admin-help-btn:hover { background: #26384a; color: #d4ecff; }
.admin-help-pop {
  position: absolute; z-index: 60; max-width: 300px; background: #10202e; border: 1px solid #35566b;
  color: #d7e2ea; font-size: 0.82rem; line-height: 1.5; padding: 0.6rem 0.75rem; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* One shared confirm dialog, used by every destructive admin action. Lives on <body>, outside
   .admin-screen, so its buttons need their own styling. */
.admin-modal-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(4, 10, 16, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.admin-modal {
  background: #16202b; border: 1px solid #33414f; border-radius: 8px; padding: 1.2rem 1.3rem;
  max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  color: #d7dde3; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
.admin-modal-title { margin: 0 0 0.6rem; font-size: 1.05rem; color: #eef2f6; }
.admin-modal-msg { margin: 0 0 0.9rem; color: #b6c3cf; font-size: 0.88rem; line-height: 1.5; }
.admin-modal-input { width: 100%; margin-bottom: 1rem; }
.admin-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.admin-modal .admin-btn {
  font: inherit; font-size: 0.85rem; padding: 0.45rem 0.9rem; cursor: pointer;
  background: #273443; color: #d7dde3; border: 1px solid #3d4d5e; border-radius: 4px;
}
.admin-modal .admin-btn:hover { background: #32475a; }
.admin-modal .admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Admin v2 Phase 2: filter chips, player controls, user detail, run picker --------------------- */

/* Filter chips above the Worlds and Users lists. The active chip is highlighted. */
.admin-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: -0.3rem 0 0.9rem; }
.admin-chip {
  font: inherit; font-size: 0.8rem; padding: 0.3rem 0.75rem; cursor: pointer;
  background: #14202c; color: #9db0c0; border: 1px solid #2c3a48; border-radius: 999px;
}
.admin-chip:hover { background: #1c2c3a; color: #cdd6de; }
.admin-chip[data-active="1"] { background: #26496a; color: #eaf3fb; border-color: #4d8fc0; }

/* Inspector rows for giving items and setting ship condition. */
.admin-item-give, .admin-user-tool { align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.admin-item-give .admin-input, .admin-user-tool .admin-input { width: auto; flex: 0 1 auto; }
#admin-item-good, #admin-item-amount { width: 8rem; }
#admin-item-amount { width: 5rem; }
.admin-item-give > label, .admin-user-tool > label { flex: 0 0 auto; }
.admin-ship-cond { width: 5rem; }
.admin-ship-status { width: 7rem; }
/* Per-ship fleet action buttons (recall / reset look / remove) and the give-a-ship row (Fleet Phase 4). */
.admin-ship-actions { white-space: nowrap; }
.admin-ship-actions .admin-btn { margin: 0.1rem 0.15rem; }
.admin-give-ship { align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.admin-give-ship .admin-input { width: auto; flex: 0 1 auto; }
.admin-give-ship > label { flex: 0 0 auto; }

/* Controller Controls Phase 5: the gold focus ring the game pad moves across the menu controls.
   Same gold accent + soft glow the themed inputs use on focus, so it reads as one look. Shown only
   while a pad is being used (js/ui/menu-nav.js adds/removes the class); a mouse click clears it. */
.gp-focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(200, 180, 135, 0.35), 0 0 12px 2px rgba(200, 180, 135, 0.25);
  border-radius: 6px;
  position: relative;
  z-index: 2;
}

/* Local Play (beta) lobby. Reuses the month-frame palette; cards sit side by side for a TV. */
.local-hint { color: #8FA5B5; max-width: 60ch; margin: 0.25rem 0 1rem; }
.local-sub { color: #C8B487; font-size: 1rem; margin: 0 0 0.5rem; }
.local-muted { color: #8FA5B5; margin: 0.25rem 0; }
.local-devices { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.local-devices .local-sub { width: 100%; }
.local-join {
  background: #1D3A4D; color: #ECDFC6; border: 1px solid #3C5568;
  border-radius: 6px; padding: 0.5rem 0.8rem; cursor: pointer;
}
.local-join:hover { background: #27506A; }
.local-captains { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.local-card {
  background: linear-gradient(rgba(20,33,44,.9), rgba(11,22,31,.9));
  border: 1px solid #34506A; border-radius: 8px; padding: 0.8rem;
  min-width: 240px; flex: 1 1 240px; max-width: 320px; display: flex; flex-direction: column; gap: 0.6rem;
}
.local-card-head { display: flex; justify-content: space-between; align-items: center; }
.local-card-title { color: #C8B487; font-weight: bold; }
.local-remove {
  background: #1D3A4D; color: #ECDFC6; border: 1px solid #3C5568;
  border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer; font-size: 0.85rem;
}
.local-remove:hover { background: #27506A; }
.local-dev { color: #8FA5B5; font-size: 0.85rem; }
.local-field { display: flex; flex-direction: column; gap: 0.35rem; color: #8FA5B5; font-size: 0.9rem; }
.local-name {
  background: #0C1A24; color: #ECDFC6; border: 1px solid #3C5568;
  border-radius: 6px; padding: 0.4rem 0.5rem; font-size: 0.95rem;
}
.local-name:focus { outline: none; border-color: #C8B487; box-shadow: 0 0 0 2px rgba(200,180,135,.3); }
.local-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.local-hull {
  background: #1D3A4D; color: #ECDFC6; border: 1px solid #3C5568;
  border-radius: 6px; padding: 0.35rem 0.6rem; cursor: pointer; font-size: 0.9rem;
}
.local-hull:hover { background: #27506A; }
.local-hull.on { background: #2C4A2F; border-color: #4A7050; }
.local-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #3C5568; cursor: pointer; padding: 0;
}
.local-swatch.on { border-color: #ECDFC6; box-shadow: 0 0 0 2px rgba(200,180,135,.5); }

/* Play Online (Alpha) lobby (Local & shared multiplayer, Phase 8a). Reuses the .local-* card/hull/
   swatch look; these add the connect view (device picker + create/join) and the room view (code + seats). */
.online-alpha {
  font-size: 0.55em; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
  color: #0a1a26; background: #C8B487; border-radius: 4px; padding: 0.1em 0.45em; margin-left: 0.4rem;
}
.online-body { max-width: 620px; }
.online-mecard { max-width: 420px; }
.online-devrow { flex-wrap: wrap; gap: 0.4rem; }
.online-dev {
  background: #1D3A4D; color: #ECDFC6; border: 1px solid #3C5568; border-radius: 6px;
  padding: 0.35rem 0.6rem; cursor: pointer; font-size: 0.82rem; text-align: left;
}
.online-dev:hover { background: #27506A; }
.online-dev.on { background: #2C4A2F; border-color: #4A7050; }
.online-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 1rem 0 0.5rem; }
.online-join { display: flex; gap: 0.4rem; align-items: center; }
.online-join input {
  width: 6.5rem; text-transform: uppercase; letter-spacing: 0.25em; font-size: 1.1rem; text-align: center;
  background: #12222E; color: #ECDFC6; border: 1px solid #3C5568; border-radius: 6px; padding: 0.35rem 0.5rem;
}
.online-codebox {
  background: #12222E; border: 1px solid #3C5568; border-radius: 10px; padding: 0.8rem 1rem;
  margin: 0.5rem 0 1rem; text-align: center;
}
.online-code-label { color: #8FA5B5; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; }
.online-code { font-size: 2.4rem; letter-spacing: 0.35em; color: #ECDFC6; font-weight: 700; margin: 0.2rem 0; }
.online-roster { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 1rem; }
.online-seat {
  display: flex; align-items: center; gap: 0.6rem; background: #16303F; border: 1px solid #2C4356;
  border-radius: 8px; padding: 0.5rem 0.7rem;
}
.online-dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.online-seat-name { color: #ECDFC6; flex: 1 1 auto; }
.online-seat-hull { color: #8FA5B5; font-size: 0.85rem; }
.online-you { color: #C8B487; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.online-host { color: #6FB0E0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.online-off { color: #D0594F; font-size: 0.75rem; }
.online-record {
  margin: 0.6rem 0; padding: 0.5rem 0.7rem; background: #12222E; border: 1px solid #2C4356;
  border-radius: 8px; color: #C8B487; font-size: 0.9rem;
}
.online-replays-head { margin-top: 1rem; }
.online-replays { display: flex; flex-direction: column; gap: 0.35rem; }
.online-replay-row {
  display: flex; align-items: center; gap: 0.6rem; background: #16303F; border: 1px solid #2C4356;
  border-radius: 8px; padding: 0.4rem 0.6rem;
}
.online-replay-main { color: #ECDFC6; flex: 1 1 auto; }
.online-replay-when { color: #8FA5B5; font-size: 0.8rem; }
.online-watch {
  background: #1D3A4D; color: #ECDFC6; border: 1px solid #3C5568; border-radius: 6px;
  padding: 0.25rem 0.7rem; cursor: pointer; font-size: 0.85rem;
}
.online-watch:hover { background: #27506A; }
.online-old { color: #8FA5B5; font-size: 0.8rem; }

/* Local Play (beta) Phase 6: the saved-crew resume list + a resumed captain's carried line. */
.local-crewname { max-width: 320px; margin-bottom: 1rem; }
.local-crewname input {
  background: #0C1A24; color: #ECDFC6; border: 1px solid #3C5568;
  border-radius: 6px; padding: 0.4rem 0.5rem; font-size: 0.95rem;
}
.local-crewname input:focus { outline: none; border-color: #C8B487; box-shadow: 0 0 0 2px rgba(200,180,135,.3); }
.local-resume { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.local-res-card {
  background: linear-gradient(rgba(20,33,44,.9), rgba(11,22,31,.9));
  border: 1px solid #34506A; border-radius: 8px; padding: 0.7rem 0.9rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.local-res-name { color: #C8B487; font-weight: bold; font-size: 1.05rem; }
.local-res-caps { color: #ECDFC6; font-size: 0.9rem; margin-top: 0.2rem; }
.local-res-gold { color: #C8B487; }
.local-res-when { color: #8FA5B5; font-size: 0.8rem; margin-top: 0.2rem; }
.local-res-actions { display: flex; gap: 0.5rem; align-items: center; }
.local-res-del {
  background: #4A2323; color: #ECDFC6; border: 1px solid #6A3C3C;
  border-radius: 6px; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.9rem;
}
.local-res-del:hover { background: #6A2C2C; }
.local-res-newrow { margin-top: 0.5rem; }
.local-carried { color: #C8B487; font-size: 0.82rem; }

/* Local Play (beta) Phase 5: round readout, scoreboard, and the shared refit port. */
.local-hint-loop { margin-top: 0.75rem; }
.local-sub-line { color: #8FA5B5; margin: 0 0 1rem; max-width: 70ch; }

/* Top-centre round readout during a local round. */
#local-round-info {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1rem; align-items: center; z-index: 6;
  background: rgba(11,22,31,.78); border: 1px solid #34506A; border-radius: 8px;
  padding: 0.3rem 0.9rem; font-family: monospace; font-size: 1.05rem; color: #ECDFC6;
  pointer-events: none;
}
.lri-time { font-weight: bold; }
.lri-afloat { color: #8FA5B5; }

/* End-of-round scoreboard. */
#local-results-board { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.5rem 0 1rem; }
.lres-row {
  display: flex; align-items: center; gap: 0.75rem;
  background: linear-gradient(rgba(20,33,44,.9), rgba(11,22,31,.9));
  border: 1px solid #34506A; border-left: 4px solid var(--accent, #C8B487);
  border-radius: 8px; padding: 0.55rem 0.9rem;
}
.lres-row.is-sunk { opacity: 0.6; }
.lres-rank { font-size: 1.2rem; min-width: 2rem; text-align: center; }
.lres-cap { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.lres-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent, #C8B487); flex: none; }
.lres-name { color: #ECDFC6; font-weight: bold; }
.lres-hull { color: #8FA5B5; font-size: 0.85rem; }
.lres-sunk { color: #d1614a; font-size: 0.8rem; border: 1px solid #d1614a; border-radius: 4px; padding: 0 0.35rem; }
.lres-gold { color: #C8B487; font-weight: bold; font-size: 1.1rem; min-width: 5rem; text-align: right; }
.lres-unit { color: #8FA5B5; font-size: 0.7rem; font-weight: normal; margin-left: 0.25rem; }
.lres-stat { color: #ECDFC6; font-size: 0.9rem; min-width: 3rem; text-align: center; }
.lres-pool { color: #6fb36a; font-size: 0.8rem; }
.lres-share-head { font-size: 1rem; color: #C8B487; margin: 0.5rem 0 0.4rem; }
.lres-share {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  background: rgba(20,33,44,.6); border: 1px solid #2C4A3A; border-radius: 6px;
  padding: 0.45rem 0.8rem; margin-bottom: 0.4rem;
}
.lres-share-lab { color: #6fb36a; }
.lres-share-val { color: #8FA5B5; }

/* Shared refit port. */
.local-port-cards { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.lport-card { gap: 0.5rem; }
.lport-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent, #C8B487); flex: none; }
.lport-card .local-card-head { gap: 0.5rem; }
.lport-hull { color: #8FA5B5; font-size: 0.85rem; margin-left: auto; }
.lport-purse { display: flex; align-items: baseline; gap: 0.5rem; }
.lport-gold { color: #C8B487; font-weight: bold; font-size: 1.4rem; }
.lport-unit { color: #8FA5B5; font-size: 0.7rem; font-weight: normal; margin-left: 0.25rem; }
.lport-shared { color: #6fb36a; font-size: 0.8rem; }
.lport-line { display: flex; justify-content: space-between; color: #8FA5B5; font-size: 0.9rem; }
.lport-val { color: #ECDFC6; }
.lport-buys { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.lport-buy {
  background: #1D3A4D; color: #ECDFC6; border: 1px solid #3C5568;
  border-radius: 6px; padding: 0.45rem 0.6rem; cursor: pointer; font-size: 0.9rem; text-align: left;
}
.lport-buy:hover:not(:disabled) { background: #27506A; }
.lport-buy:disabled { opacity: 0.4; cursor: not-allowed; }