/* The CPUvCPU page (cpuvcpu.html): PvCPU's layout with a bot on each side.
   Between matches each side's settings sit over its empty well; during a
   match a bot card (botcard.css) sits under each side's Next panel, as on
   the replay page. */

body.page-cpuvcpu { --mode: var(--mino-O); }

/* The settings over the well. The frame is the well's size, so this
   scrolls when CPU-Humanish's Advanced sliders are open. */
.setup-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem;
  overflow-y: auto;
  border: 1px solid var(--mode-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg, #0b0b0d) 88%, transparent);
  backdrop-filter: blur(3px);
}

.setup-side {
  margin: 0;
  color: var(--accent);
  font-size: var(--text-min);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.setup-overlay .humanish-settings {
  margin-top: 0;
}

/* PvCPU's rank picker bleeds across its panel's padding; here, across the
   overlay's. */
.setup-overlay .rank-picker {
  margin-inline: -0.8rem;
}

/* "Match my speed" needs a player. */
.setup-overlay .slider-match {
  display: none;
}

.race-pace {
  min-height: 1em;
  margin: 0.15rem 0 0;
  font-size: var(--text-min);
}

.save-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.6rem 0;
  font-size: var(--text-min);
  font-weight: 600;
}

.save-toggle input {
  margin: 0;
  accent-color: var(--mode);
}

.save-note {
  margin: -0.3rem 0 0.6rem;
}

.save-note:empty {
  display: none;
}

.recent-matches {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.recent-matches .panel-title,
.recent-matches .hint {
  margin: 0;
}

.recent-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-min);
}

.recent-list:empty {
  display: none;
}

.recent-list a {
  display: block;
  overflow-wrap: anywhere;
}

/* Bot matches are not in the player's replay list, so the result links
   only to the replay it saved. */
#match-result-replays:not([href^="/replay?id="]) {
  display: none !important;
}

/* With the centre panel squeezed into a strip above the wells, the recent
   list waits until the match is over. */
@media (max-width: 1240px) {
  .cpuvcpu-layout .recent-matches {
    flex-basis: 100%;
    margin-top: 0;
  }

  .cpuvcpu-layout.is-running .recent-matches {
    display: none;
  }

  .cpuvcpu-layout .race-pace {
    display: none;
  }

  .cpuvcpu-layout .save-toggle,
  .cpuvcpu-layout .save-note {
    margin: 0;
  }
}