/* BATTLE BUILDER (inc/battle/main.php, www/js/builder.js): one sheet, the Crown's line and the
   Cabal's facing each other across it. The sheet has the parchment card's paper and border but
   not its class, whose rules force every colour on it. The blue and the red are the ensigns'
   (www/world/js/shipmodel.js). */
.bb {
    --bb-ink: #2c1810;
    --bb-rule: #8b6f3f;
    --bb-paper: #efe5cf;
    --bb-crown: #2b3a67;
    --bb-cabal: #b22234;
    color: var(--bb-ink);
    font-family: 'IM Fell DW Pica', Georgia, serif;
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 15px;
    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);
}
/* The site's button and list rules (indexstyle.css: button, ol li) are undone on the sheet, at
   no more than their own weight, so the rules below still apply. The card buttons keep theirs. */
:where(.bb) button:where(:not([class*="card-btn"])) {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
:where(.bb) ol li { margin: 0; padding: 0; }
.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-us { --bb-side: var(--bb-crown); }
.bb-cabal { --bb-side: var(--bb-cabal); }

.bb-side {
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--bb-side);
    color: var(--bb-side);
    font-size: 26px;
    font-weight: normal;
    line-height: 1.1;
}
.bb-us .bb-side { text-align: right; }

.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-hull {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 0;
    padding: 2px 0;
    border: 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-who button { padding: 3px 9px; border: 0; background: transparent; font-size: 16px; line-height: 1.2; }
.bb-who button[aria-pressed="true"] { background: var(--bb-ink); color: var(--bb-paper); }

.bb-remove {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 22px;
    line-height: 1;
}
.bb-remove:hover:not(:disabled) { background: rgba(44, 24, 16, 0.12); }
.bb-remove:disabled { visibility: hidden; }

.bb-add {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 7px 10px;
    border: 1px dashed var(--bb-rule);
    border-radius: 3px;
    background: none;
}
.bb-add:hover:not(:disabled), .bb-add[aria-expanded="true"] { border-style: solid; background: rgba(239, 229, 207, 0.6); }
.bb-add:disabled { border-color: transparent; font-style: italic; }

/* The hulls 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-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    font-size: 16px;
    line-height: 1.15;
}
.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-us .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; }

/* 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-us .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-us .bb-side, .bb-us .bb-tally { text-align: left; }
}