* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0e13; }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: #cdd6e4; user-select: none; }
#game { position: absolute; inset: 0; display: block; cursor: none; }
.hidden { display: none !important; }

.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(8, 10, 15, 0.82); z-index: 10; cursor: default;
}

/* ---- menu ---- */
#menu h1 { font-size: 64px; letter-spacing: 10px; color: #e8eef7; font-weight: 800; }
#menu h1 span { color: #5a9aef; }
#menu .sub { color: #7d8aa0; margin-bottom: 10px; }
#name {
  width: 280px; padding: 10px 14px; font-size: 18px; text-align: center;
  background: #161b24; border: 1px solid #2c3648; color: #e8eef7; border-radius: 6px; outline: none;
}
#cards { display: flex; gap: 16px; margin: 8px 0; }
.card {
  width: 210px; padding: 16px; border: 2px solid #2c3648; border-radius: 10px;
  background: #131822; cursor: pointer; text-align: center; transition: transform .08s, border-color .08s;
}
.card:hover { transform: translateY(-3px); }
.card.sel { border-color: var(--fc); box-shadow: 0 0 24px -6px var(--fc); }
.card .fname { font-size: 19px; font-weight: 700; color: var(--fc); letter-spacing: 1px; }
.card .fstat { margin-top: 8px; font-size: 13px; color: #8b97ab; line-height: 1.6; }
#join {
  padding: 12px 64px; font-size: 20px; font-weight: 800; letter-spacing: 4px;
  background: #2563c4; color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
#join:disabled { background: #273245; color: #5d6b80; cursor: not-allowed; }
#join:not(:disabled):hover { background: #2f74e0; }
.help { color: #66738a; font-size: 12.5px; text-align: center; line-height: 1.8; margin-top: 8px; }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#terrbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 14px; display: flex; border-radius: 4px; overflow: hidden;
  outline: 1px solid #00000088; box-shadow: 0 2px 8px #0008;
}
#terrbar div { height: 100%; transition: width .6s; }
#terrlabel {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: #aeb9cb; text-shadow: 0 1px 2px #000; white-space: nowrap;
}
#killfeed { position: absolute; top: 14px; left: 16px; font-size: 13px; text-shadow: 0 1px 2px #000; }
#killfeed div { margin-bottom: 3px; opacity: .95; }
#capbox {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  width: 320px; text-align: center; text-shadow: 0 1px 2px #000;
}
#capname { font-size: 14px; font-weight: 600; }
#capbarOuter { height: 8px; background: #0009; border-radius: 3px; margin: 4px 0; overflow: hidden; }
#capbar { height: 100%; width: 0; }
#capstatus { font-size: 12px; font-weight: 700; letter-spacing: 2px; }
#status { position: absolute; left: 18px; bottom: 18px; }
#hpbox { width: 230px; height: 20px; background: #000a; border-radius: 4px; position: relative; overflow: hidden; }
#hpbar { height: 100%; background: linear-gradient(#69d56a, #3da33f); width: 100%; }
#hptext { position: absolute; inset: 0; text-align: center; font-size: 13px; font-weight: 700; line-height: 20px; color: #eaffea; text-shadow: 0 1px 2px #000; }
#ammo { margin-top: 8px; font-size: 22px; font-weight: 800; color: #e8eef7; text-shadow: 0 1px 3px #000; }
#vehbox {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 260px; height: 16px; background: #000a; border-radius: 4px; position: absolute; overflow: hidden;
}
#vehbar { height: 100%; background: linear-gradient(#6fb3e8, #3a7fc1); }
#vehtext { position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: 700; line-height: 16px; text-shadow: 0 1px 2px #000; }
#prompt {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  font-size: 15px; color: #ffe9a8; text-shadow: 0 1px 3px #000; font-weight: 600;
}
#toast {
  position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%);
  font-size: 14px; color: #ff9d7a; text-shadow: 0 1px 3px #000; opacity: 0; transition: opacity .3s;
}
#pingbox { position: absolute; right: 14px; bottom: 12px; font-size: 11px; color: #5f6c82; text-shadow: 0 1px 2px #000; }

/* ---- score popups + scoreboard ---- */
#scorepop {
  position: absolute; left: 50%; bottom: 170px;
  transform: translateX(-50%) translateY(10px);
  font-size: 17px; font-weight: 800; letter-spacing: 2.5px; color: #e8eef7;
  text-shadow: 0 2px 8px #000; white-space: nowrap;
  opacity: 0; transition: opacity .12s, transform .16s;
}
#scorepop.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#scorepop b { color: #ffd34d; margin-left: 9px; }
#board {
  position: absolute; left: 50%; top: 13%; transform: translateX(-50%);
  width: 470px; background: rgba(16, 21, 31, 0.93); border: 1px solid #28324a;
  border-radius: 10px; padding: 13px 16px;
}
#board .paneltitle { text-align: center; font-size: 16px; letter-spacing: 4px; margin-bottom: 8px; }
.boardrow { display: flex; gap: 6px; font-size: 13px; padding: 2.5px 8px; border-radius: 4px; }
.boardrow.head { color: #66738a; font-size: 10.5px; letter-spacing: 1.5px; padding-bottom: 5px; }
.boardrow.me { background: #1c2940; outline: 1px solid #2c3e5e; }
.boardrow .rk { width: 30px; color: #66738a; }
.boardrow .nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.boardrow .st { width: 54px; text-align: right; color: #aeb9cb; }

/* ---- map / respawn ---- */
#mapwrap { background: rgba(8, 10, 15, 0.9); }
#maptitle { font-size: 22px; letter-spacing: 6px; font-weight: 800; color: #dbe5f1; }
#deathline { font-size: 15px; color: #ff7b6e; }
#mapcanvas { border: 1px solid #28324a; border-radius: 8px; background: #0d1118; cursor: crosshair; }
#maphint { color: #7d8aa0; font-size: 13px; }

/* ---- terminal ---- */
#terminal { gap: 10px; }
#vlist { display: flex; flex-direction: column; gap: 10px; }
#iterm { gap: 10px; }
#itermlist {
  display: flex; flex-direction: column; gap: 8px; width: 560px;
  max-height: 72vh; overflow-y: auto;
}
.paneltitle { font-size: 20px; letter-spacing: 5px; font-weight: 800; }
.vopt {
  width: 560px; padding: 13px 18px; background: #141a26; border: 1px solid #2c3648;
  border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.vopt:hover { border-color: #5a9aef; background: #18202e; }
.vopt b { font-size: 16px; color: #e8eef7; }
.vopt span { font-size: 12.5px; color: #8b97ab; }

/* ---- loadout / class chips ---- */
.chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.slotline { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; }
.slotline .chips { margin-top: 0; flex: 1; }
.slotlabel {
  font-size: 10px; letter-spacing: 1.5px; color: #66738a;
  width: 76px; flex: none; padding-top: 6px;
}
.chip {
  padding: 4px 11px; font-size: 12px; border: 1px solid #2c3648; border-radius: 20px;
  background: #10151f; color: #8b97ab; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: #5a9aef; color: #cdd6e4; }
.chip.sel { background: #1c2940; border-color: #5a9aef; color: #e8eef7; }
#wname { margin-top: 2px; font-size: 12px; color: #8b97ab; letter-spacing: 1.5px; text-shadow: 0 1px 2px #000; }
#alert {
  position: absolute; left: 50%; top: 32%; transform: translateX(-50%);
  font-size: 22px; font-weight: 800; letter-spacing: 3px; text-align: center;
  text-shadow: 0 2px 8px #000; white-space: nowrap;
}

/* ---- map side panel ---- */
#maprow { display: flex; gap: 14px; align-items: flex-start; }
#mapside {
  width: 330px; max-height: 700px; overflow-y: auto; text-align: left;
  background: #10151f; border: 1px solid #28324a; border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;
}
.sidehead { font-size: 11px; letter-spacing: 2px; color: #66738a; margin-top: 7px; }
#classrow { display: flex; flex-direction: column; gap: 6px; }
.clsopt {
  padding: 7px 10px; border: 1px solid #2c3648; border-radius: 8px;
  background: #141a26; cursor: pointer; display: flex; flex-direction: column; gap: 1px;
}
.clsopt:hover { border-color: #5a9aef; }
.clsopt.sel { border-color: #5a9aef; background: #1c2940; }
.clsopt b { font-size: 13.5px; color: #e8eef7; }
.clsopt span { font-size: 11.5px; color: #8b97ab; }
.statrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.statrow .nm { width: 118px; font-weight: 600; }
.statrow .vl { width: 64px; color: #aeb9cb; text-align: right; }
.statbar { flex: 1; height: 6px; background: #0009; border-radius: 3px; overflow: hidden; }
.statbar div { height: 100%; }
.battlerow {
  font-size: 12px; padding: 5px 8px; border-radius: 6px; background: #141a26;
  cursor: pointer; line-height: 1.45;
}
.battlerow:hover { background: #1b2433; }
.battlerow .contested { color: #ffd34d; font-weight: 700; }
#battles { display: flex; flex-direction: column; gap: 4px; }
#battles .none, #inspect .none { font-size: 12px; color: #66738a; font-style: italic; }
#inspect {
  min-height: 108px; font-size: 12.5px; line-height: 1.65;
  background: #141a26; border: 1px solid #2c3648; border-radius: 8px; padding: 8px 10px;
}
#inspect b { letter-spacing: 0.5px; }
.dim { color: #8b97ab; }

#disconnected h2 { color: #ff7b6e; letter-spacing: 6px; }
#disconnected p { color: #8b97ab; }

/* ---- chat ---- */
#chatwrap { position: absolute; left: 16px; bottom: 130px; width: 390px; z-index: 11; pointer-events: none; }
#chatlog {
  display: flex; flex-direction: column; gap: 1.5px;
  font-size: 12.5px; text-shadow: 0 1px 2px #000;
}
.chatline { line-height: 1.35; word-wrap: break-word; }
.chattxt { color: #e8eef7; }
#chatbar {
  display: flex; gap: 7px; align-items: center; margin-top: 5px; padding: 5px 9px;
  background: rgba(8, 10, 15, 0.8); border: 1px solid #28324a; border-radius: 6px;
  pointer-events: auto;
}
#chatch { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; flex: none; }
#chatinput {
  flex: 1; background: none; border: none; outline: none;
  color: #e8eef7; font-size: 13px; font-family: inherit;
}
#chatinput::placeholder { color: #5d6b80; }

/* ---- squads ---- */
#squadbox {
  position: absolute; left: 16px; top: 200px; font-size: 11.5px;
  text-shadow: 0 1px 2px #000; line-height: 1.5; max-width: 240px;
}
#squadbox .sqtitle { color: #57e6c8; font-weight: 700; letter-spacing: 1px; margin-bottom: 2px; }
.sqmate { color: #cdd6e4; white-space: nowrap; }
.sqmate.me .sqname { color: #fff; font-weight: 700; }
.sqlead { color: #ffd34d; width: 12px; display: inline-block; }
.sqcls { color: #66738a; width: 22px; display: inline-block; font-size: 10px; }
.sqname { margin-right: 6px; }
.sqdown { color: #ffd34d; font-size: 10px; }
.sqdead { color: #ff7b6e; font-size: 10px; }
.sqveh { color: #6fb3e8; font-size: 10px; }
#squadwrap { gap: 8px; }
#squadlist {
  display: flex; flex-direction: column; gap: 6px; width: 520px;
  max-height: 72vh; overflow-y: auto; text-align: left;
}
.sqrow {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px;
  background: #141a26; border: 1px solid #2c3648; border-radius: 8px; font-size: 13px;
}
.sqrow b { color: #e8eef7; }
.sqrow .dim { flex: 1; }
.sqform { display: flex; gap: 7px; align-items: center; }
.sqform input {
  flex: 1; padding: 8px 11px; font-size: 14px; background: #161b24;
  border: 1px solid #2c3648; color: #e8eef7; border-radius: 6px; outline: none;
}
.sqbtn {
  padding: 6px 13px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
  background: #1c2940; color: #cdd6e4; border: 1px solid #2c3e5e; border-radius: 6px; cursor: pointer;
  white-space: nowrap;
}
.sqbtn:hover { background: #24365a; color: #fff; }
#squadlist .none { font-size: 12px; color: #66738a; font-style: italic; }