:root {
    --war-a-rgb: 66, 133, 244;
    --war-a: rgb(var(--war-a-rgb));
    --war-b-rgb: 234, 67, 53;
    --war-b: rgb(var(--war-b-rgb));
    --war-stone: #9b93ad;
    --war-stone-dark: #5b5372;
    --war-window: #ffd66b;
    --war-door: #241b31;
    --war-skin: #e8b98c;
    --war-steel: #cfd6e4;
    --war-flame: #ffb02e;
    --war-flame-hot: #ff5a1f;
    --war-wood: #7a4a2b;
    --war-ground-top: #35502f;
    --war-ground-deep: #22371f;
    --war-sky-top: #120c26;
    --war-sky-deep: #322357;
    --war-leg: #2c2440;
    --war-gold: #f4c542;
}

dp-opinion-war {
    display: block;
}

.war-card {
    position: relative;
    z-index: 1;
    margin: var(--space-md) 0;
    padding: var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.war-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.war-head-title {
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent-light);
}

.war-countdown {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.war-bars {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.war-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.war-side-b {
    text-align: right;
}

.war-side-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.war-side-a .war-side-name {
    color: var(--war-a);
}

.war-side-b .war-side-name {
    color: var(--war-b);
}

.war-vs {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--war-gold);
}

.war-bar {
    position: relative;
    height: 20px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-input);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.war-bar-fill {
    position: absolute;
    inset: 0;
    width: var(--war-pct, 0%);
    transition: width 0.4s ease;
}

.war-bar-a .war-bar-fill {
    background: rgba(var(--war-a-rgb), 0.55);
}

.war-bar-b .war-bar-fill {
    left: auto;
    right: 0;
    background: rgba(var(--war-b-rgb), 0.55);
}

.war-bar-pct {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-primary);
    z-index: 1;
}

.war-bar-a .war-bar-pct {
    left: var(--space-sm);
}

.war-bar-b .war-bar-pct {
    right: var(--space-sm);
}

.war-side-hp {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.war-field {
    --px: 3px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
    height: 96px;
    padding: 0 var(--space-md) 12px;
    border-radius: var(--radius);
    background: linear-gradient(var(--war-sky-top), var(--war-sky-deep));
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.war-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: linear-gradient(var(--war-ground-top), var(--war-ground-deep));
}

.war-px {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--px);
    height: var(--px);
}

.war-castle {
    position: relative;
    z-index: 1;
    width: calc(var(--px) * 5);
    height: calc(var(--px) * 8);
    flex-shrink: 0;
}

.war-castle-b {
    transform: scaleX(-1);
}

.war-castle-px {
    background: var(--war-stone-dark);
    box-shadow:
        calc(var(--px) * 2) 0 0 0 var(--war-stone-dark),
        calc(var(--px) * 4) 0 0 0 var(--war-stone-dark),
        0 var(--px) 0 0 var(--war-stone-dark),
        var(--px) var(--px) 0 0 var(--war-stone-dark),
        calc(var(--px) * 2) var(--px) 0 0 var(--war-stone-dark),
        calc(var(--px) * 3) var(--px) 0 0 var(--war-stone-dark),
        calc(var(--px) * 4) var(--px) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 2) 0 0 var(--war-stone-dark),
        var(--px) calc(var(--px) * 2) 0 0 var(--war-stone),
        calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--war-stone),
        calc(var(--px) * 3) calc(var(--px) * 2) 0 0 var(--war-stone),
        calc(var(--px) * 4) calc(var(--px) * 2) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 3) 0 0 var(--war-stone-dark),
        var(--px) calc(var(--px) * 3) 0 0 var(--war-stone),
        calc(var(--px) * 2) calc(var(--px) * 3) 0 0 var(--war-window),
        calc(var(--px) * 3) calc(var(--px) * 3) 0 0 var(--war-stone),
        calc(var(--px) * 4) calc(var(--px) * 3) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 4) 0 0 var(--war-stone-dark),
        var(--px) calc(var(--px) * 4) 0 0 var(--war-stone),
        calc(var(--px) * 2) calc(var(--px) * 4) 0 0 var(--war-stone),
        calc(var(--px) * 3) calc(var(--px) * 4) 0 0 var(--war-stone),
        calc(var(--px) * 4) calc(var(--px) * 4) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 5) 0 0 var(--war-stone-dark),
        var(--px) calc(var(--px) * 5) 0 0 var(--war-stone),
        calc(var(--px) * 2) calc(var(--px) * 5) 0 0 var(--war-stone),
        calc(var(--px) * 3) calc(var(--px) * 5) 0 0 var(--war-stone),
        calc(var(--px) * 4) calc(var(--px) * 5) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 6) 0 0 var(--war-stone-dark),
        var(--px) calc(var(--px) * 6) 0 0 var(--war-stone),
        calc(var(--px) * 2) calc(var(--px) * 6) 0 0 var(--war-door),
        calc(var(--px) * 3) calc(var(--px) * 6) 0 0 var(--war-stone),
        calc(var(--px) * 4) calc(var(--px) * 6) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 7) 0 0 var(--war-stone-dark),
        var(--px) calc(var(--px) * 7) 0 0 var(--war-stone),
        calc(var(--px) * 2) calc(var(--px) * 7) 0 0 var(--war-door),
        calc(var(--px) * 3) calc(var(--px) * 7) 0 0 var(--war-stone),
        calc(var(--px) * 4) calc(var(--px) * 7) 0 0 var(--war-stone-dark);
}

.war-flag {
    top: calc(var(--px) * -4);
    left: calc(var(--px) * 2);
    background: var(--war-stone-dark);
    box-shadow:
        0 var(--px) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 2) 0 0 var(--war-stone-dark),
        0 calc(var(--px) * 3) 0 0 var(--war-stone-dark),
        var(--px) 0 0 0 var(--war-flag-color),
        calc(var(--px) * 2) 0 0 0 var(--war-flag-color),
        var(--px) var(--px) 0 0 var(--war-flag-color);
}

.war-flag-a {
    --war-flag-color: var(--war-a);
}

.war-flag-b {
    --war-flag-color: var(--war-b);
}

.war-troops {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 1;
    min-width: 0;
    transition: transform 0.6s ease;
}

.war-field-lead-a .war-troops-a {
    transform: translateX(calc(var(--px) * 2));
}

.war-field-lead-b .war-troops-b {
    transform: translateX(calc(var(--px) * -2));
}

.war-soldier {
    position: relative;
    display: block;
    width: calc(var(--px) * 6);
    height: calc(var(--px) * 7);
    animation: war-march 1.2s steps(1, end) infinite;
}

.war-soldier:nth-child(2) {
    animation-delay: 0.4s;
}

.war-soldier:nth-child(3) {
    animation-delay: 0.8s;
}

.war-soldier:nth-child(4) {
    animation-delay: 0.2s;
}

.war-soldier-a {
    --war-soldier-main: var(--war-a);
}

.war-soldier-b {
    --war-soldier-main: var(--war-b);
    transform: scaleX(-1);
}

.war-soldier-px {
    background: transparent;
    box-shadow:
        var(--px) 0 0 0 var(--war-soldier-main),
        calc(var(--px) * 2) 0 0 0 var(--war-soldier-main),
        calc(var(--px) * 3) 0 0 0 var(--war-soldier-main),
        var(--px) var(--px) 0 0 var(--war-skin),
        calc(var(--px) * 2) var(--px) 0 0 var(--war-skin),
        calc(var(--px) * 3) var(--px) 0 0 var(--war-skin),
        calc(var(--px) * 5) var(--px) 0 0 var(--war-steel),
        0 calc(var(--px) * 2) 0 0 var(--war-soldier-main),
        var(--px) calc(var(--px) * 2) 0 0 var(--war-soldier-main),
        calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--war-soldier-main),
        calc(var(--px) * 3) calc(var(--px) * 2) 0 0 var(--war-soldier-main),
        calc(var(--px) * 4) calc(var(--px) * 2) 0 0 var(--war-soldier-main),
        calc(var(--px) * 5) calc(var(--px) * 2) 0 0 var(--war-steel),
        var(--px) calc(var(--px) * 3) 0 0 var(--war-soldier-main),
        calc(var(--px) * 2) calc(var(--px) * 3) 0 0 var(--war-soldier-main),
        calc(var(--px) * 3) calc(var(--px) * 3) 0 0 var(--war-soldier-main),
        calc(var(--px) * 4) calc(var(--px) * 3) 0 0 var(--war-skin),
        calc(var(--px) * 5) calc(var(--px) * 3) 0 0 var(--war-steel),
        var(--px) calc(var(--px) * 4) 0 0 var(--war-soldier-main),
        calc(var(--px) * 2) calc(var(--px) * 4) 0 0 var(--war-soldier-main),
        calc(var(--px) * 3) calc(var(--px) * 4) 0 0 var(--war-soldier-main),
        var(--px) calc(var(--px) * 5) 0 0 var(--war-leg),
        calc(var(--px) * 3) calc(var(--px) * 5) 0 0 var(--war-leg),
        var(--px) calc(var(--px) * 6) 0 0 var(--war-leg),
        calc(var(--px) * 3) calc(var(--px) * 6) 0 0 var(--war-leg);
}

.war-campfire {
    position: relative;
    z-index: 1;
    width: calc(var(--px) * 5);
    height: calc(var(--px) * 5);
    flex-shrink: 0;
}

.war-fire-logs {
    background: transparent;
    box-shadow:
        var(--px) calc(var(--px) * 3) 0 0 var(--war-wood),
        calc(var(--px) * 2) calc(var(--px) * 3) 0 0 var(--war-wood),
        calc(var(--px) * 3) calc(var(--px) * 3) 0 0 var(--war-wood),
        0 calc(var(--px) * 4) 0 0 var(--war-wood),
        var(--px) calc(var(--px) * 4) 0 0 var(--war-wood),
        calc(var(--px) * 2) calc(var(--px) * 4) 0 0 var(--war-wood),
        calc(var(--px) * 3) calc(var(--px) * 4) 0 0 var(--war-wood),
        calc(var(--px) * 4) calc(var(--px) * 4) 0 0 var(--war-wood);
}

.war-fire-flame {
    background: transparent;
    animation: war-flicker 0.8s steps(1, end) infinite;
    box-shadow:
        calc(var(--px) * 2) 0 0 0 var(--war-flame-hot),
        var(--px) var(--px) 0 0 var(--war-flame),
        calc(var(--px) * 3) var(--px) 0 0 var(--war-flame),
        var(--px) calc(var(--px) * 2) 0 0 var(--war-flame),
        calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--war-flame-hot),
        calc(var(--px) * 3) calc(var(--px) * 2) 0 0 var(--war-flame);
}

.war-victory {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid var(--war-gold);
    border-radius: var(--radius);
    background: rgba(var(--accent-rgb), 0.12);
}

.war-victory-title {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--war-gold);
}

.war-mine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.war-mine-faction {
    font-weight: 700;
}

.war-tag-a {
    color: var(--war-a);
}

.war-tag-b {
    color: var(--war-b);
}

.war-mine-stats {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.war-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.war-join-btn.war-join-a {
    border-color: rgba(var(--war-a-rgb), 0.6);
}

.war-join-btn.war-join-b {
    border-color: rgba(var(--war-b-rgb), 0.6);
}

.war-fight-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.war-block-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.war-contributors {
    margin-bottom: var(--space-md);
}

.war-contributor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.war-contributor {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.war-contributor-hp {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

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

.war-text-b {
    color: var(--war-b);
}

.war-events {
    margin-bottom: var(--space-md);
}

.war-ticker {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.war-event {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    font-size: 0.85rem;
    min-width: 0;
}

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

.war-event-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: var(--text-muted);
}

.war-dot-a {
    background: var(--war-a);
}

.war-dot-b {
    background: var(--war-b);
}

.war-event-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.war-event-time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.war-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.war-all-link {
    font-weight: 600;
    color: var(--accent-light);
}

.war-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.war-foot-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

@keyframes war-march {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(var(--px) * -1));
    }
}

@keyframes war-flicker {
    0%,
    100% {
        box-shadow:
            calc(var(--px) * 2) 0 0 0 var(--war-flame-hot),
            var(--px) var(--px) 0 0 var(--war-flame),
            calc(var(--px) * 3) var(--px) 0 0 var(--war-flame),
            var(--px) calc(var(--px) * 2) 0 0 var(--war-flame),
            calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--war-flame-hot),
            calc(var(--px) * 3) calc(var(--px) * 2) 0 0 var(--war-flame);
    }

    50% {
        box-shadow:
            var(--px) 0 0 0 var(--war-flame),
            calc(var(--px) * 2) var(--px) 0 0 var(--war-flame-hot),
            calc(var(--px) * 3) 0 0 0 var(--war-flame),
            var(--px) calc(var(--px) * 2) 0 0 var(--war-flame-hot),
            calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--war-flame),
            calc(var(--px) * 3) calc(var(--px) * 2) 0 0 var(--war-flame);
    }
}

.war-soldier-b.war-soldier {
    animation-name: war-march-b;
}

@keyframes war-march-b {
    0%,
    100% {
        transform: scaleX(-1) translateY(0);
    }

    50% {
        transform: scaleX(-1) translateY(calc(var(--px) * -1));
    }
}

.war-filter-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.war-listing-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

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

.war-builder {
    margin: var(--space-sm) 0;
    padding: var(--space-md);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius);
}

.war-builder[hidden] {
    display: none;
}

.war-builder-hint {
    margin: 0 0 var(--space-sm);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.war-builder-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.war-builder-row input {
    flex: 1;
    min-width: 0;
}

.war-builder-vs {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--war-gold);
}

.war-builder-error {
    margin: var(--space-sm) 0 0;
    color: var(--danger);
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .war-field {
        --px: 2px;
        height: 76px;
    }
}

@media (max-width: 480px) {
    .war-bars {
        gap: var(--space-sm);
    }

    .war-vs {
        font-size: 0.9rem;
    }

    .war-bar-pct {
        display: none;
    }

    .war-builder-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .war-soldier,
    .war-fire-flame {
        animation: none;
    }

    .war-bar-fill,
    .war-troops {
        transition: none;
    }
}