/* Pons City combat HUD. Layer over the canvas; pointer events only where you operate. */
#hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; color: #fbf3ea; user-select: none; }
#hud[hidden] { display: none; }
#hud .mono { font-family: "JetBrains Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
#hud .plate { background: rgba(7, 4, 15, 0.66); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; backdrop-filter: blur(8px); }

/* score bar, top center */
#hud .scorebar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; width: min(560px, 94vw); }
#hud .tm { display: flex; align-items: center; gap: 10px; padding: 8px 16px; flex: 1; }
#hud .tm.red { justify-content: flex-start; } #hud .tm.blue { justify-content: flex-end; }
#hud .tm .tn { font-family: "Bowlby One", sans-serif; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
#hud .tm .ts { font-family: "Bowlby One", sans-serif; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
#hud .obj { width: 190px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 10px; background: rgba(0,0,0,.28); border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); }
#hud .obj-name { font-family: "JetBrains Mono", monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #fbf3ea; }
#hud .obj-track { width: 150px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
#hud .obj-track i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .4s ease, background .4s; }
#hud .obj-holder { font-family: "JetBrains Mono", monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }

/* kill feed, top right */
#hud .killfeed { position: absolute; top: 70px; right: 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
#hud .kf { background: rgba(7,4,15,.6); border-radius: 8px; padding: 4px 10px; font-size: .84rem; animation: kfin .2s ease-out; }
#hud .kf .sk { color: #ff2fa4; margin: 0 4px; } #hud .kf .env { color: #a99ccf; font-style: italic; }
@keyframes kfin { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* notices, center-top under the bar */
#hud .notices { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; width: min(620px, 92vw); }
#hud .notice { padding: 8px 16px; border-radius: 10px; background: rgba(7,4,15,.75); border-left: 3px solid #3fd0ff; font-size: .92rem; text-align: center; transition: opacity .4s; }
#hud .notice.win { border-left-color: #ffc247; font-family: "Bowlby One", sans-serif; letter-spacing: .04em; }
#hud .notice.obj { border-left-color: #2ee6d6; } #hud .notice.bad { border-left-color: #ff2fa4; }

/* streak toast */
#hud .streak { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); padding: 8px 20px; border: 2px solid #ffc247; border-radius: 999px; background: rgba(7,4,15,.8); font-size: 1rem; animation: pop .25s cubic-bezier(.2,.9,.3,1.4); }
#hud .streak span { font-family: "Bowlby One", sans-serif; color: #ffc247; }
@keyframes pop { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* respawn overlay */
#hud .respawn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(circle, rgba(120,0,0,.28), rgba(7,4,15,.72)); }
#hud .respawn[hidden] { display: none; }
#hud .respawn .r-title { font-family: "Bowlby One", sans-serif; font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: .06em; text-transform: uppercase; color: #ff2fa4; text-shadow: 0 0 30px rgba(255,47,164,.6); }
#hud .respawn .r-sub { font-family: "JetBrains Mono", monospace; letter-spacing: .14em; color: #fbf3ea; }
#hud .respawn .r-sub span { color: #ffc247; }

/* you, top left */
#hud .you { position: absolute; left: 16px; top: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
#hud .you .dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
#hud .you #hud-you-name { font-weight: 700; }
#hud .you .kd { font-family: "JetBrains Mono", monospace; color: #a99ccf; } #hud .you .kd b { color: #fbf3ea; }
#hud .you .strk { color: #ffc247; font-size: .85rem; }

/* chat, bottom left */
#hud .chat { position: absolute; left: 16px; bottom: 16px; width: min(400px, 62vw); pointer-events: auto; }
#hud .chat .log { display: flex; flex-direction: column; gap: 3px; max-height: 30vh; overflow: hidden; font-size: .84rem; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
#hud .chat .log .sys { color: #a99ccf; font-style: italic; }
#hud .chat .log .n { font-weight: 700; }
#hud .chat input { width: 100%; box-sizing: border-box; margin-top: 6px; font: 500 .9rem "Manrope", sans-serif; color: #fbf3ea; background: rgba(7,4,15,.85); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 8px 10px; outline: none; }
#hud .chat input[hidden] { display: none; }
#hud .chat input:focus { border-color: #3fd0ff; }

/* scoreboard (hold Tab) */
#hud .board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 94vw); padding: 16px 18px; }
#hud .board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-family: "Bowlby One", sans-serif; letter-spacing: .04em; }
#hud .board-head #hud-board-red { color: #ff4d4d; } #hud .board-head #hud-board-blue { color: #4da3ff; }
#hud .board-title { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #a99ccf; }
#hud .board-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
#hud .brow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .9rem; }
#hud .brow.me { color: #ffc247; }
#hud #hud-board-redcol .brow { border-bottom-color: rgba(255,77,77,.18); } #hud #hud-board-bluecol .brow { border-bottom-color: rgba(77,163,255,.18); }

#hud .keys { position: absolute; right: 16px; bottom: 16px; font: 500 .68rem "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #a99ccf; }
#hud .keys kbd { color: #fbf3ea; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 0 5px; }
@media (max-width: 720px) { #hud .killfeed, #hud .keys { display: none; } #hud .scorebar { width: 96vw; } #hud .obj { width: 130px; } }

#hud .streak[hidden] { display: none; }
#hud .board[hidden] { display: none; }
/* ---------- floating player nametags + healthbars ---------- */
#pc-tags { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#pc-tags .pc-tag { position: absolute; left: 0; top: 0; transform-origin: bottom center; display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; will-change: transform, opacity; }
#pc-tags .pc-tag-name { font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: #fff; text-shadow: 0 0 3px #000, 0 1px 4px rgba(0,0,0,.9); }
#pc-tags .pc-tag-bar { width: 54px; height: 5px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid rgba(0,0,0,.55); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.7); }
#pc-tags .pc-tag-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; transition: width .12s linear, background .2s; }