/* War centre: two battle slots facing each other, the table between them. Tokens from styles.css only. */
.war #sort,.war #arrange{display:none}
/* No hand: keep its room so your seat stays inside the felt, as in Rummy. */
.war .hand-wrap{min-height:0;height:var(--space-12);padding:0;visibility:hidden;overflow:hidden}
.war-table{display:grid;gap:var(--space-2);justify-items:center;width:100%}
.war-side{display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-width:0}
.war-side-name{color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;min-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.war-them .war-side-name{text-align:right}
.war-pile{display:grid;place-items:center;width:64px;height:92px;color:var(--paper);font-weight:800;font-variant-numeric:tabular-nums;border:1px solid var(--line-strong)}
.war-pile>span{background:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:2px 8px;font-size:13px;line-height:1.2}
.war-pile.empty{background:var(--felt-deep)}
button.war-pile:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.war-slot{display:flex;align-items:center;min-height:92px;min-width:64px}
.war-slot .card{width:64px;height:92px;box-shadow:none}
.war-slot .card+.card,.war-slot .card+.war-last{margin-left:-44px}
.war-slot .war-down{margin-left:0}
.war-slot .war-down+.war-down{margin-left:-56px}
.war-last .card{opacity:.6}
.war-middle{display:grid;justify-items:center;gap:var(--space-1);min-height:56px}
.war-pot{margin:0;color:var(--muted);font-size:13px}
.war-callout{margin:0;font-family:var(--display);font-size:24px;font-weight:700;color:var(--lime);min-height:30px}
.war-counts{display:flex;width:min(360px,100%);height:6px;border-radius:999px;overflow:hidden;background:var(--ink-soft);margin-top:var(--space-2)}
.war-bar{display:block;height:100%;width:var(--share);background:var(--lime);transition:width 300ms ease}
.no-motion .war-bar,.low-effects .war-bar{transition:none}
.war .game-actions button{min-width:140px}
@media(max-width:767px){
 .war .table-top{flex-direction:column;align-items:flex-start;gap:2px}
 .war-pile,.war-slot .card{width:56px;height:80px}
 .war-slot{min-height:80px;min-width:56px}
 .war-side-name{min-width:56px;font-size:11px}
 .war-callout{font-size:20px}
}