/* /Components/Hud/BattleLogPanel.razor.rz.scp.css */
.battle-log-panel[b-xdghhx8gmr] {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.panel-header[b-xdghhx8gmr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-bottom: var(--border-width) solid var(--border-subtle);
    flex-shrink: 0;
}

.panel-title[b-xdghhx8gmr] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.panel-header-actions[b-xdghhx8gmr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-toggle[b-xdghhx8gmr] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    background: var(--bg-deep);
    border: var(--border-width) solid var(--border-subtle);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s, border-color 0.15s;
}

.filter-toggle:hover[b-xdghhx8gmr] {
    color: var(--text-secondary);
    border-color: var(--border-emphasis);
}

.filter-toggle.active[b-xdghhx8gmr] {
    color: var(--text-primary);
    border-color: var(--info);
}

.entry-count[b-xdghhx8gmr] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    background: var(--bg-deep);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-family: var(--font-family-mono);
}

.log-entries[b-xdghhx8gmr] {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
    gap: var(--space-1);
}

.log-entry[b-xdghhx8gmr] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-subtle);
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    flex-shrink: 0;
}

.log-turn-group[b-xdghhx8gmr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.log-turn-group + .log-turn-group[b-xdghhx8gmr] {
    margin-top: var(--space-2);
}

.turn-divider[b-xdghhx8gmr] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-1) var(--space-1) 0;
    position: sticky;
    top: 0;
    background: var(--bg-panel);
    z-index: 1;
}

/* Severity → интензитет на фона (втора ос, независима от страната). */
.log-entry.sev-critical[b-xdghhx8gmr] {
    background: var(--bg-elevated);
}

.log-entry.sev-notable[b-xdghhx8gmr] {
    background: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
}

.log-entry.sev-info[b-xdghhx8gmr] {
    background: transparent;
}

/* Side → ляв акцент (зелено=мои, червено=вражески). Подредено СЛЕД severity,
   за да печели border-left-color при еднаква specificity. */
.log-entry.side-mine[b-xdghhx8gmr] {
    border-left-color: var(--success);
}

.log-entry.side-enemy[b-xdghhx8gmr] {
    border-left-color: var(--damage-taken);
}

.log-entry.side-neutral[b-xdghhx8gmr] {
    border-left-color: var(--border-subtle);
}

.entry-meta[b-xdghhx8gmr] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: var(--font-family-mono);
    flex-shrink: 0;
}

.entry-text[b-xdghhx8gmr] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: var(--line-height-tight);
}

.log-empty[b-xdghhx8gmr] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-5);
    font-style: italic;
}
/* /Components/Hud/RulesReference.razor.rz.scp.css */
.rules-backdrop[b-ff5b37vs93] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-scrim, rgba(0, 0, 0, 0.6));
}

.rules-modal[b-ff5b37vs93] {
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: 90vh;
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.rules-header[b-ff5b37vs93] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border-bottom: var(--border-width) solid var(--border-subtle);
    flex-shrink: 0;
}

.rules-title[b-ff5b37vs93] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rules-close[b-ff5b37vs93] {
    background: var(--bg-deep);
    color: var(--text-secondary);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-base);
}
.rules-close:hover[b-ff5b37vs93] { color: var(--text-primary); background: var(--bg-elevated); }

.rules-body[b-ff5b37vs93] {
    padding: var(--space-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.rules-section[b-ff5b37vs93] { display: flex; flex-direction: column; gap: var(--space-2); }

.rules-h[b-ff5b37vs93] {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--info, var(--text-primary));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: var(--border-width) solid var(--border-subtle);
    padding-bottom: var(--space-1);
}

.rules-ul[b-ff5b37vs93] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.rules-ul li[b-ff5b37vs93] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
    padding-left: var(--space-3);
    position: relative;
}
.rules-ul li[b-ff5b37vs93]::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--text-muted);
}
.rules-ul li b[b-ff5b37vs93] { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

.rules-note[b-ff5b37vs93] {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: var(--line-height-base);
}

/* ── Units table ──────────────────────────────────────────── */
.rules-table-wrap[b-ff5b37vs93] { overflow-x: auto; }

.rules-table[b-ff5b37vs93] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.rules-table th[b-ff5b37vs93],
.rules-table td[b-ff5b37vs93] {
    padding: var(--space-1) var(--space-2);
    text-align: center;
    border-bottom: var(--border-width) solid var(--border-subtle);
    white-space: nowrap;
}

.rules-table th[b-ff5b37vs93] {
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.rules-table td[b-ff5b37vs93] { color: var(--text-secondary); }
.rules-table .al[b-ff5b37vs93] { text-align: left; }

.rules-table .u-tier[b-ff5b37vs93] { color: var(--text-muted); }
.rules-table .u-type[b-ff5b37vs93] { color: var(--text-primary); font-weight: var(--font-weight-medium); margin-left: 4px; }

.rules-table .general-row td[b-ff5b37vs93] { color: var(--text-primary); font-weight: var(--font-weight-medium); }
.rules-table .general-row[b-ff5b37vs93] { background: var(--bg-elevated); }

/* ── Terrain swatch inline ────────────────────────────────── */
.t-swatch[b-ff5b37vs93] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--border-subtle);
    vertical-align: middle;
    margin-right: var(--space-1);
}
.t-swatch[data-terrain="Open"][b-ff5b37vs93]     { background: var(--terrain-open); }
.t-swatch[data-terrain="Road"][b-ff5b37vs93]     { background: var(--terrain-road); }
.t-swatch[data-terrain="Forest"][b-ff5b37vs93]   { background: var(--terrain-forest); }
.t-swatch[data-terrain="Hills"][b-ff5b37vs93]    { background: var(--terrain-hills); }
.t-swatch[data-terrain="Mountain"][b-ff5b37vs93] { background: var(--terrain-mountain); }
.t-swatch[data-terrain="River"][b-ff5b37vs93]    { background: var(--terrain-river); }
.t-swatch[data-terrain="Ford"][b-ff5b37vs93]     { background: var(--terrain-ford); }
.t-swatch[data-terrain="Bridge"][b-ff5b37vs93]   { background: var(--terrain-bridge); }
/* /Components/Hud/TerrainLegend.razor.rz.scp.css */
.terrain-legend-panel[b-8b0usv52vw] {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.panel-header[b-8b0usv52vw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-bottom: var(--border-width) solid var(--border-subtle);
}

.panel-title[b-8b0usv52vw] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hotkey-hint[b-8b0usv52vw] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    background: var(--bg-deep);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    border: var(--border-width) solid var(--border-subtle);
}

.legend-list[b-8b0usv52vw] {
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.legend-row[b-8b0usv52vw] {
    display: grid;
    grid-template-columns: 18px 72px 1fr;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}

.legend-row:hover[b-8b0usv52vw] {
    background: var(--bg-elevated);
}

.legend-swatch[b-8b0usv52vw] {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--border-subtle);
    flex-shrink: 0;
}

.legend-swatch[data-terrain="Open"][b-8b0usv52vw]     { background: var(--terrain-open); }
.legend-swatch[data-terrain="Road"][b-8b0usv52vw]     { background: var(--terrain-road); }
.legend-swatch[data-terrain="Forest"][b-8b0usv52vw]   { background: var(--terrain-forest); }
.legend-swatch[data-terrain="Hills"][b-8b0usv52vw]    { background: var(--terrain-hills); }
.legend-swatch[data-terrain="Mountain"][b-8b0usv52vw] { background: var(--terrain-mountain); }
.legend-swatch[data-terrain="River"][b-8b0usv52vw]    { background: var(--terrain-river); }
.legend-swatch[data-terrain="Ford"][b-8b0usv52vw]     { background: var(--terrain-ford); }
.legend-swatch[data-terrain="Bridge"][b-8b0usv52vw]   { background: var(--terrain-bridge); }

.legend-name[b-8b0usv52vw] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.legend-effect[b-8b0usv52vw] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: var(--line-height-tight);
}
/* /Components/Hud/UnitDetailPanel.razor.rz.scp.css */
.unit-detail-panel[b-8i3ptft4v9] {
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.unit-header[b-8i3ptft4v9] {
    display: flex;
    align-items: stretch;
}

.unit-color-strip[b-8i3ptft4v9] {
    width: 4px;
    flex-shrink: 0;
}

.unit-color-strip.player-a[b-8i3ptft4v9] {
    background: var(--player-a);
}

.unit-color-strip.player-b[b-8i3ptft4v9] {
    background: var(--player-b);
}

.unit-title[b-8i3ptft4v9] {
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unit-type-name[b-8i3ptft4v9] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.unit-tier-name[b-8i3ptft4v9] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.strength-section[b-8i3ptft4v9] {
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-width) solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.strength-bar-track[b-8i3ptft4v9] {
    height: 4px;
    background: var(--bg-deep);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.strength-bar-fill[b-8i3ptft4v9] {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.strength-label[b-8i3ptft4v9] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-family: var(--font-family-mono);
}

.status-badges[b-8i3ptft4v9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-width) solid var(--border-subtle);
}

.badge[b-8i3ptft4v9] {
    font-size: var(--font-size-xs);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.badge-acted[b-8i3ptft4v9] {
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
    color: var(--text-muted);
}

.badge-fortified[b-8i3ptft4v9] {
    background: color-mix(in srgb, var(--fortified-indicator) 15%, transparent);
    color: var(--fortified-indicator);
}

.badge-tired[b-8i3ptft4v9] {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
}

.badge-charge[b-8i3ptft4v9] {
    background: color-mix(in srgb, var(--charge-indicator) 15%, transparent);
    color: var(--charge-indicator);
    font-weight: var(--font-weight-bold);
}

.stats-grid[b-8i3ptft4v9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-subtle);
    border-top: var(--border-width) solid var(--border-subtle);
}

.stat-item[b-8i3ptft4v9] {
    background: var(--bg-panel);
    padding: var(--space-2) var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label[b-8i3ptft4v9] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.stat-value[b-8i3ptft4v9] {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-medium);
}

.formation-row[b-8i3ptft4v9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-width) solid var(--border-subtle);
}

.formation-value[b-8i3ptft4v9] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-style: italic;
}
/* /Components/Hud/UnitStatusStrip.razor.rz.scp.css */
.unit-status-strip[b-w7fwobwnla] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.strip-item[b-w7fwobwnla] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: var(--border-width) solid transparent;
    transition: var(--transition-fast);
}

.strip-item:hover[b-w7fwobwnla] {
    background: var(--bg-elevated);
    border-color: var(--border-emphasis);
}

.strip-item.current[b-w7fwobwnla] {
    background: var(--bg-elevated);
    border-color: var(--hex-stroke-selected);
}

.strip-item.acted[b-w7fwobwnla] {
    opacity: 0.40;
}

.strip-glyph[b-w7fwobwnla] {
    width: 24px;
    height: 24px;
}
/* /Components/Lobby/MapPreview.razor.rz.scp.css */
.map-preview[b-x2uvq5sjt9] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.map-preview-svg[b-x2uvq5sjt9] {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.terrain-pattern[b-x2uvq5sjt9] {
    pointer-events: none;
}

.forest-pattern circle[b-x2uvq5sjt9] {
    fill: var(--forest-los-dot);
}

.hills-pattern path[b-x2uvq5sjt9] {
    fill: none;
    stroke: var(--terrain-pattern-dark);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.mountain-pattern path[b-x2uvq5sjt9] {
    fill: none;
    stroke: var(--terrain-pattern-light);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.river-pattern path[b-x2uvq5sjt9] {
    fill: none;
    stroke: var(--terrain-pattern-light);
    stroke-width: 1px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ford-pattern path[b-x2uvq5sjt9] {
    fill: none;
    stroke: var(--terrain-pattern-dark);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-dasharray: 2 1.5;
    vector-effect: non-scaling-stroke;
}

.bridge-pattern line[b-x2uvq5sjt9] {
    stroke: var(--terrain-pattern-dark);
    stroke-width: 1.5px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.road-pattern line[b-x2uvq5sjt9] {
    stroke: var(--terrain-pattern-dark);
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-dasharray: 2.5 2;
    vector-effect: non-scaling-stroke;
}
/* /Components/Map/GeneralGlyph.razor.rz.scp.css */
.general-glyph[b-x0pqrfumnv] {
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
}

.general-glyph.own-general[b-x0pqrfumnv] {
    animation: general-own-pulse-b-x0pqrfumnv 2s ease-in-out infinite;
}

@keyframes general-own-pulse-b-x0pqrfumnv {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.general-star[b-x0pqrfumnv] {
    fill: var(--general-color);
    stroke: var(--general-glow);
    stroke-width: var(--border-width-thick);
    filter: drop-shadow(0 0 5px var(--general-glow));
}

.general-hp-track[b-x0pqrfumnv] {
    fill: var(--bg-panel);
    stroke: var(--border-subtle);
    stroke-width: var(--border-width);
}

.general-hp-fill[b-x0pqrfumnv] {
    fill: var(--danger);
    opacity: var(--general-hp-opacity);
}
/* /Components/Map/HexCell.razor.rz.scp.css */
.hex-cell[b-4iospvhgda] {
    cursor: pointer;
    --cell-terrain-color: var(--terrain-open);
    --capital-owner-color: var(--hex-stroke);
    --capital-occupier-color: var(--hex-stroke);
}

.hex-cell[data-owner="0"][b-4iospvhgda] {
    --capital-owner-color: var(--player-a);
}

.hex-cell[data-owner="1"][b-4iospvhgda] {
    --capital-owner-color: var(--player-b);
}

.hex-cell[data-occupier="0"][b-4iospvhgda] {
    --capital-occupier-color: var(--player-a);
}

.hex-cell[data-occupier="1"][b-4iospvhgda] {
    --capital-occupier-color: var(--player-b);
}

.hex-terrain[b-4iospvhgda] {
    fill: var(--cell-terrain-color);
    stroke: var(--cell-terrain-color);
    stroke-opacity: var(--hex-terrain-rim-opacity);
    stroke-width: var(--hex-terrain-rim-width);
    vector-effect: non-scaling-stroke;
    transition: var(--transition-base);
}

.hex-cell[data-terrain="Open"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-open);
}

.hex-cell[data-terrain="Road"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-road);
}

.hex-cell[data-terrain="Forest"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-forest);
}

.hex-cell[data-terrain="Hills"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-hills);
}

.hex-cell[data-terrain="Mountain"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-mountain);
}

.hex-cell[data-terrain="River"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-river);
}

.hex-cell[data-terrain="Ford"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-ford);
}

.hex-cell[data-terrain="Bridge"][b-4iospvhgda] {
    --cell-terrain-color: var(--terrain-bridge);
}

.hex-cell:hover .hex-terrain[b-4iospvhgda] {
    stroke: var(--hex-stroke-hover);
}

.hex-cell.selected .hex-terrain[b-4iospvhgda] {
    stroke: var(--hex-stroke-selected);
    stroke-width: var(--hex-stroke-width-emphasis);
    filter: drop-shadow(0 0 5px var(--hex-stroke-selected));
}

.hex-cell.move-target .hex-terrain[b-4iospvhgda] {
    stroke: var(--hex-stroke-move-target);
    stroke-width: var(--hex-stroke-width-emphasis);
    filter: drop-shadow(0 0 4px var(--hex-stroke-move-target));
}

.hex-cell.attack-target .hex-terrain[b-4iospvhgda] {
    stroke: var(--hex-stroke-attack-target);
    stroke-width: var(--hex-stroke-width-emphasis);
    filter: drop-shadow(0 0 4px var(--hex-stroke-attack-target));
}

.hex-cell.general-move-target .hex-terrain[b-4iospvhgda] {
    stroke: var(--hex-stroke-general-move);
    stroke-width: var(--hex-stroke-width-emphasis);
    filter: drop-shadow(0 0 4px var(--hex-stroke-general-move));
}

.move-target-overlay[b-4iospvhgda] {
    fill: var(--valid-move-overlay);
    stroke: var(--valid-move-border);
    stroke-width: var(--border-width-thick);
    pointer-events: none;
    animation: move-pulse-b-4iospvhgda 1.5s ease-in-out infinite;
}

@keyframes move-pulse-b-4iospvhgda {
    0%, 100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}

.attack-target-overlay[b-4iospvhgda] {
    fill: var(--attack-target-overlay);
    stroke: var(--attack-target-border);
    stroke-width: var(--border-width-thick);
    pointer-events: none;
    animation: attack-pulse-b-4iospvhgda 1.2s ease-in-out infinite;
}

.general-move-overlay[b-4iospvhgda] {
    fill: var(--general-move-overlay);
    stroke: var(--general-move-border);
    stroke-width: var(--border-width-thick);
    pointer-events: none;
    animation: general-move-pulse-b-4iospvhgda 1.5s ease-in-out infinite;
}

@keyframes general-move-pulse-b-4iospvhgda {
    0%, 100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}

@keyframes attack-pulse-b-4iospvhgda {
    0%, 100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}

.hex-flash-attacker[b-4iospvhgda] {
    fill: var(--battle-flash-attacker);
    animation: flash-fade-b-4iospvhgda 400ms ease-out forwards;
    pointer-events: none;
}

.hex-flash-defender[b-4iospvhgda] {
    fill: var(--battle-flash-defender);
    animation: flash-fade-b-4iospvhgda 400ms ease-out forwards;
    pointer-events: none;
}

@keyframes flash-fade-b-4iospvhgda {
    0% {
        fill-opacity: 0.60;
    }

    100% {
        fill-opacity: 0;
    }
}

.charge-preview-badge circle[b-4iospvhgda] {
    fill: var(--charge-badge-bg);
    stroke: var(--charge-badge-border);
    stroke-width: var(--hex-stroke-width);
}

.charge-preview-badge text[b-4iospvhgda] {
    fill: var(--charge-badge-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    dominant-baseline: middle;
}

.hex-fog[b-4iospvhgda] {
    fill: transparent;
    stroke: var(--cell-terrain-color);
    stroke-opacity: var(--hex-terrain-rim-opacity);
    stroke-width: var(--hex-terrain-rim-width);
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    transition: var(--transition-base);
}

.hex-cell.selected .hex-fog[b-4iospvhgda] {
    stroke: var(--hex-stroke-selected);
    stroke-width: var(--hex-stroke-width-emphasis);
}

.hex-cell.move-target .hex-fog[b-4iospvhgda] {
    stroke: var(--hex-stroke-move-target);
    stroke-width: var(--hex-stroke-width-emphasis);
}

.hex-cell.attack-target .hex-fog[b-4iospvhgda] {
    stroke: var(--hex-stroke-attack-target);
    stroke-width: var(--hex-stroke-width-emphasis);
}

.hex-cell.general-move-target .hex-fog[b-4iospvhgda] {
    stroke: var(--hex-stroke-general-move);
    stroke-width: var(--hex-stroke-width-emphasis);
}

.hex-cell.intel-0[b-4iospvhgda] {
    --cell-terrain-color: var(--bg-deep);
}

.intel-0 .hex-fog[b-4iospvhgda] {
    fill: var(--intel-unknown);
}

.intel-1 .hex-fog[b-4iospvhgda] {
    fill: var(--intel-presence-overlay);
}

.intel-2 .hex-fog[b-4iospvhgda] {
    fill: var(--intel-type-overlay);
}

.capital-border[b-4iospvhgda] {
    fill: transparent;
    stroke: var(--capital-owner-color);
    stroke-width: 4px;
    filter: drop-shadow(0 0 6px var(--capital-owner-color));
    pointer-events: none;
}

.hex-capital-threatened .capital-border[b-4iospvhgda] {
    animation: capital-threat-pulse-b-4iospvhgda 1s ease-in-out infinite;
}

@keyframes capital-threat-pulse-b-4iospvhgda {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 6px var(--capital-owner-color));
    }

    50% {
        opacity: 0.72;
        filter: drop-shadow(0 0 10px var(--capital-owner-color));
    }
}

.capital-occupation-badge rect[b-4iospvhgda] {
    fill: var(--capital-occupier-color);
    stroke: var(--bg-deep);
    stroke-width: var(--border-width);
    filter: drop-shadow(0 0 4px var(--capital-occupier-color));
}

.capital-occupation-badge text[b-4iospvhgda] {
    fill: var(--text-on-color);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    dominant-baseline: middle;
}

.terrain-pattern[b-4iospvhgda] {
    pointer-events: none;
}

.forest-pattern circle[b-4iospvhgda] {
    fill: var(--forest-los-dot);
}

.hills-pattern path[b-4iospvhgda] {
    fill: none;
    stroke: var(--terrain-pattern-dark);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.mountain-pattern path[b-4iospvhgda] {
    fill: none;
    stroke: var(--terrain-pattern-light);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.river-pattern path[b-4iospvhgda] {
    fill: none;
    stroke: var(--terrain-pattern-light);
    stroke-width: 1.5px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ford-pattern path[b-4iospvhgda] {
    fill: none;
    stroke: var(--terrain-pattern-dark);
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-dasharray: 3 2;
    vector-effect: non-scaling-stroke;
}

.bridge-pattern line[b-4iospvhgda] {
    stroke: var(--terrain-pattern-dark);
    stroke-width: 2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.road-pattern line[b-4iospvhgda] {
    stroke: var(--terrain-pattern-dark);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}
/* /Components/Map/HexGrid.razor.rz.scp.css */
.hex-grid[b-8jhzftr244] {
    display: block;
    background: var(--bg-deep);
    margin: auto;
}

.unit-layer[b-8jhzftr244],
.map-markers[b-8jhzftr244] {
    pointer-events: none;
}
/* /Components/Map/IntelMarker.razor.rz.scp.css */
.intel-marker[b-ukxemzy49s] {
    pointer-events: none;
}

.intel-marker-shell[b-ukxemzy49s] {
    fill: var(--bg-panel);
    stroke: var(--text-secondary);
    stroke-width: var(--border-width-thick);
}

.level-1 .intel-marker-shell[b-ukxemzy49s] {
    stroke: var(--text-muted);
}

.intel-marker-shape[b-ukxemzy49s] {
    fill: transparent;
    stroke: var(--text-secondary);
    stroke-width: var(--border-width-thick);
}

.intel-marker-unknown-dot[b-ukxemzy49s] {
    fill: var(--text-secondary);
}

.intel-marker-unknown-mark[b-ukxemzy49s] {
    stroke: var(--text-secondary);
    stroke-width: var(--border-width-thick);
    stroke-linecap: round;
}
/* /Components/Map/UnitGlyph.razor.rz.scp.css */
.unit-glyph[b-tg5tinc32w] {
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--transition-base);
}

.unit-glyph .unit-shape[b-tg5tinc32w] {
    fill: var(--unit-color);
    stroke: var(--unit-glow);
    stroke-width: var(--border-width-thick);
    filter: drop-shadow(var(--shadow-sm));
}

.unit-glyph[data-tier="1"] .unit-shape[b-tg5tinc32w],
.unit-glyph[data-tier="1"] .unit-fortified-ring[b-tg5tinc32w],
.unit-glyph[data-tier="1"] .charge-ready-pulse[b-tg5tinc32w],
.unit-glyph[data-tier="1"] .unit-tired-mark[b-tg5tinc32w] {
    transform: scale(0.55);
}

.unit-glyph[data-tier="2"] .unit-shape[b-tg5tinc32w],
.unit-glyph[data-tier="2"] .unit-fortified-ring[b-tg5tinc32w],
.unit-glyph[data-tier="2"] .charge-ready-pulse[b-tg5tinc32w],
.unit-glyph[data-tier="2"] .unit-tired-mark[b-tg5tinc32w] {
    transform: scale(0.70);
}

.unit-glyph[data-tier="3"] .unit-shape[b-tg5tinc32w],
.unit-glyph[data-tier="3"] .unit-fortified-ring[b-tg5tinc32w],
.unit-glyph[data-tier="3"] .charge-ready-pulse[b-tg5tinc32w],
.unit-glyph[data-tier="3"] .unit-tired-mark[b-tg5tinc32w] {
    transform: scale(0.85);
}

.unit-glyph.acted[b-tg5tinc32w] {
    opacity: 0.45;
}

.unit-glyph.selected .unit-shape[b-tg5tinc32w] {
    stroke: var(--hex-stroke-selected);
    stroke-width: var(--hex-stroke-width-emphasis);
    filter: drop-shadow(0 0 6px var(--hex-stroke-selected));
}

.selection-ring[b-tg5tinc32w] {
    fill: transparent;
    stroke: var(--hex-stroke-selected);
    stroke-width: var(--hex-stroke-width-emphasis);
    pointer-events: none;
    animation: pulse-ring-b-tg5tinc32w 1.5s ease-in-out infinite;
}

@keyframes pulse-ring-b-tg5tinc32w {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.08);
    }
}

.unit-fortified-ring[b-tg5tinc32w] {
    fill: transparent;
    stroke: var(--fortified-indicator);
    stroke-width: var(--border-width-thick);
    filter: drop-shadow(0 0 4px var(--fortified-indicator));
}

.unit-tired-mark[b-tg5tinc32w] {
    fill: transparent;
    stroke: var(--text-muted);
    stroke-width: var(--border-width-thick);
    stroke-linecap: round;
    opacity: 0.7;
}

.charge-ready-pulse[b-tg5tinc32w] {
    animation: charge-pulse-b-tg5tinc32w 1.2s ease-in-out infinite;
}

@keyframes charge-pulse-b-tg5tinc32w {
    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.unit-strength[b-tg5tinc32w] {
    fill: var(--text-primary);
    stroke: var(--bg-deep);
    stroke-width: var(--border-width);
    paint-order: stroke;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    pointer-events: none;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-ty8ljvymhh] {
    width: 100vw;
    height: 100vh;
    background: var(--bg-deep);
    color: var(--text-primary);
}
/* /Pages/Home.razor.rz.scp.css */
.home-page[b-dx8y7lnkj6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: var(--space-5);
}

.user-bar[b-dx8y7lnkj6] {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.user-name[b-dx8y7lnkj6] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.user-badge[b-dx8y7lnkj6] {
    background: rgba(95, 169, 255, 0.15);
    border: var(--border-width) solid rgba(95, 169, 255, 0.4);
    border-radius: var(--radius-full);
    color: var(--info);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.5px;
    padding: 2px var(--space-2);
    text-transform: uppercase;
}

.btn-link[b-dx8y7lnkj6] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-subtle);
    transition: var(--transition-base);
}

.btn-link:hover[b-dx8y7lnkj6] {
    color: var(--info);
    border-color: var(--info);
}

.btn-logout[b-dx8y7lnkj6] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: var(--transition-base);
}

.btn-logout:hover[b-dx8y7lnkj6] {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-logout:disabled[b-dx8y7lnkj6] {
    opacity: 0.4;
    cursor: not-allowed;
}

.title[b-dx8y7lnkj6] {
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.subtitle[b-dx8y7lnkj6] {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.actions[b-dx8y7lnkj6] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

.btn-primary[b-dx8y7lnkj6],
.btn-secondary[b-dx8y7lnkj6] {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-emphasis);
    background: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: var(--transition-base);
}

.btn-primary:hover[b-dx8y7lnkj6] {
    border-color: var(--border-focus);
}

.btn-tertiary[b-dx8y7lnkj6] {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: var(--transition-base);
}
.btn-tertiary:hover[b-dx8y7lnkj6] {
    color: var(--text-primary);
    border-color: var(--border-emphasis);
}
.btn-primary:disabled[b-dx8y7lnkj6],
.btn-secondary:disabled[b-dx8y7lnkj6],
.btn-tertiary:disabled[b-dx8y7lnkj6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.difficulty-row[b-dx8y7lnkj6] {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-4);
}

.btn-difficulty[b-dx8y7lnkj6] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-subtle);
    background: var(--bg-panel);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: var(--transition-base);
}

.btn-difficulty:hover:not(:disabled)[b-dx8y7lnkj6] {
    color: var(--text-primary);
    border-color: var(--border-emphasis);
}

.btn-difficulty.active[b-dx8y7lnkj6] {
    color: var(--text-primary);
    border-color: var(--border-focus);
    background: var(--bg-elevated, var(--bg-panel));
}

.btn-difficulty:disabled[b-dx8y7lnkj6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.join-form[b-dx8y7lnkj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.room-code-input[b-dx8y7lnkj6] {
    background: var(--bg-panel);
    border: var(--border-width-thick) solid var(--border-emphasis);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xl);
    letter-spacing: 4px;
    padding: var(--space-3) var(--space-5);
    text-align: center;
    text-transform: uppercase;
    width: 240px;
    transition: var(--transition-base);
}
.room-code-input:focus[b-dx8y7lnkj6] {
    outline: none;
    border-color: var(--border-focus);
}
.room-code-input[b-dx8y7lnkj6]::placeholder {
    color: var(--text-muted);
    letter-spacing: 4px;
}

.username-section[b-dx8y7lnkj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.username-input[b-dx8y7lnkj6] {
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-4);
    text-align: center;
    width: 260px;
    transition: var(--transition-base);
}

.username-input:focus[b-dx8y7lnkj6] {
    outline: none;
    border-color: var(--border-focus);
}

.username-input[b-dx8y7lnkj6]::placeholder {
    color: var(--text-muted);
}

.resume-state[b-dx8y7lnkj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
}

.resume-state .spinner[b-dx8y7lnkj6] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--info);
    border-radius: var(--radius-full);
    animation: spin-b-dx8y7lnkj6 0.8s linear infinite;
}

@keyframes spin-b-dx8y7lnkj6 {
    to { transform: rotate(360deg); }
}

.resume-prompt[b-dx8y7lnkj6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    background: rgba(251, 191, 36, 0.08);
    border: var(--border-width) solid var(--warning);
    border-radius: var(--radius-md);
    max-width: 420px;
    text-align: center;
}

.resume-prompt-title[b-dx8y7lnkj6] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--warning);
    margin: 0;
}

.stale-banner[b-dx8y7lnkj6] {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-5);
    background: rgba(251, 191, 36, 0.1);
    border: var(--border-width) solid var(--warning);
    border-radius: var(--radius-md);
    color: var(--warning);
    font-size: var(--font-size-sm);
    max-width: 400px;
    text-align: center;
}

.error-banner[b-dx8y7lnkj6] {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-5);
    background: rgba(248, 113, 113, 0.1);
    border: var(--border-width) solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-size: var(--font-size-sm);
    max-width: 400px;
    text-align: center;
}

@media (max-width: 480px) {
    .home-page[b-dx8y7lnkj6] {
        padding: var(--space-4) var(--space-3);
        gap: var(--space-4);
        justify-content: flex-start;
        padding-top: var(--space-10);
    }
    .user-bar[b-dx8y7lnkj6] {
        position: static;
        margin-bottom: var(--space-2);
        flex-wrap: wrap;
        justify-content: center;
    }
    .title[b-dx8y7lnkj6] { font-size: var(--font-size-2xl); text-align: center; }
    .subtitle[b-dx8y7lnkj6] { font-size: var(--font-size-sm); text-align: center; padding: 0 var(--space-3); }
    .username-input[b-dx8y7lnkj6],
    .room-code-input[b-dx8y7lnkj6] {
        width: 100%;
        max-width: 280px;
        font-size: 16px; /* prevent iOS zoom */
    }
    .actions[b-dx8y7lnkj6] { width: 100%; max-width: 320px; }
    .btn-primary[b-dx8y7lnkj6], .btn-secondary[b-dx8y7lnkj6], .btn-tertiary[b-dx8y7lnkj6] {
        flex: 1;
        min-height: 44px;
    }
    .stale-banner[b-dx8y7lnkj6], .error-banner[b-dx8y7lnkj6] { max-width: 100%; }
}
/* /Pages/Join.razor.rz.scp.css */
.room-code-display[b-qj9z31k3yk] {
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: 8px;
    margin: 0 0 var(--space-4) 0;
    user-select: all;
}

.resume-state[b-qj9z31k3yk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
}

.resume-state .spinner[b-qj9z31k3yk] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--info);
    border-radius: var(--radius-full);
    animation: spin-b-qj9z31k3yk 0.8s linear infinite;
}

@keyframes spin-b-qj9z31k3yk {
    to { transform: rotate(360deg); }
}
/* /Pages/Lobby.razor.rz.scp.css */
.lobby-page[b-9e4bo6juj3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow-y: auto;
    padding: var(--space-5);
    box-sizing: border-box;
}

.lobby-card[b-9e4bo6juj3] {
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    text-align: center;
    min-width: 560px;
    max-width: 720px;
    width: 100%;
    margin: auto 0;
}

.lobby-label[b-9e4bo6juj3] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 var(--space-2) 0;
}

.room-code-display[b-9e4bo6juj3] {
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: 8px;
    margin: 0 0 var(--space-4) 0;
    user-select: all;
}

.seed-display[b-9e4bo6juj3] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-5) 0;
}

/* ── Army picker ── */

.army-section[b-9e4bo6juj3] {
    margin-bottom: var(--space-5);
    text-align: left;
}

.budget-bar[b-9e4bo6juj3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-subtle);
}

.budget-label[b-9e4bo6juj3] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.budget-value[b-9e4bo6juj3] {
    color: var(--success);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.budget-value.over-budget[b-9e4bo6juj3] {
    color: var(--danger);
}

.unit-count-label[b-9e4bo6juj3] {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.count-invalid[b-9e4bo6juj3] {
    color: var(--warning);
}

.unit-picker[b-9e4bo6juj3] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.type-header[b-9e4bo6juj3] {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    padding: var(--space-2) var(--space-1);
    border: var(--border-width) solid var(--border-subtle);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-header[b-9e4bo6juj3] {
    background: var(--bg-elevated);
    border: var(--border-width) solid var(--border-subtle);
    width: 72px;
}

.tier-label[b-9e4bo6juj3] {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    text-align: right;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--border-subtle);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.tier-cost[b-9e4bo6juj3] {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

.unit-cell[b-9e4bo6juj3] {
    border: var(--border-width) solid var(--border-subtle);
    padding: var(--space-2);
    text-align: center;
    vertical-align: middle;
    transition: background var(--transition-fast);
}

.unit-cell.has-units[b-9e4bo6juj3] {
    background: rgba(90, 141, 222, 0.08);
    border-color: var(--border-emphasis);
}

.cell-count[b-9e4bo6juj3] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
    min-height: 20px;
}

.cell-btns[b-9e4bo6juj3] {
    display: flex;
    gap: var(--space-1);
    justify-content: center;
}

.btn-cell[b-9e4bo6juj3] {
    width: 28px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--border-emphasis);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-md);
    line-height: 1;
    transition: var(--transition-fast);
    padding: 0;
}

.btn-cell:hover:not(:disabled)[b-9e4bo6juj3] {
    border-color: var(--border-focus);
    background: var(--border-subtle);
}

.btn-cell:disabled[b-9e4bo6juj3] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-add:hover:not(:disabled)[b-9e4bo6juj3] {
    color: var(--success);
    border-color: var(--success);
}

.btn-remove:hover:not(:disabled)[b-9e4bo6juj3] {
    color: var(--danger);
    border-color: var(--danger);
}

/* ── Status & actions ── */

.status-section[b-9e4bo6juj3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.spinner[b-9e4bo6juj3] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--info);
    border-radius: var(--radius-full);
    animation: spin-b-9e4bo6juj3 0.8s linear infinite;
}

@keyframes spin-b-9e4bo6juj3 {
    to { transform: rotate(360deg); }
}

.status-text[b-9e4bo6juj3] {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    margin: 0;
}

.btn-ready[b-9e4bo6juj3] {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--success);
    background: rgba(74, 222, 128, 0.12);
    color: var(--success);
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-base);
    margin-bottom: var(--space-3);
}

.btn-ready:hover:not(:disabled)[b-9e4bo6juj3] {
    background: rgba(74, 222, 128, 0.22);
}

.btn-ready:disabled[b-9e4bo6juj3] {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--border-subtle);
    color: var(--text-muted);
    background: transparent;
}

.hint[b-9e4bo6juj3] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

.waiting-text[b-9e4bo6juj3] {
    color: var(--info);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-3) 0;
}

.army-hint[b-9e4bo6juj3] {
    color: var(--warning);
    font-size: var(--font-size-sm);
    margin: var(--space-2) 0 0 0;
}

.error-text[b-9e4bo6juj3] {
    color: var(--danger);
    font-size: var(--font-size-sm);
    margin: var(--space-2) 0 0 0;
}

/* ── Buttons (shared with Home.razor) ── */

.btn-primary[b-9e4bo6juj3],
.btn-secondary[b-9e4bo6juj3] {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-emphasis);
    background: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: var(--transition-base);
}

.btn-primary:hover[b-9e4bo6juj3] {
    border-color: var(--border-focus);
}

.btn-secondary:hover[b-9e4bo6juj3] {
    border-color: var(--border-focus);
    background: var(--bg-elevated);
}

.btn-tertiary[b-9e4bo6juj3] {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-md);
    transition: var(--transition-base);
}

.btn-tertiary:hover[b-9e4bo6juj3] {
    color: var(--text-primary);
    border-color: var(--border-emphasis);
}

.btn-primary:disabled[b-9e4bo6juj3],
.btn-secondary:disabled[b-9e4bo6juj3],
.btn-tertiary:disabled[b-9e4bo6juj3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ready.is-ready[b-9e4bo6juj3] {
    background: rgba(74, 222, 128, 0.28);
}

/* ── Map phase section ── */

.map-phase[b-9e4bo6juj3],
.army-phase[b-9e4bo6juj3] {
    text-align: left;
    margin-bottom: var(--space-5);
}

.section-heading[b-9e4bo6juj3] {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 var(--space-3) 0;
    text-align: center;
}

.map-weights[b-9e4bo6juj3] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--space-2) 0 var(--space-3) 0;
    text-align: center;
}

.map-actions[b-9e4bo6juj3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-3);
}

.map-ready-status[b-9e4bo6juj3] {
    text-align: center;
    margin: var(--space-2) 0;
    min-height: 24px;
}

.ready-pill[b-9e4bo6juj3] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: rgba(74, 222, 128, 0.15);
    border: var(--border-width) solid var(--success);
    color: var(--success);
    font-size: var(--font-size-sm);
}

.muted[b-9e4bo6juj3] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ── Preset editor ── */

.preset-editor[b-9e4bo6juj3] {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: left;
}

.preset-editor h4[b-9e4bo6juj3] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 var(--space-3) 0;
}

.preset-row[b-9e4bo6juj3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.preset-label[b-9e4bo6juj3] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    min-width: 72px;
}

.preset-radio[b-9e4bo6juj3] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid transparent;
    transition: var(--transition-fast);
}

.preset-radio:hover[b-9e4bo6juj3] {
    border-color: var(--border-subtle);
    background: var(--bg-panel);
}

.preset-radio input[type="radio"][b-9e4bo6juj3] {
    accent-color: var(--info);
    cursor: pointer;
}

.preset-actions[b-9e4bo6juj3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border-subtle);
}

/* ── Map recap (collapsed in army phase) ── */

.map-recap[b-9e4bo6juj3] {
    margin-bottom: var(--space-4);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.map-recap summary[b-9e4bo6juj3] {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    background: var(--bg-elevated);
    user-select: none;
}

.map-recap summary:hover[b-9e4bo6juj3] {
    color: var(--text-primary);
}

.map-recap[open] summary[b-9e4bo6juj3] {
    border-bottom: var(--border-width) solid var(--border-subtle);
}

@media (max-width: 768px) {
  .lobby-page[b-9e4bo6juj3] { padding: var(--space-3); }
  .lobby-card[b-9e4bo6juj3] {
    min-width: 0;
    max-width: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }
  .room-code-display[b-9e4bo6juj3] {
    font-size: var(--font-size-2xl);
    letter-spacing: 4px;
  }
  .map-actions[b-9e4bo6juj3] { flex-direction: column; }
  .map-actions > button[b-9e4bo6juj3] { width: 100%; min-height: 44px; }
  .preset-row[b-9e4bo6juj3] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .preset-label[b-9e4bo6juj3] { min-width: 0; }
  .preset-radio[b-9e4bo6juj3] { min-height: 36px; padding: var(--space-2); }
  .preset-actions > button[b-9e4bo6juj3] { min-height: 44px; flex: 1; }
  .btn-ready[b-9e4bo6juj3] { min-height: 48px; }
}

/* Army picker: table → vertical card list на mobile */
@media (max-width: 768px) {
  .unit-picker[b-9e4bo6juj3],
  .unit-picker thead[b-9e4bo6juj3],
  .unit-picker tbody[b-9e4bo6juj3],
  .unit-picker tr[b-9e4bo6juj3],
  .unit-picker th[b-9e4bo6juj3],
  .unit-picker td[b-9e4bo6juj3] {
    display: block;
    width: auto;
  }
  .unit-picker thead[b-9e4bo6juj3] { display: none; }
  .unit-picker tbody[b-9e4bo6juj3] { display: flex; flex-direction: column; gap: var(--space-3); }
  .unit-picker tr[b-9e4bo6juj3] {
    background: var(--bg-elevated);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
  }
  .tier-label[b-9e4bo6juj3] {
    text-align: left;
    background: transparent;
    border: none;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
  }
  .tier-cost[b-9e4bo6juj3] { color: var(--text-muted); margin-left: var(--space-2); }
  .unit-cell[b-9e4bo6juj3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: none;
    border-top: var(--border-width) solid var(--border-subtle);
    text-align: left;
  }
  .unit-cell[b-9e4bo6juj3]::before {
    content: attr(data-type);
    flex: 1;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
  }
  .unit-cell.has-units[b-9e4bo6juj3] { background: rgba(90, 141, 222, 0.10); }
  .cell-count[b-9e4bo6juj3] {
    font-size: var(--font-size-md);
    margin-bottom: 0;
    min-width: 24px;
    text-align: center;
  }
  .cell-btns[b-9e4bo6juj3] { gap: var(--space-2); }
  .btn-cell[b-9e4bo6juj3] {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-lg);
  }
  .budget-bar[b-9e4bo6juj3] {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .unit-count-label[b-9e4bo6juj3] { margin-left: 0; flex-basis: 100%; }
}

/* ── QR invite (visible while waiting for the second player) ── */

.qr-invite[b-9e4bo6juj3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.qr-invite-label[b-9e4bo6juj3] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.qr-box[b-9e4bo6juj3] {
    background: var(--qr-bg);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    line-height: 0;
}

.qr-box[b-9e4bo6juj3]  .qr-code {
    width: 168px;
    height: 168px;
    display: block;
}

.qr-invite-url[b-9e4bo6juj3] {
    color: var(--text-muted);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    margin: 0;
    user-select: all;
    word-break: break-all;
}
/* /Pages/Match.razor.rz.scp.css */
.match-page[b-v6yernrda3] {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* dynamic vh — изключва скриващия се mobile browser toolbar */
    display: flex;
    flex-direction: column;
    background: var(--bg-deep);
}

.match-loading[b-v6yernrda3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-4);
    color: var(--text-secondary);
}

.spinner-large[b-v6yernrda3] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--info);
    border-radius: var(--radius-full);
    animation: spin-b-v6yernrda3 0.8s linear infinite;
}

@keyframes spin-b-v6yernrda3 {
    to {
        transform: rotate(360deg);
    }
}

.match-header[b-v6yernrda3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-panel);
    border-bottom: var(--border-width) solid var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

.match-id[b-v6yernrda3] {
    color: var(--text-secondary);
}

.turn-indicator[b-v6yernrda3] {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.my-turn-label[b-v6yernrda3] {
    margin-left: var(--space-2);
    color: var(--success);
}

.fortify-button[b-v6yernrda3] {
    margin-left: auto;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--success);
    border: var(--border-width) solid var(--success);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: var(--transition-base);
}

.fortify-button:hover:not(:disabled)[b-v6yernrda3] {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    box-shadow: var(--shadow-sm);
}

.fortify-button:disabled[b-v6yernrda3] {
    color: var(--text-muted);
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

.end-turn-button[b-v6yernrda3] {
    padding: var(--space-2) var(--space-5);
    background: var(--player-a);
    color: var(--text-on-color);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.end-turn-button:hover:not(:disabled)[b-v6yernrda3] {
    filter: brightness(1.1);
    box-shadow: var(--shadow-md);
}

.end-turn-button:disabled[b-v6yernrda3] {
    background: var(--bg-panel);
    color: var(--text-muted);
    border: var(--border-width) solid var(--border-subtle);
    cursor: not-allowed;
}

.forfeit-button[b-v6yernrda3] {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--danger);
    border: var(--border-width) solid color-mix(in srgb, var(--danger) 55%, transparent);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: var(--transition-base);
}

.forfeit-button:hover[b-v6yernrda3] {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: var(--danger);
}

.victory-banner[b-v6yernrda3] {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-panel);
    border-bottom: var(--border-width-thick) solid var(--success);
    color: var(--text-primary);
    text-align: center;
    font-size: var(--font-size-md);
}

.victory-banner strong[b-v6yernrda3] {
    margin-right: var(--space-3);
    font-size: var(--font-size-lg);
}

.victory-banner .reason[b-v6yernrda3] {
    color: var(--text-secondary);
}

.content-area[b-v6yernrda3] {
    position: relative;
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.map-container[b-v6yernrda3] {
    flex: 1;
    overflow: auto;
    background: var(--bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud-sidebar[b-v6yernrda3] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-left: var(--border-width) solid var(--border-subtle);
    overflow: hidden;
    min-height: 0;
}

/* HUD groups: на desktop wrappers-ите изчезват (display:contents), за да текат
   панелите директно в sidebar flex-а (запазва gap-а и стария вид).
   Видимостта на log/terrain се кара от toggle класовете на .hud-sidebar. */
.hud-group[b-v6yernrda3] { display: contents; }
.hud-group-log[b-v6yernrda3],
.hud-group-terrain[b-v6yernrda3] { display: none; }
.hud-sidebar.show-log .hud-group-log[b-v6yernrda3] { display: contents; }
.hud-sidebar.show-terrain .hud-group-terrain[b-v6yernrda3] { display: contents; }

/* Tab bar за мобилния bottom-sheet — скрит на desktop. */
.hud-tabs[b-v6yernrda3] { display: none; }

.hud-tab[b-v6yernrda3] {
    flex: 1;
    min-height: 44px;
    padding: var(--space-2) var(--space-2);
    background: transparent;
    color: var(--text-secondary);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: var(--transition-fast);
}

.hud-tab.active[b-v6yernrda3] {
    background: color-mix(in srgb, var(--info) 15%, transparent);
    border-color: var(--info);
    color: var(--info);
    font-weight: var(--font-weight-semibold);
}

.hud-toggle[b-v6yernrda3] {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--text-secondary);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: var(--transition-fast);
}

.hud-toggle:hover[b-v6yernrda3] {
    border-color: var(--border-emphasis);
    color: var(--text-primary);
}

.hud-toggle.active[b-v6yernrda3] {
    background: color-mix(in srgb, var(--info) 15%, transparent);
    border-color: var(--info);
    color: var(--info);
}

.match-footer[b-v6yernrda3] {
    padding: var(--space-2) var(--space-5);
    background: var(--bg-panel);
    border-top: var(--border-width) solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.phase-hint[b-v6yernrda3] {
    font-style: italic;
}

.selection-summary[b-v6yernrda3] {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.status-hint[b-v6yernrda3] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.status-hint.tired[b-v6yernrda3] {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
}

.status-hint.charge[b-v6yernrda3] {
    background: color-mix(in srgb, var(--charge-indicator) 15%, transparent);
    color: var(--charge-indicator);
}

.hex-info[b-v6yernrda3] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.action-error[b-v6yernrda3] {
    color: var(--danger);
    font-weight: var(--font-weight-medium);
}

.waiting-overlay[b-v6yernrda3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.waiting-content[b-v6yernrda3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--bg-overlay);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.result-button[b-v6yernrda3] {
    margin-left: var(--space-5);
    padding: var(--space-2) var(--space-4);
    background: var(--success);
    color: var(--text-on-color);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-base);
}
.result-button:hover[b-v6yernrda3] { filter: brightness(1.1); }

.connection-banner[b-v6yernrda3] {
    padding: var(--space-2) var(--space-5);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.connection-banner.disconnected[b-v6yernrda3] {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--danger);
    border-bottom: var(--border-width) solid var(--danger);
}

.connection-banner.reconnecting[b-v6yernrda3] {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
    border-bottom: var(--border-width) solid var(--warning);
}

.formation-picker[b-v6yernrda3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.formation-label[b-v6yernrda3] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}

.formation-btn[b-v6yernrda3] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-deep);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-base);
}

.formation-btn:hover:not(:disabled)[b-v6yernrda3] {
    border-color: var(--player-self);
    color: var(--text-primary);
}

.formation-btn.active[b-v6yernrda3] {
    border-color: var(--player-self);
    background: color-mix(in srgb, var(--player-self) 15%, transparent);
    color: var(--text-primary);
}

.formation-picker.disabled .formation-btn[b-v6yernrda3] {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* === Tablet === */
@media (max-width: 1024px) {
  .hud-sidebar[b-v6yernrda3] { width: 220px; padding: var(--space-2); }
  .match-header[b-v6yernrda3] { gap: var(--space-3); padding: var(--space-2) var(--space-3); }
  .end-turn-button[b-v6yernrda3], .fortify-button[b-v6yernrda3] { padding: var(--space-2) var(--space-3); }
}

/* === Mobile === */
@media (max-width: 768px) {
  .match-header[b-v6yernrda3] {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
  }
  .match-header .compact-hide[b-v6yernrda3] { display: none; }
  .turn-indicator[b-v6yernrda3] { flex: 1; min-width: 0; }
  .my-turn-label[b-v6yernrda3] { display: block; margin-left: 0; font-size: var(--font-size-xs); }

  .hud-toggle[b-v6yernrda3] {
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
  }
  /* Log/Terrain toggle-ите се заменят от drawer табовете на mobile. */
  .match-header .hud-toggle.compact-icon[b-v6yernrda3] { display: none; }

  .fortify-button[b-v6yernrda3],
  .end-turn-button[b-v6yernrda3],
  .forfeit-button[b-v6yernrda3] {
    margin-left: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    flex: 1;
  }

  .content-area[b-v6yernrda3] {
    flex-direction: column;
  }
  /* Картата и драуерът си делят content-area-та като flex-фракции (5:4).
     Без твърди vh-min/max → сборът никога не надхвърля родителя → без клипване. */
  .map-container[b-v6yernrda3] {
    flex: 5 1 0;
    min-height: 0;
    touch-action: none;
    overflow: hidden;
    /* На touch позицията се владее от JS transform-а (mapGestures), не от flex.
       Flex-центрирането се биеше с transform-origin: 0 0 → не се достигаха
       горният/долният ръб. Подравняваме в горен ляв ъгъл = origin-а на pan-а. */
    align-items: flex-start;
    justify-content: flex-start;
  }
  .map-container > .hex-grid[b-v6yernrda3] { flex-shrink: 0; }
  .hud-sidebar.mobile-drawer[b-v6yernrda3] {
    width: 100%;
    flex: 4 1 0;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    border-left: none;
    border-top: var(--border-width) solid var(--border-subtle);
    overflow: hidden; /* скролът е вътре в активната група */
    touch-action: pan-y;
  }

  /* Bottom-sheet табове: показваме само активния панел. */
  .hud-tabs[b-v6yernrda3] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
  }
  /* Спецификост 0,3,0 — за да бие desktop show-log/show-terrain правилата. */
  .hud-sidebar[data-mobile-tab] .hud-group[b-v6yernrda3] { display: none; }
  .hud-sidebar[data-mobile-tab="units"] .hud-group-units[b-v6yernrda3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .hud-sidebar[data-mobile-tab="log"] .hud-group-log[b-v6yernrda3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .hud-sidebar[data-mobile-tab="terrain"] .hud-group-terrain[b-v6yernrda3] {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .hex-grid[b-v6yernrda3] {
    transform-origin: 0 0;
    will-change: transform;
  }

  .match-footer[b-v6yernrda3] {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    justify-content: flex-start;
  }

  .victory-banner[b-v6yernrda3] {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }
  .victory-banner strong[b-v6yernrda3] { font-size: var(--font-size-md); margin-right: 0; }
  .result-button[b-v6yernrda3] { margin-left: 0; min-height: 40px; }

  .formation-picker[b-v6yernrda3] { flex-wrap: wrap; }
  .formation-btn[b-v6yernrda3] { min-height: 36px; flex: 1; }

  .waiting-content[b-v6yernrda3] {
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    max-width: 90%;
  }
}

/* === Small phone === */
@media (max-width: 380px) {
  .match-header[b-v6yernrda3] { font-size: 11px; }
  .hud-toggle[b-v6yernrda3] { padding: 4px var(--space-1); }
}

/* Reset-zoom button (visible on touch screens only) */
.reset-zoom-btn[b-v6yernrda3] { font-size: var(--font-size-md); padding: var(--space-1) var(--space-2); }
@media (min-width: 1025px) { .reset-zoom-btn[b-v6yernrda3] { display: none; } }

/* Landscape phone (e.g., 812×375): wide but short → revert to side-drawer */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .content-area[b-v6yernrda3] { flex-direction: row; }
  .map-container[b-v6yernrda3] {
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  .hud-sidebar.mobile-drawer[b-v6yernrda3] {
    /* фиксиран side-drawer — нулираме flex-grow от portrait блока (иначе расте) */
    flex: 0 0 220px;
    width: 220px;
    max-height: none;
    height: auto;
    border-top: none;
    border-left: var(--border-width) solid var(--border-subtle);
  }
  .match-header[b-v6yernrda3] { font-size: 11px; padding: var(--space-1) var(--space-3); }
  .match-footer[b-v6yernrda3] { padding: var(--space-1) var(--space-3); }
}

/* iOS safe-area insets — match header/footer respect notch & home indicator */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .match-header[b-v6yernrda3] {
      padding-top: max(var(--space-2), env(safe-area-inset-top));
      padding-left: max(var(--space-3), env(safe-area-inset-left));
      padding-right: max(var(--space-3), env(safe-area-inset-right));
    }
    .match-footer[b-v6yernrda3] {
      padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
      padding-left: max(var(--space-3), env(safe-area-inset-left));
      padding-right: max(var(--space-3), env(safe-area-inset-right));
    }
  }
}
/* /Pages/Result.razor.rz.scp.css */
.result-page[b-2j1x4bwyep] {
    width: 100vw;
    min-height: 100vh;
    background: var(--bg-deep);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-5);
    gap: var(--space-6);
    font-family: var(--font-family-base);
}

.result-header[b-2j1x4bwyep] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.winner-display[b-2j1x4bwyep] { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.winner-label[b-2j1x4bwyep] { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted);
    letter-spacing: 0.15em; text-transform: uppercase; }
.winner-name[b-2j1x4bwyep] { font-size: var(--font-size-display); font-weight: var(--font-weight-bold); }
.winner-display.player-a .winner-name[b-2j1x4bwyep] { color: var(--player-a); }
.winner-display.player-b .winner-name[b-2j1x4bwyep] { color: var(--player-b); }
.victory-reason[b-2j1x4bwyep] { font-size: var(--font-size-md); color: var(--text-secondary); }

.result-stats[b-2j1x4bwyep] { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; }

.stat-box[b-2j1x4bwyep] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-md);
    min-width: 100px;
}
.stat-box .stat-label[b-2j1x4bwyep] { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.06em; }
.stat-box .stat-value[b-2j1x4bwyep] { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.stat-box .stat-value.mono[b-2j1x4bwyep] { font-family: var(--font-family-mono); font-size: var(--font-size-sm); }

.result-log-section[b-2j1x4bwyep] { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: var(--space-3);
    max-height: 360px; min-height: 0; }

.log-section-header[b-2j1x4bwyep] { display: flex; align-items: center; justify-content: space-between; }
.log-section-title[b-2j1x4bwyep] { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color:
    var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }

.export-button[b-2j1x4bwyep] {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--info);
    border: var(--border-width) solid var(--info);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: var(--transition-fast);
}
.export-button:hover[b-2j1x4bwyep] { background: color-mix(in srgb, var(--info) 15%, transparent); }

.result-actions[b-2j1x4bwyep] { display: flex; gap: var(--space-4); }

.play-again-button[b-2j1x4bwyep] {
    padding: var(--space-3) var(--space-6);
    background: var(--player-a);
    color: var(--text-on-color);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}
.play-again-button:hover[b-2j1x4bwyep] { filter: brightness(1.1); box-shadow: var(--shadow-md); }

.result-no-data[b-2j1x4bwyep] { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); color:
    var(--text-secondary); font-size: var(--font-size-md); }
.btn-home[b-2j1x4bwyep] { padding: var(--space-3) var(--space-6); background: var(--bg-panel); color: var(--text-primary); border:
    var(--border-width) solid var(--border-emphasis); border-radius: var(--radius-md); text-decoration: none; }

@media (max-width: 768px) {
    .result-page[b-2j1x4bwyep] { padding: var(--space-5) var(--space-3); gap: var(--space-4); }
    .stat-box[b-2j1x4bwyep] { padding: var(--space-3) var(--space-4); min-width: 80px; flex: 1; }
    .result-log-section[b-2j1x4bwyep] { max-height: 280px; }
    .result-actions[b-2j1x4bwyep] { width: 100%; }
    .play-again-button[b-2j1x4bwyep] { width: 100%; min-height: 44px; }
}

@media (max-width: 480px) {
    .winner-name[b-2j1x4bwyep] { font-size: var(--font-size-2xl); }
    .stat-box[b-2j1x4bwyep] { min-width: 0; padding: var(--space-2) var(--space-3); }
    .stat-box .stat-value[b-2j1x4bwyep] { font-size: var(--font-size-lg); }
}