* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000;
  font-family:'Segoe UI', Tahoma, sans-serif; color:#eee; user-select:none; }
.hidden { display:none !important; }

/* ---------------- MENU ---------------- */
#menu { position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,180,90,.10), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(70,140,200,.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 22px),
    linear-gradient(160deg,#161e26,#0a0d12 72%); }
/* podium: characters links/rechts van het paneel */
.menu-stage { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:1100px; padding:16px; }
.menu-char { flex:0 0 auto; width:230px; align-self:center; opacity:.96;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.menu-char svg { width:100%; height:auto; display:block; }
.menu-char.right svg { transform:scaleX(-1); }      /* blauwe vechter kijkt naar binnen */
.menu-char .fighter.red   { fill:#d23a3a; }
.menu-char .fighter.blue  { fill:#2f6ad2; }
.menu-char .fighter .skin   { fill:#e8b58a; }
.menu-char .fighter.red   .helmet { fill:#7a2222; }
.menu-char .fighter.blue  .helmet { fill:#1d3f7a; }
.menu-char .fighter .belt   { fill:#1c1f24; }
.menu-char .fighter .gun *  { fill:#23262b; }
.menu-char .fighter * { stroke:rgba(0,0,0,.35); stroke-width:1.2; stroke-linejoin:round; }
/* serverlijst-balk (label + vernieuwen) */
.srv-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
button.mini.ghost { background:transparent; border:1px solid #34465a; color:#9fb3c4; padding:4px 12px; font-size:12px; }
button.mini.ghost:hover { background:rgba(255,255,255,.06); color:#dfe9f2; }
@media (max-width: 980px) { .menu-char { display:none; } }
.panel { width:min(560px,92vw); background:rgba(12,17,24,.94);
  border:1px solid #2a3a4a; border-top:2px solid #caa44a; border-radius:12px; padding:24px 30px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.65), inset 0 0 0 1px rgba(202,164,74,.08); }
.brand { text-align:center; margin-bottom:2px; }
.brand-line { height:2px; width:140px; margin:8px auto 0;
  background:linear-gradient(90deg,transparent,#caa44a,transparent); opacity:.85; }
h1 { font-size:44px; letter-spacing:7px; text-align:center; font-weight:800;
  background:linear-gradient(180deg,#ffe7a6,#caa44a 55%,#9c7320);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 14px rgba(202,164,74,.25); }
.sub { text-align:center; color:#8ea4b6; margin:6px 0 18px; font-size:13px;
  text-transform:uppercase; letter-spacing:2px; }
.row { margin:14px 0; }
.row > label { display:block; font-size:13px; color:#b9c8d6; margin-bottom:7px;
  text-transform:uppercase; letter-spacing:1px; }
.row small { display:block; color:#6f8090; font-size:11px; margin-top:6px; }
.btns { display:flex; gap:8px; flex-wrap:wrap; }
.opt { flex:1 1 auto; min-width:120px; padding:11px 10px; cursor:pointer;
  background:#1a232e; color:#cdd9e4; border:1px solid #33465a; border-radius:7px;
  font-size:13px; transition:.12s; }
.opt:hover { background:#243240; border-color:#5a7488; transform:translateY(-1px); }
.opt.selected { border-color:#ffb347; background:#33291a; color:#ffd9a0; box-shadow:0 0 0 1px rgba(255,179,71,.25); }
.opt.team.red.selected { border-color:#e5524a; background:#3a1c1a; color:#ff9e96; }
.opt.team.blue.selected { border-color:#4a8de5; background:#1a2536; color:#9ec6ff; }
input[type=range] { width:100%; accent-color:#ffb347; }
.start { margin-top:18px; width:100%; padding:15px; font-size:18px; font-weight:bold;
  letter-spacing:2px; cursor:pointer; border:none; border-radius:8px; color:#1a0e00;
  background:linear-gradient(180deg,#ffd27a,#e0931f); transition:.12s; }
.start:hover { filter:brightness(1.08); transform:translateY(-1px); }
.help { margin-top:16px; padding-top:14px; border-top:1px solid #233140;
  font-size:12px; color:#8aa0b2; line-height:1.7; }
.credit { margin-top:14px; color:#46586a; font-size:11px; }

/* ---------------- GAME ---------------- */
#game { position:fixed; inset:0; }
#c { display:block; width:100%; height:100%; cursor:none; }

/* post-process overlays: liggen boven de 3D maar onder de HUD */
#grade { position:fixed; inset:0; pointer-events:none; z-index:2;
  mix-blend-mode:soft-light; opacity:.62; background:transparent; transition:background .8s ease; }
#vignette { position:fixed; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%); }
#spawnTint { position:fixed; inset:0; pointer-events:none; z-index:4; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(90,170,255,.10), rgba(70,140,255,.22));
  transition:opacity .25s; }
#spawnTint.show { opacity:1; }
/* HUD boven de post-process overlays */
#crosshair,#hitmarker,#damageFlash,#healFlash,#netChat,#radar,#killfeed,#hud,#ggProgress,#boostHud,#boostBanner,#sensToast,#aimName { z-index:6; }
#scope,#deadOverlay,#winOverlay,#endScreen,#countdown,#clickToPlay { z-index:8; }

#crosshair { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; pointer-events:none; }
#crosshair span { position:absolute; background:#39ff7a; box-shadow:0 0 2px #000; }
#crosshair .l,#crosshair .r { top:50%; width:9px; height:2px; margin-top:-1px; }
#crosshair .t,#crosshair .b { left:50%; width:2px; height:9px; margin-left:-1px; }
#crosshair .l { left:0 } #crosshair .r { right:0 }
#crosshair .t { top:0 } #crosshair .b { bottom:0 }
/* "stop"-teken bij het richten op een medespeler (rode verbodscirkel) */
#aimStop { display:none; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px;
  background:transparent !important; box-shadow:none !important;
  border:3px solid #ff4136; border-radius:50%; }
#aimStop::after { content:''; position:absolute; left:50%; top:50%;
  width:24px; height:3px; background:#ff4136; transform:translate(-50%,-50%) rotate(45deg); }
#crosshair.friend #aimStop { display:block; }
#crosshair.friend .l,#crosshair.friend .r,#crosshair.friend .t,#crosshair.friend .b { opacity:0; }
/* naam van het doelwit onder de crosshair, in teamkleur */
#aimName { position:fixed; left:50%; top:calc(50% + 30px); transform:translate(-50%,0);
  font-size:13px; font-weight:bold; letter-spacing:.5px; pointer-events:none; white-space:nowrap;
  text-shadow:0 0 4px #000, 0 1px 2px #000; opacity:0; transition:opacity .55s ease-out; }
#aimName.show { opacity:1; transition:opacity .06s; }

#hitmarker { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; font-size:22px; font-weight:bold; opacity:0; pointer-events:none;
  text-shadow:0 0 3px #000; transition:opacity .08s; }
#hitmarker.show { opacity:1; }

#damageFlash { position:fixed; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 60%, transparent 40%, rgba(180,0,0,.55));
  transition:opacity .12s; }
#damageFlash.show { opacity:1; }

#healFlash { position:fixed; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 60%, transparent 45%, rgba(40,200,80,.5));
  transition:opacity .15s; }
#healFlash.show { opacity:1; }

/* Radar */
#radar { position:fixed; top:14px; left:14px; width:150px; height:150px;
  border-radius:6px; overflow:hidden; border:2px solid rgba(120,160,140,.5);
  background:rgba(20,40,30,.55); box-shadow:0 4px 12px rgba(0,0,0,.5); }

/* Killfeed */
#killfeed { position:fixed; top:14px; right:14px; width:300px;
  background:rgba(20,32,46,.72); border:1px solid rgba(90,130,170,.4);
  border-radius:6px; padding:8px 10px; font-size:12px; color:#cfe0ee;
  box-shadow:0 4px 12px rgba(0,0,0,.5); }
.kf-head { font-weight:bold; color:#9ec6ff; margin-bottom:5px; }
.kf-head .skull { color:#7fa6cf; }
#kfList .kf { padding:2px 0; line-height:1.4; border-bottom:1px solid rgba(255,255,255,.05); }
#kfList .kf b.red { color:#ff7a72; } #kfList .kf b.blue { color:#8ab6ff; }
.kf-remaining { margin-top:6px; padding-top:5px; border-top:1px solid rgba(255,255,255,.12);
  color:#ffd9a0; font-weight:bold; }

/* Gun game progress */
#ggProgress { position:fixed; top:175px; left:14px; width:150px;
  background:rgba(20,28,38,.7); border:1px solid rgba(255,179,71,.35);
  border-radius:6px; padding:8px 10px; font-size:12px; }
.gg-title { color:#ffb347; font-weight:bold; letter-spacing:1px; }
.gg-level { color:#cdd9e4; margin:2px 0; }
.gg-weapon { color:#fff; font-weight:bold; font-size:14px; }
.gg-next { color:#7f93a4; font-size:11px; margin-top:2px; }

/* HUD onder (zoals screenshot) */
#hud { position:fixed; left:0; right:0; bottom:0; height:74px;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 26px 14px; pointer-events:none;
  text-shadow:0 0 4px #000, 0 1px 2px #000; }
.hud-left { display:flex; gap:26px; }
.stat { display:flex; align-items:center; gap:8px; font-size:34px; font-weight:bold;
  font-family:'Consolas','Courier New',monospace; }
.stat .icon { font-size:26px; }
.stat.health { color:#ffcf3a; } .stat.health .icon { color:#ff5a4a; }
.stat.armor { color:#ffcf3a; } .stat.armor .icon { color:#7fb6ff; }
.hud-mid { font-size:30px; font-weight:bold; color:#ffcf3a;
  font-family:'Consolas','Courier New',monospace; margin-bottom:4px; }
.hud-right { text-align:right; }
.ammo { font-size:34px; font-weight:bold; color:#ffcf3a;
  font-family:'Consolas','Courier New',monospace; }
.ammo .sep { color:#b89030; margin:0 2px; font-size:24px; }
.wepname { font-size:13px; color:#e0c98a; letter-spacing:1px; }

/* Overlays */
#deadOverlay { position:fixed; inset:0; display:flex; align-items:flex-start;
  justify-content:center; padding-top:11%; background:rgba(60,0,0,.4); }
.dead-box { text-align:center; }
.dead-title { font-size:52px; font-weight:bold; color:#ff4a3a; letter-spacing:3px;
  text-shadow:0 3px 10px #000; }
.dead-sub { font-size:20px; color:#ffd9a0; margin-top:10px; }

#winOverlay { position:fixed; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(0,20,40,.55); }
.win-box { text-align:center; }
.win-title { font-size:52px; font-weight:bold; letter-spacing:3px;
  background:linear-gradient(180deg,#ffe08a,#e0931f); -webkit-background-clip:text;
  background-clip:text; color:transparent; text-shadow:0 3px 10px #000; }
.win-sub { font-size:22px; color:#cfe0ee; margin-top:10px; }

#clickToPlay { position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; font-size:26px; letter-spacing:1px; }
#clickToPlay small { font-size:14px; color:#9fb3c4; }

#sensToast { position:fixed; left:50%; top:62%; transform:translateX(-50%);
  background:rgba(20,28,38,.82); border:1px solid rgba(255,179,71,.5);
  color:#ffd9a0; padding:8px 16px; border-radius:6px; font-size:15px;
  letter-spacing:1px; pointer-events:none; transition:opacity .25s; }
#sensToast.hidden { opacity:0; }

#scope { position:fixed; inset:0; pointer-events:none; z-index:40;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 31%, #000 42%); }
#scope.hidden { display:none; }
.scope-ring { position:absolute; left:50%; top:50%; width:62vh; height:62vh; transform:translate(-50%,-50%);
  border:2px solid rgba(0,0,0,.85); border-radius:50%; box-shadow:0 0 0 2px rgba(120,120,120,.35) inset; }
.scope-h { position:absolute; left:50%; top:50%; width:62vh; height:1px; transform:translate(-50%,-50%); background:rgba(20,20,20,.9); }
.scope-v { position:absolute; left:50%; top:50%; width:1px; height:62vh; transform:translate(-50%,-50%); background:rgba(20,20,20,.9); }

.gg-streak { color:#9ec6ff; font-size:11px; margin-top:3px; }

#boostHud { position:fixed; top:300px; left:14px; width:150px; text-align:center;
  background:linear-gradient(90deg,rgba(255,179,71,.25),rgba(120,200,255,.25));
  border:1px solid rgba(255,220,120,.7); color:#fff3c4; padding:6px 8px; border-radius:6px;
  font-size:12px; font-weight:bold; letter-spacing:1px; box-shadow:0 0 14px rgba(255,200,80,.5); }

#boostBanner { position:fixed; left:50%; top:30%; transform:translate(-50%,-50%);
  font-size:40px; font-weight:bold; letter-spacing:2px; pointer-events:none;
  color:#fff; text-shadow:0 0 18px #ffcf3a, 0 2px 6px #000;
  background:linear-gradient(90deg,#ffd27a,#9ec6ff); -webkit-background-clip:text; background-clip:text; }
#boostBanner.pop { animation:boostpop .6s ease-out; }
@keyframes boostpop { 0%{ transform:translate(-50%,-50%) scale(.3); opacity:0 } 40%{ transform:translate(-50%,-50%) scale(1.15); opacity:1 } 100%{ transform:translate(-50%,-50%) scale(1); opacity:1 } }

#countdown { position:fixed; left:50%; top:42%; transform:translate(-50%,-50%);
  font-size:160px; font-weight:bold; color:#ffd27a; pointer-events:none;
  text-shadow:0 0 30px rgba(255,180,60,.8), 0 6px 16px #000;
  font-family:'Consolas','Courier New',monospace; }
#countdown.pop { animation:cdpop .5s ease-out; }
@keyframes cdpop { 0%{ transform:translate(-50%,-50%) scale(1.8); opacity:0 } 30%{ transform:translate(-50%,-50%) scale(1); opacity:1 } 100%{ transform:translate(-50%,-50%) scale(1); opacity:.9 } }

#endScreen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(20,28,40,.82), rgba(6,9,14,.94));
  z-index:60; }
#endScreen.hidden { display:none; }
.es-box { background:rgba(14,20,28,.96); border:1px solid rgba(255,179,71,.45);
  border-radius:12px; padding:28px 40px; min-width:420px; text-align:center;
  box-shadow:0 12px 60px rgba(0,0,0,.6); animation:cdpop .4s ease-out; }
.es-title { font-size:26px; font-weight:bold; color:#fff; margin-bottom:18px; }
.es-title small { color:#9fb3c4; font-weight:normal; font-size:15px; }
.es-rows { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.es-row { display:flex; align-items:center; gap:14px; padding:10px 16px;
  background:rgba(255,255,255,.04); border-radius:8px; font-size:18px; }
.es-row.me { background:rgba(255,179,71,.16); border:1px solid rgba(255,179,71,.5); }
.es-medal { font-size:24px; width:30px; }
.es-rank { color:#9fb3c4; width:34px; text-align:left; }
.es-name { flex:1; text-align:left; font-weight:bold; }
.es-kills { color:#ffd9a0; font-variant-numeric:tabular-nums; }
.es-name.red, .es-row .red { color:#ff6b6b; }
.es-name.blue, .es-row .blue { color:#6ba8ff; }
#endScreen .red { color:#ff6b6b; }
#endScreen .blue { color:#6ba8ff; }
.es-sub { color:#9fb3c4; font-size:14px; }

/* ---- naam-invoer + modusknoppen ---- */
#playerName, #addAddr {
  width:100%; box-sizing:border-box; padding:11px 12px; border-radius:9px;
  border:1px solid rgba(255,255,255,.16); background:rgba(10,16,22,.7);
  color:#eaf2f8; font-size:15px; font-family:inherit; outline:none;
}
#playerName:focus, #addAddr:focus { border-color:#ffb347; }
.row.two { display:flex; gap:12px; }
.row.two .start { flex:1; }
.start.online { background:linear-gradient(180deg,#3a7bd5,#2a5fae); }
.start.ghost  { background:rgba(255,255,255,.1); }
.panel.wide { max-width:680px; }
h1.small { font-size:34px; }

/* ---- server-browser ---- */
.srv-head, .srv-row {
  display:grid; grid-template-columns: 1fr 90px 80px 86px; gap:8px; align-items:center;
}
.srv-head { font-size:12px; color:#8aa0b2; padding:0 10px 6px; text-transform:uppercase; letter-spacing:1px; }
.srv-list { min-height:64px; max-height:168px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
.srv-row {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:9px; padding:11px 10px;
}
.srv-row .nm { font-weight:bold; color:#eaf2f8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srv-row .mp { color:#9fb3c4; font-size:13px; }
.srv-row .pl { color:#9fb3c4; font-size:13px; }
.srv-row button.join {
  padding:8px 0; border:none; border-radius:7px; cursor:pointer; font-weight:bold;
  background:linear-gradient(180deg,#5ad07a,#33ae5a); color:#0a1f12;
}
.srv-row button.join:disabled { background:#3a4750; color:#7a8a96; cursor:default; }
.srv-row.offline { opacity:.55; }
.srv-empty { color:#8aa0b2; padding:18px; text-align:center; }
.addrow { display:flex; gap:8px; }
.addrow input { flex:1; }
button.mini { padding:0 16px; border:none; border-radius:8px; cursor:pointer; font-weight:bold;
  background:#2a5fae; color:#fff; }
.neterror { margin-top:10px; color:#ff8a7a; background:rgba(120,20,10,.25);
  border:1px solid rgba(255,80,60,.3); border-radius:8px; padding:10px; font-size:14px; }

/* ---- naamplaatjes / chat in-game ---- */
#netChat { position:fixed; left:16px; bottom:120px; width:340px; max-width:46vw;
  display:flex; flex-direction:column; gap:3px; pointer-events:none; z-index:25; }
#netChat .line { background:rgba(0,0,0,.4); color:#dfe9f2; font-size:13px;
  padding:3px 8px; border-radius:5px; align-self:flex-start; }
#netChat .line b { color:#ffce6b; }

/* Scorebord (houd Q ingedrukt) */
#scoreboard { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9;
  width:min(560px,92vw); background:rgba(8,10,14,.86); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:16px 18px; box-shadow:0 20px 60px rgba(0,0,0,.6); pointer-events:none; }
#scoreboard.hidden { display:none; }
#scoreboard .sb-title { font-size:18px; font-weight:800; letter-spacing:.06em; color:#fff; margin-bottom:10px; }
#scoreboard .sb-hint { font-size:12px; font-weight:600; color:#9fb0c4; letter-spacing:.02em; }
#scoreboard .sb-head, #scoreboard .sb-row { display:grid; grid-template-columns:1fr 56px 56px 72px; align-items:center; gap:6px; }
#scoreboard .sb-head { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#9fb0c4;
  padding:4px 8px; border-bottom:1px solid rgba(255,255,255,.14); }
#scoreboard .sb-head span:not(.sb-name) { text-align:center; }
#scoreboard .sb-row { font-size:15px; color:#e8edf4; padding:6px 8px; border-radius:7px; }
#scoreboard .sb-row span:not(.sb-name) { text-align:center; font-weight:700; }
#scoreboard .sb-row:nth-child(odd) { background:rgba(255,255,255,.04); }
#scoreboard .sb-row.me { background:rgba(90,160,255,.18); }
#scoreboard .sb-row .sb-name.red { color:#ff7a7a; }
#scoreboard .sb-row .sb-name.blue { color:#7ab0ff; }
#scoreboard .sb-row .sb-rounds { color:#ffd166; }

/* Terug-naar-portaal knop (linksboven in het menu) */
#portalBack { position:fixed; top:16px; left:16px; z-index:20; text-decoration:none;
  font-size:13px; font-weight:700; letter-spacing:.04em; color:#cdd9e4;
  background:rgba(12,17,24,.85); border:1px solid #2a3a4a; border-radius:9px;
  padding:8px 14px; transition:background .12s, border-color .12s, color .12s; }
#portalBack:hover { background:rgba(202,164,74,.14); border-color:#caa44a; color:#ffe7a6; }