.fall-race {
  --well: #162a37;
  --well-text: #ebf2ec;
  --well-muted: #bfd1d4;
  --own-accent: #e9c875;
  min-width: 0;
  border-radius: 0.7rem;
}
.fall-top,
.fall-caption,
.fall-counts,
.fall-counts > span,
.fall-controls {
  display: flex;
  align-items: center;
}
.fall-top {
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}
.fall-top h3 {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.4rem);
}
.fall-clock {
  white-space: nowrap;
  font:
    650 1rem/1.25 ui-monospace,
    monospace;
  color: var(--sea);
}
.fall-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.45rem, 1.4vw, 1rem);
}
.fall-board {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 0.55rem;
  color: var(--well-text);
  background: var(--well);
  border: 2px solid var(--well);
  border-radius: 0.6rem;
}
.fall-board[data-own='true'] {
  border-color: var(--own-accent);
}
.fall-caption {
  min-width: 0;
  gap: 0.4rem;
  justify-content: space-between;
  margin: 0 0 0.3rem;
}
.fall-caption strong {
  font-size: 0.94rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fall-you {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--own-accent);
}
.play .fall-race canvas[data-board] {
  display: block;
  margin-inline: auto;
  height: auto;
  width: min(100%, 20vh, 230px);
}
.fall-counts {
  min-width: 0;
  justify-content: space-between;
  gap: 0.25rem;
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: var(--well-muted);
}
.fall-counts > span {
  gap: 0.25rem;
}
.fall-counts strong {
  color: var(--well-text);
  font:
    650 0.95rem/1 ui-monospace,
    monospace;
}
.play .fall-counts canvas {
  width: 1.8rem;
  height: 1rem;
}
.fall-board p.fall-player-status {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--well-muted);
}
.fall-board[data-out='true'] p.fall-player-status {
  color: var(--own-accent);
  font-weight: 650;
}
.fall-controls {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0.45rem;
}
.fall-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 42px;
  padding: 0.35rem 0.65rem;
  touch-action: none;
  user-select: none;
}
.fall-controls kbd {
  font-family: ui-monospace, monospace;
  font-size: 1.05rem;
}
.fall-controls .pressed {
  background: var(--sea);
  color: var(--surface);
}
.fall-race .fall-help {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.25rem 0;
}
.fall-error:empty {
  display: none;
}
@media (max-width: 740px) {
  .fall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .fall-board {
    padding: 0.35rem 0.45rem;
  }
  .play .fall-race canvas[data-board] {
    width: min(100%, 12.8vh, 130px);
    width: min(100%, 12.8svh, 130px);
  }
  .fall-counts {
    flex-wrap: wrap;
  }
  .fall-controls {
    gap: 0.28rem;
  }
  .fall-controls button {
    flex: 1 0 auto;
    font-size: 0.78rem;
    padding: 0.25rem 0.4rem;
  }
}
@media (forced-colors: active) {
  .fall-board {
    border-color: CanvasText;
  }
  .fall-board[data-own='true'] {
    border: 3px double Highlight;
  }
}
.fall-race {
  --well:#161930;--well-text:#fffaf0;--well-muted:#d0d1e3;--own-accent:#aaffcf;
  color:#fff9eb;padding:clamp(8px,1.5vw,22px);border:2px solid #514983;border-radius:1.1rem;
  background-color:#16142d;
  background-image:radial-gradient(ellipse at 85% 0%,#57367996,transparent 55%),repeating-linear-gradient(125deg,transparent 0 38px,#ffffff04 39px 40px);
  box-shadow:inset 0 1px #ffffff29,0 5px 0 #252142;
}
.fall-top h3 {font-weight:850;letter-spacing:-.035em;color:#fffae9}
.fall-top h3::before {content:"";display:inline-block;vertical-align:middle;width:.68em;height:.68em;background:#c994ff;box-shadow:.36em -.32em #c994ff;margin-inline-end:.8em}
.fall-clock {background:#090b19;color:#e6ff82;border:1px solid #68667c;border-radius:.45rem;padding:.3rem .75rem;font-size:clamp(.85rem,1.6vw,1.3rem)}
.fall-board {--seat:#b6a5ff;background:linear-gradient(145deg,#292c49,#17182d);border:1px solid #5e5c79;border-top:4px solid var(--seat);box-shadow:0 3px #090a17}
.fall-board:nth-child(2) {--seat:#91ceff}
.fall-board:nth-child(3) {--seat:#e7a4ed}
.fall-board:nth-child(4) {--seat:#f2c881}
.fall-board[data-own="true"] {--seat:#aaffcf;border-color:var(--seat)}
.fall-caption {color:var(--seat);padding-block:.1rem .35rem}
.fall-you {padding:0 .4rem;background:var(--own-accent);color:#13221d;border-radius:1rem}
.fall-race canvas[data-board] {outline:1px solid #55536f;box-shadow:0 0 0 3px #0a0b17}
.fall-counts {padding-block:.25rem}
.fall-counts strong {font-size:1.2rem}
.fall-controls button {color:#f6f3ff;background:#33324f;border-color:#6b6887;box-shadow:0 2px 0 #0a0b19}
.fall-controls button:hover:enabled,.fall-controls button.pressed {color:#1b2331;background:#b7edee}
.fall-race .fall-help {color:#cccbdc}
@media(max-width:740px) {
  .fall-top {margin-bottom:.45rem}.fall-caption{padding:0}.fall-counts{padding:0}.fall-race{padding:.43rem}
}