* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #050510; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #cfe7ff;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
.hidden { display: none !important; }
button { font-family: inherit; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#minimap {
  position: fixed; right: 10px; top: 52px;
  border: 1px solid rgba(0, 255, 255, .35);
  background: rgba(5, 5, 20, .65);
  border-radius: 2px;
  pointer-events: none;
}

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

#topbar {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: baseline;
  padding: 6px 16px;
  background: rgba(5, 8, 24, .6);
  border: 1px solid rgba(0, 255, 255, .25);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#alivecount { font-weight: 800; color: #00ffff; letter-spacing: .08em; font-size: 14px; }
#roundtime { color: #9fb8d8; font-size: 13px; }
#shrinkwarn {
  color: #ff0055; font-weight: 800; font-size: 12px; letter-spacing: .1em;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

#statbox {
  position: fixed; left: 10px; top: 8px; width: min(210px, 42vw);
  padding: 8px 11px;
  background: rgba(5, 8, 24, .6);
  border: 1px solid rgba(0, 255, 255, .25);
  border-radius: 3px;
}
#statrow { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .08em; color: #9fb8d8; }
#mykills { color: #00ff66; font-weight: 700; }
.bar { height: 6px; border-radius: 2px; overflow: hidden; background: rgba(120, 160, 220, .15); margin-top: 6px; }
#energybar { height: 100%; width: 100%; background: linear-gradient(90deg, #ff6600, #ffe600); box-shadow: 0 0 8px rgba(255,102,0,.8); transition: width .12s; }

#roster {
  position: fixed; right: 10px; top: 196px; width: min(180px, 40vw);
  padding: 7px 10px;
  background: rgba(5, 8, 24, .6);
  border: 1px solid rgba(0, 255, 255, .25);
  border-radius: 3px;
  font-size: 11px;
}
#roster .r { display: flex; align-items: center; gap: 6px; line-height: 1.8; white-space: nowrap; }
#roster .r.dead { opacity: .35; text-decoration: line-through; }
#roster .dot { width: 8px; height: 8px; border-radius: 1px; flex: none; box-shadow: 0 0 6px currentColor; }
#roster .n { overflow: hidden; text-overflow: ellipsis; flex: 1; }
#roster .w { color: #9fb8d8; font-variant-numeric: tabular-nums; }

#feed {
  position: fixed; left: 10px; top: 70px;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.feeditem {
  font-size: 11px; padding: 3px 8px; border-radius: 2px;
  background: rgba(5, 8, 24, .6); border-left: 2px solid #ff0055;
  animation: feedin .2s ease-out; transition: opacity .6s;
}
@keyframes feedin { from { transform: translateX(-20px); opacity: 0; } }

#toasts {
  position: fixed; left: 50%; top: 24%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.toast {
  font-weight: 800; letter-spacing: .12em; font-size: clamp(16px, 3.4vw, 26px);
  color: #fff; text-shadow: 0 0 18px currentColor;
  animation: toastin .25s ease-out; transition: opacity .5s;
}
@keyframes toastin { from { transform: scale(1.6); opacity: 0; } }

#spectate {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  text-align: center; font-weight: 800; letter-spacing: .15em; font-size: 14px;
  color: #ff0055; text-shadow: 0 0 14px rgba(255, 0, 85, .7);
}
#spectate small { display: block; font-weight: 400; letter-spacing: .1em; font-size: 10px; color: #6f8fb5; margin-top: 4px; }

#ping { position: fixed; left: 10px; bottom: 8px; font-size: 10px; color: #55708f; font-family: ui-monospace, monospace; }

/* ---------------- touch pads ---------------- */
#pads { position: fixed; left: 0; right: 0; bottom: 0; height: 130px; z-index: 6; pointer-events: none; }
.pad, #boostbtn {
  position: absolute; bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; pointer-events: auto; touch-action: none;
  font-weight: 800; color: #00ffff;
  background: rgba(0, 255, 255, .07);
  border: 1.5px solid rgba(0, 255, 255, .4);
}
.pad { width: 96px; height: 96px; font-size: 30px; }
#padL { left: 14px; }
#padR { right: 14px; }
.pad.on { background: rgba(0, 255, 255, .25); box-shadow: 0 0 24px rgba(0, 255, 255, .4); }
#boostbtn {
  left: 50%; transform: translateX(-50%);
  width: 92px; height: 62px; border-radius: 31px;
  font-size: 12px; letter-spacing: .12em; color: #ffb300;
  background: rgba(255, 145, 0, .1);
  border-color: rgba(255, 145, 0, .5);
}
#boostbtn.on { background: rgba(255, 145, 0, .38); box-shadow: 0 0 30px rgba(255, 145, 0, .6); }
@media (hover: hover) and (pointer: fine) { #pads { display: none !important; } }

/* ---------------- countdown ---------------- */
#bigcount {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: clamp(80px, 22vw, 170px); font-weight: 900; z-index: 7;
  color: #00ffff; text-shadow: 0 0 40px rgba(0, 255, 255, .9), 0 0 120px rgba(0, 255, 255, .4);
  animation: countpulse .9s ease-out infinite;
  pointer-events: none;
}
@keyframes countpulse { from { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } to { transform: translate(-50%, -50%) scale(.95); opacity: .8; } }

/* ---------------- lobby ---------------- */
#lobbyui {
  position: fixed; inset: 0; z-index: 8;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.lob-box {
  pointer-events: auto;
  width: min(430px, 94vw);
  padding: 16px 18px;
  background: rgba(5, 8, 24, .82);
  border: 1px solid rgba(0, 255, 255, .35);
  border-radius: 4px;
  backdrop-filter: blur(4px);
  text-align: center;
}
.kicker { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; color: #6f8fb5; margin-bottom: 8px; }
#lob-status { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: #00ffff; min-height: 20px; }
#lob-members { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 9px; border-radius: 2px;
  background: rgba(120, 160, 220, .08); border: 1px solid rgba(120, 160, 220, .2);
}
.chip .dot { width: 8px; height: 8px; border-radius: 1px; box-shadow: 0 0 6px currentColor; }
.chip.bot { opacity: .55; }
#lob-standings { margin: 10px 0 2px; font-size: 12px; }
#lob-standings .row { display: flex; justify-content: space-between; gap: 10px; line-height: 1.9; }
#lob-standings .row.winner { color: #ffe600; text-shadow: 0 0 10px rgba(255, 230, 0, .5); font-weight: 700; }
.lob-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
button.ghost {
  padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: #9fd8ff; background: transparent; cursor: pointer;
  border: 1px solid rgba(0, 255, 255, .4); border-radius: 3px;
}
button.ghost:hover { background: rgba(0, 255, 255, .12); }

/* ---------------- winner banner ---------------- */
#winbanner {
  position: fixed; left: 50%; top: 26%; transform: translateX(-50%);
  z-index: 8; text-align: center; pointer-events: none;
  font-size: clamp(26px, 6vw, 48px); font-weight: 900; letter-spacing: .1em;
  color: #ffe600; text-shadow: 0 0 30px rgba(255, 230, 0, .8);
  animation: toastin .3s ease-out;
  white-space: nowrap;
}
#winbanner small { display: block; font-size: .38em; letter-spacing: .3em; color: #9fb8d8; text-shadow: none; margin-bottom: 8px; }

/* ---------------- menu ---------------- */
#overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(8, 12, 40, .55), rgba(3, 4, 14, .88));
  transition: opacity .3s;
}
#overlay.gone { opacity: 0; pointer-events: none; }
#menu { text-align: center; padding: 24px; max-width: 94vw; }
#menu h1 {
  font-size: clamp(46px, 12vw, 90px); font-weight: 900; letter-spacing: .03em;
  color: #00ffff; text-shadow: 0 0 30px rgba(0, 255, 255, .9), 0 0 90px rgba(0, 255, 255, .4);
  line-height: .95; margin-bottom: 26px;
}
#menu h1 span { color: #ff0055; text-shadow: 0 0 24px rgba(255, 0, 85, .8); }
#name {
  display: block; width: 270px; max-width: 82vw; margin: 0 auto 13px;
  padding: 12px 14px; font-size: 16px; text-align: center; letter-spacing: .12em;
  color: #cfe7ff; background: rgba(10, 16, 40, .8);
  border: 1px solid rgba(0, 255, 255, .4); border-radius: 3px; outline: none;
  text-transform: uppercase;
}
#name:focus { border-color: #00ffff; box-shadow: 0 0 16px rgba(0, 255, 255, .35); }
.customizer {
  width: 330px; max-width: 88vw; margin: 0 auto 14px; padding: 9px 11px;
  background: rgba(5, 8, 24, .72); border: 1px solid rgba(0, 255, 255, .2); border-radius: 3px;
}
.pickrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.pickrow > span { flex: none; width: 54px; text-align: left; font: 9px ui-monospace, monospace; letter-spacing: .13em; color: #6f8fb5; }
.swatches, .optionpick { display: flex; gap: 5px; flex: 1; justify-content: flex-end; }
.swatches button {
  width: 24px; height: 20px; padding: 0; cursor: pointer; background: var(--pick);
  border: 2px solid rgba(255, 255, 255, .12); border-radius: 2px; box-shadow: 0 0 7px color-mix(in srgb, var(--pick) 55%, transparent);
}
.swatches button.selected { border-color: #fff; outline: 1px solid var(--pick); outline-offset: 2px; }
.optionpick button {
  min-width: 0; flex: 1; padding: 5px 4px; cursor: pointer;
  color: #7090b8; background: rgba(20, 34, 70, .55); border: 1px solid rgba(100, 150, 210, .2);
  border-radius: 2px; font-size: 8px; font-weight: 700; letter-spacing: .05em;
}
.optionpick button.selected { color: #00ffff; border-color: #00ffff; background: rgba(0, 255, 255, .1); box-shadow: 0 0 8px rgba(0, 255, 255, .18); }
#play {
  width: 270px; max-width: 82vw; padding: 14px; font-size: 15px; font-weight: 800;
  letter-spacing: .2em; color: #041018; cursor: pointer;
  background: #00ffff; border: 0; border-radius: 3px;
  box-shadow: 0 0 26px rgba(0, 255, 255, .55);
  transition: transform .12s, box-shadow .12s;
}
#play:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(0, 255, 255, .85); }
#play:disabled { opacity: .4; cursor: default; }
#privrow { display: flex; gap: 7px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
#roomcode {
  width: 110px; padding: 8px 10px; font-size: 12px; letter-spacing: .18em; text-align: center;
  color: #cfe7ff; background: rgba(10, 16, 40, .8); text-transform: uppercase;
  border: 1px solid rgba(0, 255, 255, .3); border-radius: 3px; outline: none;
}
#help { margin-top: 20px; font-size: 12px; color: #6f8fb5; line-height: 1.9; }
@media (hover: hover) and (pointer: fine) { .help-touch { display: none; } }
@media (hover: none) { .help-pc { display: none; } }
#connmsg { margin-top: 12px; font-size: 12px; color: #ff5252; min-height: 16px; }

#mute {
  position: fixed; right: 12px; top: 10px; width: 36px; height: 36px;
  background: rgba(5, 8, 24, .65); color: #6f8fb5; border: 1px solid rgba(0, 255, 255, .3);
  border-radius: 3px; font-size: 16px; cursor: pointer; z-index: 11;
}
#mute.off { color: #334; text-decoration: line-through; }

/* narrow screens: keep the top bar clear of the stat box */
@media (max-width: 640px) {
  #topbar { left: auto; right: 10px; transform: none; gap: 10px; padding: 5px 10px; }
  #minimap { top: 96px; }
  #roster { top: 240px; font-size: 10px; }
}

@media (max-height: 720px) {
  #menu { padding: 10px; }
  #menu h1 { font-size: 44px; margin-bottom: 12px; }
  #name { padding: 8px 12px; margin-bottom: 8px; }
  .customizer { margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px; }
  #help { margin-top: 8px; }
}