/* ---------- map previews ---------- */
.map-cell {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.map-thumb {
  width: 66px;
  height: 39px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--line-2);
}
.stats-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}
.stat-row {
  cursor: pointer;
}
.stat-row.open td {
  background: var(--panel-2);
}
.stat-caret {
  flex: 0 0 auto;
  width: 12px;
  color: var(--ink-3);
  font-size: 11px;
}
.stat-detail td {
  padding: 0 0 14px;
  background: var(--panel-2);
}
.stat-detail .match-teams {
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin: 0 14px;
  background: var(--panel);
}
.result-win {
  color: var(--ok-ink);
  font-weight: 600;
}
.result-loss {
  color: var(--ink-3);
}
.kda {
  color: var(--ink-2);
}
.kda b {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- maps pane ---------- */
/* One card per pool, each scrolling on its own. Custom holds 44 entries and Ranked 21;
   a column per pool at full length would push the gallery off the bottom of the page
   and make the shortest list look like the important one. */
.pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(202px, 1fr));
  gap: 16px;
  align-items: start;
}
.pool-card {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* The card is dashed, not faded: FriendlyNoob is in the data and in CardMapList, and
   nothing reads it. Greying it out would read as "empty", which it isn't. */
.pool-card.unused {
  border-style: dashed;
  background: transparent;
}
.pool-head {
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.pool-card.unused .pool-head {
  border-bottom-style: dashed;
}
.pool-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.pool-n {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
/* Two lines' worth whether it needs them or not: Friendly names three modes and wraps,
   and without the reserve its list starts lower than the four beside it, so no row
   lines up with any other. */
.pool-modes {
  margin-top: 4px;
  min-height: 2.7em;
  line-height: 1.35;
  font-size: 12.5px;
  color: var(--ink-3);
}
.pool-list {
  max-height: 296px;
  overflow-y: auto;
  padding: 8px 14px 10px;
}
/* A list that scrolls has to look like one. The header says 44 and a dozen rows fit;
   a hard cut at the card's edge reads as the end of the list, not the top of it. The
   class is set by measurement in renderPools and cleared at the bottom of the scroll. */
.pool-card.more .pool-list {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.pool-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 2px 0;
}
/* Only the name is the target — the row is short and the rest of it is text you may
   want to select, the same reason the player row isn't clickable. */
.pool-map {
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  background: none;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pool-map:hover {
  color: var(--ink);
  text-decoration: underline;
}
.pool-row.missing .pool-map {
  color: var(--alarm-ink);
}
.pool-row.missing .pool-map:hover {
  color: var(--alarm-ink);
  text-decoration: none;
  cursor: default;
}
.pool-tag {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--alarm-ink);
}
.pool-note {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
/* Sits above the pools because it is about all of them at once. */
.pool-warn {
  margin-bottom: 14px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--alarm-ink);
  background: color-mix(in srgb, var(--alarm) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--alarm) 34%, transparent);
  border-radius: var(--r);
}
.pool-warn:empty {
  display: none;
}
.pool-warn code {
  font-family: var(--mono);
  font-size: 12.5px;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}
.map-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
/* The one thing on this page that is worth looking at rather than reading, so it gets
   the tile's full width and its own aspect ratio rather than a thumbnail's. */
.map-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
/* Four maps have no client sprite behind them — three Shield Capture ports and the
   testing map. An empty box of the same size keeps the grid on its rows. */
.map-shot.none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.map-body {
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.map-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.map-key {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.map-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
.map-pool-hint {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font: 600 9.5px var(--mono);
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-3);
}
.map-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
/* Same chip as a ban penalty carries, for the same reason: a short fact about the row,
   not a state you act on. Pools get no colour of their own — three more hues on a page
   that already has a role ramp would be three more things to learn. */
.map-tag {
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink-2);
}
.map-tag.none {
  border-style: dashed;
  color: var(--ink-3);
}
.map-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.map-toolbar[hidden] {
  display: none;
}
.map-toolbar .pool-controls {
  margin-left: auto;
}
#mapPoolChips {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
#mapPoolChips .chip {
  margin: 0;
}
.pool-edit-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.pool-edit-bar.open {
  display: flex;
}
.pool-edit-title {
  font-size: 13.5px;
}
.pool-map-count {
  margin-left: 7px;
  font: 500 12px var(--mono);
  color: var(--ink-2);
}
.pool-edit-status {
  margin-top: 5px;
  font: 12px var(--mono);
  color: var(--ink-2);
}
.pool-edit-status.pending {
  color: var(--signal);
}
.pool-edit-status.saved {
  color: var(--ok-ink);
}
.pool-change-toggle {
  padding: 3px 7px;
  border-color: transparent;
  color: var(--ink-2);
  background: transparent;
  font-size: 12px;
}
.pool-change-list {
  display: grid;
  gap: 3px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  font: 12px var(--mono);
}
.pool-change-list .removed {
  color: var(--alarm-ink);
}
.pool-change-list .added {
  color: var(--ok-ink);
}
.pool-edit-actions,
.map-edit-actions {
  display: flex;
  gap: 7px;
}
.map-edit-actions {
  margin-top: auto;
  padding-top: 8px;
}
.map-title .map-meta {
  margin-top: 5px;
}
.map-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.map-download-hint {
  grid-column: 1 / -1;
  font: 600 9.5px var(--mono);
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-3);
}
.map-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 4px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink-2);
  background: var(--panel-2);
  font: 600 11px var(--mono);
  letter-spacing: 0.015em;
  text-decoration: none;
}
.map-download:hover {
  color: var(--ink);
  background: var(--panel-3);
  border-color: var(--ink-3);
}
.map-tile.pool-included {
  border: 2px solid var(--line-2);
}
.map-tile.pool-excluded {
  border: 2px solid var(--line);
}
.map-tag.active {
  color: white;
  background: rgb(255 255 255 / 11%);
  border-color: rgb(255 255 255 / 39%);
}
.map-tag.inactive {
  color: #aab3bf;
  background: #1a1f26;
  border-color: #505a68;
  border-style: dashed;
}
.map-state-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-top: 1px solid var(--line);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.025em;
}
.map-state-footer.included {
  color: var(--ink);
  background: color-mix(in srgb, var(--role-mod) 32%, var(--panel-2));
  border-top-color: color-mix(in srgb, var(--role-mod) 72%, var(--line));
}
.map-state-footer.excluded,
.map-state-footer.unused {
  color: var(--ink-3);
  background: var(--panel-2);
}
.map-order-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-right: 7px;
  border-right: 1px solid color-mix(in srgb, currentColor 34%, transparent);
}
.map-order-step,
.map-order-value {
  display: grid;
  place-items: center;
  height: 18px;
  padding: 0;
  color: inherit;
  background: transparent;
  font: 700 10px var(--mono);
}
.map-order-step {
  width: 18px;
  border-color: transparent;
  font-size: 12px;
}
.map-order-step:disabled {
  opacity: 0.3;
}
.map-membership-action {
  margin-left: auto;
  padding: 2px 7px;
  border-color: color-mix(in srgb, currentColor 45%, var(--line));
  font: 10.5px var(--mono);
  color: inherit;
  background: transparent;
}
.map-pool-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
  font: 600 12px var(--mono);
  color: var(--ink-2);
}
.map-pool-divider::before,
.map-pool-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}