/* 40K Combat Simulator - "Carbon & Blaze" dark theme
 * Palette: Carbon Black #23231a, Charcoal Brown #322f20, Olive Bark #6a5837, Olive #988f2a, Blaze Orange #e8722f (softened from #fe5f00)
 * (chosen from the colour theme prototype; see the prototype/colour-themes branch). Charts read these tokens too
 * (themeColor in app.js), so change colours here only.
 */

:root {
    --bg-primary: #23231a;         /* Carbon Black: page */
    --bg-secondary: #322f20;       /* Charcoal Brown: cards */
    --bg-tertiary: #1a1a13;        /* darker than Carbon Black: header, inputs, table heads */
    --accent: #e8722f;             /* Blaze Orange, softened */
    --accent-hover: #f08c50;
    --accent-dim: #6a5837;         /* Olive Bark */
    --on-accent: #1a1a13;          /* text on accent-coloured buttons and chips */
    --accent-tint: rgba(232, 114, 47, 0.14);  /* faint accent wash: selected rows, focused inputs */
    --text-primary: #efe9d8;
    --text-secondary: #bdb48f;
    --text-muted: #8c8262;
    --border: #4b4430;             /* between Charcoal Brown and Olive Bark */
    --success: #b5aa32;            /* Olive, lifted for dark backgrounds */
    --warning: #e0b23c;
    --error: #e5484d;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
}

/* Header */
.header {
    background: var(--bg-tertiary);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.version {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Main content */
.main-content {
    padding: 1.5rem;
    max-width: 1800px;
    margin: 0 auto;
}

.footer {
    max-width: 1800px;
    margin: 0 auto;
    padding: 1rem 1.5rem 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.footer a {
    color: var(--text-secondary);
}

/* Setup page */
.setup-page {
    max-width: 860px;
}

.setup-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.setup-card h3 {
    margin-bottom: 0.5rem;
}

.setup-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* The two downloads every user needs, as numbered steps in one card */
.setup-downloads {
    border-color: var(--accent-dim);
}

.setup-step {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.setup-step-number {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--accent);
    color: var(--on-accent);
}

.setup-step-body {
    flex: 1;
    min-width: 0;
}

.setup-step-body h4 {
    margin: 0.25rem 0 0.4rem;
    font-size: 1rem;
    color: var(--text-primary);
}

.setup-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.setup-row .filter-input {
    flex: 1 1 360px;
    min-width: 0;
}

.setup-message {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.setup-message:empty {
    display: none;
}

.setup-message.error {
    color: var(--error);
}

.setup-message.ok {
    color: var(--success);
}

.setup-report summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.setup-report table {
    margin-top: 0.75rem;
}

/* Card */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* Combat Grid - Side by Side */
.combat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .combat-grid {
        grid-template-columns: 1fr;
    }
}

/* Form elements */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Autocomplete */
.autocomplete-wrapper {
    position: relative;
}

.autocomplete-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.autocomplete-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.autocomplete-input::placeholder {
    color: var(--text-muted);
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--bg-secondary);
}

.autocomplete-item .item-name {
    font-weight: 500;
}

.autocomplete-item .item-faction {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Unit stats display */
.unit-stats, .weapon-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.weapon-stats {
    grid-template-columns: repeat(5, 1fr);
}

.stat {
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.weapon-abilities {
    font-size: 0.8rem;
    color: var(--accent);
    padding: 0.5rem 0;
}

/* Attacker weapon list */
.weapon-list {
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow-x: auto;
}

.weapon-list-empty {
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.weapon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.weapon-table th {
    padding: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.weapon-table th:first-child,
.weapon-table td:first-child {
    text-align: left;
}

.weapon-table td {
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
}

.weapon-table td:not(:first-child) {
    border-left: none;
}

.weapon-row {
    cursor: pointer;
    transition: background 0.15s;
}

.weapon-row:last-child td {
    border-bottom: none;
}

.weapon-row:hover {
    background: var(--bg-secondary);
}

.weapon-row.selected {
    background: var(--bg-secondary);
}

.weapon-row.selected td:first-child {
    border-left-color: var(--accent);
}

.weapon-row.excluded td:not(.weapon-use) {
    opacity: 0.45;
}

.weapon-table .weapon-use input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.weapon-row-name {
    font-weight: 600;
    color: var(--text-primary);
}

.weapon-row-abilities {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--accent);
    margin-top: 0.15rem;
}

/* Small inputs */
.input-small {
    width: 100px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.input-small:focus {
    outline: none;
    border-color: var(--accent);
}

/* Conditions panel */
.conditions-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 2rem;
}

@media (max-width: 900px) {
    .conditions-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.conditions-column h3 {
    margin-bottom: 0.75rem;
}

/* Toggle buttons */
.toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    user-select: none;
}

.toggle:hover {
    border-color: var(--accent-dim);
}

.toggle.active,
.toggle:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.toggle input {
    display: none;
}

/* Re-roll button groups */
.reroll-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reroll-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reroll-row > label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 80px;
}

.btn-group {
    display: flex;
    gap: 0.25rem;
}

.btn-option {
    padding: 0.35rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-option:hover {
    border-color: var(--accent-dim);
}

.btn-option.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Simulation options */
.simulation-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.iterations-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.iterations-input input {
    width: 80px;
    padding: 0.35rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

/* Action buttons */
.simulate-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.75rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--accent);
}

/* Results panel */
.results-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.result-card {
    background: var(--bg-tertiary);
    padding: 1.25rem;
    border-radius: 6px;
    text-align: center;
}

.result-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.result-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* Results detail grid */
.results-detail {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .results-detail {
        grid-template-columns: 1fr;
    }
}

.breakdown h3, .distribution h3 {
    margin-bottom: 1rem;
}

.distribution .chart-note {
    margin: -0.5rem 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Breakdown table */
.breakdown-table {
    width: 100%;
    border-collapse: collapse;
}

.breakdown-table th,
.breakdown-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.breakdown-table th {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.breakdown-table td {
    font-size: 0.9rem;
}

.breakdown-table tr:last-child td {
    border-bottom: none;
}

/* Chart container */
.chart-container {
    height: 280px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 0.5rem;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Placeholder message */
.placeholder-message {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* =========================================================================
   Navigation
   ========================================================================= */

.header-brand {
    text-decoration: none;
}

.nav-link {
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.nav-link.active {
    color: var(--accent);
    background: var(--bg-secondary);
}

/* =========================================================================
   Page Header
   ========================================================================= */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.page-header h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

/* =========================================================================
   Data Management Tabs
   ========================================================================= */

.data-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: 8px;
    width: fit-content;
}

.data-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.data-tab:hover {
    color: var(--text-primary);
}

.data-tab.active {
    background: var(--accent);
    color: var(--on-accent);
}

.data-content {
    display: none;
}

.data-content.active {
    display: block;
}

/* =========================================================================
   Data Toolbar
   ========================================================================= */

.data-toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}

.filter-select,
.filter-input {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-input {
    width: 250px;
}

/* =========================================================================
   Data Table
   ========================================================================= */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.data-table tr:hover {
    background: var(--bg-tertiary);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.btn-small {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-small:hover {
    border-color: var(--accent);
}

.btn-small.btn-danger {
    color: var(--error);
}

.btn-small.btn-danger:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

/* =========================================================================
   Modals
   ========================================================================= */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.modal-large {
    max-width: 700px;
}

.modal-content.modal-xlarge {
    max-width: 1000px;
}

/* Unit form weapon picker */
.weapon-picker-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.weapon-picker-header label {
    margin: 0;
    white-space: nowrap;
}

.weapon-picker-header .filter-input {
    flex: 1;
    min-width: 0;
}

.weapon-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.weapon-picker-column h4 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.weapon-picker-count {
    font-weight: 400;
    color: var(--text-muted);
}

.weapon-picker-list {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.25rem;
}

.weapon-picker-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
}

.weapon-picker-item:hover {
    background: var(--bg-secondary);
}

.weapon-picker-item input.pick {
    grid-row: span 2;
    accent-color: var(--accent);
    cursor: pointer;
}

.weapon-picker-item .weapon-picker-name,
.weapon-picker-item .weapon-picker-stats {
    grid-column: 2;
}

.weapon-picker-item .pick-qty {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 52px;
    padding: 0.25rem 0.35rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    text-align: center;
}

.weapon-picker-item .pick-qty:disabled {
    opacity: 0.35;
}

.weapon-picker-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.weapon-picker-name {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.weapon-picker-stats {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.weapon-picker-empty {
    padding: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 600px) {
    .weapon-picker {
        grid-template-columns: 1fr;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal form,
.modal > div:not(.modal-header):not(.modal-actions) {
    padding: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.form-row.stats-row .form-group {
    flex: 0 0 auto;
    width: 70px;
}

.form-row.stats-row .form-group input {
    width: 100%;
    text-align: center;
}

/* =========================================================================
   Scenarios Page
   ========================================================================= */

.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.scenario-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    transition: all 0.2s;
    cursor: pointer;
}

.scenario-card:hover {
    border-color: var(--accent-dim);
}

.scenario-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-tint);
}

.scenario-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 0.25rem;
}

.scenario-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.scenario-content {
    flex: 1;
}

.scenario-content h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.scenario-matchup {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.scenario-matchup .attacker {
    color: var(--accent);
}

.scenario-matchup .vs {
    color: var(--text-muted);
    margin: 0 0.5rem;
}

.scenario-matchup .defender {
    color: var(--success);
}

.scenario-results {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.result-mini {
    text-align: center;
}

.result-mini .value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.result-mini .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.scenario-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.scenario-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Compare Bar */
.compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 100;
}

/* Compare Table */
.compare-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    padding: 0.75rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.compare-table th {
    background: var(--bg-tertiary);
    font-size: 0.875rem;
}

.compare-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
}

.compare-table tr.highlight td {
    font-weight: 700;
    color: var(--accent);
}

.compare-chart {
    height: 300px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 1rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.empty-state p {
    margin-bottom: 1.5rem;
}

/* =========================================================================
   Import Diff
   ========================================================================= */

.diff-sections {
    padding: 1rem;
}

.diff-section {
    margin-bottom: 1.5rem;
}

.diff-section h4 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.diff-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.diff-item {
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid transparent;
}

.diff-item.diff-add {
    border-left-color: var(--success);
}

.diff-item.diff-change {
    border-left-color: var(--warning);
}

.diff-item.diff-remove {
    border-left-color: var(--error);
}

.diff-item label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.diff-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-weight: 600;
}

.diff-badge.add {
    background: var(--success);
    color: var(--bg-primary);
}

.diff-badge.change {
    background: var(--warning);
    color: var(--bg-primary);
}

.diff-badge.remove {
    background: var(--error);
    color: white;
}

.diff-details {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    margin-left: 1.75rem;
}

/* =========================================================================
   Analytics Page - Matrix Comparison
   ========================================================================= */

/* Single column: conditions, attackers, defenders, actions, results */
.matchups-page {
    display: flex;
    flex-direction: column;
}

/* Attacker / defender tables */
.roster-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.roster-header h2 {
    margin-bottom: 0;
}

.roster-header .weapon-type-toggle {
    margin-bottom: 0;
    min-width: 240px;
}

.roster-header .btn-add-unit {
    margin-left: auto;
}

.roster-scroll {
    overflow-x: auto;
}

.roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.roster-table th {
    padding: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.roster-table td {
    padding: 0.4rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.roster-table th:nth-child(2),
.roster-table th:nth-child(3),
.roster-table td.roster-unit,
.roster-table td.roster-weapon,
.roster-table td.roster-abilities,
#defender-table th:first-child,
#defender-table td:first-child {
    text-align: left;
}

.roster-table tr.roster-group-start td {
    border-top: 2px solid var(--border);
}

.roster-table tr.excluded td:not(.roster-unit):not(.col-check) {
    opacity: 0.4;
}

.roster-unit {
    vertical-align: top;
    background: var(--bg-tertiary);
    min-width: 140px;
}

.roster-unit-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.roster-unit-faction {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.roster-weapon {
    color: var(--text-primary);
}

.roster-abilities {
    font-size: 0.75rem;
    color: var(--accent);
}

.roster-muted {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.roster-empty td {
    padding: 1.25rem;
    color: var(--text-muted);
    text-align: center;
    border-bottom: none;
}

.roster-models {
    width: 60px;
    padding: 0.3rem 0.4rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: center;
}

.roster-models:focus {
    outline: none;
    border-color: var(--accent);
}

.roster-table .col-check,
.roster-table .col-remove {
    width: 32px;
}

.roster-table .col-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.roster-table .btn-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.25rem;
}

.roster-table .btn-remove:hover {
    color: var(--error);
}

.matchups-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Add Unit pop-up */
.unit-picker-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.unit-picker-filters .filter-input {
    flex: 1;
    min-width: 0;
}

.unit-picker-list {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
}

.unit-picker-item {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
    gap: 0.1rem 1rem;
    padding: 0.6rem 0.85rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.unit-picker-item:last-child {
    border-bottom: none;
}

.unit-picker-item:hover {
    background: var(--bg-secondary);
}

.unit-picker-name {
    font-weight: 600;
    color: var(--text-primary);
}

.unit-picker-faction {
    grid-row: 2;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.unit-picker-stats {
    grid-row: span 2;
    align-self: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Matrix rows */
.matrix-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.matrix-weapon-row .matrix-row-header {
    font-weight: 400;
    color: var(--text-secondary);
    padding-left: 1.25rem;
}

.matrix-weapon-row .matrix-cell {
    font-size: 0.8em;
    opacity: 0.85;
}

.matrix-total-row th,
.matrix-total-row td {
    border-top: 2px solid var(--accent);
    font-weight: 700;
}

.matrix-cell.matrix-total-cell {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}


/* Weapon Type Toggle */
.weapon-type-toggle {
    margin-bottom: 0.5rem;
}

.toggle-bar {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 3px;
}

.toggle-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.toggle-btn:hover {
    color: var(--text-primary);
}

.toggle-btn.active {
    background: var(--accent);
    color: var(--on-accent);
}

/* Conditions Bar */
.conditions-bar {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.conditions-inline {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.condition-toggles {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.toggle-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.toggle-inline input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.condition-rerolls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reroll-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.select-small {
    padding: 0.35rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.select-small:focus {
    outline: none;
    border-color: var(--accent);
}

.metric-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.metric-selector label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Matrix Container */
.matrix-container {
    min-height: 300px;
}

.matrix-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.matrix-loading,
.matrix-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 0.9rem;
}

.matrix-loading {
    color: var(--accent);
}

.matrix-error {
    color: var(--error);
}

/* Matrix Table */
.matrix-scroll {
    overflow: auto;
    max-height: calc(100vh - 400px);
}

.matrix-table {
    border-collapse: collapse;
    font-size: 0.8rem;
}

.matrix-table th,
.matrix-table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
}

.matrix-corner {
    background: var(--bg-tertiary);
    min-width: 180px;
}

.matrix-header-cell {
    background: var(--bg-tertiary);
    font-weight: 600;
    min-width: 100px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-row-header {
    background: var(--bg-tertiary);
    font-weight: 500;
    text-align: left !important;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-cell {
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 600;
    color: var(--bg-primary);
}

.matrix-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: relative;
}

/* Matrix Summary */
.matrix-summary {
    margin-top: 1rem;
}

.matrix-summary h3 {
    font-size: 0.9rem;
    color: var(--accent);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.summary-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.summary-column h4 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.summary-column ul {
    list-style: none;
    padding: 0;
}

.summary-column li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.summary-column li:last-child {
    border-bottom: none;
}

.summary-column li strong {
    color: var(--text-primary);
}

/* Detail Panel (overlay from the right) */
.matchups-detail-panel {
    position: fixed;
    top: 80px;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 100vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 1rem;
    overflow-y: auto;
    z-index: 50;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.detail-header h3 {
    font-size: 0.9rem;
    color: var(--accent);
    text-transform: uppercase;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
}

.btn-close:hover {
    color: var(--text-primary);
}

.detail-matchup {
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.detail-matchup .detail-attacker,
.detail-matchup .detail-defender {
    margin-bottom: 0.35rem;
}

.detail-matchup strong {
    color: var(--text-secondary);
}

.detail-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.detail-stat {
    background: var(--bg-tertiary);
    padding: 0.75rem;
    border-radius: 6px;
    text-align: center;
}

.detail-stat .detail-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.detail-stat .detail-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-breakdown {
    margin-bottom: 1.25rem;
}

.detail-breakdown h4,
.detail-distribution h4 {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.detail-breakdown .breakdown-table {
    font-size: 0.8rem;
}

.detail-breakdown .breakdown-table td {
    padding: 0.5rem;
}

.chart-container-small {
    height: 180px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

/* Comparison List */
.comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.comparison-info .comparison-name {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.comparison-info .comparison-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.comparison-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-load {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.modal-body {
    padding: 1.5rem;
}

/* Responsive Analytics */
@media (max-width: 900px) {
    .roster-header .btn-add-unit {
        margin-left: 0;
    }

    .conditions-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .metric-selector {
        margin-left: 0;
    }

    .summary-columns {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Data Page - sections, faction panels, modal inputs
   ========================================================================= */

.data-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: -0.5rem 0 1rem;
}

.data-note a,
.bsdata-status a {
    color: var(--accent-hover);
}

/* BSData import status and record sources (Data page) */
.bsdata-status {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    margin-bottom: 1rem;
}

.bsdata-status:empty {
    display: none;
}

.bsdata-status-error {
    border-color: var(--error);
}

.bsdata-status-missing {
    border-color: var(--warning);
}

.bsdata-status .muted {
    color: var(--text-muted);
}

.source-badge,
.legends-tag {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.source-custom {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    color: var(--success);
}

.source-missing {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--warning);
}

.source-wahapedia {
    background: var(--accent-tint);
    color: var(--accent);
}

/* How much of a Wahapedia rule's text was read into modifiers */
.rule-parse {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.rule-parse-modelled,
.rule-parse-edited {
    color: var(--success);
}

.rule-parse-partial {
    color: var(--warning);
}

.rule-source {
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.rule-source summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.rule-source .rule-text,
.rule-parse-notes {
    margin-top: 0.35rem;
    max-width: 640px;
}

.rule-parse-notes {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wahapedia-source {
    max-height: 14rem;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-section {
    margin-bottom: 2rem;
}

.data-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.75rem 0 0.5rem;
}

.data-section-header h3,
.data-section-header h4 {
    margin: 0;
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.data-section-header h4 {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.data-table .col-expand {
    width: 32px;
}

.btn-expand {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 0.25rem;
}

.btn-expand:hover {
    color: var(--accent);
}

.faction-detail-row > td {
    background: var(--bg-tertiary);
    padding: 0.5rem 1rem 1rem 2.5rem;
}

.faction-detail-row:hover {
    background: none;
}

.data-table-compact th,
.data-table-compact td {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

.data-table .empty-cell {
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

.data-table .notes-cell {
    max-width: 320px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.form-row .form-group.form-group-narrow {
    flex: 0 0 110px;
}

.modal .form-group input[type="text"],
.modal .form-group input[type="number"],
.modal .form-group select,
.modal .form-group textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.875rem;
}

.modal .form-group textarea {
    resize: vertical;
}

.modal .form-group input:focus,
.modal .form-group select:focus,
.modal .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.modal .form-row.stats-row {
    flex-wrap: wrap;
    gap: 0.6rem;
}

.modal .form-row.stats-row .form-group {
    width: 60px;
}

/* Simulator: temporary per-run weapon quantity */
.weapon-table .weapon-qty {
    width: 52px;
    padding: 0.25rem 0.35rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    text-align: center;
}

.weapon-table .weapon-qty:focus {
    outline: none;
    border-color: var(--accent);
}

/* =========================================================================
   Data Page - Keywords reference
   ========================================================================= */

.kw-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kw-toolbar .filter-input {
    flex: 1 1 260px;
}

.kw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.kw-chip {
    padding: 0.35rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.kw-chip:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.kw-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.kw-guide {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.kw-guide summary {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.kw-guide-body {
    padding: 0 1rem 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.kw-guide-body ul {
    margin: 0.5rem 0 0 1.1rem;
    display: grid;
    gap: 0.35rem;
}

.kw-guide code,
.kw-hint code,
.empty-cell code {
    padding: 0.1rem 0.35rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.8em;
    color: var(--text-primary);
}

.kw-group-title {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kw-count {
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    background: var(--bg-tertiary);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.kw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.kw-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: 8px;
}

.kw-card.kw-card-reference {
    border-left-color: var(--border);
}

.kw-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.kw-card-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.kw-badge {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kw-badge-calc {
    background: color-mix(in srgb, var(--success) 18%, transparent);
    color: var(--success);
}

.kw-badge-ref {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.kw-format {
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.8rem;
    cursor: copy;
}

.kw-format:hover {
    border-color: var(--accent);
}

.kw-format.copied {
    border-color: var(--success);
    color: var(--success);
}

.kw-format.copied::after {
    content: '  copied';
    font-family: inherit;
}

.kw-summary {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.kw-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
}

.kw-tag {
    padding: 0.1rem 0.45rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.kw-tag-step {
    color: var(--warning);
}

.kw-ref {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* As-you-type keyword warnings in the data forms */
.kw-hint {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.3rem;
    font-size: 0.75rem;
}

.kw-hint:empty {
    display: none;
}

.kw-hint-warn {
    color: var(--warning);
}

.kw-hint-info {
    color: var(--text-muted);
}

/* =========================================================================
   Rules & stratagems panels (Simulator and Analytics)
   ========================================================================= */

.rules-panel {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.rules-panel > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    list-style: none;
}

.rules-panel > summary::-webkit-details-marker {
    display: none;
}

.rules-panel > summary::before {
    content: '\f054';  /* Font Awesome chevron-right */
    font: var(--fa-font-solid);
    color: var(--text-muted);
    font-size: 0.7rem;
    width: 0.8rem;
}

.rules-panel[open] > summary::before {
    content: '\f078';  /* chevron-down */
}

.rules-panel-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rules-summary {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.rules-summary.rules-summary-active {
    color: var(--success);
}

.rules-panel .rules-list {
    padding: 0 0.6rem 0.6rem;
}

.rules-list {
    display: grid;
    gap: 0.15rem;
    max-height: 320px;
    overflow-y: auto;
}

.rules-group-title {
    margin: 0.5rem 0 0.15rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.rule-row:hover {
    background: var(--bg-secondary);
}

.rule-row input {
    accent-color: var(--accent);
    cursor: pointer;
}

.rule-row:has(input:checked) {
    background: var(--accent-tint);
}

.rule-name {
    font-weight: 600;
    color: var(--text-primary);
}

.rule-kind,
.rule-phase,
.rule-cp {
    padding: 0.05rem 0.4rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.rule-cp {
    color: var(--warning);
}

.rule-modifier {
    flex-basis: 100%;
    padding-left: 1.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.rule-row.rule-no-effect .rule-name,
.rule-row.rule-no-effect .rule-modifier {
    color: var(--text-muted);
    font-weight: 400;
}

.rule-row.rule-no-effect .rule-modifier {
    font-style: italic;
}

.rules-empty {
    padding: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* Analytics: attackers and defenders side by side */
.matchup-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.matchup-rules-column h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.matchup-rules-column .rules-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
    padding: 0.4rem;
}

.rules-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .matchup-rules {
        grid-template-columns: 1fr;
    }
}

/* Simulator: per-weapon results */
.results-mc-extra {
    margin: -0.5rem 0 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.results-mc-extra:empty {
    display: none;
}

.weapon-results:empty {
    display: none;
}

.weapon-results {
    margin-bottom: 1.5rem;
}

.weapon-results h3 {
    margin-bottom: 0.5rem;
}

.weapon-results-note {
    font-weight: 400;
    text-transform: none;
    color: var(--text-muted);
}

.weapon-results-scroll {
    overflow-x: auto;
}

.weapon-results-table th,
.weapon-results-table td {
    text-align: right;
    white-space: nowrap;
}

.weapon-results-table th:first-child,
.weapon-results-table td:first-child {
    text-align: left;
}

.weapon-results-table tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--border);
}

/* Data page: points by unit size */
.points-table {
    border-collapse: collapse;
    margin-bottom: 0.4rem;
}

.points-table th {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: left;
}

.points-table td {
    padding: 0.2rem 0.4rem 0.2rem 0;
}

.modal .points-table input[type="number"] {
    width: 100px;
    padding: 0.4rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
}

.points-table .btn-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.points-table .btn-remove:hover {
    color: var(--error);
}

/* Analytics: unit size, points, generic profiles */
.unit-size {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.unit-size .roster-models {
    width: 52px;
}

.unit-points {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--warning);
}

.unit-points:empty {
    display: none;
}

.matrix-weight {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-muted);
}

.roster-header .defender-mode-toggle {
    margin-bottom: 0;
    min-width: 260px;
}

#defender-table tr.excluded td:not(.col-check) {
    opacity: 0.4;
}

/* Analytics: Army Analysis */
.army-analysis {
    margin-top: 1rem;
}

.analysis-tabs {
    flex-wrap: wrap;
}

.army-analysis h3 {
    margin: 1rem 0 0.5rem;
}

.analysis-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.analysis-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.analysis-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    overflow-wrap: anywhere;
}

.analysis-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.analysis-note {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.analysis-intro {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.analysis-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
}

.analysis-columns {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
    gap: 1.5rem;
    align-items: center;
}

.analysis-table td.score-good {
    color: var(--success);
    font-weight: 700;
}

.roles-chart {
    min-height: 340px;
}

.coverage-cell {
    cursor: default;
}

.wiped-badge {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--success);
}

@media (max-width: 900px) {
    .analysis-columns {
        grid-template-columns: 1fr;
    }
}

/* Extra modifiers (Simulator defender card, Analytics defender rows) */
.text-input,
.roster-text {
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
}

.roster-text {
    min-width: 160px;
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;
}

.text-input:focus,
.roster-text:focus {
    outline: none;
    border-color: var(--accent);
}

.field-hint {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.roster-table td.roster-extra {
    text-align: left;
}

/* Detachments, wargear options, BSData reference text and weapon copying */
.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.label-row .filter-check {
    font-size: 0.75rem;
}

.detachment-select {
    width: 100%;
    margin: 0.5rem 0;
}

.rule-detachment,
.option-tag {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--warning);
    white-space: nowrap;
}

.option-tag {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    text-transform: uppercase;
}

.weapon-options-header td {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding-top: 0.6rem;
}

.weapon-row.weapon-option .weapon-row-name {
    font-style: italic;
}

.muted {
    color: var(--text-muted);
}

.bsdata-reference {
    margin-top: 1rem;
    font-size: 0.85rem;
}

.bsdata-reference summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.bsdata-reference h5 {
    margin: 1rem 0 0.25rem;
    font-size: 0.95rem;
    color: var(--accent-hover);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.15rem;
}

.bsdata-reference p {
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    white-space: pre-line;
}

.bsdata-weapon-results {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0.35rem;
}

.bsdata-weapon-result {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    margin-bottom: 0.25rem;
}

.bsdata-weapon-result:hover {
    border-color: var(--accent);
}

/* BSData rule text (Core.formatRuleText) */
.rule-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.rule-text h6 {
    font-size: 0.85rem;
    color: var(--text-primary);
    margin: 0.6rem 0 0.15rem;
}

.rule-text p {
    margin-bottom: 0.4rem;
    white-space: normal;
}

.rule-text ul {
    margin: 0.2rem 0 0.5rem 1.25rem;
}

.rule-text strong {
    color: var(--text-primary);
}

.rule-text ins {
    text-decoration: underline;
}

.rule-keyword {
    font-variant: small-caps;
    letter-spacing: 0.03em;
}

.rule-table {
    border-collapse: collapse;
    margin: 0.4rem 0;
}

.rule-table th,
.rule-table td {
    border: 1px solid var(--border);
    padding: 0.2rem 0.6rem;
    text-align: left;
}

.unit-abilities-formatted {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Leaders */
.roster-leader {
    display: block;
    margin-top: 0.35rem;
    max-width: 100%;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.3rem;
}

.leader-buffs {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--warning);
    white-space: normal;
}

.leader-group .filter-select {
    width: 100%;
}

.leader-buffs-table select,
.leader-buffs-table input {
    width: 100%;
}

.leader-buffs-table td:nth-child(3) {
    width: 55%;
}

/* Font Awesome icons next to text */
.header-brand h1 .fa-solid,
.nav-link .fa-solid,
h2 .fa-solid,
h3 .fa-solid,
h4 .fa-solid,
.btn .fa-solid {
    margin-right: 0.35em;
}

.nav-link .fa-solid {
    opacity: 0.8;
}

/* =========================
   Armies page
   ========================= */

.armies-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}

.armies-layout .card h3 {
    margin-bottom: 0.75rem;
}

.army-form {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 0.75rem;
}

.army-form .filter-input,
.army-form .filter-select {
    width: 100%;
}

.army-points {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0.75rem 0 0.25rem;
}

.army-points-total {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
}

.army-points.over .army-points-total {
    color: var(--error);
}

.army-saved-state {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.army-saved-state.unsaved {
    color: var(--warning);
}

.army-problems {
    margin: 0 0 0.75rem 1.1rem;
    color: var(--warning);
    font-size: 0.85rem;
}

.army-detachments {
    margin-top: 1rem;
}

.army-detachments-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    padding: 0.35rem 0;
}

.army-detachments-header::-webkit-details-marker {
    display: none;
}

.army-detachments-header::before {
    content: '▸';  /* Right-pointing triangle; turns down when open */
    color: var(--text-muted);
    transition: transform 0.15s;
}

.army-detachments[open] > .army-detachments-header::before {
    transform: rotate(90deg);
}

.army-detachments-chosen {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.army-dp {
    font-weight: 700;
    color: var(--accent);
}

.army-dp.over {
    color: var(--error);
}

.army-detachment-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.35rem 0.75rem;
    max-height: 14rem;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.army-detachment {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
}

.army-detachment.chosen {
    background: var(--accent-tint);
}

.army-detachment-name {
    font-weight: 600;
}

.army-detachment-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.army-detachment-tag {
    font-size: 0.65rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

/* Detachment checklists on the Simulator and Analytics */
.detachment-picker {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.85rem;
}

.detachment-picker summary {
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
}

.detachment-options {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.4rem 0.6rem;
}

.detachment-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.detachment-dp,
.detachment-faction {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.detachment-faction {
    margin-top: 0.3rem;
    text-transform: uppercase;
}

.army-enhancement-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.army-enhancement-count.over {
    color: var(--error);
}

.army-warlord-tag {
    font-size: 0.65rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    text-transform: uppercase;
}

.army-joined-by {
    display: block;
    font-size: 0.75rem;
}

/* The army table stays inside its card: dropdowns shrink with it, and it scrolls sideways if still too wide */
.army-units-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.army-units {
    width: 100%;
}

/* Wargear: the button and summary in the army table, and the popup */
.army-wargear {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    margin-top: 0.2rem;
}

.army-wargear-summary {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.wargear-body {
    padding: 1rem 1.5rem;
    max-height: 65vh;
    overflow-y: auto;
}

.wargear-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.wargear-points {
    font-weight: 700;
    color: var(--accent);
}

.wargear-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem 0.6rem;
    margin: 0 0 0.75rem;
}

.wargear-section legend {
    padding: 0 0.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wargear-range {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.wargear-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    cursor: pointer;
}

.wargear-count {
    width: 4.5rem;
    padding: 0.2rem 0.4rem;
}

.wargear-loadout {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.army-units select {
    padding: 0.25rem 0.4rem;
    width: 100%;
    min-width: 5rem;
    max-width: 14rem;
    text-overflow: ellipsis;
}

.army-units .army-size {
    width: auto;
    min-width: 0;
}

/* Warlord: just wide enough for the crown and the radio button, which stay put when chosen */
.army-units th:nth-child(1),
.army-units td:nth-child(1) {
    width: 1%;
    padding-left: 0.6rem;
    padding-right: 0.25rem;
    text-align: center;
    white-space: nowrap;
}

.army-units .army-warlord {
    margin: 0;
    vertical-align: middle;
}

.army-units td:nth-child(3),
.army-units td:nth-child(4) {
    white-space: nowrap;
}

/* A leader or support unit sits under the unit it joins: its name is indented (not the Warlord column) */
.army-unit-attached td:nth-child(2) {
    padding-left: 1.75rem;
}

.army-unit-warning {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--warning) 20%, transparent);
    color: var(--warning);
    font-weight: 700;
    cursor: help;
}

.army-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.army-add .filter-input {
    width: 100%;
}

.army-add .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.army-unit-picker {
    max-height: 65vh;
    overflow-y: auto;
}

.army-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
}

.army-list-item.active .army-list-name {
    color: var(--accent);
}

.army-open {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.army-list-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.army-list-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.army-list-meta.over {
    color: var(--warning);
}

.army-list-actions {
    display: flex;
    gap: 0.25rem;
}

.army-text {
    width: calc(100% - 2rem);
    margin: 1rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    resize: vertical;
}

.army-share-code {
    word-break: break-all;
}

.army-share-hint {
    margin: 1rem 1rem 0;
}

.army-share-error {
    margin: 0 1rem;
    color: var(--error);
    font-size: 0.85rem;
}

.army-share-error:empty {
    display: none;
}

.army-copied {
    margin-right: auto;
    color: var(--success);
    font-size: 0.85rem;
}

@media (max-width: 1100px) {
    .armies-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .army-form {
        grid-template-columns: 1fr 1fr;
    }
}

/* Play (experimental): the top-down board */
:root {
    --play-p1: #e8722f;            /* Player 1: Blaze Orange */
    --play-p2: #5fa8d3;            /* Player 2: a cool blue that reads against the board */
    --play-field: #1d1d16;
}

.play-badge {
    font-size: 0.7rem;
    vertical-align: middle;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--accent-dim);
    border-radius: 999px;
    color: var(--text-secondary);
}

.play-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 260px;
    gap: 1rem;
    align-items: start;
}

.play-layout .card h3 { margin-bottom: 0.6rem; }
.play-new-title { margin-top: 1.25rem; }
.play-games .filter-select, .play-games .filter-input { width: 100%; }
.play-hint { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; }

.play-game-row { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.25rem; }
.play-game-row.active .play-game-open { border-color: var(--accent); background: var(--accent-tint); }
.play-game-open {
    flex: 1;
    text-align: left;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}
.play-game-open small { display: block; color: var(--text-muted); }
.btn-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.3rem; }
.btn-icon:hover { color: var(--error); }

.play-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
/* The message on the left and the phase track in the middle share one row above the board */
.play-subbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
               gap: 0.75rem; margin-bottom: 0.35rem; min-height: 1.4rem; }
.play-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.play-message { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.3; }
.play-turn { font-size: 0.9rem; padding-left: 0.5rem; border-left: 4px solid var(--play-p1); }
.play-turn.play-p2 { border-left-color: var(--play-p2); }
.play-move-modes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.25rem 0 0.4rem; }
.play-move-modes .btn-small.active { border-color: var(--accent); background: var(--accent-tint); color: var(--text-primary); }
.play-ghost { fill: none; stroke: var(--player); stroke-opacity: 0.5; stroke-width: 0.05; stroke-dasharray: 0.15 0.12;
              pointer-events: none; }
.play-move-ring { fill: var(--player); fill-opacity: 0.05; stroke: var(--player); stroke-opacity: 0.35; stroke-width: 0.05;
                  stroke-dasharray: 0.3 0.2; pointer-events: none; }
.play-readout {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: 0.85rem;
}
.play-readout.over { color: var(--error); border-color: var(--error); }
.play-message.error { color: var(--error); }

.play-board {
    display: block;
    width: 100%;
    aspect-ratio: 62 / 46;
    background: var(--bg-tertiary);
    border-radius: 6px;
    touch-action: none;
    user-select: none;
    cursor: grab;
}
.play-board.panning, .play-board.panning .play-model { cursor: grabbing; }
.play-board.measuring, .play-board.measuring .play-model { cursor: crosshair; }
.play-measure { pointer-events: none; }
.play-measure line { stroke: var(--text-primary); stroke-width: 0.1; stroke-dasharray: 0.4 0.2; }
.play-measure circle { fill: var(--text-primary); }
.play-measure text { fill: var(--text-primary); font-size: 0.9px; font-weight: 700; text-anchor: middle;
                     paint-order: stroke; stroke: var(--bg-tertiary); stroke-width: 0.2px; }
.play-field { fill: var(--play-field); stroke: var(--border); stroke-width: 0.08; }
.play-zone { opacity: 0.12; }
.play-zone.play-p1 { fill: var(--play-p1); }
.play-zone.play-p2 { fill: var(--play-p2); }
.play-log-aftermath { margin-top: 0.4rem; font-size: 0.85em; color: var(--text-muted, #aaa); }  /* Emergency disembarks, Deadly Demise */
.play-ingress { fill: var(--success, #3c9a5f); opacity: 0.22; pointer-events: none; }  /* Where a unit from reserves can arrive */
/* Death Guard: a selected unit's Contagion Range, and Afflicted units */
.play-contagion-ring { fill: #7a9a2e; fill-opacity: 0.07; stroke: #7a9a2e; stroke-opacity: 0.6; stroke-width: 0.06;
    stroke-dasharray: 0.35 0.25; pointer-events: none; }
.play-unit-group.afflicted .play-label { fill: #9cbf45; }
.play-afflicted i { color: #7a9a2e; }
.play-grid line { stroke: #ffffff; stroke-opacity: 0.05; stroke-width: 0.03; }
.play-grid line.major { stroke-opacity: 0.12; }

.play-unit-group { --player: var(--play-p1); }
.play-unit-group.play-p2 { --player: var(--play-p2); }
.play-model { fill: var(--player); fill-opacity: 0.85; stroke: #000; stroke-width: 0.06; cursor: grab; }
.play-model.leader { stroke: #000; stroke-width: 0.06; }
.play-leader-ring { fill: none; stroke: #f2c14e; stroke-width: 0.14; pointer-events: none; }
.play-leader-crown { fill: #f2c14e; stroke: #000; stroke-width: 0.04; pointer-events: none; }
.play-model.estimated { stroke-dasharray: 0.25 0.15; stroke: var(--text-primary); }
.play-unit-hit { fill: transparent; stroke: none; cursor: grab; }
.play-unit-outline { fill: none; stroke: var(--player); stroke-opacity: 0.35; stroke-width: 0.12; }
.play-unit-group.selected .play-unit-outline { stroke-opacity: 1; stroke-width: 0.24; }
.play-shot { stroke-width: 0.12; stroke-dasharray: 0.5 0.3; stroke-linecap: round; pointer-events: none; }
.play-shot.planned { stroke: var(--error); }
.play-shot.fired { stroke: var(--text-secondary); stroke-opacity: 0.55; }
.play-arrow.planned { fill: var(--error); }
.play-arrow.fired { fill: var(--text-secondary); fill-opacity: 0.55; }
.play-wounds { pointer-events: none; }
.play-wounds circle { fill: var(--bg-tertiary); stroke: var(--error); stroke-width: 0.07; }
.play-wounds text { fill: var(--text-primary); font-size: 0.42px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.play-label { fill: var(--text-primary); font-size: 0.8px; text-anchor: middle; pointer-events: none; }

.play-player { margin-bottom: 0.9rem; }
.play-player h4 { margin-bottom: 0.35rem; border-left: 4px solid var(--play-p1); padding-left: 0.4rem; }
.play-player.play-p2 h4 { border-left-color: var(--play-p2); }
.play-unit {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
}
.play-unit small { display: block; color: var(--text-muted); }
.play-unit.selected { border-color: var(--accent); background: var(--accent-tint); }
.play-orders { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.play-orders select { width: 100%; font-size: 0.8rem; padding: 0.15rem 0.3rem; }
.play-unit-group.targeted .play-unit-outline { stroke: var(--error); stroke-opacity: 1; stroke-width: 0.3; stroke-dasharray: 0.4 0.2; }
.play-shooting { margin-bottom: 0.5rem; }
.play-weapon { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.play-weapon label { display: block; }
.play-weapon select { width: 100%; margin-top: 0.2rem; font-size: 0.85rem; }
.play-weapon.blocked label { color: var(--text-muted); }
.play-why { display: block; color: var(--warning); }
.play-shooting .btn { margin-top: 0.5rem; width: 100%; }
.play-log { margin-top: 0.75rem; }
.play-log h3 { margin-bottom: 0.4rem; }
.play-log-entry { border-top: 1px solid var(--border); padding: 0.35rem 0; }
.play-log-entry summary { cursor: pointer; }
.play-log-roll { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.play-shock-bad { color: var(--warning); }
.play-shock-good { color: var(--success); }
.play-move-modes .btn-small small { color: var(--text-muted); }
.play-log-attack { margin: 0.35rem 0 0.35rem 1rem; }
.play-dice-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; }
.play-dice-label { width: 7.5rem; color: var(--text-secondary); font-size: 0.85rem; }
.play-die {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600;
    background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-muted);
}
.play-die.success { border-color: var(--success); color: var(--text-primary); }
.play-die.critical { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.play-die.fail { opacity: 0.55; }
.play-die.value { border-color: var(--text-secondary); color: var(--text-primary); }
.play-phases { --player: var(--play-p1); display: flex; align-items: flex-start; justify-content: center; gap: 0; margin: 0; }
.play-phases.play-p2 { --player: var(--play-p2); }
.play-phase { display: flex; flex-direction: column; align-items: center; width: 4.2rem; }
.play-phase-box {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 6px; font-size: 1rem;
    background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-muted);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.play-phase-label { margin-top: 0.1rem; font-size: 0.7rem; color: var(--text-muted); text-align: center; line-height: 1.15; }
.play-phase-label small { display: block; color: var(--player); font-weight: 600; }
.play-phase.done .play-phase-box { color: var(--text-secondary); border-color: var(--accent-dim); opacity: 0.7; }
.play-phase-done { position: absolute; right: -0.3rem; bottom: -0.3rem; font-size: 0.6rem; padding: 0.12rem;
                   border-radius: 50%; background: var(--bg-secondary); color: var(--success); }
.play-phase.current .play-phase-box { background: var(--player); border-color: var(--player); color: var(--on-accent);
                                      box-shadow: 0 0 0 3px color-mix(in srgb, var(--player) 30%, transparent); }
.play-phase.current .play-phase-label { color: var(--text-primary); font-weight: 600; }
.play-phase-link { width: 1rem; height: 2px; margin-top: 1.2rem; background: var(--border); }
/* Units that can still act this phase: a soft pulse on the board, a marker in the list; those done, dimmed */
.play-unit-group.ready .play-unit-outline { stroke-opacity: 0.9; stroke-width: 0.28; filter: drop-shadow(0 0 0.25px var(--player));
                                            animation: play-ready 1.8s ease-in-out infinite; }
@keyframes play-ready { 50% { stroke-opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .play-unit-group.ready .play-unit-outline { animation: none; } }
.play-ready { font-style: normal; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
              margin-left: 0.4rem; padding: 0 0.3rem; border-radius: 3px; vertical-align: middle;
              background: var(--success); color: var(--on-accent); }
.play-unit.acted { opacity: 0.55; }
.play-objective { --owner: var(--text-muted); }
.play-objective.play-p1 { --owner: var(--play-p1); }
.play-objective.play-p2 { --owner: var(--play-p2); }
.play-objective-range { fill: var(--owner); fill-opacity: 0.06; stroke: var(--owner); stroke-opacity: 0.45; stroke-width: 0.06;
                        stroke-dasharray: 0.35 0.2; }
.play-objective-marker { fill: var(--bg-tertiary); stroke: var(--owner); stroke-width: 0.12; }
.play-objective.neutral .play-objective-marker { stroke: var(--text-secondary); }
.play-objective-letter { fill: var(--owner); font-size: 0.6px; font-weight: 700; text-anchor: middle; dominant-baseline: central;
                         pointer-events: none; }
.play-objective.neutral .play-objective-letter { fill: var(--text-secondary); }
.play-scoreboard { display: flex; gap: 0.75rem; font-size: 0.85rem; color: var(--text-secondary); }
.play-scoreboard .play-p1 { border-bottom: 2px solid var(--play-p1); }
.play-scoreboard .play-p2 { border-bottom: 2px solid var(--play-p2); }
.play-unit-group.shocked .play-unit-outline { stroke: var(--warning); stroke-opacity: 1; stroke-dasharray: 0.2 0.15; }
.play-effects { margin: 0.5rem 0; }
.play-effects summary { cursor: pointer; color: var(--text-secondary); }
.play-effects ul { list-style: none; margin: 0.3rem 0; }
.play-effects li { display: flex; align-items: center; gap: 0.35rem; }
.play-effect { padding: 0 0.35rem; border-radius: 4px; font-size: 0.85rem; border: 1px solid var(--border); }
.play-effect.stratagem { border-color: var(--accent); }
.play-effect.rule { border-color: var(--success); }
.play-effect.manual { border-color: var(--warning); }
.play-effect-add { display: grid; gap: 0.25rem; margin-top: 0.3rem; min-width: 0; }
.play-effect-add .filter-select { width: 100%; min-width: 0; font-size: 0.85rem; }
.play-units { min-width: 0; }
.play-stratagems { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.play-stratagems select { width: auto; font-size: 0.8rem; padding: 0.1rem 0.3rem; }
.play-player-stratagems { margin-bottom: 0.5rem; }
.play-player-stratagems summary { cursor: pointer; border-left: 4px solid var(--play-p1); padding-left: 0.4rem; }
.play-player-stratagems.play-p2 summary { border-left-color: var(--play-p2); }
.play-stratagem { display: block; width: 100%; text-align: left; margin-top: 0.25rem; padding: 0.3rem 0.5rem; cursor: pointer;
                  background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; }
.play-stratagem small { display: block; color: var(--text-muted); }
.play-stratagem:disabled { opacity: 0.5; cursor: default; }
.play-pending { margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--warning); border-radius: 6px; background: var(--accent-tint); }
.play-pending small { display: block; color: var(--text-secondary); }
.play-pending-actions { display: inline-flex; gap: 0.3rem; align-items: center; margin-left: 0.5rem; }
.play-correction { margin-bottom: 0.5rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-tertiary); }
.play-correction input[type=number] { width: 4.5rem; }
.play-correction-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.play-detail .play-part { border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.5rem; }
.play-stats { color: var(--text-secondary); font-size: 0.9rem; }

@media (max-width: 1100px) {
    .play-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Armies: the force disposition, beside the detachments */
.army-disposition { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.army-disposition label { font-weight: 600; }
.army-disposition-note { color: var(--warning); font-size: 0.85rem; }

/* =========================================================================
   Match view (Armies page): datasheets, rules and stratagems for the table
   ========================================================================= */

.match-header {
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.match-back {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-decoration: none;
}

.match-back:hover {
    color: var(--accent);
}

.match-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.match-meta-faction {
    color: var(--accent);
    font-weight: 600;
}

.match-meta .over {
    color: var(--error);
}

.match-meta-sep {
    color: var(--text-muted);
}

.match-actions {
    align-items: center;
}

.match-problems li a {
    color: inherit;
    font-weight: 600;
}

.match-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}

.match-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.match-tab {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}

.match-tab:hover {
    color: var(--text-primary);
    border-color: var(--border);
}

.match-tab.active {
    background: var(--accent);
    color: var(--on-accent);
}

.match-count {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: 0.15rem;
}

.match-search {
    flex: 0 1 320px;
    min-width: 200px;
}

/* Units */

.match-units-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.match-roster {
    position: sticky;
    top: 4rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
}

.match-roster h3 {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.match-roster-item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
}

.match-roster-item:hover {
    background: var(--accent-tint);
}

.match-roster-item.attached {
    padding-left: 1.2rem;
    color: var(--text-secondary);
}

.match-roster-item .fa-crown {
    color: var(--warning);
}

.match-roster-points {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.match-pane-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.match-group {
    border: 1px dashed var(--accent-dim);
    border-radius: 10px;
    padding: 0.6rem;
    margin-bottom: 1rem;
}

.match-group > .match-unit:last-child {
    margin-bottom: 0;
}

.match-group-title {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem 0.25rem;
}

.match-group-points {
    color: var(--text-muted);
    margin-left: 0.35rem;
}

.match-unit {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    scroll-margin-top: 4.5rem;
}

.match-unit-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    align-items: center;
    padding: 0.7rem 1rem;
    background: linear-gradient(90deg, var(--accent-dim), var(--bg-tertiary) 70%);
    border-bottom: 2px solid var(--accent);
    cursor: pointer;
    list-style: none;
}

.match-unit-head::-webkit-details-marker {
    display: none;
}

.match-unit:not([open]) .match-unit-head {
    border-bottom: none;
}

.match-unit-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.match-unit-name {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.match-unit-size {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.match-unit-points {
    grid-row: 1;
    grid-column: 2;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.match-unit-mini {
    grid-column: 1 / -1;
    display: none;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.match-unit:not([open]) .match-unit-mini {
    display: flex;
}

.match-unit-mini b {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.match-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.match-chip-warlord {
    color: var(--warning);
    border-color: var(--warning);
}

.match-chip-enhancement {
    color: var(--accent);
    border-color: var(--accent);
}

.match-unit-body {
    padding: 1rem;
}

.match-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.match-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.4rem;
    border: 2px solid var(--accent-dim);
    border-radius: 6px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.match-stat-label {
    width: 100%;
    text-align: center;
    background: var(--accent-dim);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.1rem 0;
}

.match-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem 0.25rem;
    font-variant-numeric: tabular-nums;
}

.match-save {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    border: 2px solid var(--accent);
    border-radius: 6px;
    background: var(--accent-tint);
    font-size: 0.85rem;
}

.match-save .fa-solid {
    color: var(--accent);
    font-size: 1.2rem;
}

.match-save b {
    font-size: 1.1rem;
}

.match-unit-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem;
}

.match-weapon-wrap {
    overflow-x: auto;
}

.match-weapon-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.9rem;
    font-size: 0.875rem;
}

.match-weapon-table th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.4rem;
    text-align: center;
    white-space: nowrap;
}

.match-weapon-table th.match-weapon-name {
    text-align: left;
    color: var(--accent);
}

.match-weapon-table td {
    padding: 0.4rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.match-weapon-table td.match-weapon-name {
    text-align: left;
    font-weight: 600;
}

.match-weapon-table tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.12);
}

.match-weapon-qty {
    color: var(--text-muted);
    font-weight: 400;
}

.match-weapon-abilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.match-weapon-keyword {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent);
    cursor: default;
}

.match-weapon-keyword::before {
    content: '[';
}

.match-weapon-keyword::after {
    content: ']';
}

.match-weapon-keyword[title] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: help;
}

.match-abilities {
    font-size: 0.875rem;
}

.match-ability-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.match-ability-kind {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 3.6rem;
}

.match-tag {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
}

.match-tag[title] {
    cursor: help;
}

.match-tag-link {
    cursor: pointer;
    border-color: var(--accent-dim);
}

.match-tag-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.match-ability {
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
}

.match-ability-name {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--accent);
    margin-bottom: 0.2rem;
}

.match-ability p + p,
.match-rule p + p,
.match-stratagem-text p + p {
    margin-top: 0.4rem;
}

.match-ability ul,
.match-rule ul,
.match-stratagem-text ul {
    margin: 0.3rem 0 0.3rem 1.2rem;
}

.match-ability-enhancement {
    background: var(--accent-tint);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    border-top: none;
    margin-top: 0.4rem;
}

.match-keywords {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.match-keywords-label {
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 0.3rem;
}

.match-base {
    float: right;
    color: var(--text-muted);
    text-transform: none;
}

/* Rules */

.match-rule-section {
    margin-bottom: 1.5rem;
}

.match-rule-section h3 {
    font-size: 1rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

.match-rule-meta {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.4rem;
}

.match-rule {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    transition: box-shadow 0.3s;
}

.match-rule h4 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}

.match-rule.flash {
    box-shadow: 0 0 0 2px var(--accent);
}

/* Stratagems: the top edge says whose turn (yours: orange, opponent's: blue, either: olive) */

.match-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

.match-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.match-filter-chip {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

.match-filter-chip:hover {
    border-color: var(--accent);
}

.match-filter-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.match-stratagems {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.match-stratagem {
    --strat-colour: var(--accent);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-top: 4px solid var(--strat-colour);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    font-size: 0.875rem;
    break-inside: avoid;
}

.match-stratagem-theirs {
    --strat-colour: var(--play-p2);
}

.match-stratagem-either {
    --strat-colour: var(--success);
}

.match-stratagem-head {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}

.match-stratagem-head h4 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.25;
}

.match-cp {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 2px solid var(--strat-colour);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}

.match-cp small {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--text-muted);
}

.match-stratagem-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.match-stratagem-when {
    color: var(--strat-colour);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.match-wahapedia-note {
    margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
    .match-units-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .match-unit-body {
        padding: 0.75rem;
    }

    .match-stat {
        min-width: 2.8rem;
    }

    .match-stat-value {
        font-size: 1.1rem;
    }

    .match-roster {
        display: none;
    }

    .match-unit-columns {
        grid-template-columns: 1fr;
    }

    .match-weapon-table {
        font-size: 0.8rem;
    }

    .match-weapon-table th,
    .match-weapon-table td {
        padding: 0.3rem 0.2rem;
    }
}

@media print {
    .header,
    .footer,
    .match-toolbar,
    .match-actions,
    .match-back,
    .match-roster,
    .match-pane-actions,
    .match-filters,
    .match-problems {
        display: none !important;
    }

    body,
    .match-unit,
    .match-rule,
    .match-stratagem,
    .match-weapon-table th,
    .match-weapon-table td,
    .match-stat,
    .match-stat-label,
    .match-tag,
    .match-chip,
    .match-save {
        background: #fff !important;
        color: #000 !important;
    }

    .match-unit-head {
        background: #eee !important;
        color: #000 !important;
    }

    .match-pane[hidden] {
        display: block !important;
    }

    .match-units-layout {
        display: block;
    }

    .match-unit,
    .match-rule {
        break-inside: avoid;
    }

    .match-unit-mini {
        display: none !important;
    }
}

/* Account pages of a self-hosted copy (account.html) */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 26rem;
}

.account-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.account-form .btn {
    align-self: flex-start;
}

.account-warning {
    border-left: 3px solid var(--warning, #d9a400);
    padding: 0.4rem 0.75rem;
}

.nav-badge {
    background: var(--warning);
    color: #000;
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Proposals page (proposals.html) */
.proposal-card .proposal-fields {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.proposal-card .proposal-fields td,
.proposal-card .proposal-fields th {
    border-top: 1px solid var(--border, #444);
    padding: 0.25rem 0.5rem;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.proposal-card .proposal-status {
    font-size: 0.8rem;
    opacity: 0.8;
}