/* Styling for the six-arena / six-player additions: the mode picker, the map
   chips' size line, team colouring on the scorebar and the scoreboard's team
   blocks. Kept out of style.css so the two files can be edited side by side. */

/* ---- menu: match mode ------------------------------------------------ */
.moderow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.modechip {
  display: block;
  text-align: left;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(150, 170, 200, .22);
  background: rgba(18, 24, 34, .72);
  color: #cdd6e4;
  cursor: pointer;
  font: inherit;
  transition: border-color .12s, background .12s, transform .12s;
}

.modechip b {
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  color: #eaf0f8;
}

.modechip em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: #8e9bb0;
}

.modechip:hover { border-color: rgba(245, 185, 59, .5); transform: translateY(-1px); }

.modechip.sel {
  border-color: #f5b93b;
  background: rgba(245, 185, 59, .14);
  box-shadow: inset 0 0 0 1px rgba(245, 185, 59, .35);
}

/* ---- menu: arena size line ------------------------------------------- */
.mapchip u {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .08em;
  text-decoration: none;
  color: #7d8798;
}

/* ---- HUD: scorebar sides --------------------------------------------- */
#scorebar .team { --c: #8a93a6; }
#scorebar .team .tname { color: var(--c); }
#scorebar .team .tscore { color: var(--c); }

#scorebar .team.mine .tname::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 2px;
  background: var(--c);
  opacity: .8;
}

/* ---- scoreboard: team blocks ----------------------------------------- */
#scoreboard tr.side td {
  padding-top: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  color: #aeb9c9;
  border-bottom: 1px solid rgba(150, 170, 200, .18);
}

#scoreboard tr.side.t0 td:first-child { color: #3fa9ff; }
#scoreboard tr.side.t1 td:first-child { color: #ff5340; }
#scoreboard tr.t0 td:first-child { border-left: 3px solid #3fa9ff; padding-left: 8px; }
#scoreboard tr.t1 td:first-child { border-left: 3px solid #ff5340; padding-left: 8px; }
#scoreboard tr.p2 td:first-child { border-left: 3px solid #48d97a; padding-left: 8px; }
#scoreboard tr.p3 td:first-child { border-left: 3px solid #f5b93b; padding-left: 8px; }
#scoreboard tr.p4 td:first-child { border-left: 3px solid #b98cff; padding-left: 8px; }
#scoreboard tr.p5 td:first-child { border-left: 3px solid #22d3d3; padding-left: 8px; }