body.proto {
  background: var(--cream);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
}

.wait {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  margin: 0 8px 8px;
}

.person,
.rider {
  appearance: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.person svg,
.rider svg {
  display: block;
  width: 26px;
  height: 46px;
}

.stalls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 0 4px 8px;
}

.stall {
  background: var(--paper-light);
  border: 1px solid var(--ink);
  padding: 6px 4px 8px;
}

.stall.jam {
  box-shadow: 2px 2px 0 var(--wattle);
}

.stall span {
  display: block;
  font-family: "Klee One", serif;
  font-size: 13px;
}

.bay {
  min-height: 52px;
  display: grid;
  place-items: center;
}

.tick {
  display: block;
  height: 4px;
  width: 0;
  margin: 4px 2px 0;
  background: var(--wattle);
}

.bays {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 4px 8px;
}

.bay-slot {
  appearance: none;
  min-height: 88px;
  margin: 0;
  padding: 6px 4px;
  background: var(--paper-light);
  border: 1px dashed var(--ink);
  color: var(--ink);
  cursor: pointer;
  font-family: "Klee One", serif;
  font-size: 13px;
}

.bay-slot.move {
  border-style: solid;
  background: var(--gold);
}

.bus-card {
  display: block;
  padding: 8px 4px;
  border: 1px solid var(--ink);
  font-family: "Klee One", serif;
  line-height: 1.2;
}

.bus-card.red {
  background: #e8b0a8;
}

.bus-card.blue {
  background: #a9c0e4;
}

.bus-card.yellow {
  background: var(--gold);
}

.bus-card b {
  display: block;
  font-size: 20px;
}

.exit-note {
  margin: 0 8px 8px;
  font-family: "Klee One", serif;
  font-size: 13px;
  color: var(--ink-soft);
}

.rider {
  border: 2px solid transparent;
  padding: 2px;
}

.rider.red {
  border-color: #b43328;
}

.rider.blue {
  border-color: #3a5a9a;
}

.actions .as-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: "Klee One", serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  background: #e6c36a;
  border: 1px solid var(--ink);
  padding: 13px 10px 11px;
  box-shadow: 2px 3px 0 var(--ink);
  transform: rotate(-0.6deg);
}

.actions .as-btn + .as-btn {
  transform: rotate(0.8deg);
  background: #efd8a0;
}

.game-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0; }
.game-cards a { display:flex; flex-direction:column; gap:8px; padding:18px; border:2px solid #5a432b; border-radius:12px; background:#fff1d2; color:#332814; text-decoration:none; }
.game-cards a:hover, .game-cards a:focus-visible { background:#ffe19a; outline:3px solid #8d5c25; outline-offset:2px; }
.game-cards strong { font-size:24px; }
.game-cards span { font-size:15px; line-height:1.5; }
.game-cards small { margin-top:auto; font-size:12px; color:#64553f; }
.older-games summary { cursor:pointer; padding:12px 0; }
@media (max-width:480px) { .game-cards { grid-template-columns:1fr; } }