/* war.css — Fruggia War */

/* ── Card sizing ─────────────────────────────────────────────────────────── */
.war-area {
    --war-cw: 72px;
    --war-ch: calc(var(--war-cw) * 1.4);
    max-width: 520px;
    margin: 0 auto;
    user-select: none;
}

.war-area .fc-card {
    width: var(--war-cw);
    height: var(--war-ch);
    animation: none;
    flex-shrink: 0;
}
.war-area .fc-rank   { font-size: calc(var(--war-cw) * 0.165); }
.war-area .fc-suit   { font-size: calc(var(--war-cw) * 0.13); }
.war-area .fc-center { font-size: calc(var(--war-cw) * 0.33); }
.war-area .fc-tl { top: calc(var(--war-cw) * 0.054); left: calc(var(--war-cw) * 0.082); }
.war-area .fc-br { bottom: calc(var(--war-cw) * 0.054); right: calc(var(--war-cw) * 0.082); }

/* ── Green felt table ────────────────────────────────────────────────────── */
.war-table {
    background: #14532d;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Player rows ─────────────────────────────────────────────────────────── */
.war-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.war-row--cpu    { flex-direction: row; }
.war-row--player { flex-direction: row; }

.war-player-info {
    min-width: 52px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.war-player-label {
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: 0.82rem;
}
.war-count-badge {
    color: rgba(255,255,255,.55);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* ── Deck slot ───────────────────────────────────────────────────────────── */
.war-deck-slot {
    position: relative;
    width: var(--war-cw);
    height: var(--war-ch);
    flex-shrink: 0;
}

.war-deck-stack {
    position: relative;
    width: var(--war-cw);
    height: var(--war-ch);
}

.war-empty-slot {
    width: var(--war-cw);
    height: var(--war-ch);
    border: 2px dashed rgba(255,255,255,.18);
    border-radius: 8px;
    box-sizing: border-box;
}

/* ── Card slot (flipped battle card) ─────────────────────────────────────── */
.war-card-slot {
    width: var(--war-cw);
    height: var(--war-ch);
    flex-shrink: 0;
    /* Spacer so empty slot keeps layout stable */
    display: flex;
    align-items: flex-start;
}

/* ── Winner / loser highlights ───────────────────────────────────────────── */
.war-area .fc-card.war-winner {
    box-shadow: 0 0 0 3px #fbbf24, 0 6px 18px rgba(0,0,0,.4);
}
.war-area .fc-card.war-loser {
    opacity: 0.45;
}

/* ── Centre: pot + message ───────────────────────────────────────────────── */
.war-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
}

.war-pot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.war-pot-inner {
    position: relative;
    height: var(--war-ch);
    /* width is set inline by JS depending on card count */
}

.war-pot-label {
    color: rgba(255,255,255,.6);
    font-size: 0.72rem;
    text-align: center;
}

.war-msg {
    color: #fbbf24;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    min-height: 1.4em;
    letter-spacing: 0.01em;
    transition: font-size 0.15s;
}
.war-msg.is-war {
    color: #f87171;
    font-size: 1.25rem;
}

/* ── Controls ────────────────────────────────────────────────────────────── */
.war-controls {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.war-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.war-btn-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── Win / loss overlay ──────────────────────────────────────────────────── */
.war-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(15,23,42,.88);
    color: #f1f5f9;
    text-align: center;
    padding: 1.5rem;
    z-index: 100;
}
.war-overlay.hidden { display: none; }
.war-overlay h2 { font-size: 1.6rem; }
.war-overlay p  { font-size: 0.9rem; color: #94a3b8; }

/* ── Dark theme ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .stat-box { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .stat-box .value { color: #f1f5f9; }