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