/* Battle Barge — shared Setup wizard styling
   ================================================================
   Per-universe HH and TOW setup partials use legacy class names
   (.modal-overlay, .form-input, .step-indicator, .game-mode-btn …)
   that have no styling in the unified shell because per-universe
   CSS is not loaded by /app/*. Without these rules the setup wizard
   renders as a stack of unstyled native form controls.
   ================================================================ */

/* ----------------------------------------------------------------
   Modal scaffolding (used by setup wizard and other dialogs)
   ---------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--bb-space-4);
    padding-top: calc(56px + env(safe-area-inset-top, 0px) + var(--bb-space-4));
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--bb-space-4));
    overflow-y: auto;
}
.modal {
    width: 100%;
    max-width: 720px;
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    box-shadow: var(--bb-shadow-lg);
    overflow: hidden;
    margin: auto 0;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bb-space-3) var(--bb-space-4);
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-bg-elevated);
}
.modal-title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bb-text-primary);
}
.btn-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bb-text-secondary);
    font-size: var(--bb-text-xl);
    line-height: 1;
    cursor: pointer;
    border-radius: var(--bb-radius-sm);
}
.btn-close:hover,
.btn-close:focus-visible {
    color: var(--bb-text-primary);
    background: var(--bb-bg-elevated);
    outline: none;
}
.modal-body {
    padding: var(--bb-space-4);
    max-height: calc(100dvh - 220px);
    overflow-y: auto;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--bb-space-2);
    padding: var(--bb-space-3) var(--bb-space-4);
    border-top: 1px solid var(--bb-border);
    background: var(--bb-bg-elevated);
}

/* ----------------------------------------------------------------
   Form controls
   ---------------------------------------------------------------- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    margin-bottom: var(--bb-space-3);
}
.form-label {
    display: block;
    margin-top: var(--bb-space-3);
    margin-bottom: var(--bb-space-1);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-secondary);
}
.form-input,
.form-select,
.form-textarea,
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: var(--bb-touch-min);
    padding: var(--bb-space-2) var(--bb-space-3);
    background: var(--bb-bg-base);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    color: var(--bb-text-primary);
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-base);
    transition: border-color var(--bb-transition-fast);
    box-sizing: border-box;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--bb-accent-primary);
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--bb-text-muted);
}
.form-error {
    color: var(--bb-accent-danger);
    font-size: var(--bb-text-sm);
    margin-top: var(--bb-space-1);
}
.form-help {
    color: var(--bb-text-muted);
    font-size: var(--bb-text-xs);
    margin-top: var(--bb-space-1);
}

/* ----------------------------------------------------------------
   Setup wizard step strip
   ---------------------------------------------------------------- */
.setup-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--bb-space-1);
    padding: var(--bb-space-3) var(--bb-space-4);
    background: var(--bb-bg-elevated);
    border-bottom: 1px solid var(--bb-border);
}
.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--bb-text-muted);
    text-align: center;
}
.step-number {
    width: 28px;
    height: 28px;
    border-radius: var(--bb-radius-full);
    background: var(--bb-bg-base);
    border: 1px solid var(--bb-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-sm);
    font-weight: 700;
    color: var(--bb-text-muted);
}
.step-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
}
.step-indicator.active .step-number {
    background: var(--bb-accent-primary);
    color: var(--bb-bg-base);
    border-color: var(--bb-accent-primary);
}
.step-indicator.active .step-label,
.step-indicator.active {
    color: var(--bb-text-primary);
}
.step-indicator.completed .step-number {
    background: var(--bb-bg-elevated);
    color: var(--bb-accent-primary);
    border-color: var(--bb-accent-primary);
}

.setup-step { display: none; }
.setup-step.active { display: block; }
.setup-title {
    margin: 0 0 var(--bb-space-3);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-base);
    color: var(--bb-text-primary);
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------
   Full-screen setup wizard layout (HH)
   ----------------------------------------------------------------
   Earlier draft of the partial wrapped the wizard in
   .modal-overlay > .modal which gave it a "box inside a box" look
   with an internal scrollbar — read as a half-finished mobile port.
   Replaced with a screen-level header/body/footer that fills the
   screen-mount instead. */
.setup-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 116px);
    padding: 0;
    margin: calc(-1 * var(--bb-space-4));
    /* Negative margin counteracts .screen-mount's default padding so
       the wizard fills the full mount width; safe-area insets at the
       mount level still keep content off the screen edges. */
}
.setup-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bb-space-3) var(--bb-space-4);
    background: var(--bb-bg-elevated);
    position: sticky;
    top: 0;
    z-index: 1;
    /* No border-bottom — header + step strip share `--bb-bg-elevated`
       so they read as one elevated band, and `.setup-steps` already
       carries the bottom border that separates the band from the body.
       Two borders here produced a doubled line on the same stripe. */
}
.setup-screen-title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bb-text-primary);
}
.setup-body {
    flex: 1 1 auto;
    padding: var(--bb-space-4);
    /* No max-height / overflow — the page itself scrolls. The old
       modal-body had max-height + its own scrollbar which created the
       nested-scrollbar feel. */
}
.setup-screen-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--bb-space-3);
    padding: var(--bb-space-3) var(--bb-space-4);
    border-top: 1px solid var(--bb-border);
    background: var(--bb-bg-elevated);
    position: sticky;
    bottom: 0;
    z-index: 1;
}
.setup-screen-footer .btn { flex: 0 1 auto; }
.setup-screen-footer #btn-setup-next,
.setup-screen-footer #btn-setup-start {
    margin-left: auto;
}

/* Identity card + opponent link card */
.setup-identity-card,
.setup-link-card {
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    padding: var(--bb-space-3) var(--bb-space-4);
    margin-bottom: var(--bb-space-4);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
}
.setup-identity-card[hidden],
.setup-link-card[hidden] { display: none; }

.setup-identity-avatar,
.setup-opponent-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--bb-radius-full);
    background: var(--bb-bg-base);
    border: 1px solid var(--bb-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    color: var(--bb-accent-primary);
}
.setup-identity-avatar-img,
.setup-opponent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.setup-identity-avatar-initial { /* applied when no avatar_url */ }

.setup-identity-meta,
.setup-link-meta {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.setup-identity-label,
.setup-link-label {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xs);
    color: var(--bb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.setup-identity-name,
.setup-link-value {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-base);
    font-weight: 700;
    color: var(--bb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-link-card .setup-link-actions {
    display: flex;
    gap: var(--bb-space-2);
}
.setup-link-card.is-linked {
    border-color: var(--bb-accent-primary);
}

.form-help-inline {
    color: var(--bb-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.7rem;
    margin-left: var(--bb-space-1);
}

.setup-link-prompt {
    margin-bottom: var(--bb-space-3);
}
.setup-link-picker {
    margin-bottom: var(--bb-space-4);
    padding: var(--bb-space-3) var(--bb-space-4);
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
}
.setup-link-friends-list {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    max-height: 280px;
    overflow-y: auto;
    padding: var(--bb-space-1);
}
.setup-link-friend-row {
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    padding: var(--bb-space-2) var(--bb-space-3);
    background: var(--bb-bg-base);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    color: var(--bb-text-primary);
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.setup-link-friend-row:hover,
.setup-link-friend-row:focus-visible {
    border-color: var(--bb-accent-primary);
    outline: none;
}

/* Shared summary modal rows — used by bb-battle-summary.js */
.bb-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--bb-space-3);
    padding: var(--bb-space-2) 0;
    border-bottom: 1px dashed var(--bb-border);
}
.bb-summary-row:last-of-type { border-bottom: none; }
.bb-summary-key {
    font-family: var(--bb-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--bb-text-xs);
    color: var(--bb-text-muted);
}
.bb-summary-value {
    color: var(--bb-text-primary);
    font-weight: 600;
}
.bb-summary-journal {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    margin-top: var(--bb-space-2);
}
.bb-summary-journal-entry p {
    margin: 0;
    color: var(--bb-text-secondary);
    font-size: var(--bb-text-sm);
    line-height: 1.45;
}

/* Journal modal */
.bb-journal-composer {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    margin-bottom: var(--bb-space-4);
    padding-bottom: var(--bb-space-3);
    border-bottom: 1px solid var(--bb-border);
}
.bb-journal-composer-actions {
    display: flex;
    justify-content: flex-end;
}
.bb-journal-list {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-3);
}
.bb-journal-entry {
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-3) var(--bb-space-4);
}
.bb-journal-entry-meta {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bb-text-muted);
    margin-bottom: var(--bb-space-1);
}
.bb-journal-entry-text {
    margin: 0;
    color: var(--bb-text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}
.bb-journal-entry-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--bb-space-2);
}

/* ----------------------------------------------------------------
   Pill-row inputs (game-mode, player-count, team-count, allegiance)
   ---------------------------------------------------------------- */
.game-mode-buttons,
.player-count-buttons,
.team-count-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-2);
    margin-bottom: var(--bb-space-3);
}
.game-mode-btn,
.player-count-btn,
.team-count-btn,
.scenario-filter-btn,
.zm-mode-btn {
    flex: 0 0 auto;
}
.game-mode-btn.active,
.player-count-btn.active,
.team-count-btn.active,
.scenario-filter-btn.active,
.zm-mode-btn.active {
    background: var(--bb-accent-primary);
    color: var(--bb-bg-base);
    border-color: var(--bb-accent-primary);
}

/* ----------------------------------------------------------------
   Setup confirm screen — recap rows + start CTA
   ---------------------------------------------------------------- */
.setup-confirm-row {
    display: flex;
    justify-content: space-between;
    padding: var(--bb-space-2) 0;
    border-bottom: 1px dashed var(--bb-border);
    color: var(--bb-text-secondary);
    font-size: var(--bb-text-sm);
}
.setup-confirm-row strong {
    color: var(--bb-text-primary);
    margin-right: var(--bb-space-2);
}
.setup-confirm-row:last-child {
    border-bottom: none;
}

/* ----------------------------------------------------------------
   Cards (legacy class) — alias to bb-card surface
   ---------------------------------------------------------------- */
.card {
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-4);
}
.card-clickable {
    cursor: pointer;
    transition: border-color var(--bb-transition-fast),
                transform var(--bb-transition-fast);
}
.card-clickable:hover,
.card-clickable:focus-visible {
    border-color: var(--bb-accent-primary);
    transform: translateY(-1px);
    outline: none;
}
.card-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: linear-gradient(140deg,
        rgba(196, 156, 92, 0.18) 0%,
        rgba(196, 156, 92, 0) 60%),
        var(--bb-bg-elevated);
    border: 1px solid rgba(196, 156, 92, 0.45);
    color: var(--bb-text-primary);
    cursor: pointer;
    margin-bottom: var(--bb-space-3);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-6);
    transition: filter var(--bb-transition-fast),
                transform var(--bb-transition-fast);
}
.card-hero:hover,
.card-hero:focus-visible {
    filter: brightness(1.1);
    outline: none;
    transform: translateY(-1px);
}
.card-label {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-text-primary);
}
.card-resume {
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-3) var(--bb-space-4);
    cursor: pointer;
    width: 100%;
    text-align: left;
    margin-bottom: var(--bb-space-3);
}
.card-resume:hover { border-color: var(--bb-accent-primary); }
.card-resume-content {
    display: flex;
    align-items: center;
    gap: var(--bb-space-3);
    color: var(--bb-text-primary);
}
.card-resume-title {
    font-family: var(--bb-font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.card-resume-state {
    color: var(--bb-text-secondary);
    font-size: var(--bb-text-sm);
}

/* ----------------------------------------------------------------
   Battle dashboard miscellaneous (used by HH battle.js after setup)
   ---------------------------------------------------------------- */
.battle-idle-content {
    padding: var(--bb-space-4);
    max-width: 760px;
    margin: 0 auto;
}

/* Setup wizard mission picker — the legacy /hh battle.css defines
   `.missions-grid { grid-template-columns: 1fr 1fr }`, which gets
   loaded into the unified shell and crammed the per-source category
   sections (Core / Istvaan / Leviathan / Saturnine) into a 2-col
   layout. The setup wizard wants each category full-width stacked
   so a card can sprawl naturally. ID-scoped so we only override
   inside `#setup-missions-grid`, not anywhere else. */
#setup-missions-grid.missions-grid,
#setup-missions-grid {
    display: flex !important;
    flex-direction: column;
    gap: var(--bb-space-3);
}
#setup-missions-grid > .mission-section {
    width: 100%;
}

/* The setup wizard's `.mission-section-content` was set to
   `repeat(auto-fill, 260px)` for the standalone Missions screen,
   which left cards stuck on the left in fixed 260px columns. For
   the wizard we want cards to FILL the section width. The inner
   `.missions-grid-inner` wrapper from the legacy renderer just
   passes through (block) since its mission-builder.css isn't loaded
   in the BB shell — give it a span-the-row + display:contents-style
   pass-through so the grid lands on the actual card children. */
/* Missions stack vertically full-width inside their category — each
   mission card is a banner-style row that runs the length of the
   section. The user explicitly wants stacked, not multi-column. */
#setup-missions-grid .mission-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
    padding: var(--bb-space-3) var(--bb-space-4);
}
#setup-missions-grid .missions-grid-inner {
    display: contents;
}
#setup-missions-grid .mission-card {
    width: 100%;
}

/* Setup wizard map picker — same per-source category structure as
   missions, but the user wants exactly 3 columns max with cards all
   the same size regardless of how many are in a category. Fixed
   3-column grid achieves both: rows under-fill to keep card width
   constant, e.g. 4 maps => 3 + 1 (last card still 1/3 wide).
   Stack to 2 columns on tablet, 1 on phone. */
#setup-maps-grid {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-3);
}
#setup-maps-grid > .mission-section { width: 100%; }
#setup-maps-grid .mission-section-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bb-space-3);
    padding: var(--bb-space-3) var(--bb-space-4);
    justify-content: stretch;
}
#setup-maps-grid .missions-grid-inner,
#setup-maps-grid .maps-grid,
#setup-maps-grid .setup-map-group-cards,
#setup-maps-grid .setup-map-group {
    display: contents;
}
@media (max-width: 900px) {
    #setup-maps-grid .mission-section-content {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    #setup-maps-grid .mission-section-content {
        grid-template-columns: 1fr;
    }
}

/* Hero row — Start New Battle + Join a Game side-by-side at equal
   width on tablets+, stacked on phones. Both cards use `.card-hero`
   so their min-height matches; flex:1 distributes the row evenly. */
.battle-hero-row {
    display: flex;
    gap: var(--bb-space-3);
    margin-bottom: var(--bb-space-3);
    align-items: stretch;
}
.battle-hero-row > .card-hero {
    flex: 1 1 0;
    margin-bottom: 0;
    flex-direction: column;
    text-align: center;
    gap: var(--bb-space-1);
}
.card-sublabel {
    font-size: var(--bb-text-sm);
    color: var(--bb-text-secondary);
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 500;
}
@media (max-width: 600px) {
    .battle-hero-row { flex-direction: column; }
}
.section { margin-bottom: var(--bb-space-4); }
.section-title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--bb-text-secondary);
    text-transform: uppercase;
    margin: 0 0 var(--bb-space-2);
}
.battles-list {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
}
.battle-item {
    background: var(--bb-bg-elevated);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-3) var(--bb-space-4);
}
.battle-item-clickable {
    cursor: pointer;
    transition: border-color var(--bb-transition-fast);
}
.battle-item-clickable:hover { border-color: var(--bb-accent-primary); }
.battle-item-header {
    display: flex;
    justify-content: space-between;
    gap: var(--bb-space-2);
    margin-bottom: var(--bb-space-1);
}
.battle-item-matchup {
    color: var(--bb-text-primary);
    font-weight: 600;
}
.battle-item-date {
    color: var(--bb-text-muted);
    font-size: var(--bb-text-sm);
}
.battle-item-result {
    display: flex;
    justify-content: space-between;
    font-size: var(--bb-text-sm);
}
.battle-item-result-label {
    font-family: var(--bb-font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.battle-item-result.result-win .battle-item-result-label { color: var(--bb-accent-success); }
.battle-item-result.result-loss .battle-item-result-label { color: var(--bb-accent-danger); }
.battle-item-result.result-draw .battle-item-result-label { color: var(--bb-text-secondary); }
.battle-item-result.result-active .battle-item-result-label { color: var(--bb-accent-primary); }
.battle-item-score {
    color: var(--bb-text-secondary);
}

/* ----------------------------------------------------------------
   <details>-based collapsible groups for TOW step-2 (and any other
   spot that wants native disclosure semantics). HH uses
   .mission-section via buildSetupSection() and inherits style from
   missions.css — these rules give parity for <details> elements so
   the two universes look the same.
   ---------------------------------------------------------------- */
details.setup-section {
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    margin-bottom: var(--bb-space-2);
    background: var(--bb-bg-elevated);
    overflow: hidden;
}
details.setup-section[open] {
    border-color: var(--bb-accent-primary);
}
details.setup-section > summary.setup-section-summary {
    cursor: pointer;
    list-style: none;
    padding: var(--bb-space-2) var(--bb-space-3);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-text-secondary);
    background: var(--bb-bg-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-2);
    user-select: none;
}
details.setup-section > summary.setup-section-summary::-webkit-details-marker {
    display: none;
}
details.setup-section > summary.setup-section-summary::before {
    content: '▶';
    font-size: 0.7em;
    color: var(--bb-text-muted);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
details.setup-section[open] > summary.setup-section-summary::before {
    transform: rotate(90deg);
}
details.setup-section[open] > summary.setup-section-summary {
    border-bottom: 1px solid var(--bb-border);
    color: var(--bb-text-primary);
}
.setup-section-count {
    margin-left: auto;
    font-size: 0.85em;
    color: var(--bb-text-muted);
    font-weight: 500;
}
details.setup-section > .scenario-list {
    padding: var(--bb-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
}

/* ----------------------------------------------------------------------
   Castra import bar
   Sits under the player 1 allegiance toggle. JS toggles [hidden] based
   on sign-in state, then populates the select from /api/castra/armies.
   Layout mirrors the existing army-list-import block above it so the
   two "where's my army from?" affordances feel related.
   ---------------------------------------------------------------------- */
.castra-import-bar {
    margin-top: var(--bb-space-2);
    padding: var(--bb-space-2);
    border: 1px dashed var(--bb-border);
    border-radius: var(--bb-radius-sm, 4px);
    background: var(--bb-surface-elevated, transparent);
}
.castra-import-row {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2);
    margin-bottom: var(--bb-space-2);
}
.castra-import-bar .form-select { width: 100%; }
.castra-import-status {
    margin-top: var(--bb-space-1);
    font-size: 0.85em;
    color: var(--bb-text-muted);
    min-height: 1em;
}
.castra-import-status.castra-error { color: var(--bb-danger, #c46a5a); }