/* Horse race — scoped styles. Every rule lives under .hr-root. */

.hr-root {
  --hr-felt:    #2e6b4e;
  --hr-line:    rgba(255, 255, 255, .13);
  --hr-p0-lane: rgba(110, 160, 255, .16);   /* player with the black horses */
  --hr-p1-lane: rgba(255, 110, 110, .16);   /* player (or agent) with the red horses */
  --hr-face:    #fdfdfb;
  --hr-red:     #c23b32;
  --hr-black:   #1f1f24;
  --hr-back-1:  #3b5ba5;
  --hr-back-2:  #2b4482;
  --hr-gold:    #f2c14e;
  --hr-muted:   #6a6a72;
  --hr-btn-bg:  #f3f4f7;
  --hr-btn-ink: #23232a;
  --hr-btn-edge:#c9ccd6;
  --hr-p0-ink:  #2f62b7;
  --hr-p1-ink:  #b8392f;

  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.hr-root *, .hr-root *::before, .hr-root *::after { box-sizing: inherit; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hr-root {
    --hr-felt: #1f4f39; --hr-muted: #a9a9b3;
    --hr-btn-bg: #2c2d36; --hr-btn-ink: #ececf1; --hr-btn-edge: #464856;
    --hr-p0-ink: #8db4ff; --hr-p1-ink: #ff8f86;
  }
}
:root[data-theme="dark"] .hr-root, .hr-root.hr-dark {
  --hr-felt: #1f4f39; --hr-muted: #a9a9b3;
  --hr-btn-bg: #2c2d36; --hr-btn-ink: #ececf1; --hr-btn-edge: #464856;
  --hr-p0-ink: #8db4ff; --hr-p1-ink: #ff8f86;
}

/* Setup: opponent and player names */
.hr-root .hr-setup {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin: 0 0 12px; font-size: 14px;
}
.hr-root .hr-modes { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; padding: 0; margin: 0; }
.hr-root .hr-modes label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.hr-root .hr-modes input { accent-color: var(--hr-felt); margin: 0; }
.hr-root .hr-names { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.hr-root .hr-names label { display: inline-flex; align-items: center; gap: 6px; }
.hr-root .hr-names label[hidden] { display: none; }
.hr-root .hr-names input {
  font: inherit; font-size: 14px; width: 9.5em; padding: 4px 8px; border-radius: 6px;
  background: var(--hr-btn-bg); color: var(--hr-btn-ink); border: 1px solid var(--hr-btn-edge);
}
.hr-root .hr-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header */
.hr-root .hr-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 6px 16px; margin: 0 0 10px;
}
.hr-root .hr-sides { font-weight: 600; }
.hr-root .hr-p0 { color: var(--hr-p0-ink); }
.hr-root .hr-p1 { color: var(--hr-p1-ink); }
.hr-root .hr-vs { color: var(--hr-muted); font-weight: 400; margin: 0 4px; }
.hr-root .hr-score { font-variant-numeric: tabular-nums; color: var(--hr-muted); }

/* Board: a track row and four lanes, each FINISH + 1 = 9 cells wide */
.hr-root .hr-board {
  max-width: 640px; margin: 0 auto; padding: 6px;
  background: var(--hr-felt); border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.hr-root .hr-track, .hr-root .hr-cells {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
}
.hr-root .hr-cell, .hr-root .hr-cells > div {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.hr-root .hr-cells > div { border-left: 1px solid var(--hr-line); }
.hr-root .hr-cells > div:first-child { border-left: none; }
.hr-root .hr-cells > div:last-child {
  border-left: 2px dashed rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .06);
}
.hr-root .hr-tag {
  font-size: clamp(9px, 1.9vw, 12px); color: rgba(255, 255, 255, .8);
  text-transform: uppercase; letter-spacing: .04em;
}
.hr-root .hr-lane {
  position: relative; border-top: 1px solid var(--hr-line);
}
.hr-root .hr-lane-p0 { background: var(--hr-p0-lane); }
.hr-root .hr-lane-p1 { background: var(--hr-p1-lane); }

/* Cards */
.hr-root .hr-face, .hr-root .hr-back, .hr-root .hr-horse {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64%; aspect-ratio: 5 / 7; border-radius: 4px;
  font-size: clamp(9px, 2.3vw, 15px); line-height: 1.05;
}
.hr-root .hr-face, .hr-root .hr-horse {
  background: var(--hr-face); color: var(--hr-black);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.hr-root .hr-face b, .hr-root .hr-horse b { font-weight: 700; }
.hr-root .hr-face i, .hr-root .hr-horse i { font-style: normal; }
.hr-root .hr-red { color: var(--hr-red); }
.hr-root .hr-back {
  background: repeating-linear-gradient(45deg, var(--hr-back-1) 0 4px, var(--hr-back-2) 4px 8px);
  border: 2px solid var(--hr-face);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.hr-root .hr-cell.hr-hot .hr-face { box-shadow: 0 0 0 3px var(--hr-gold), 0 0 12px var(--hr-gold); }

/* Horses sit in their lane at cell --hr-pos */
.hr-root .hr-horse {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: calc(100% / 9 * .64);
  left: calc((var(--hr-pos, 0) + .18) * 100% / 9);
  transition: left .35s ease, box-shadow .2s;
  border: none; padding: 0; font-family: inherit;
}
.hr-root .hr-horse.hr-red { color: var(--hr-red); }
.hr-root .hr-horse:disabled { cursor: default; }
.hr-root .hr-horse.hr-kicker { box-shadow: 0 0 0 3px var(--hr-gold), 0 0 12px var(--hr-gold); }
.hr-root .hr-horse.hr-target { cursor: pointer; outline: 2px dashed var(--hr-gold); outline-offset: 2px; }
.hr-root .hr-horse.hr-target:hover { transform: translateY(calc(-50% - 3px)); }

/* Controls */
.hr-root .hr-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px;
}
.hr-root .hr-btn {
  font: inherit; font-size: 14px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  background: var(--hr-btn-bg); color: var(--hr-btn-ink); border: 1px solid var(--hr-btn-edge);
}
.hr-root .hr-btn:hover:not(:disabled) { border-color: var(--hr-muted); }
.hr-root .hr-btn:disabled { opacity: .45; cursor: default; }
.hr-root .hr-btn.hr-primary { background: var(--hr-felt); color: #fff; border-color: transparent; }
.hr-root .hr-pile {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--hr-muted); font-variant-numeric: tabular-nums;
}
.hr-root .hr-pile .hr-face { width: 26px; font-size: 11px; }

.hr-root .hr-unseen {
  margin: 0 0 6px; font-size: 13px; color: var(--hr-muted); text-align: left;
  font-variant-numeric: tabular-nums; cursor: help;
}
.hr-root .hr-unseen .hr-dot { margin: 0 6px; opacity: .6; }
.hr-root .hr-status { min-height: 1.5em; margin: 6px 0; text-align: left; }
.hr-root .hr-status .hr-face, .hr-root .hr-log .hr-face, .hr-root .hr-choice .hr-face {
  width: auto; aspect-ratio: auto; flex-direction: row; gap: 1px;
  padding: 0 4px; font-size: .9em; vertical-align: 1px;
}
.hr-root .hr-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.hr-root .hr-choice[hidden] { display: none; }

.hr-root .hr-log { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.hr-root .hr-log li { margin: 2px 0; color: var(--hr-muted); }
.hr-root .hr-log li:first-child { color: inherit; }
.hr-root .hr-est { opacity: .8; }

/* Bare suit symbols, here and in the post text around the game (hence not
   scoped). Black suits use a light ink on dark backgrounds. */
.hr-suit { color: #1f1f24; }
.hr-suit.hr-red { color: #c23b32; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hr-suit { color: #ececf1; }
  :root:not([data-theme="light"]) .hr-suit.hr-red { color: #ff7d73; }
}
:root[data-theme="dark"] .hr-suit { color: #ececf1; }
:root[data-theme="dark"] .hr-suit.hr-red { color: #ff7d73; }