/* Ride the Bus — single-device modes (Vs CPU + Group in Person / Pass & Play).
 * Light GoF-brand palette per docs/design-guidelines.md. Card face styling
 * intentionally matches apps/31 so the two card games look like siblings. */

:root {
  /* Brand palette (from docs/design-guidelines.md → Canva brand kit) */
  --gof-green-dark: #157623;
  --gof-green: #9bca3e;
  --gof-green-hover: #88b733;
  --gof-olive: #83a83d;
  --gof-bg: #dde5ed;
  --gof-yellow: #ffb920;
  --gof-yellow-hover: #e8a508;
  --gof-rust: #de6739;
  --gof-text: #2f2c28;
  --gof-text-muted: #5e5c5e;
  --gof-mint: #defff0;

  /* Component tokens */
  --panel-bg: #ffffff;
  --panel-border: #e3e8ee;
  --card-bg: #ffffff;
  --card-border: #d2d8df;
  --card-red: #c1303d;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
  --radius: 10px;
  --radius-sm: 7px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gof-bg);
  color: var(--gof-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

body { display: flex; flex-direction: column; }
main#app { flex: 1; }

/* ===== Site header (per HEADER_SPECS) ==================================== */
.rtb-site-header-wrap {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  padding: 10px 14px;
}
.rtb-site-header-wrap .header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
  gap: 12px;
}
.rtb-site-header-wrap .header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.rtb-site-header-wrap .header-right { flex-shrink: 0; min-width: 40px; }
.rtb-site-header-wrap .game-title-wrap { position: relative; }
.rtb-site-header-wrap .game-title-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.rtb-site-header-wrap .game-title-heading {
  margin: 0;
  font-size: 1.05rem;
  color: var(--gof-text);
  font-weight: 700;
}
.rtb-site-header-wrap .game-title-chevron {
  font-size: 0.85rem;
  color: var(--gof-text-muted);
}
.rtb-site-header-wrap .game-title-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 10;
  padding: 6px 0;
}
.rtb-site-header-wrap .game-title-dropdown[aria-hidden="true"] { display: none; }
.rtb-site-header-wrap .game-nav-link {
  display: block;
  padding: 9px 14px;
  color: var(--gof-text);
  text-decoration: none;
  font-size: 0.95rem;
}
.rtb-site-header-wrap .game-nav-link:hover { background: var(--gof-bg); }

/* ===== Mode pills (MODE_TAXONOMY) ======================================== */
.mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--gof-text-muted);
}
.mode-btn {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--gof-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mode-btn:hover { border-color: var(--gof-green); }
.mode-btn[aria-pressed="true"] {
  background: var(--gof-green);
  border-color: var(--gof-green);
  color: var(--gof-text);
}
.sub-mode-label { font-size: 0.78rem; }

/* ===== Game canvas ======================================================= */
#rtb-game-root {
  display: flex;
  flex-direction: column;
  padding: 10px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  gap: 10px;
}

.rtb-panel,
.rtb-table {
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 20px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rtb-panel-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.rtb-blurb {
  margin: 0;
  color: var(--gof-text-muted);
  line-height: 1.45;
}

/* ===== Buttons =========================================================== */
.rtb-btn {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--gof-text);
  cursor: pointer;
  background: var(--gof-green);
  transition: background 0.15s, transform 0.05s;
}
.rtb-btn:hover { background: var(--gof-green-hover); }
.rtb-btn:active { transform: translateY(1px); }

/* ===== Scoreboard (doubles as the roster editor) ========================= */
/* Seat rows, matching the shape 31 uses for its players. Pills are reserved
   for the mode toggle in the header; giving scores the same shape made them
   look like another row of controls. */
.rtb-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--panel-border);
  padding-top: 10px;
}
.rtb-seat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--gof-bg);
  border: 1.5px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--gof-text-muted);
  text-align: left;
}
button.rtb-seat { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
button.rtb-seat:hover { border-color: var(--gof-green); }
.rtb-seat.active {
  border-color: var(--gof-green);
  background: var(--gof-mint);
  color: var(--gof-text);
}
.rtb-seat-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rtb-seat-tag {
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--gof-green);
  color: var(--gof-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rtb-seat-score {
  margin-left: auto;
  font-size: 1.05rem;
  color: var(--gof-text);
}

/* Rename in place: no setup screen, so this is where names get set. */
.rtb-seat.editing {
  background: var(--panel-bg);
  border-color: var(--gof-green);
  padding: 4px 6px 4px 11px;
}
.rtb-name-edit {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gof-text);
  padding: 5px 0;
}
.rtb-name-remove {
  border: none;
  background: transparent;
  color: var(--gof-rust);
  font-size: 1.2rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  padding: 0 6px;
}
.rtb-add {
  justify-content: center;
  background: transparent;
  border: 1.5px dashed var(--panel-border);
  font-size: 0.85rem;
}
.rtb-add:hover { border-color: var(--gof-green); color: var(--gof-text); }

/* ===== Turn banner ======================================================= */
.rtb-turn-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 700;
}
.rtb-turn-points {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gof-text-muted);
  white-space: nowrap;
}
/* Clearing all four keeps the turn, so the run needs somewhere to show. */
.rtb-streak {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--gof-yellow);
  color: var(--gof-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rtb-final-row .rtb-streak { margin-left: 8px; }

/* ===== Cards ============================================================= */
.rtb-card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rtb-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.rtb-slot-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gof-text-muted);
  text-align: center;
  line-height: 1.2;
  /* Two lines reserved: the question names wrap, the guesses that replace
     them do not, and the row must not resize when they swap. */
  min-height: 2.4em;
}
/* An answered slot reports the guess that was made against its card. */
.rtb-slot-label.good { color: var(--gof-green-dark); }
.rtb-slot-label.bad { color: var(--gof-rust); }
/* The row is a progress tracker, so the three states have to read apart at a
   glance: answered, live, still ahead. */
.rtb-slot.upcoming { opacity: 0.4; }
.rtb-slot.current .rtb-card-empty {
  border-color: var(--gof-yellow);
  border-style: solid;
  background: #fffaf0;
}
.rtb-slot.current .rtb-slot-label { color: var(--gof-text); }
.rtb-card {
  width: 100%;
  max-width: 68px;
  aspect-ratio: 5 / 7;
  background: var(--card-bg);
  border-radius: 6px;
  border: 1px solid var(--card-border);
  color: var(--gof-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-shadow: var(--shadow-sm);
}
.rtb-card.red { color: var(--card-red); }
.rtb-card-rank { font-size: 1.35rem; line-height: 1; }
.rtb-card-suit { font-size: 1.15rem; line-height: 1; margin-top: 2px; }
.rtb-card-empty {
  background: transparent;
  border: 1px dashed var(--panel-border);
  box-shadow: none;
}
/* Yellow is reserved for the live slot, so the just-flipped card announces
   itself with the flip and a lift instead of a second competing ring. */
.rtb-card-latest {
  box-shadow: var(--shadow-md);
  animation: rtb-flip 0.22s ease-out;
}

@keyframes rtb-flip {
  from { transform: rotateY(80deg) scale(0.9); opacity: 0.3; }
  to { transform: rotateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rtb-card-latest { animation: none; }
}

/* ===== Question ========================================================== */
/* The question leads the panel, so it carries the weight the card row used
   to have.
 *
 * Everything here is height-reserved. The action block holds one footprint
 * whatever is inside it (two-option question, four-option question, the
 * computer thinking, or the pass button), and the title, caption and button
 * grid each hold their own worst case. Without that the whole board jumps
 * every time a guess resolves or the turn changes hands. */
/* Sized just above the tallest variant (a full question measures ~141px here)
   so every variant renders at exactly this height and nothing below it moves.
   The slack absorbs sub-pixel font differences across platforms. */
.rtb-action {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rtb-question { display: flex; flex-direction: column; gap: 4px; }
.rtb-question-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  min-height: 1.15em;
}
.rtb-question-caption {
  margin: 0 0 10px;
  font-size: 0.83rem;
  color: var(--gof-text-muted);
  line-height: 1.35;
  min-height: 2.7em; /* two lines */
}
.rtb-guesses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  min-height: 64px; /* one button row; the four-suit grid is one row here too */
}
.rtb-guesses.four { grid-template-columns: repeat(4, 1fr); }
.rtb-guess {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--panel-border);
  background: var(--panel-bg);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gof-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.rtb-guess:hover { border-color: var(--gof-green); background: var(--gof-mint); }
.rtb-guess:active { transform: translateY(1px); }

/* Red or black: the button is the answer. Paint it what it means. Height
   stays the same as every other guess button so the grid never resizes. */
.rtb-guess-red,
.rtb-guess-black {
  font-size: 1.15rem;
  color: #ffffff;
  border-color: transparent;
}
.rtb-guess-red { background: var(--card-red); }
.rtb-guess-red:hover { background: #a82833; border-color: transparent; }
.rtb-guess-black { background: #26241f; }
.rtb-guess-black:hover { background: #100f0d; border-color: transparent; }
.rtb-guess-red .rtb-opt-hint,
.rtb-guess-black .rtb-opt-hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}
.rtb-opt-suit { font-size: 1.5rem; line-height: 1; }
.rtb-opt-suit.red { color: var(--card-red); }
.rtb-opt-hint {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--gof-text-muted);
}
.rtb-guesses.four .rtb-opt-label { font-size: 0.72rem; }

/* ===== Result ============================================================ */
/* Reserved even when empty, so a resolving guess does not push the board. */
.rtb-result {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.4;
  min-height: 44px;
}
.rtb-result.good { background: var(--gof-mint); border-color: var(--gof-green); }
.rtb-result.bad { background: #fdeae3; border-color: var(--gof-rust); }
.rtb-result.empty { background: transparent; }
/* A swept table is the rare event in this game, so it gets its own colour. */
.rtb-result.sweep { background: #fff6e0; border-color: var(--gof-yellow); }
.rtb-btn.sweep { background: var(--gof-yellow); }
.rtb-btn.sweep:hover { background: var(--gof-yellow-hover); }

.rtb-thinking {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--gof-text-muted);
}

.rtb-deck-count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--gof-text-muted);
  text-align: center;
}

/* ===== Game over ========================================================= */
.rtb-final {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: rank;
}
.rtb-final-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--gof-bg);
  font-weight: 700;
}
.rtb-final-row:first-child {
  background: var(--gof-mint);
  border: 1px solid var(--gof-green);
}
.rtb-final-score { font-size: 1.1rem; }

/* ===== Reference content ================================================= */
.rtb-content {
  max-width: 560px;
  width: 100%;
  margin: 6px auto 24px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rtb-intro {
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 4px 16px 16px;
  box-shadow: var(--shadow-sm);
  line-height: 1.55;
}
.rtb-intro h2 { font-size: 1.15rem; margin: 16px 0 8px; }
.rtb-intro p { margin: 0 0 10px; }

.rtb-section > summary {
  cursor: pointer;
  padding: 12px 14px;
  background: var(--panel-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.rtb-section > summary:hover { background: var(--gof-mint); }
/* Real headings for structure, sized to sit inline in the summary row. */
.rtb-section > summary h2 {
  display: inline;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
}
.rtb-section-body {
  background: var(--panel-bg);
  border-radius: var(--radius);
  margin-top: 6px;
  padding: 4px 16px 16px;
  box-shadow: var(--shadow-sm);
  line-height: 1.55;
}
.rtb-section-body h3 { margin: 16px 0 6px; font-size: 0.95rem; }
.rtb-section-body p { margin: 0 0 10px; }
.rtb-section-body ol,
.rtb-section-body ul { margin: 0 0 10px; padding-left: 20px; }
.rtb-section-body li { margin-bottom: 6px; }

/* Worked card examples, matching the table's card faces. */
.rtb-example {
  background: var(--gof-bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 0 0 12px;
}
.rtb-example-cards {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.rtb-card.mini {
  width: 40px;
  max-width: 40px;
  height: 56px;
  aspect-ratio: auto;
  flex: 0 0 auto;
}
.rtb-card.mini .rtb-card-rank { font-size: 0.95rem; }
.rtb-card.mini .rtb-card-suit { font-size: 0.85rem; }
.rtb-example-caption {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gof-text-muted);
  line-height: 1.45;
}

/* Where our house rule differs from other published versions, say so plainly
   and set it apart from the surrounding explanation. */
.rtb-ourrule {
  background: var(--gof-mint);
  border-left: 3px solid var(--gof-green);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 12px;
}

.rtb-odds {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.rtb-odds th,
.rtb-odds td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--panel-border);
}
.rtb-odds th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gof-text-muted); }
.rtb-odds tr:last-child td { border-bottom: none; background: var(--gof-mint); }

/* ===== More games footer ================================================= */
.more-games {
  background: var(--panel-bg);
  border-top: 1px solid var(--panel-border);
  padding: 14px;
}
.more-games-content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.more-games-title { font-weight: 700; font-size: 0.9rem; }
.more-games-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.more-games-link, .feedback-link {
  color: var(--gof-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
}
.more-games-link:hover, .feedback-link:hover { color: var(--gof-green-dark); }
.more-games-line2 { margin-top: 6px; }
.more-games .logo { height: 42px; width: auto; }

@media (max-width: 420px) {
  .rtb-guesses.four { grid-template-columns: repeat(2, 1fr); }
  .rtb-guesses.four .rtb-opt-label { font-size: 0.85rem; }
  .rtb-slot-label { font-size: 0.56rem; }

  /* Narrow screens wrap captions and results onto more lines, and the suit
     grid becomes two rows, so every reservation grows to its worst case. */
  .rtb-action { min-height: 240px; } /* full question measures ~235px here */
  .rtb-question-caption { min-height: 4.05em; } /* three lines */
  .rtb-guesses { min-height: 136px; }           /* two button rows */
  .rtb-result { min-height: 65px; }             /* two lines */
}