:root {
  --bg: #0d0b14;
  --panel: #171426;
  --panel-2: #211d35;
  --line: #322c4d;
  --ink: #e9e6f5;
  --dim: #8d86ad;
  --accent: #ffd166;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  /* subtle scanline wash so the pixel art sits on something, not a void */
  background-image:
    radial-gradient(1200px 600px at 50% -10%, #241f3d 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px);
}

.hidden { display: none !important; }

#stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
}

/* --- HUD ----------------------------------------------------------------- */

#hud {
  width: min(100%, 1400px);
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 11px;
}

.brand { font-weight: 700; letter-spacing: 2px; color: var(--accent); }
.brand span { color: var(--ink); opacity: .75; }

.vitals { display: flex; flex-direction: column; gap: 3px; }
.hp { display: flex; align-items: center; gap: 8px; }
.hpbar {
  width: 120px; height: 10px;
  background: #0c0a16;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
#hpFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #7ee081, #b6f09c);
  transition: width .12s linear;
}
#hpText { color: var(--dim); min-width: 34px; }

.hpbar.stam { height: 4px; }
#stamFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ffd60a, #ffe985);
}
/* ran the tank dry — has to recover before sprint will engage again */
#stamina.winded #stamFill { background: linear-gradient(90deg, #ff8f6b, #ffb38a); }

/* guard has its own pool, and its own colour so it never reads as stamina */
#guardFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #3ce2ff, #9beeff);
}
#guard.broken #guardFill { background: linear-gradient(90deg, #ff8f6b, #ffb38a); }

/* --- ability icon (kick) -------------------------------------------------
   A round button with a radial wipe over it. The wipe is the cooldown, so the
   state reads at a glance from the same place your eyes already are. */
.ability {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #14112a;
  border: 1px solid var(--line);
  color: #6f6890;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.ability svg { width: 20px; height: 20px; fill: currentColor; }
.ability svg .line { stroke: currentColor; stroke-width: 1.2; fill: none; opacity: .8; }

/* The unfilled sweep, painted from --cd (0 = just fired, 1 = ready). */
.ability .cd {
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: conic-gradient(rgba(8,6,18,.82) calc(var(--cd, 1) * 360deg), rgba(8,6,18,.82) 0);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%);
  mask: radial-gradient(circle, transparent 34%, #000 35%);
  opacity: 1;
  pointer-events: none;
}
/* conic-gradient can't express "everything after the stop" in one colour list,
   so the remaining arc is drawn as a second, rotated layer. */
.ability .cd {
  background: conic-gradient(transparent 0 calc(var(--cd, 1) * 360deg), rgba(6,4,14,.85) 0);
}

.ability .cdText {
  position: absolute; right: -2px; bottom: -4px;
  font-size: 9px; font-weight: 700;
  color: #ffd166;
  text-shadow: 0 1px 2px #000;
}
.ability kbd {
  position: absolute; left: -3px; bottom: -5px;
  font-size: 8px; padding: 0 3px;
}
.ability.ready {
  color: #ffe9a8;
  border-color: rgba(255, 214, 102, .75);
  box-shadow: 0 0 10px rgba(255, 183, 3, .35), inset 0 0 8px rgba(255, 183, 3, .2);
}
.ability.ready .cdText { display: none; }

/* The grab icon while someone is actually up there: the dial is now the carry
   clock running out, so it reads hot rather than "ready". */
#grab.holding {
  color: #ffd1dc;
  border-color: rgba(255, 143, 163, .85);
  box-shadow: 0 0 12px rgba(255, 90, 122, .45), inset 0 0 8px rgba(255, 90, 122, .25);
}
#grab.holding .cdText { display: block; color: #ff8fa3; }

/* The corner board: a real table so the columns line up whatever the names are,
   with a header saying which number is which (kills / deaths / ping). */
#score { border-collapse: collapse; margin: 0 0 0 auto; }
#score th {
  font-weight: normal; font-size: 8px; letter-spacing: 1px;
  color: var(--dim); text-align: right; padding: 0 0 3px 12px;
}
#score th.n, #score th.rank { text-align: left; }
#score th.rank { padding-left: 0; }
#score td { padding: 1px 0 1px 12px; text-align: right; opacity: .8; }
#score td.rank { padding-left: 0; text-align: left; color: var(--dim); }
#score td.n {
  padding-left: 0; text-align: left;
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#score tr.me td { opacity: 1; text-shadow: 0 0 12px rgba(255,209,102,.5); }
#score i {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block; margin-right: 6px;
}
#score td.k { color: var(--accent); }
#score td.d, #score td.p { color: var(--dim); font-size: 10px; }

/* grid-column 5: the arena/target/ping strip and its buttons belong with the
   score in the right-hand corner, not stranded under the brand on the left */
.meta {
  grid-column: 5; justify-self: end;
  display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 10px;
}
.bots { display: flex; gap: 4px; }
.bots button {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px;
  padding: 4px 7px;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.bots button:hover { border-color: var(--accent); color: var(--accent); }
/* bots are dimmed on the scoreboard so you can tell who is a person */
#score tr.bot td { opacity: .55; }

/* --- board --------------------------------------------------------------- */

/* overflow:hidden because the respawn focus zooms the canvas past its own edges
   — without it the magnified arena spills over the HUD and the key legend */
#board { position: relative; line-height: 0; overflow: hidden; border-radius: 6px; }

#game {
  /* the cursor is drawn inside the canvas instead — see drawReticle */
  cursor: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a0812;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 0 6px rgba(255,255,255,.02);
  display: block;
}

.banner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  font-size: 13px; letter-spacing: 3px;
  color: var(--ink);
  background: rgba(10, 8, 20, .55);
  border-radius: 6px;
  line-height: 1.6;
}
.banner.big { font-size: 22px; background: rgba(10, 8, 20, .78); }
#resultText { color: var(--accent); }

/* --- the big scoreboard --------------------------------------------------
   Shown twice from one renderer: at the end of a match under the winner's name,
   and any time you hold Tab mid-fight. Ranked, with a header row so the three
   numbers (kills, deaths, ping) are never a guess. */
#resultBoard, #scoreBoardFull {
  border-collapse: collapse;
  margin: 0;
  min-width: 300px;
  font-size: 12px; letter-spacing: 2px;
  background: rgba(24, 20, 44, .8);
  border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden;
}
#resultBoard th, #scoreBoardFull th {
  font-weight: normal; font-size: 9px; letter-spacing: 2px;
  color: var(--dim); text-align: right;
  padding: 8px 14px 6px; border-bottom: 1px solid var(--line);
}
#resultBoard th.n, #scoreBoardFull th.n { text-align: left; }
#resultBoard th.rank, #scoreBoardFull th.rank { text-align: left; padding-right: 0; }
#resultBoard td, #scoreBoardFull td { padding: 4px 14px; text-align: right; opacity: .75; }
#resultBoard td.n, #scoreBoardFull td.n {
  text-align: left; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#resultBoard td.rank, #scoreBoardFull td.rank {
  text-align: left; padding-right: 0;
  color: var(--dim); font-size: 10px;
}
#resultBoard tr.won td, #scoreBoardFull tr.won td { opacity: 1; color: var(--accent); }
#resultBoard tr.me td, #scoreBoardFull tr.me td { opacity: 1; }
#resultBoard i, #scoreBoardFull i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
#resultBoard td.k, #scoreBoardFull td.k { color: var(--accent); }
#resultBoard tr.won td.k, #scoreBoardFull tr.won td.k { color: inherit; }
#resultBoard td.d, #resultBoard td.p,
#scoreBoardFull td.d, #scoreBoardFull td.p { color: var(--dim); font-size: 10px; }

/* the Tab panel: the table on a dimmed arena, nothing else to read */
#scores { gap: 10px; background: rgba(10, 8, 20, .68); }
.scoresTitle {
  margin: 0;
  font-size: 10px; letter-spacing: 3px; color: var(--ink);
}

.banner button {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 2px;
  padding: 10px 18px;
  color: #201a06;
  background: var(--accent);
  border: 0; border-radius: 6px;
  cursor: pointer;
}
.banner button:hover { filter: brightness(1.1); }

/* --- the between-match map vote -----------------------------------------
   One card per arena. The card is the vote: its count and a marker for your own
   pick are on it, so there is nothing else to read. */
#mapVote { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.voteTitle {
  margin: 0;
  font-size: 10px; letter-spacing: 3px;
  color: var(--dim);
}
#mapChoices, #homeMaps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#mapChoices .mapChoice, #homeMaps .mapChoice {
  position: relative;
  min-width: 132px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px;
  font-family: var(--mono);
  color: var(--ink);
  background: rgba(24, 20, 44, .9);
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer;
  letter-spacing: 1px;
  text-align: left;
}
#mapChoices .mapChoice:hover, #homeMaps .mapChoice:hover { border-color: rgba(255, 214, 102, .6); }
#mapChoices .mapChoice.mine, #homeMaps .mapChoice.mine {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 183, 3, .3), inset 0 0 10px rgba(255, 183, 3, .12);
}
#mapChoices .mapChoice .mapTitle, #homeMaps .mapChoice .mapTitle { font-size: 11px; letter-spacing: 2px; }
#mapChoices .mapChoice .mapBlurb, #homeMaps .mapChoice .mapBlurb {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0;
  color: var(--dim);
}
#mapChoices .mapChoice .mapTally, #homeMaps .mapChoice .mapTally {
  position: absolute; top: 6px; right: 8px;
  font-size: 11px; color: var(--accent);
}
/* the home screen reuses the same cards, one line tighter */
#homeMaps .mapChoice { min-width: 118px; padding: 8px 12px; }
.mapHint { color: var(--dim); font-size: 10px; text-align: center; margin-top: -2px; }

/* shown in place of the arena picker while a match is already running */
/* :not(.hidden), or this id would out-specify .hidden and never come down */
#homeArena:not(.hidden) { display: flex; flex-direction: column; gap: 6px; }
#homeBusy {
  margin: 0;
  padding: 10px 14px;
  font-size: 11px; letter-spacing: 1px; text-align: center;
  color: var(--ink);
  background: rgba(24, 20, 44, .6);
  border: 1px solid var(--line); border-radius: 8px;
}

#voteClock { margin: 0; font-size: 10px; letter-spacing: 2px; color: var(--dim); }

#feed {
  position: absolute; top: 8px; right: 8px;
  list-style: none; margin: 0; padding: 0;
  text-align: right;
  font-size: 10px; line-height: 1.8;
  color: var(--dim);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

#keys { display: flex; gap: 20px; font-size: 10px; color: var(--dim); }
kbd {
  display: inline-block;
  padding: 2px 5px; margin: 0 1px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ink);
  font-family: inherit;
}

/* --- join overlay -------------------------------------------------------- */

#overlay {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(8, 6, 14, .88);
  backdrop-filter: blur(6px);
  z-index: 10;
}

.panel {
  width: min(92vw, 400px);
  padding: 28px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

.panel h1 {
  margin: 0;
  font-size: 26px; letter-spacing: 4px;
  color: var(--accent);
}
.panel h1 span { color: var(--ink); }
.tag { margin: 8px 0 22px; font-size: 11px; color: var(--dim); line-height: 1.7; }

.loadtrack {
  height: 6px; background: #0c0a16;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
#loadBar { height: 100%; width: 0; background: var(--accent); transition: width .15s; }
#loading small { display: block; margin-top: 8px; color: var(--dim); font-size: 10px; }

form label {
  display: block;
  margin: 14px 0 6px;
  font-size: 10px; letter-spacing: 1px; color: var(--dim);
}

#nameInput {
  width: 100%; padding: 10px 12px;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink);
  background: #0c0a16;
  border: 1px solid var(--line); border-radius: 6px;
}
#nameInput:focus { outline: none; border-color: var(--accent); }

/* pixel sprites everywhere in the overlay stay crisp when scaled up */
#homeCanvas, #builderCanvas, .thumb canvas { image-rendering: pixelated; }

/* --- home screen --- */
#home label { display: block; margin: 14px 0 6px; font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.homePreview { display: grid; place-items: center; margin: 8px 0 4px;
  min-height: 190px; background: #0c0a16; border: 1px solid var(--line); border-radius: 12px; }
#homeCanvas { width: 84px; height: 178px; }
.homeBtns { display: grid; gap: 8px; margin-top: 18px; }

button.primary {
  width: 100%; padding: 13px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  color: #201a06; background: var(--accent);
  border: 0; border-radius: 8px; cursor: pointer;
}
button.primary:hover { filter: brightness(1.08); }
button.ghost {
  width: 100%; padding: 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--ink); background: #0c0a16;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
button.ghost:hover { border-color: var(--accent); color: var(--accent); }
button.ghost.small { padding: 8px; font-size: 10px; }

/* --- builder --- */
.panel.wide { width: min(96vw, 860px); }
.builderHead { margin-bottom: 16px; }
.eyebrow2 { margin: 0 0 4px; font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--accent); }
.builderTitle { margin: 0; font-size: 22px; letter-spacing: 1px; color: var(--ink); }
.builderBody { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
@media (max-width: 640px) { .builderBody { grid-template-columns: 1fr; } }

.builderPreview {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #0c0a16; border: 1px solid var(--line); border-radius: 12px; padding: 16px 14px;
}
.plabel, .hint { font: 10px/1.6 var(--mono); letter-spacing: 1px; color: var(--dim); }
.pstage { display: flex; align-items: center; gap: 4px; }
#builderCanvas { width: 100px; height: 212px; }
.rot { background: none; border: 0; color: var(--dim); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px; }
.rot:hover { color: var(--ink); }

.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tab {
  padding: 9px 3px; font: 600 10px/1 var(--mono); letter-spacing: .5px;
  color: var(--dim); background: #0c0a16;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.tab:hover { border-color: #4b4374; }
.tab.on { background: var(--accent); color: #201a06; border-color: var(--accent); }

.grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin: 14px 0; max-height: 264px; overflow-y: auto; padding: 2px;
}
.thumb {
  display: grid; place-items: center; padding: 6px 2px;
  background: #0c0a16; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.thumb:hover { border-color: #4b4374; }
.thumb.on { border-color: var(--accent); background: #17122a; }
.thumb canvas { width: 40px; height: 85px; }
.thumb.none { font: 9px/1.2 var(--mono); color: var(--dim); text-align: center; min-height: 97px; align-content: center; }

.colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 26px; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%;
  background: #333; border: 1px solid rgba(255,255,255,.25); cursor: pointer;
}
.swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint { margin: 10px 0 0; }

.builderBar { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.builderBar button { width: auto; padding: 11px 24px; }

#leaveBtn {
  font-family: var(--mono); font-size: 10px;
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px; cursor: pointer;
}
#leaveBtn:hover { color: var(--ink); border-color: var(--accent); }

.credit { display: block; margin-top: 18px; font-size: 9px; color: #5f5980; line-height: 1.7; }

@media (max-width: 720px) {
  #hud { grid-template-columns: 1fr; justify-items: center; }
  #keys { display: none; }
}