/* CS 1.6-like HUD & VGUI styling */
:root {
  --hud: rgba(255, 170, 0, 0.85);
  --hud-dim: rgba(255, 170, 0, 0.45);
  --hud-red: rgba(255, 40, 30, 0.9);
  --vgui-bg: rgba(0, 0, 0, 0.72);
  --vgui-border: #c88a1e;
  --vgui-text: #ffb400;
  --cross: #32ff32;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #eee; font-family: Tahoma, Verdana, Arial, sans-serif; user-select: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.hudnum { color: var(--hud); font-weight: bold; font-size: 34px; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; text-shadow: 0 0 2px rgba(0, 0, 0, .4); font-family: "Arial Black", Tahoma, sans-serif; }
.hudnum svg { width: 30px; height: 30px; fill: currentColor; color: var(--hud); }
.hudnum.low { color: var(--hud-red); }
.hudnum.low svg { color: var(--hud-red); }
#hud-bottom { position: absolute; left: 0; right: 0; bottom: 8px; height: 50px; }
#hud-health { position: absolute; left: 20px; bottom: 0; }
#hud-armor { position: absolute; left: 190px; bottom: 0; }
#hud-timer { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; }
#hud-timer.bomb span { color: var(--hud-red); }
#hud-money { position: absolute; right: 24px; bottom: 60px; }
#hud-money b { font-size: 34px; }
#money-delta { position: absolute; right: 0; top: -34px; font-size: 22px; font-style: normal; }
#money-delta.plus { color: rgba(80, 255, 80, .9); }
#money-delta.minus { color: var(--hud-red); }
#hud-ammo { position: absolute; right: 24px; bottom: 0; }
#hud-ammo .bar { display: inline-block; width: 3px; height: 30px; background: var(--hud-dim); margin: 0 8px; }
#hud-icons { position: absolute; left: 340px; bottom: 6px; display: flex; gap: 10px; }
.icon { font: bold 18px "Arial Black", sans-serif; color: var(--hud); border: 2px solid var(--hud); padding: 0 6px; border-radius: 3px; display: none; }
.icon.on { display: inline-block; }
.icon.blink { animation: blink .6s infinite; color: #3f3; border-color: #3f3; }
@keyframes blink { 50% { opacity: .2; } }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair .ch { position: absolute; background: var(--cross); display: block; }
#crosshair .t, #crosshair .b { width: 2px; height: 8px; left: -1px; }
#crosshair .l, #crosshair .r { height: 2px; width: 8px; top: -1px; }

#scope { position: absolute; inset: 0; display: none; }
#scope.on { display: block; }
#scope .scope-ring { position: absolute; left: 50%; top: 50%; width: 100vh; height: 100vh; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 200vmax #000; }
#scope .sl { position: absolute; background: #000; }
#scope .sl.h { left: 0; right: 0; top: 50%; height: 1px; }
#scope .sl.v { top: 0; bottom: 0; left: 50%; width: 1px; }

#radar { position: absolute; left: 12px; top: 12px; width: 180px; height: 180px; border-radius: 50%; background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 170, 0, .25); }

#killfeed { position: absolute; right: 14px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 14px; }
#killfeed .kf { background: rgba(0, 0, 0, .45); padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
#killfeed .kf.me { border: 1px solid #c33; }
#killfeed .T { color: #ff4040; } #killfeed .CT { color: #99ccff; }
#killfeed .w { color: #ffb400; margin: 0 8px; font-weight: bold; font-size: 12px; }
#killfeed .hs { color: #ff5b5b; font-size: 12px; margin-right: 6px; }

#center-msg { position: absolute; left: 0; right: 0; top: 26%; text-align: center; font-size: 26px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; }
#center-msg.win-T { color: #ff4a3a; } #center-msg.win-CT { color: #7ab8ff; }
#hint { position: absolute; left: 0; right: 0; top: 62%; text-align: center; font-size: 15px; color: #ffe0a0; text-shadow: 1px 1px 2px #000; }
#chat { position: absolute; left: 16px; bottom: 90px; width: 50%; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px #000; display: flex; flex-direction: column; gap: 2px; }
#chat .T { color: #ff5a4a; } #chat .CT { color: #9cc9ff; } #chat .sys { color: #ffd070; }

#progress { position: absolute; left: 50%; top: 60%; width: 300px; height: 14px; transform: translateX(-50%); border: 2px solid var(--hud); display: none; }
#progress.on { display: block; }
#progress-bar { height: 100%; width: 0; background: var(--hud); }

#dmg-dir .d { position: absolute; background: rgba(255, 0, 0, .6); opacity: 0; transition: opacity .6s; }
#dmg-dir .d.on { opacity: 1; transition: none; }
#dmg-dir .up { left: 50%; top: 32%; width: 120px; height: 8px; transform: translateX(-50%); }
#dmg-dir .down { left: 50%; top: 67%; width: 120px; height: 8px; transform: translateX(-50%); }
#dmg-dir .left { top: 50%; left: 36%; width: 8px; height: 120px; transform: translateY(-50%); }
#dmg-dir .right { top: 50%; right: 36%; width: 8px; height: 120px; transform: translateY(-50%); }

#weapon-list { position: absolute; right: 20px; top: 30%; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
#weapon-list div { color: var(--hud-dim); font: bold 14px Tahoma, sans-serif; border: 1px solid var(--hud-dim); padding: 3px 8px; background: rgba(0, 0, 0, .3); }
#weapon-list div.sel { color: var(--hud); border-color: var(--hud); }

#spectator { display: none; }
#spectator.on { display: block; }
#spectator .spec-top, #spectator .spec-bottom { position: absolute; left: 0; right: 0; height: 12%; background: #000; }
#spectator .spec-top { top: 0; } #spectator .spec-bottom { bottom: 0; display: flex; align-items: center; justify-content: center; color: #ffb400; font-size: 18px; }

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#blood { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(160, 0, 0, .55) 100%); }

/* ---------- VGUI ---------- */
.vgui { position: fixed; background: var(--vgui-bg); border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 16px 20px; font-size: 14px; }
.vgui h2 { margin: 0 0 12px; font-size: 20px; font-weight: bold; color: var(--vgui-text); letter-spacing: 1px; }
.vgui button, .main-buttons button { background: transparent; border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 6px 12px; font: bold 14px Tahoma, sans-serif; cursor: pointer; text-align: left; }
.vgui button:hover, .main-buttons button:hover { background: rgba(200, 138, 30, .35); color: #fff; }
.vgui button:disabled { opacity: .35; cursor: default; background: transparent; color: var(--vgui-text); }
.vgui button b { display: inline-block; width: 22px; }
.dialog { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.dialog label { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog input, .dialog select { background: #111; border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 3px 6px; font: 14px Tahoma; }
.dialog input[type=number] { width: 90px; }
.dialog .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.dialog pre { margin: 0; font: 13px/1.6 Consolas, monospace; color: #ffd27a; }

.menu-screen { position: fixed; inset: 0; background: linear-gradient(90deg, rgba(20,14,6,.88) 0%, rgba(20,14,6,.55) 45%, rgba(0,0,0,0) 80%); display: flex; flex-direction: column; justify-content: center; padding-left: 8%; }
.menu-screen.overlay { background: rgba(0, 0, 0, .6); }
.logo { font: 900 64px "Arial Black", Impact, sans-serif; color: #f0e6d0; letter-spacing: 2px; text-shadow: 3px 3px 0 #000; margin-bottom: 40px; }
.logo small { display: block; font: bold 18px Tahoma; letter-spacing: 8px; color: var(--vgui-text); text-shadow: none; }
.main-buttons { display: flex; flex-direction: column; gap: 6px; width: 260px; }
.main-buttons button { font-size: 18px; border: none; padding: 8px 4px; color: #e8dcc0; }
.version { position: absolute; bottom: 16px; left: 8%; color: #886; font-size: 12px; }

#menu-team { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-grid button { padding: 12px; font-size: 16px; }
.team-info { margin-top: 14px; color: #ddd; min-height: 40px; }

#menu-buy { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; min-height: 380px; }
.buy-cols { display: flex; gap: 20px; }
#buy-list { display: flex; flex-direction: column; gap: 5px; width: 300px; }
#buy-list button { display: flex; justify-content: space-between; }
#buy-list button span.p { color: #fff; opacity: .8; }
#buy-info { flex: 1; border-left: 1px solid var(--vgui-border); padding-left: 16px; color: #ddd; font-size: 13px; line-height: 1.6; }
#buy-info h3 { margin: 0 0 8px; color: var(--vgui-text); }
.buy-foot { display: flex; justify-content: space-between; margin-top: 14px; color: #ddd; }
#buy-money { color: #7f7; font-weight: bold; }

#scoreboard { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 720px; }
.sb-title { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; }
.sb-team { margin-bottom: 12px; }
.sb-head { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; border-bottom: 1px solid var(--vgui-border); padding-bottom: 3px; }
.sb-team.ct .sb-head { color: #9cc9ff; } .sb-team.t .sb-head { color: #ff6a5a; }
.sb-team table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.sb-team td { padding: 2px 6px; font-size: 14px; }
.sb-team.ct td { color: #9cc9ff; } .sb-team.t td { color: #ff8a7a; }
.sb-team tr.dead td { opacity: .45; }
.sb-team tr.me td { background: rgba(255, 255, 255, .08); }
.sb-team td.n { text-align: right; width: 70px; }

#loading, #click-to-play { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffb400; font: bold 22px Tahoma; background: rgba(0, 0, 0, .6); padding: 12px 24px; border: 1px solid var(--vgui-border); cursor: pointer; }

/* ---------- v0.2 additions ---------- */
#hud-mode { position: absolute; left: 12px; top: 200px; color: var(--hud); font: bold 14px Tahoma; text-shadow: 1px 1px 1px #000; }
#net-stats { position: absolute; right: 12px; bottom: 110px; color: #bbb; font: 11px Consolas, monospace; text-shadow: 1px 1px 1px #000; }
#chat .radio { color: #b5e36b; }
#chat-box { position: absolute; left: 16px; bottom: 70px; display: flex; gap: 6px; align-items: center; pointer-events: auto; background: rgba(0,0,0,.5); padding: 4px 8px; border: 1px solid var(--vgui-border); }
#chat-box span { color: var(--vgui-text); font-weight: bold; }
#chat-input { background: transparent; border: none; outline: none; color: #fff; font: 14px Tahoma; width: 420px; }
#radio-menu { position: absolute; left: 16px; top: 40%; color: #ffd070; font: 14px Tahoma; background: rgba(0,0,0,.45); padding: 8px 12px; line-height: 1.6; }
#radio-menu h3 { margin: 0 0 4px; font-size: 15px; color: var(--vgui-text); }
#spectator .spec-top { display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 13px; }
#sb-spec { color: #ccc; font-size: 12px; }
.sb-team tr.h td { color: #ddd !important; font-size: 12px; }
.dialog.wide { min-width: 640px; }
#server-list { width: 100%; border-collapse: collapse; color: #ddd; font-size: 13px; }
#server-list td { padding: 4px 6px; border-bottom: 1px solid rgba(200,138,30,.25); }
#server-list tr.head td { color: var(--vgui-text); font-weight: bold; }
#stats-body { color: #ddd; line-height: 1.7; min-width: 320px; }
#stats-body b { color: var(--vgui-text); }

/* ---------- editor ---------- */
#editor { position: fixed; inset: 0; background: #1a1712; display: flex; z-index: 20; }
#ed-tools { flex: 0 0 240px; width: 240px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #0e0c09; border-right: 1px solid var(--vgui-border); color: var(--vgui-text); font-size: 13px; overflow-y: auto; }
#ed-tools label { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#ed-tools input, #ed-tools select { background: #111; border: 1px solid var(--vgui-border); color: var(--vgui-text); width: 90px; }
#ed-tools input[type=number] { width: 44px; }
#ed-tools button { background: transparent; border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 4px 8px; cursor: pointer; }
#ed-tools button.on, #ed-tools button:hover { background: rgba(200,138,30,.35); color: #fff; }
.ed-group { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ed-row { display: flex; gap: 4px; }
.ed-row button { flex: 1; }
#ed-canvas { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#ed-status { color: #aaa; font-size: 12px; white-space: pre-wrap; }

@media (max-width: 900px) {
  .hudnum { font-size: 24px; } .hudnum svg { width: 22px; height: 22px; }
  #hud-armor { left: 130px; } #hud-icons { left: 240px; bottom: 50px; }
  #radar { width: 130px; height: 130px; } #hud-mode { top: 150px; }
  #hud-money { bottom: 44px; } #hud-money b { font-size: 24px; }
}

#conn-problem { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); text-align: center; color: #ff5040; font: bold 20px Tahoma; text-shadow: 1px 1px 2px #000; line-height: 1.3; }
#conn-problem small { color: #ffd070; font-size: 14px; }

/* message boxes */
.msgbox { z-index: 50; min-width: 360px; max-width: 520px; }
.msgbox .msg-body { color: #ddd; line-height: 1.5; }
.msg-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }

/* night vision */
#nvg { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(40,255,60,.28) 55%, rgba(0,40,0,.75) 100%); mix-blend-mode: multiply; }
#nvg::after { content: ''; position: absolute; inset: 0; background: rgba(60,255,80,.18); mix-blend-mode: screen; }