/* ---------- game screen ---------- */
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate { position: absolute; top: 14px; display: flex; align-items: center; gap: 10px; width: min(36vw, 340px); }
.plate.left { left: 16px; }
.plate.right { right: 16px; justify-content: flex-end; text-align: right; }
.plate img { width: 64px; height: 64px; object-fit: contain; object-position: top; border-radius: 50%; background: rgba(20, 10, 14, .8); border: 3px solid var(--accent); }
.plate > div { flex: 1; }
.pname { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-weight: 900; font-size: 18px; text-shadow: 0 2px 0 #000; }
.pname b { font-size: 16px; opacity: .85; }
.plate.right .pname { flex-direction: row-reverse; }
.plate.second { top: 92px; }   /* same size as the first, right under it */
.bar { height: 16px; border-radius: 9px; background: rgba(0, 0, 0, .6); border: 2px solid #5a1119; overflow: hidden; }
.bar > div { height: 100%; width: 100%; background: linear-gradient(#ff5a5a, #c4111f); transition: width .15s; }
.bar > div.enemy { background: linear-gradient(#b8b8c0, #6a6a74); margin-left: auto; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: transform .08s; }
#crosshair.aim { transform: scale(.6); }
#crosshair i { position: absolute; background: #ff3040; box-shadow: 0 0 2px #000; }
#crosshair.dot i { display: none; }
#crosshair.dot::after { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ff3040; box-shadow: 0 0 3px #000; }
#crosshair i:nth-child(1) { width: 2px; height: 9px; left: -1px; top: -16px; }
#crosshair i:nth-child(2) { width: 2px; height: 9px; left: -1px; top: 7px; }
#crosshair i:nth-child(3) { width: 9px; height: 2px; left: -16px; top: -1px; }
#crosshair i:nth-child(4) { width: 9px; height: 2px; left: 7px; top: -1px; }

#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; transition: opacity .1s; }
#hitmarker.on { opacity: 1; }
#hitmarker b { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; background:
  linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%),
  linear-gradient(-45deg, transparent 46%, #fff 46% 54%, transparent 54%); filter: drop-shadow(0 0 2px #000); }
#hitmarker.head b { filter: drop-shadow(0 0 3px #ff2a4a); }
#hit-text { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); white-space: nowrap; font-weight: 900; color: #ff4a6a; text-shadow: 0 2px 0 #000; }

#scope { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .05s; background: radial-gradient(circle at center, transparent 0 33vmin, #000 33.3vmin); }
#scope.on { opacity: 1; }
#scope::before, #scope::after { content: ""; position: absolute; background: #ff3040; }
#scope::before { left: 50%; top: calc(50% - 33vmin); width: 2px; height: 66vmin; }
#scope::after { top: 50%; left: calc(50% - 33vmin); height: 2px; width: 66vmin; }

#vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px 40px rgba(255, 40, 70, 0); }
#vignette.flash { animation: hurt .45s ease-out; }
@keyframes hurt { 0% { box-shadow: inset 0 0 120px 40px rgba(255, 40, 70, .7); } 100% { box-shadow: inset 0 0 120px 40px rgba(255, 40, 70, 0); } }

#doom-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

#banner { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(48px, 10vw, 110px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 var(--accent), 0 0 24px rgba(224, 24, 45, .6); pointer-events: none; }

#weapon-panel { position: absolute; right: 20px; bottom: 18px; text-align: right; text-shadow: 0 2px 0 #000; pointer-events: none; }
#slots { display: flex; gap: 18px; justify-content: center; }
.slot { font-weight: 700; font-size: 15px; color: rgba(255, 255, 255, .55); }   /* a plain legend, not buttons */
.slot b { color: var(--accent); }
.slot.active { color: #fff; }
#ammo { font-size: 44px; font-weight: 900; }
#reload-note { height: 20px; font-weight: 800; color: #ff4a5a; }

.overlay { display: none; overflow: auto; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10, 0, 3, .7); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.overlay h2 { margin: 0; font-size: clamp(36px, 6vw, 64px); font-weight: 900; }
.overlay p { margin: 0 0 8px; font-weight: 700; }
.overlay button:not(.primary) { border: 2px solid #fff; border-radius: 12px; background: transparent; color: #fff; font-weight: 800; padding: 8px 22px; }

/* score and toast */
#score { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: .35em; align-items: center; font-weight: 900; font-size: 34px; text-shadow: 0 2px 0 #000; background: rgba(0, 0, 0, .6); border: 1px solid #5a1119; border-radius: .4em; padding: .06em .5em; }
#score span { font-size: .6em; opacity: .6; }
#score.off { display: none; }
.hud-editing #score.off { display: flex; opacity: .5; }
#score.below-timer { top: 52px; }
#timer { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 900; text-shadow: 0 2px 0 #000; font-variant-numeric: tabular-nums; pointer-events: none; }
#timer.off { display: none; }
#timer.low { color: #ff4a5a; }
.hud-editing #timer.off { display: block; opacity: .5; }
#killfeed { position: absolute; top: 172px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: .4em; font-size: 16px; pointer-events: none; }   /* under both enemy plates */
.kill { display: flex; align-items: center; gap: .6em; padding: .25em .75em; background: rgba(0, 0, 0, .75); border-radius: 999px; }
.kill img { width: 2.5em; height: 2.5em; object-fit: contain; object-position: top; border-radius: 50%; background: rgba(20, 10, 14, .8); border: 2px solid var(--accent); }
.kill svg { width: 3.5em; fill: #fff; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.touch #killfeed { right: auto; top: auto; align-items: center; transform: translate(-50%, -50%); opacity: var(--touch-opacity, 1); }   /* position and font-size come from the layout */
#toast { display: none; position: absolute; top: 108px; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 18px; color: #fff; background: rgba(0, 0, 0, .75); border: 1px solid var(--accent); border-radius: 12px; padding: 6px 16px; white-space: nowrap; }

/* end of a timed match */
#result-score { font-size: clamp(36px, 6vw, 56px); font-weight: 900; }
#result-stats table { border-collapse: collapse; font-weight: 800; font-size: clamp(13px, 2.4vw, 18px); text-shadow: none; }
#result-stats th, #result-stats td { padding: 4px 18px; text-align: center; }
#result-stats tbody th { text-align: left; font-weight: 700; opacity: .8; }
#result-stats tbody tr { border-top: 1px solid rgba(255, 255, 255, .15); }
#result-stats .me { color: #ff8a98; }
#result { justify-content: safe center; }   /* never push the title out of reach: scroll instead */
#result .primary { margin-top: 12px; }
@media (max-height: 520px) {
  #result { gap: 4px; padding: 8px 0; }
  #result h2 { font-size: 28px; }
  #result-score { font-size: 28px; }
  #result-stats table { font-size: 12px; }
  #result-stats th, #result-stats td { padding: 2px 12px; }
  #result .primary { margin-top: 8px; padding: 9px 32px; font-size: 16px; }
}

/* reload icon with progress ring (--p is set from JS) */
#reload-icon { --p: 0deg; display: none; position: absolute; left: 50%; top: calc(50% + 58px); width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; align-items: center; justify-content: center; background: conic-gradient(var(--accent) var(--p), rgba(255, 255, 255, .25) 0); pointer-events: none; }
#reload-icon::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(10, 0, 3, .85); }
#reload-icon svg { position: relative; width: 32px; height: 32px; fill: #fff; animation: spin 1s linear infinite; }

/* Gun Game hands the weapons out (no weapon button) and is won by levels, so the kill score is hidden */
.gungame #t-weapon, .gungame #weapon-menu, .gungame #score { display: none; }

/* weapon icon shown after switching */
#weapon-flash { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-direction: column; align-items: center; gap: 2px; pointer-events: none; font-weight: 900; text-shadow: 0 2px 0 #000; animation: flash-in .15s ease-out; }
#weapon-flash svg { width: 130px; fill: #fff; filter: drop-shadow(0 0 6px rgba(224, 24, 45, .8)); }
@keyframes flash-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
#crosshair.hide { display: none; }