/* PUMPCITY · the war HUD. One colour per team everywhere (the bar, the map, names, the district panel). Fixed slots. */
/* tokens (--t0..--t3 --neutral, the faces): css/tokens.css. Title, menu, round end, payday, settings: css/ui.css (chat UI). */

/* the city's split: four segments that grow and shrink, the clock under them */
.war { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 560px; text-align: center; text-shadow: var(--shadow); }
.war-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.war-bar i { display: block; height: 100%; flex: 25 1 0; transition: flex-grow .6s ease; }
.war-bar i[data-t="0"] { background: var(--t0); } .war-bar i[data-t="1"] { background: var(--t1); } .war-bar i[data-t="2"] { background: var(--t2); } .war-bar i[data-t="3"] { background: var(--t3); }
.war-bar i.me { box-shadow: inset 0 0 0 2px rgba(255,255,255,.95); }
.war-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6px; height: 16px; font: 600 12px/16px var(--font-display); letter-spacing: .12em; }
.war-row span { white-space: nowrap; overflow: hidden; }
.war-row b { font-family: var(--font-mono); font-weight: 700; margin-left: 6px; color: #fff; }
.war-clock { margin-top: 4px; height: 26px; font: 600 22px/26px var(--font-mono); letter-spacing: .04em; color: #fff; }

/* the district you stand in */
.dist { position: absolute; left: 26px; top: 22px; width: 340px; text-shadow: var(--shadow); }
.d-name { height: 20px; font: 600 15px/20px var(--font-display); letter-spacing: .14em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-own { height: 18px; margin-top: 2px; font: 500 12px/18px var(--font-text); color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; }
.d-own b { font-weight: 700; }
.d-cap { margin-top: 6px; width: 260px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; opacity: 0; transition: opacity .2s; }
.d-cap.on { opacity: 1; }
.d-cap i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: #fff; }
.feed { position: absolute; right: 34px; top: 110px; width: 360px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.feed div { font: 500 13px/1.25 var(--font-text); padding: 4px 10px; background: rgba(8,10,12,.62); border-radius: 4px; color: #fff; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* death */
.dead { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(ellipse at center, rgba(40,0,0,.0), rgba(30,0,0,.55)); }
.dead.on { display: flex; }
.dd-k { font: 700 86px/1 var(--font-display); letter-spacing: .08em; color: #ff3b30; text-shadow: 0 4px 30px rgba(0,0,0,.7); }
.dd-by { margin-top: 10px; height: 22px; font: 500 16px/22px var(--font-text); color: #fff; text-shadow: var(--shadow); }
.dd-t { margin-top: 18px; font: 600 16px/1 var(--font-display); letter-spacing: .3em; color: rgba(255,255,255,.8); }
.dd-t b { font-family: var(--font-mono); color: #fff; }
/* the big map */
.bigmap { position: absolute; inset: 40px 80px 40px 80px; display: none; background: rgba(6,7,9,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.bigmap.on { display: block; }
.bigmap canvas { width: 100%; height: calc(100% - 34px); display: block; }
.bm-key { height: 34px; font: 500 12px/34px var(--font-text); color: rgba(255,255,255,.65); text-align: center; letter-spacing: .04em; }

.war-pay { margin-top: 2px; height: 18px; font: 600 12px/18px var(--font-mono); color: rgba(255,255,255,.85); letter-spacing: .02em; }
.war-pay b { color: var(--g); }
.feed div.good { border-left: 3px solid var(--g); } .feed div.bad { border-left: 3px solid #ff4a3d; } .feed div.big { border-left: 3px solid #fff; } .feed div.me { background: rgba(255,255,255,.14); }
.feed .kf { font: 600 11px/1 var(--font-display); letter-spacing: .1em; color: rgba(255,255,255,.6); margin: 0 6px; }

/* objective markers (positioned by marks.js) */
.marks { position: absolute; inset: 0; pointer-events: none; }
.mk { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; --c: #fff; }
.mk i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; transform: rotate(45deg); border: 2px solid var(--c); background: rgba(0,0,0,.35); box-shadow: 0 0 12px var(--c); }
.mk.defend i { animation: mkp .6s ease-in-out infinite alternate; background: var(--c); }
.mk b { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font: 700 12px/1 var(--font-display); letter-spacing: .14em; color: var(--c); text-shadow: var(--shadow); white-space: nowrap; }
.mk em { position: absolute; left: 50%; top: 29px; transform: translateX(-50%); font: 600 11px/1 var(--font-mono); font-style: normal; color: #fff; text-shadow: var(--shadow); white-space: nowrap; }
.mk.here i { width: 12px; height: 12px; left: -6px; top: -6px; }
.mk.edge i { transform: rotate(45deg) scale(.8); }
@keyframes mkp { to { transform: rotate(45deg) scale(1.25); } }

.dd-h { margin-top: 10px; font: 500 12px/1 var(--font-text); color: rgba(255,255,255,.55); }
.wpn-nade { height: 16px; margin-top: 4px; font: 600 12px/16px var(--font-display); letter-spacing: .14em; color: rgba(255,255,255,.75); }


/* the radar (owner 2026-10-18 "see more from the map"): bigger, drawn by war/hud.js J.radar */
.radar { width: 340px; }
#mini { width: 340px; height: 230px; background: #15181c; }