/* The Relay — practice mode's ground.
 *
 * The boards it mounts are the real ones, drawn by the real renderers from
 * theme.js, so the page around them has to be the ground they were drawn for.
 * A neon board on a cream page would be teaching a player what the game does
 * not look like.
 *
 * Only the chrome is here. The board frame itself is board.css, shared with
 * the match, so a board in practice is the same board in a race.
 */

body.explore-dark {
  background: var(--gm-bg);
  color: var(--gm-text);
}
body.explore-dark .topbar { background: var(--gm-panel-2); }

body.explore-dark .card,
body.explore-dark #puzzle-card,
body.explore-dark #result-card {
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-lg);
  background: var(--gm-panel);
  box-shadow: none;
  color: var(--gm-text);
}

body.explore-dark h1,
body.explore-dark h2,
body.explore-dark .prompt { color: var(--gm-text); }
body.explore-dark .sub,
body.explore-dark .muted { color: var(--gm-muted); }

/* The tab strip and the board-kind switches: the two controls that decide
   which board you are looking at, so they read as chosen rather than pressed. */
body.explore-dark .rl-tabs button,
body.explore-dark .kind-row button,
body.explore-dark .rl-page-body .kind-row .mini-btn,
body.explore-dark .mini-btn {
  border: 1px solid var(--gm-line);
  background: rgba(122, 140, 255, 0.1);
  color: var(--gm-text);
}
body.explore-dark .rl-tabs button:hover,
body.explore-dark .kind-row button:hover,
body.explore-dark .mini-btn:hover { background: rgba(122, 140, 255, 0.24); }
body.explore-dark .rl-tabs button.active,
body.explore-dark .kind-row button.active {
  border-color: var(--gm-cyan);
  background: rgba(32, 212, 231, 0.16);
  color: var(--gm-cyan);
}

body.explore-dark .solve-time { color: var(--gm-yellow); }
body.explore-dark a { color: var(--gm-cyan); }

body.explore-dark .btn {
  border: 0;
  background: linear-gradient(180deg, #ffd85a, var(--gm-yellow));
  color: #241a05;
  box-shadow: none;
}

body.explore-dark input,
body.explore-dark select {
  border: 1px solid var(--gm-line);
  background: var(--gm-bg);
  color: var(--gm-text);
}

/* --- link duels (docs/DUEL_ROOMS.md) ------------------------------------
 *
 * A duel is not a practice board, so its picker does not look like one: it
 * sits above the solo tabs, in the duel palette, and clicking it leaves the
 * page rather than loading a board into it.
 */

.rl-duels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--gm-line-soft, rgba(255, 255, 255, 0.08));
}

.rl-solo-label { display: inline-block; margin: 0 0 8px; }

#duel-tabs button {
  border-color: rgba(138, 77, 255, 0.5);
  background: rgba(138, 77, 255, 0.14);
}
#duel-tabs button:hover:not(:disabled) { background: rgba(138, 77, 255, 0.3); }
#duel-tabs button:disabled { opacity: 0.5; cursor: progress; }