/* Special Force browser edition - HUD + lobby styling */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: "Lucida Console", "DejaVu Sans Mono", Consolas, monospace; color: #fff; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
body.menu #gl { cursor: default; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; display: none; user-select: none; --s: 1; }
body.playing #hud { display: block; }
.shadow, #hud div, #hud span { text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }

#hud-topleft { position: absolute; left: 1vw; top: 1.2vh; font-size: 1.9vh; line-height: 1.35; color: #e6e2d6; }
#hud-nick { color: #f0e8c8; }

#topbar { position: absolute; top: 1vh; left: 50%; transform: translateX(-50%); font-size: 2.4vh; font-weight: bold; display: flex; gap: 1.6vw; align-items: center;
  background: rgba(0,0,0,0.35); padding: 0.3vh 1.2vw; border: 1px solid rgba(255,255,255,0.15); }
#topbar .red { color: #ff6a5a; } #topbar .blue { color: #6a9cff; }
#topbar .zombie { color: #7ee07a; } #topbar .human { color: #6a9cff; } #topbar .ffa { color: #f2dc8a; }
#topsub { position: absolute; top: 5.2vh; left: 50%; transform: translateX(-50%); font-size: 1.9vh; color: #f5e9b8; display: none; white-space: nowrap; }
#topsub.bomb { color: #ff6a5a; }
#timer.bomb { color: #ff6a5a; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
#progress { display: none; position: absolute; left: 50%; top: 58%; width: 26vw; transform: translateX(-50%); height: 2.2vh; background: rgba(0,0,0,0.6); border: 1px solid #ccc; }
#progress-bar { height: 100%; background: #f0a030; width: 0; }
#progress-label { position: absolute; inset: 0; text-align: center; font-size: 1.7vh; line-height: 2.2vh; color: #fff; }
#timer { color: #f5e9b8; font-family: "Arial Black", Impact, sans-serif; letter-spacing: 1px; }

#killfeed { position: absolute; right: 1.2vw; top: 6.5vh; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4vh; font-size: 2vh; }
.kf-row { display: flex; align-items: center; gap: 0.6vw; transition: opacity 0.6s; }
.kf-row.fade { opacity: 0; }
.kf-name { color: #f5efd8; } .kf-name.red { color: #ffb0a0; } .kf-name.blue { color: #b8ccff; } .kf-name.zombie { color: #9fe08a; } .kf-name.human { color: #b8ccff; } .kf-name.ffa { color: #f2dc8a; } .kf-name.ev { color: #ffd070; }
.kf-icon { height: 2.6vh; filter: drop-shadow(1px 1px 0 #000); }
.kf-hs { color: #ffd34a; font-size: 1.6vh; }

#hud-bottomleft { position: absolute; left: 1vw; bottom: 3.5vh; }
#chat { position: absolute; left: 16vw; bottom: 12vh; font-size: 2vh; line-height: 1.3; white-space: nowrap; width: 60vw; }
.chat-line { transition: opacity 0.8s; }
.chat-line.fade { opacity: 0; }
.chat-line.sys { color: #ff88d8; }
.chat-line.say { color: #ff5ce6; }
.chat-line.team { color: #7ee0ff; }
.chat-line.kill { color: #ffd070; }
#chat-input { position: absolute; left: 16vw; bottom: 9.5vh; width: 44vw; display: none; pointer-events: auto; font: inherit; font-size: 2vh;
  background: rgba(0,0,0,0.6); border: 1px solid #8a8; color: #ff5ce6; padding: 2px 6px; outline: none; }
#chat-input.on { display: block; }
#hpbox { display: flex; align-items: flex-end; gap: 1vw; }
#portrait { width: 8.5vh; height: 8.5vh; image-rendering: pixelated; }
#hp-num { font-family: "Arial Black", Impact, "Arial Narrow", sans-serif; font-size: 6.4vh; line-height: 1; letter-spacing: -1px; color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); }
#hp-tag { font-size: 2.2vh; letter-spacing: 1px; color: #e8e8e8; margin-top: 0.6vh; }

#hud-bottomright { position: absolute; right: 1.5vw; bottom: 3vh; text-align: right; }
#ammo { font-family: "Arial Black", Impact, sans-serif; font-size: 5.6vh; line-height: 1; color: #fff; margin-right: 1vw;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); }
#ammo-res { font-size: 3.6vh; }
#grenade-count { font-size: 2vh; color: #cfe; height: 2.4vh; }
#weapon-icon { height: 5.6vh; display: block; margin: 0.6vh 0 0.2vh auto; filter: drop-shadow(1px 1px 0 #000); }
#weapon-name { font-size: 2vh; letter-spacing: 0.5px; color: #f2f2f2; }

/* crosshair: 4 short lines with a gap that opens with spread */
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 6px; --len: 9px; }
#crosshair i { position: absolute; background: #d8ffd0; box-shadow: 0 0 0 1px rgba(0,0,0,0.85); }
#crosshair .t { left: -1px; width: 2px; height: var(--len); bottom: var(--gap); }
#crosshair .b { left: -1px; width: 2px; height: var(--len); top: var(--gap); }
#crosshair .l { top: -1px; height: 2px; width: var(--len); right: var(--gap); }
#crosshair .r { top: -1px; height: 2px; width: var(--len); left: var(--gap); }

/* sniper scope overlay */
#scope { position: absolute; inset: 0; display: none; }
#scope .ring { position: absolute; left: 50%; top: 50%; width: 92vh; height: 92vh; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 200vmax #000, inset 0 0 40px 10px rgba(0,0,0,0.9); }
#scope .h { position: absolute; left: 50%; top: 50%; width: 92vh; height: 2px; background: #000; transform: translate(-50%, -50%); }
#scope .v { position: absolute; left: 50%; top: 50%; height: 92vh; width: 2px; background: #000; transform: translate(-50%, -50%); }
#scope .dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: #000; }
#hud.scoped #crosshair { display: none !important; }

#damage { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 40%, rgba(200,0,0,0.75) 100%); }
#center-msg { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); font-family: "Arial Black", Impact, sans-serif; font-size: 4vh; color: #ffd34a; opacity: 0; transition: opacity 0.3s; letter-spacing: 2px; }
#center-msg.show { opacity: 1; }
#center-msg.red { color: #ff6a5a; } #center-msg.blue { color: #6a9cff; }
#hint { position: absolute; left: 50%; bottom: 16vh; transform: translateX(-50%); font-size: 1.9vh; color: #ddd; }

#scoreboard { display: none; position: absolute; left: 50%; top: 12vh; transform: translateX(-50%); width: 70vw; background: rgba(10,14,22,0.88); border: 1px solid #56657a; padding: 1vh 1vw; font-size: 1.9vh; }
.sb-head { text-align: center; color: #f5e9b8; font-weight: bold; margin-bottom: 1vh; letter-spacing: 1px; }
.sb-cols { display: flex; gap: 1vw; }
table.sb { flex: 1; border-collapse: collapse; }
table.sb th { text-align: left; padding: 0.4vh 0.6vw; border-bottom: 1px solid #56657a; }
table.sb.red th:first-child { color: #ff6a5a; } table.sb.blue th:first-child { color: #6a9cff; } table.sb.zombie th:first-child { color: #7ee07a; } table.sb.human th:first-child { color: #6a9cff; } table.sb.ffa th:first-child { color: #f2dc8a; }
table.sb td { padding: 0.3vh 0.6vw; color: #e6e6e6; }
table.sb tr.me td { color: #ffd34a; }
table.sb td:not(:first-child), table.sb th:not(:first-child) { text-align: right; width: 4vw; }

#death { display: none; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 1vh; font-size: 2.6vh; color: #ffd0c0; }
#death-count { color: #fff; font-family: "Arial Black", Impact, sans-serif; }

#result { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); pointer-events: auto; }
.res-panel { background: linear-gradient(#2a3442, #141a22); border: 2px solid #6b7c94; padding: 3vh 5vw; text-align: center; }
.res-title { font-family: "Arial Black", Impact, sans-serif; font-size: 6vh; letter-spacing: 3px; }
.res-title.red { color: #ff6a5a; } .res-title.blue { color: #6a9cff; } .res-title.draw { color: #ddd; } .res-title.zombie { color: #7ee07a; } .res-title.human { color: #6a9cff; } .res-title.ffa { color: #f2dc8a; }
.res-score .zombie { color: #7ee07a; } .res-score .human { color: #6a9cff; }
.res-score { font-size: 3.2vh; margin: 1.5vh 0; } .res-score .red { color: #ff6a5a; } .res-score .blue { color: #6a9cff; }
.res-mvp { color: #ffd34a; font-size: 2.2vh; margin-bottom: 2vh; }
.res-btns button { margin: 0 0.6vw; }

/* ---------- LOBBY ---------- */
#lobby { position: fixed; inset: 0; display: none; flex-direction: column; color: #dfe6ef; font-family: Verdana, "DejaVu Sans", Arial, sans-serif;
  background: linear-gradient(160deg, #1d2634 0%, #0f141b 60%, #0b0e13 100%); }
body.menu #lobby { display: flex; }
#lobby::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px); pointer-events: none; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: linear-gradient(#3a4656, #1d2532); border-bottom: 3px solid #e0842a; box-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.logo { font-family: Impact, "Arial Black", "Arial Narrow", sans-serif; font-size: 40px; letter-spacing: 2px; font-style: italic; text-transform: uppercase; }
.logo .sf { color: #f3f3f3; text-shadow: 2px 2px 0 #000; } .logo .force { color: #f08a2a; margin-left: 10px; text-shadow: 2px 2px 0 #000; }
.lb-ver { font-size: 12px; color: #9fb0c4; }
.lb-body { flex: 1; display: flex; gap: 22px; padding: 22px 28px; overflow: auto; position: relative; }
.lb-left { flex: 0 0 420px; } .lb-right { flex: 1; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.panel { background: linear-gradient(#2a3442, #1a212b); border: 1px solid #56657a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.5); padding: 12px 14px; }
.panel-title { font-weight: bold; font-size: 13px; letter-spacing: 1px; color: #f5c78a; border-bottom: 1px solid #56657a; padding-bottom: 6px; margin-bottom: 10px; }
.dim { color: #93a3b8; font-weight: normal; font-size: 12px; }
#minimap { width: 250px; height: 250px; display: block; margin: 0 auto; background: #b39a6c; border: 2px solid #56657a; image-rendering: pixelated; }
.map-name { margin-top: 10px; font-weight: bold; font-size: 15px; letter-spacing: 1px; }
.map-name .dim { margin-left: 8px; }
label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; margin: 8px 0; }
input[type=text], input:not([type]), select { background: #0f151d; color: #eee; border: 1px solid #56657a; padding: 6px 8px; font: inherit; font-size: 13px; width: 240px; }
input[type=range] { width: 240px; }
.seg { display: flex; }
.seg button { background: #222b36; color: #cfd8e3; border: 1px solid #56657a; padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer; }
.seg button.on { background: #e0842a; color: #111; font-weight: bold; }
.seg button.blue.on { background: #3f77d8; color: #fff; } .seg button.red.on { background: #d24a3a; color: #fff; }
.weapons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wcard { background: #0f151d; border: 1px solid #56657a; padding: 8px 6px; text-align: center; cursor: pointer; font-size: 11px; color: #cfd8e3; }
.wcard img { width: 100%; height: 34px; object-fit: contain; display: block; margin-bottom: 4px; }
.wcard.on { border-color: #f08a2a; background: #2b2216; color: #ffd8a8; box-shadow: 0 0 0 1px #f08a2a inset; }
.wcard .st { color: #8fa; font-size: 10px; }
.loadout { margin-top: 10px; }
button { font-family: inherit; }
#btn-start, #btn-resume, #btn-leave, .res-btns button { background: linear-gradient(#f59a3a, #c9661a); color: #111; border: 1px solid #ffc27a; font-weight: bold; font-size: 18px; letter-spacing: 2px; padding: 12px 30px; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
#btn-start:hover, #btn-resume:hover, .res-btns button:hover { filter: brightness(1.1); }
#btn-leave, #res-back { background: linear-gradient(#5a6b80, #2f3a49); color: #eee; border-color: #8ea0b8; text-shadow: none; }
.controls { margin-top: 6px; line-height: 1.6; text-align: center; }

#pause { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); font-family: Verdana, Arial, sans-serif; }
body.paused #pause { display: flex; }
#pause .panel { display: flex; flex-direction: column; gap: 10px; min-width: 300px; }

/* free-mouse fallback when pointer lock is unavailable */
body.nolock #gl { cursor: crosshair; }

/* mode + map selection */
.modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.modes button { background: #222b36; color: #cfd8e3; border: 1px solid #56657a; padding: 8px 4px; font: inherit; font-size: 11px; cursor: pointer; letter-spacing: 0.5px; }
.modes button.on { background: #e0842a; color: #111; font-weight: bold; }
.modes button:disabled { opacity: 0.35; cursor: default; }
#mode-desc { margin-top: 8px; min-height: 30px; line-height: 1.4; }
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mcard { background: #0f151d; border: 1px solid #56657a; padding: 8px; cursor: pointer; font-size: 12px; color: #cfd8e3; }
.mcard .mn { font-weight: bold; letter-spacing: 1px; } .mcard .md { color: #93a3b8; font-size: 10px; margin-top: 3px; }
.mcard.on { border-color: #f08a2a; background: #2b2216; color: #ffd8a8; box-shadow: 0 0 0 1px #f08a2a inset; }
.mcard.off { opacity: 0.35; cursor: default; }
.lb-left { flex: 0 0 440px; display: flex; flex-direction: column; gap: 14px; }
label.hidden { display: none; }
#hud-objective { position: absolute; right: 1.2vw; bottom: 22vh; font-size: 2vh; color: #f5e9b8; text-align: right; }

/* =====================================================================
   ORIGINAL LOOK - lobby, loading screen and HUD pieces that use the real
   Special Force artwork in assets/ (logo, renders, weapon cards, map art)
   ===================================================================== */
:root { --sf-gold: #e2b545; --sf-gold-dark: #9a7420; --sf-steel: #2c333c; --sf-panel: rgba(16, 19, 24, 0.86); --sf-line: #4d5762; --sf-text: #d9dee5; }

#lobby { font-family: Verdana, "DejaVu Sans", Tahoma, Arial, sans-serif; color: var(--sf-text);
  background: #090b0e url(../assets/ui/bg_squad_wide.png) center 20% / cover no-repeat; }
#lobby::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,8,11,0.94) 0%, rgba(6,8,11,0.86) 45%, rgba(6,8,11,0.62) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px); }
.lb-top { position: relative; padding: 8px 26px; border-bottom: 2px solid var(--sf-gold-dark); background: linear-gradient(#20252c, #0e1115 80%, #0a0c0f); box-shadow: 0 3px 14px rgba(0,0,0,0.7); gap: 24px; }
.logo { display: flex; align-items: center; gap: 12px; font: inherit; font-style: normal; letter-spacing: 0; }
.logo .shield { height: 64px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 62%, transparent 100%); }
.logo .word { height: 34px; width: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lb-room { flex: 1; text-align: center; font-size: 13px; letter-spacing: 1px; color: #f0e6c8; }
.lb-room .dim { color: var(--sf-gold); font-weight: bold; }
.lb-ver { font-size: 11px; color: #8d99a6; }
.lb-body { padding: 18px 26px 8px; gap: 18px; }
.lb-left { flex: 0 0 400px; gap: 12px; } .lb-right { gap: 12px; max-width: 680px; }
.panel { background: var(--sf-panel); border: 1px solid var(--sf-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 10px rgba(0,0,0,0.55); padding: 10px 12px; }
.panel-title { color: var(--sf-gold); font-size: 12px; letter-spacing: 2px; border-bottom: 1px solid var(--sf-gold-dark); padding-bottom: 5px; margin-bottom: 9px; text-shadow: 0 1px 0 #000; }
.panel-title .dim { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.dim { color: #97a2ae; }
.map-view { position: relative; width: 250px; height: 250px; margin: 0 auto; border: 2px solid var(--sf-line); background: #000; }
#minimap { width: 250px; height: 250px; border: 0; margin: 0; display: block; }
#map-preview { position: absolute; right: -2px; bottom: -2px; width: 110px; height: 82px; object-fit: cover; border: 2px solid var(--sf-gold-dark); box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0,0,0,0.8); background: #111; }
.map-name { margin-top: 8px; font-size: 14px; letter-spacing: 2px; color: #f4ecd2; }
.maps { margin-top: 10px; gap: 6px; }
.mcard { padding: 0 0 6px; background: #0b0e12; border-color: var(--sf-line); color: #cbd3db; }
.mcard img { display: block; width: 100%; height: 64px; object-fit: cover; border-bottom: 1px solid var(--sf-line); margin-bottom: 5px; filter: saturate(0.85); }
.mcard .mn, .mcard .md { padding: 0 6px; }
.mcard .mn { font-size: 11px; letter-spacing: 1px; } .mcard .md { font-size: 9.5px; }
.mcard.on { border-color: var(--sf-gold); background: #1c1810; color: #ffe9a8; box-shadow: 0 0 0 1px var(--sf-gold) inset; }
.mcard.on img { filter: none; }
.modes button { background: #14181d; color: #cbd3db; border-color: var(--sf-line); }
.modes button.on, .seg button.on { background: linear-gradient(#f0c75a, #b8862a); color: #1a1408; border-color: #ffe08a; }
.seg button { background: #14181d; color: #cbd3db; border-color: var(--sf-line); }
.seg button.blue.on { background: linear-gradient(#5b8fe6, #2c5cb8); color: #fff; border-color: #9dbcf5; } .seg button.red.on { background: linear-gradient(#e0604c, #a83526); color: #fff; border-color: #f7a090; }
input[type=text], input:not([type]), select { background: #0b0e12; border-color: var(--sf-line); }
label { font-size: 12.5px; }
/* character cards */
.forces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fcard { background: #0b0e12; border: 1px solid var(--sf-line); padding: 0 0 5px; text-align: center; cursor: pointer; color: #cbd3db; }
.fcard img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-bottom: 1px solid var(--sf-line); margin-bottom: 4px; filter: saturate(0.7) brightness(0.85); }
.fcard .fn { font-size: 10.5px; letter-spacing: 0.5px; font-weight: bold; } .fcard .fc { font-size: 9px; color: #8d99a6; }
.fcard:hover img { filter: saturate(0.9) brightness(1); }
.fcard.on { border-color: var(--sf-gold); background: #1c1810; color: #ffe9a8; box-shadow: 0 0 0 1px var(--sf-gold) inset; }
.fcard.on img { filter: none; }
/* equipment cards use the original weapon information pictures */
.weapons { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wcard { background: #0b0e12; border-color: var(--sf-line); padding: 0 0 6px; font-size: 10.5px; }
.wcard img { width: 100%; height: 44px; object-fit: contain; margin: 0 0 4px; background: #101318; border-bottom: 1px solid var(--sf-line); padding: 4px; box-sizing: border-box; }
.wcard img.real { object-fit: cover; padding: 0; }
.wcard .st { color: #9fd08a; }
.wcard.on { border-color: var(--sf-gold); background: #1c1810; color: #ffe9a8; box-shadow: 0 0 0 1px var(--sf-gold) inset; }
#btn-start, #btn-resume, .res-btns button { background: linear-gradient(#f3cf66, #c2902c 55%, #8c6218); color: #1a1408; border: 1px solid #ffe6a0; text-shadow: 0 1px 0 rgba(255,255,255,0.35); letter-spacing: 3px; }
#btn-leave, #res-back { background: linear-gradient(#4b5563, #262c34); color: #eee; border-color: #7d8894; }
.controls { font-size: 11px; }
.lb-foot { position: relative; text-align: center; font-size: 10px; color: #7d8894; padding: 6px 0 8px; letter-spacing: 1px; }
.lb-foot em { font-style: italic; font-weight: bold; color: #b9c2cc; font-family: Impact, "Arial Black", sans-serif; letter-spacing: 1px; }
#pause .panel { background: #14181d; }

/* loading screen: dark teal briefing board like the original loading screen */
#loading { position: fixed; inset: 0; display: none; color: #cfe6e3; font-family: Verdana, "DejaVu Sans", Tahoma, Arial, sans-serif;
  background: #020504 radial-gradient(ellipse at 60% 45%, #0e2a2a 0%, #071414 45%, #020504 100%); }
body.loading #loading { display: block; }
body.loading #lobby, body.loading #hud { display: none; }
#loading::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: linear-gradient(rgba(80,160,150,0.12) 1px, transparent 1px) 0 0 / 100% 42px, linear-gradient(90deg, rgba(80,160,150,0.12) 1px, transparent 1px) 0 0 / 42px 100%; }
#loading::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12vh; background: linear-gradient(#000 0%, #000 55%, transparent); }
.ld-name { position: absolute; left: 4.5vw; top: 4vh; z-index: 2; font-family: "Arial Black", Impact, Verdana, sans-serif; font-size: 4.2vh; letter-spacing: 0.35em; color: #d6f1ee; text-shadow: 0 0 12px rgba(120,220,210,0.55), 0 2px 0 #000; }
.ld-brief { position: absolute; left: 2.5vw; top: 30vh; width: 25vw; border: 1px solid rgba(120,200,190,0.45); background: rgba(4,20,20,0.75); box-shadow: 0 0 24px rgba(40,120,110,0.25) inset; padding: 0 0 12px; }
.ld-brief-title { background: linear-gradient(90deg, #1d4d4a, #0c2a29); color: #dff7f3; font-size: 1.6vh; letter-spacing: 3px; padding: 6px 12px; border-bottom: 1px solid rgba(120,200,190,0.45); }
#ld-brief { padding: 10px 14px 0; font-size: 1.55vh; line-height: 1.55; color: #b8d8d4; }
#ld-brief p { margin: 0 0 8px; } #ld-brief .ld-mode { color: #ffd989; letter-spacing: 1px; }
.ld-map { position: absolute; left: 30vw; top: 12vh; width: 66vw; height: 66vh; display: flex; align-items: center; justify-content: center; }
.ld-map img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 0 30px rgba(60,180,170,0.25)); }
.ld-start { position: absolute; width: 17vw; border: 2px solid; background: #000; }
.ld-start img { display: block; width: 100%; height: 11vw; object-fit: cover; }
.ld-start div { font-size: 1.3vh; letter-spacing: 2px; padding: 5px 8px; color: #dfe9e8; background: rgba(0,0,0,0.85); }
.ld-start.blue { left: 30vw; bottom: 16vh; border-color: #4f86d8; } .ld-start.blue span { color: #5fa0ff; font-weight: bold; }
.ld-start.red { right: 8vw; bottom: 12vh; border-color: #c8503c; } .ld-start.red span { color: #ff6a4a; font-weight: bold; }
.ld-loading { position: absolute; left: 50%; bottom: 6.5vh; transform: translateX(-50%); font-size: 1.9vh; letter-spacing: 0.4em; color: #e2f4f2; text-align: center; }
.ld-bar { width: 26vw; height: 4px; margin: 8px auto 0; background: rgba(120,200,190,0.2); border: 1px solid rgba(120,200,190,0.35); }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fd3c8, #dff7f3); animation: ldfill 2.6s ease-in-out forwards; }
@keyframes ldfill { to { width: 100%; } }
.ld-foot { position: absolute; left: 0; right: 0; bottom: 1.8vh; text-align: center; font-size: 1.35vh; color: #9fb7b4; letter-spacing: 1px; }
.ld-foot em, .lb-foot em { font-style: italic; font-weight: bold; color: #e6efee; font-family: Impact, "Arial Black", sans-serif; letter-spacing: 1px; margin-right: 6px; }

/* HUD: original character portrait bottom-left and original weapon pictures bottom-right / kill feed */
#portrait { width: 6.4vh; height: 6.4vh; image-rendering: auto; }
#weapon-icon.real, .kf-icon.real { filter: none; object-fit: cover; border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 0 0 1px #000, 0 1px 4px rgba(0,0,0,0.7); background: #15181d; }
#weapon-icon.real { height: 5.4vh; width: 10.6vh; }
.kf-icon.real { height: 2.6vh; width: 5.1vh; vertical-align: middle; }