/* PUMPCITY · the combat HUD (chat Combat HUD): hit markers, the hurt direction, the notification slot, the death screen.
   Fixed slots: nothing changes size or place with its content. Every colour, face, radius and shadow is a token from
   css/tokens.css (chat UI; the fallbacks here only cover a page loaded without it). No blur over the canvas. */

/* ---- hit markers: a hit = four white ticks; a headshot = gold ticks and a dot; a kill = red, bigger, a ring blown out */
.hitm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; --c: var(--ink, #f3efe6); --g: 7px; --l: 9px; --w: 2px; }
.hitm i { position: absolute; left: 0; top: 0; width: var(--l); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--l) / -2); background: var(--c); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.hitm i:nth-child(1) { transform: rotate(45deg) translateX(calc(var(--g) + var(--l) / 2)); }
.hitm i:nth-child(2) { transform: rotate(135deg) translateX(calc(var(--g) + var(--l) / 2)); }
.hitm i:nth-child(3) { transform: rotate(225deg) translateX(calc(var(--g) + var(--l) / 2)); }
.hitm i:nth-child(4) { transform: rotate(315deg) translateX(calc(var(--g) + var(--l) / 2)); }
.hitm b { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,.6); opacity: 0; }
.hitm em { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
.hitm.head { --c: var(--warn, #ffc23a); --g: 8px; --l: 11px; }
.hitm.head b { opacity: 1; }
.hitm.kill { --c: var(--bad, var(--bad, #ff4a3d)); --g: 10px; --l: 15px; --w: 3px; }
.hitm.on { animation: hitm .18s ease-out both; }
.hitm.on.head { animation-duration: .26s; }
.hitm.on.kill { animation: hitmk .36s ease-out both; }
.hitm.on.kill em { animation: hitring .36s ease-out both; }
@keyframes hitm { 0% { opacity: 1; transform: scale(1.45); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes hitmk { 0% { opacity: 1; transform: scale(1.8); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes hitring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2); } }

/* ---- hurt: the red edge, and an arc on a ring round the crosshair pointing where the shot came from (four slots) */
.hurt { position: absolute; inset: 0; }
.hurt .hv { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(190,0,0,.66) 100%); transition: opacity .36s ease-out; }
.hurt .hv.on { opacity: var(--o, .6); transition: opacity .03s; }
.hurt svg { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px; overflow: visible; }
.hurt path { fill: none; stroke-linecap: round; opacity: 0; }
.hurt path.k { stroke: rgba(0,0,0,.6); stroke-width: 11; }
.hurt path.c { stroke: var(--bad, var(--bad, #ff4a3d)); stroke-width: 6; }
.hurt g.on path { animation: hurtarc .95s ease-out both; }
@keyframes hurtarc { 0% { opacity: 1; } 45% { opacity: .95; } 100% { opacity: 0; } }

/* ---- the notification slot: three fixed rows under the war bar, newest on top, each gone after a few seconds */
.notes { position: absolute; left: 50%; top: 164px; width: 460px; height: 214px; margin-left: -230px; }
.nt { position: absolute; left: 0; width: 460px; height: 38px; display: grid; grid-template-columns: 4px 36px 1fr auto; align-items: center; column-gap: 6px; padding-right: 12px; overflow: hidden; --c: var(--ink, #f3efe6);
  background: var(--s0, rgba(11,11,13,.94)); border-radius: var(--r2, 6px); box-shadow: 0 0 0 1px var(--line, rgba(243,239,230,.1)), 0 6px 18px rgba(0,0,0,.35); opacity: 0; transition: top .24s var(--ease, cubic-bezier(.2,.7,.2,1)), opacity .22s; }
.nt.on { opacity: 1; }
.nt.new { animation: ntin .26s var(--ease, cubic-bezier(.2,.7,.2,1)) both; }
.nt.out { opacity: 0; }
.nt i { display: block; width: 4px; height: 38px; background: var(--c); }
.nt s { display: flex; align-items: center; justify-content: center; width: 36px; height: 38px; text-decoration: none; }
.nt s svg { width: 18px; height: 18px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt b { font: 600 15px/38px var(--font-display, Oswald, sans-serif); letter-spacing: .1em; color: var(--ink, #f3efe6); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt b em { font-style: normal; color: var(--c); }
.nt small { font: 700 13px/38px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .04em; color: var(--ink2, rgba(243,239,230,.7)); white-space: nowrap; }
.nt small.me { color: var(--c); }
.nt.hot { background: rgba(58,8,8,.86); }
.nt.hot i { animation: ntblink .4s steps(2) 5; }
@keyframes ntblink { 50% { opacity: .2; } }
@keyframes ntin { 0% { transform: translateY(-12px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* the engine's one-line toast moves to the foot, above the prompt (the slot and the kill banner own the top) */
.toast { top: auto; bottom: 172px; }

/* ---- the death screen: who, with what, from where, the respawn ring with the server's seconds */
.dead { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(ellipse at center, rgba(22,2,2,.58), rgba(14,0,0,.82)); }
.is-dead .marks, .is-dead .cross, .is-dead .hitm, .is-dead .hurt, .is-dead .killb, .is-dead .notes, .is-dead .prompt { visibility: hidden; }
.dead.on { display: flex; animation: deadin .3s ease-out both; }
@keyframes deadin { 0% { opacity: 0; } 100% { opacity: 1; } }
.dd-k { height: 84px; font: 700 84px/84px var(--font-display, Oswald, sans-serif); letter-spacing: .1em; color: var(--bad, var(--bad, #ff4a3d)); text-shadow: 0 4px 30px rgba(0,0,0,.7); animation: ddk .4s var(--ease, cubic-bezier(.2,.7,.2,1)) both; }
@keyframes ddk { 0% { transform: scale(1.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dd-by { margin-top: 14px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 17px/30px var(--font-text, Inter, sans-serif); color: var(--ink, #f3efe6); text-shadow: var(--shadow); white-space: nowrap; }
.dd-by .dd-chip { display: inline-block; height: 22px; padding: 0 8px; border-radius: var(--r1, 3px); font: 700 12px/22px var(--font-text, Inter, sans-serif); letter-spacing: .08em; color: var(--ci, var(--bg, #0b0b0d)); background: var(--c, var(--ink, #f3efe6)); }
.dd-by b { font: 600 22px/30px var(--font-display, Oswald, sans-serif); letter-spacing: .04em; color: var(--c, var(--ink, #f3efe6)); }
.dd-by em { font: 600 14px/30px var(--font-display, Oswald, sans-serif); letter-spacing: .14em; font-style: normal; color: var(--ink2, rgba(243,239,230,.7)); }
.dd-by u { display: inline-block; height: 22px; padding: 0 8px; border-radius: var(--r1, 3px); text-decoration: none; font: 700 12px/22px var(--font-display, Oswald, sans-serif); letter-spacing: .14em; color: var(--bg, #0b0b0d); background: var(--warn, #ffc23a); }
.dd-by .dd-sep { width: 1px; height: 18px; background: var(--line2, rgba(243,239,230,.2)); }
.dd-by.no .dd-chip, .dd-by.no .dd-sep, .dd-by.no u, .dd-by.nohead u, .dd-by.nogun .dd-sep, .dd-by.nogun em { display: none; }
.dd-from { margin-top: 4px; height: 20px; font: 500 14px/20px var(--font-text, Inter, sans-serif); color: var(--ink2, rgba(243,239,230,.7)); text-shadow: var(--shadow); }
.dd-ring { position: relative; width: 120px; height: 120px; margin-top: 26px; }
.dd-ring svg { position: absolute; inset: 0; width: 120px; height: 120px; transform: rotate(-90deg); }
.dd-ring circle { fill: none; stroke-width: 5; }
.dd-ring circle.k { stroke: var(--s4, rgba(243,239,230,.14)); }
.dd-ring circle.c { stroke: var(--ink, #f3efe6); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 0; }
.dd-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 56px/1 var(--font-mono, 'JetBrains Mono', monospace); color: var(--ink, #f3efe6); text-shadow: var(--shadow); }
.dd-t { margin-top: 14px; height: 18px; font: 600 14px/18px var(--font-display, Oswald, sans-serif); letter-spacing: .34em; color: var(--ink2, rgba(243,239,230,.7)); }
.dd-h { margin-top: 10px; height: 16px; font: 500 12px/16px var(--font-text, Inter, sans-serif); color: var(--ink3, rgba(243,239,230,.42)); }

/* ---- the kill banner: one fixed slot under the crosshair, YOU KILLED <name> in the victim's crew colour, the gun under it */
.killb { position: absolute; left: 50%; top: 41%; width: 520px; height: 58px; margin-left: -260px; text-align: center; opacity: 0; --c: var(--ink, #f3efe6); }
.killb.on { animation: kbin 2.2s ease-out both; }
@keyframes kbin { 0% { opacity: 0; transform: translateY(8px) scale(.94); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.kb-k { height: 34px; font: 700 26px/34px var(--font-display, Oswald, sans-serif); letter-spacing: .12em; color: var(--ink, #f3efe6); text-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-k b { color: var(--c); margin-left: 8px; }
.kb-k em { display: inline-block; min-width: 0; margin-left: 10px; font: 700 18px/34px var(--font-mono, 'JetBrains Mono', monospace); font-style: normal; color: var(--warn, #ffc23a); vertical-align: top; }
.kb-s { margin-top: 2px; height: 18px; font: 600 12px/18px var(--font-display, Oswald, sans-serif); letter-spacing: .2em; color: var(--ink2, rgba(243,239,230,.7)); text-shadow: var(--shadow); white-space: nowrap; }

/* ---- the war bar's second line: player crews holding ground (four fixed cells, by territory; empty when there are none) */
.war-crews { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2px; height: 16px; font: 600 11px/16px var(--font-display, Oswald, sans-serif); letter-spacing: .12em; }
.war-crews span { white-space: nowrap; overflow: hidden; }
.war-crews span.me { text-decoration: underline; text-underline-offset: 3px; }
.war-crews b { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 700; margin-left: 5px; color: var(--ink, #f3efe6); }

/* ---- the payday countdown: one fixed slot in the middle, the number pops each second */
.count { position: absolute; left: 50%; top: 32%; width: 320px; height: 132px; margin-left: -160px; text-align: center; opacity: 0; pointer-events: none; }
.count.on { opacity: 1; }
.count i { display: block; height: 22px; font: 600 15px/22px var(--font-display, Oswald, sans-serif); letter-spacing: .34em; font-style: normal; color: var(--good, #2bff88); text-shadow: var(--shadow); }
.count b { display: block; height: 110px; font: 700 110px/110px var(--font-mono, 'JetBrains Mono', monospace); color: var(--ink, #f3efe6); text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 10px 40px rgba(0,0,0,.6); }
.count b.pop { animation: cdpop .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cdpop { 0% { transform: scale(1.45); opacity: .4; } 100% { transform: none; opacity: 1; } }
/* ---- the payout stream lines and your own, lit */
.nt.payout b em { color: var(--good, #2bff88); }
.nt.payout b b { color: var(--ink, #f3efe6); }
.nt.mine { box-shadow: 0 0 0 1px var(--good, #2bff88), 0 6px 18px rgba(0,0,0,.35); background: rgba(10,30,18,.92); }
.nt.mine i { animation: ntblink .4s steps(2) 3; }

/* ---- the clash (owner 14:35): the compass strip under the war bar, the banner slot, the spawn arrow, the marker */
.compass { position: absolute; left: 50%; top: 136px; width: 560px; height: 26px; margin-left: -280px; pointer-events: none; }
.clashb { position: absolute; left: 50%; top: 32%; width: 640px; height: 64px; margin-left: -320px; text-align: center; opacity: 0; pointer-events: none; }
.clashb.on { animation: clashin 3.6s var(--ease, cubic-bezier(.2,.7,.2,1)) both; }
@keyframes clashin { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 7% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.clashb i { display: block; height: 18px; font: 600 13px/18px var(--font-display, Oswald, sans-serif); letter-spacing: .34em; font-style: normal; color: var(--warn, #ffc23a); text-shadow: var(--shadow); }
.clashb b { display: block; height: 34px; font: 700 30px/34px var(--font-display, Oswald, sans-serif); letter-spacing: .12em; color: var(--ink, #f3efe6); text-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clashb em { display: block; height: 12px; font: 700 11px/12px var(--font-mono, 'JetBrains Mono', monospace); font-style: normal; letter-spacing: .1em; color: var(--ink2, rgba(243,239,230,.7)); text-shadow: var(--shadow); }
.clasharrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.clasharrow.on { opacity: 1; }
.clasharrow i { position: absolute; left: -14px; top: -78px; width: 28px; height: 28px; background: var(--warn, #ffc23a); clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
.clasharrow b { position: absolute; left: -60px; top: -46px; width: 120px; text-align: center; font: 700 12px/14px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .08em; color: var(--ink, #f3efe6); text-shadow: var(--shadow); }
.mk.clash i { width: 26px; height: 26px; left: -13px; top: -13px; border-width: 3px; background: rgba(0,0,0,.45); box-shadow: 0 0 18px var(--c), 0 0 0 4px rgba(0,0,0,.35); animation: mkclash 1s ease-in-out infinite alternate; }
@keyframes mkclash { from { transform: rotate(45deg) scale(.92); } to { transform: rotate(45deg) scale(1.12); } }
.mk.clash b { top: 18px; font-size: 13px; }
.mk.clash em { top: 35px; font-size: 12px; }