/* Roulette table (js/table.js). Mobile-first; the screen is capped at 560px like every other screen. */
:root {
  --rt-red: #b3261e;
  --rt-black: #1b1b1b;
  --rt-green: #1e7a46;
  --rt-up: #6ee08f;
  --rt-down: #ff8a80;
}

.table-screen {
  max-width: 560px;
  min-height: 100dvh;
}

.hand-info { font-weight: 600; color: var(--text); }
.topbar-left { display: flex; gap: 6px; }

/* ---- wheel ---- */
.rt-wheel-svg { width: 100%; height: 100%; display: block; }
.rt-wheel-rim { fill: #3d2415; }
.rt-slot-red { fill: var(--rt-red); }
.rt-slot-black { fill: var(--rt-black); }
.rt-slot-green { fill: var(--rt-green); }
.rt-slot { stroke: #caa24a; stroke-width: 0.6; }
.rt-slot-label { fill: #fff; font-size: 8px; font-weight: 700; }
.rt-wheel-hub { fill: #2a1a10; stroke: #caa24a; stroke-width: 1.2; }
.rt-wheel-cap { fill: #caa24a; }
.rt-ball { fill: #f4f4f4; stroke: #999; stroke-width: 0.6; }
.rt-wheel-pointer { fill: var(--gold); }
#rtRotor, #rtBall { transform-origin: 0 0; transform-box: view-box; }

.rt-result-big {
  min-width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid #caa24a;
}
.rt-result-big:empty { visibility: hidden; }
.rt-result-big.rt-red { background: var(--rt-red); }
.rt-result-big.rt-black { background: var(--rt-black); }
.rt-result-big.rt-green { background: var(--rt-green); }
.rt-history { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

.rt-pocket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.rt-pocket.rt-red { background: var(--rt-red); }
.rt-pocket.rt-black { background: var(--rt-black); border: 1px solid #444; }
.rt-pocket.rt-green { background: var(--rt-green); }
.rt-pocket-big { min-width: 56px; height: 56px; border-radius: 28px; font-size: 26px; }

/* ---- scoreboard ---- */
.rt-score-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-size: 12px;
  min-width: 0;
}
.rt-score-row.is-you { border-color: var(--gold); }
.rt-score-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-score-val { font-weight: 700; color: var(--gold); white-space: nowrap; }
.rt-score-delta { font-size: 11px; font-weight: 700; }
.is-up { color: var(--rt-up); }
.is-down { color: var(--rt-down); }

/* ---- panel ---- */
.rt-panel { display: flex; flex-direction: column; gap: 8px; }
.rt-panel:empty { display: none; }
.rt-bet-info { font-size: 12px; color: var(--text-dim); text-align: center; min-height: 16px; }
.rt-bet-info.is-warn { color: var(--rt-down); }

.rt-chip-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.rt-chip {
  min-width: 52px;
  height: 52px;
  padding: 0 6px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.7);
  background: #7a1f1f;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.rt-chip.is-on { outline: 3px solid var(--gold); box-shadow: 0 0 10px rgba(232, 185, 35, 0.8); }
.rt-out-btn {
  position: relative;
  flex: 1;
  min-height: 40px;
  padding: 4px 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.rt-out-btn.rt-out-red { background: var(--rt-red); color: #fff; }
.rt-out-btn.rt-out-black { background: var(--rt-black); color: #fff; }
.rt-out-btn.is-on { box-shadow: inset 0 0 0 3px var(--gold); }

.rt-bet-list { display: flex; flex-direction: column; gap: 3px; }
.rt-bet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--card);
  border-radius: 8px;
  font-size: 12px;
}
.rt-bet-name { flex: 1; }
.rt-bet-ratio { color: var(--text-dim); }
.rt-bet-amt { font-weight: 800; color: var(--gold); }
.rt-bet-x { background: none; border: none; color: var(--rt-down); font-size: 18px; cursor: pointer; line-height: 1; }

.rt-actions {
  display: flex;
  gap: 8px;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 8px 0 calc(8px + var(--safe-bottom));
  background: linear-gradient(to top, var(--bg-0) 70%, rgba(11, 31, 22, 0));
}
.rt-actions .btn { flex: 1; width: auto; margin: 0; padding: 12px 8px; }
.rt-actions .rt-spin { flex: 2; }

/* ---- draft ---- */
.rt-pick-head { text-align: center; }
.rt-pick-title { font-weight: 700; font-size: 15px; }
.rt-pick-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.rt-pick-counter { text-align: center; font-weight: 700; color: var(--text-dim); }
.rt-pick-counter.is-full { color: var(--rt-up); }
.rt-cats { display: flex; flex-direction: column; gap: 4px; }
.rt-cat-row { display: flex; align-items: center; gap: 4px; }
.rt-cat-name { width: 76px; flex: none; font-size: 11px; color: var(--text-dim); }
.rt-opt { min-height: 36px; }

.rt-reveal, .rt-mysel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.rt-reveal-title { font-weight: 700; text-align: center; font-size: 13px; }
.rt-reveal-row { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; border-radius: 8px; font-size: 12px; }
.rt-reveal-row.is-you { background: rgba(232, 185, 35, 0.12); }
.rt-reveal-who { font-weight: 700; }
.rt-reveal-nums, .rt-reveal-outs { display: flex; flex-wrap: wrap; gap: 3px; }
.rt-reveal-out {
  padding: 1px 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 600;
}
.rt-reveal-out.rt-out-red { background: var(--rt-red); color: #fff; }
.rt-reveal-out.rt-out-black { background: var(--rt-black); color: #fff; }

/* ---- overlays ---- */
.rt-end-result { display: flex; justify-content: center; margin: 6px 0; }
.rt-end-net { font-size: 18px; font-weight: 800; margin: 4px 0; }
.rt-end-lines { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin-bottom: 8px; }
.rt-end-rank { margin-top: 6px; }
.rt-end-rank .is-you, .overlay-row.is-you { color: var(--gold); font-weight: 700; }
.rt-end-tie { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.rt-rules { text-align: left; overflow-y: auto; max-height: 60vh; margin: 8px 0; }
.rt-rules-line { font-size: 13px; line-height: 1.45; margin: 0 0 8px; }
#draftModeOverlay .option-card { margin-top: 8px; width: 100%; text-align: left; }


@media (prefers-reduced-motion: reduce) {
  #rtRotor, #rtBall { transition: none !important; }
}

/* flag of the country being played, faint behind the wheel */
.table-flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* the flag SVGs carry preserveAspectRatio="none", so they stretch to this slot */
  opacity: 0.22;
  pointer-events: none;
}
.table-flag[hidden] { display: none; }
.checkbox-row[hidden] { display: none; }

.rt-referee { font-size: 11px; color: var(--text-dim); text-align: center; min-height: 0; }
.rt-referee:empty { display: none; }

/* ======================================================================================
   Screen layout. Portrait: the wheel on top, the table (felt) below it; once the bets are closed the
   wheel grows to fill the screen. Landscape: seen from the side - the wheel at the left, the table
   (turned to run left to right) at the right.
   ====================================================================================== */
.rt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px calc(16px + var(--safe-bottom));
  min-width: 0;
}

.rt-wheel-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 8px 12px;
  background: radial-gradient(ellipse at 50% 40%, #1f6142, #123f2a 70%);
  border: 3px solid #3d2415;
  border-radius: 18px;
  overflow: hidden;
}
.rt-wheel {
  --wheel: min(44vw, 190px);
  width: var(--wheel);
  max-width: 100%; /* never wider than its card, whatever the screen */
  height: auto;
  aspect-ratio: 1;
  flex: none;
  position: relative;
  transition: width 0.45s ease, height 0.45s ease;
}
.rt-wheel-side { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1; min-width: 0; }
.rt-history { max-width: 220px; }

.table-screen.is-spinning .rt-wheel { --wheel: min(88vw, 62vh, 440px); }
.table-screen.is-spinning:not(.is-draft-spin) .rt-panel,
.table-screen.is-spinning .rt-scoreboard,
.table-screen.is-spinning .rt-referee { display: none; }

.rt-scoreboard { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rt-score-row { flex: none; }

/* ---- the felt ---- */
.rt-board {
  --sh: clamp(14px, 2.5vh, 20px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--vcols), 1fr);
  grid-template-rows: repeat(var(--vrows), var(--sh));
  background: radial-gradient(ellipse at 50% 30%, #17744a, #0d4a2e 80%);
  border: 3px solid #caa24a;
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.rt-board.is-disabled { opacity: 0.5; pointer-events: none; }
.rt-board > .rt-cell,
.rt-board > .rt-zone {
  grid-row: var(--vr);
  grid-column: var(--vc);
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  border-radius: 0;
}
.rt-cell { font-size: 14px; }
.rt-cell.rt-red { background: var(--rt-red); }
.rt-cell.rt-black { background: var(--rt-black); }
.rt-cell.rt-green { background: var(--rt-green); }
.rt-zone { background: transparent; font-size: 11px; line-height: 1.1; }
.rt-zone-red { background: var(--rt-red); }
.rt-zone-black { background: var(--rt-black); }
.rt-zone-col { font-size: 10px; }
.rt-zone-col .rt-cell-label::after { content: " 2:1"; }
.rt-cell.is-selected { box-shadow: inset 0 0 0 3px #fff; background-image: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)); }
.rt-cell.is-taken { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.rt-owner { position: absolute; right: 1px; top: 0; font-size: 11px; }
.is-bet { box-shadow: inset 0 0 0 2px var(--gold); }
.rt-spot.is-bet { box-shadow: none; }
.rt-spot.is-bet::after { display: none; }

/* an edge / corner bet: a small dot on the line, a bigger hit area around it */
.rt-spot {
  position: absolute;
  left: calc(var(--vx) / var(--vcols) * 100%);
  top: calc(var(--vy) * var(--sh));
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 3;
  cursor: pointer;
}
.rt-spot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.rt-spot:active::after { background: var(--gold); transform: scale(1.8); }

/* the stack of chips of a bet */
.rt-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 24px;
  height: 24px;
  padding: 0 3px;
  border-radius: 50%;
  background: #7a1f1f;
  border: 2px dashed #fff;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (orientation: landscape) {
  .table-screen { max-width: 1100px; }
  .rt-body {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    grid-template-areas: "wheel panel" "score panel" "ref panel";
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 14px;
  }
  .rt-wheel-card { grid-area: wheel; flex-direction: column; }
  .rt-wheel { --wheel: min(34vw, 60vh); }
  .rt-scoreboard { grid-area: score; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .rt-referee { grid-area: ref; }
  .rt-panel { grid-area: panel; }
  .rt-board {
    --sh: clamp(13px, 3.3vh, 20px);
    grid-template-columns: repeat(var(--hcols), 1fr);
    grid-template-rows: repeat(var(--hrows), var(--sh));
  }
  .rt-board > .rt-cell,
  .rt-board > .rt-zone { grid-row: var(--hr); grid-column: var(--hc); }
  .rt-spot { left: calc(var(--hx) / var(--hcols) * 100%); top: calc(var(--hy) * var(--sh)); }
  .rt-zone-col .rt-cell-label::after { content: ""; }
  .rt-zone { font-size: 10px; }
  .table-screen.is-spinning .rt-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wheel"; }
  .table-screen.is-spinning .rt-wheel { --wheel: min(68vh, 50vw); }
  .table-screen.is-spinning .rt-wheel-card { flex-direction: row; justify-content: center; }
}

/* ---- how-to-play overlay ---- */
.tutorial-card { text-align: left; }
.tutorial-card h3 { margin: 4px 0 8px; text-align: left; }
.tutorial-step { font-size: 12px; color: var(--text-dim); }
.tutorial-text { font-size: 14px; line-height: 1.5; margin: 0 0 12px; overflow-y: auto; }
.tutorial-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.tutorial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-border); }
.tutorial-dot.is-on { background: var(--gold); }

/* Draft: while the wheel spins everybody's picks stay on screen (names + numbers, avatars under side bets). */
.table-screen.is-draft-spin .rt-wheel { --wheel: min(62vw, 36vh, 300px); }
.rt-reveal-side { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; border-top: 1px solid var(--card-border); padding-top: 6px; }
.rt-reveal-cat { display: flex; align-items: stretch; gap: 4px; }
.rt-reveal-catname { width: 62px; flex: none; font-size: 10px; color: var(--text-dim); align-self: center; }
.rt-reveal-opt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.rt-reveal-opt.rt-out-red { background: var(--rt-red); }
.rt-reveal-opt.rt-out-black { background: var(--rt-black); }
.rt-reveal-optname { font-size: 10px; font-weight: 700; }
.rt-reveal-avatars { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; min-height: 16px; }
.rt-reveal-avatar { font-size: 13px; line-height: 1; }
.rt-reveal-avatar.is-you { filter: drop-shadow(0 0 3px var(--gold)); }
@media (orientation: landscape) {
  .table-screen.is-spinning.is-draft-spin .rt-body { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-areas: "wheel panel"; }
  .table-screen.is-draft-spin .rt-wheel { --wheel: min(34vw, 60vh); }
  .table-screen.is-draft-spin .rt-wheel-card { flex-direction: column; }
}
/* ---------- Achievements (js/achievements.js, 2026-10-06) ---------- */
.feat-toast {
  position: fixed;
  left: 50%;
  top: calc(10px + var(--safe-top, 0px));
  transform: translate(-50%, -140%);
  z-index: 1200;
  max-width: min(92vw, 440px);
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a2208, #4a3a0c);
  border: 1px solid var(--gold);
  color: #ffe9a6;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s ease;
  pointer-events: none;
}

.feat-toast.is-in {
  transform: translate(-50%, 0);
}

.feat-list {
  margin: 0 0 18px;
}

.feat-head {
  font-weight: 800;
  font-size: 17px;
  color: var(--gold);
  margin: 4px 0 10px;
}

.feat-group {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}

.feat-group > summary {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 14px;
}

.feat-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--card-border);
  font-size: 13px;
  color: var(--text-dim);
}

.feat-row.is-done {
  color: var(--text);
  background: rgba(232, 185, 35, 0.08);
}

.feat-row .feat-reward {
  white-space: nowrap;
  color: var(--gold);
  font-weight: 700;
}

/* A reward waits (2026-10-06): the mode's 🏆 blinks with a gold glow and shows how many. */
.icon-btn.has-claim {
  position: relative;
  border-color: var(--gold);
  animation: claim-blink 1s ease-in-out infinite;
}

.icon-btn .claim-dot {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e0322b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg, #111);
}

@keyframes claim-blink {
  0%,
  100% {
    background: var(--card);
    box-shadow: 0 0 0 rgba(255, 210, 60, 0);
    transform: scale(1);
  }
  50% {
    background: #5a4510;
    box-shadow: 0 0 14px 4px rgba(255, 210, 60, 0.85);
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn.has-claim {
    animation: none;
    background: #5a4510;
    box-shadow: 0 0 10px 3px rgba(255, 210, 60, 0.7);
  }
}

.feat-row {
  align-items: center;
}

.feat-row.is-taken {
  opacity: 0.5;
}

.feat-row.is-taken .feat-reward {
  color: var(--text-dim);
  font-weight: 600;
}

.feat-row .feat-reward.is-new {
  animation: feat-reveal 1.4s ease-out;
}

@keyframes feat-reveal {
  0% { color: #ffe27a; transform: scale(1.35); text-shadow: 0 0 10px rgba(255, 213, 74, 0.9); }
  100% { transform: scale(1); }
}

/* "Open": locked (dim, 🔒) until reached, then bright gold like the coin amounts were. */
.feat-open {
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.6;
}

.feat-row.is-ready .feat-open {
  color: var(--gold);
  opacity: 1;
  cursor: pointer;
}

.feat-waiting {
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(232, 185, 35, 0.08);
  padding: 10px 0;
  margin-bottom: 12px;
}

.feat-waiting-title {
  font-weight: 800;
  color: var(--gold);
  padding: 0 14px 8px;
}

.feat-open-all {
  display: block;
  width: calc(100% - 28px);
  margin: 10px 14px 0;
}

/* What a reward paid: a bubble over the button, 3 s, then a slow fade (js/achievements.js). */
.feat-gain {
  position: fixed;
  z-index: 1300;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3c2, #f1c63a);
  color: #3a2700;
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 213, 74, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.85);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.feat-gain::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  margin-left: -7px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: #f1c63a;
}

.feat-gain.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.feat-gain.is-out {
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

/* An opened reward waits for its bubble: "Open" dimmed, then the row fades away with the bubble. */
.feat-row.is-opened .feat-open,
.feat-waiting.is-opened .feat-open,
.feat-waiting.is-opened .feat-open-all {
  opacity: 0.35;
  cursor: default;
}

.feat-row.is-leaving,
.feat-waiting.is-leaving {
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

.feat-group-dot {
  display: inline-block;
  margin-left: 8px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e0322b;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}


/* ===== 2026-10-12 ===== */
/* scoreboard: the coins under the avatar and name, left aligned */
.rt-score-row { flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 8px; }
.rt-score-head { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.rt-score-line { display: flex; align-items: baseline; gap: 6px; padding-left: 2px; }

/* Classic: the Clear / Undo / Last bets / Spin row sits above the chips, not at the bottom */
.rt-panel-classic .rt-actions { position: static; background: none; padding: 0; }

/* Draft: everybody's picks - compact rows, the points next to the numbers */
.rt-reveal-row { gap: 2px; padding: 3px 6px; }
.rt-reveal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rt-reveal-pts { font-size: 12px; font-weight: 800; color: var(--text-dim); white-space: nowrap; }
.rt-reveal-pts.is-win { color: var(--rt-up); }
.rt-reveal .rt-pocket { min-width: 20px; height: 20px; font-size: 10px; }
.rt-reveal-nums { gap: 2px; }
.table-screen.is-draft-spin .rt-wheel { --wheel: min(46vw, 24vh, 200px); }
@media (orientation: landscape) {
  .table-screen.is-draft-spin .rt-wheel { --wheel: min(30vw, 56vh); }
}

/* Draft: saved selections */
.rt-presets { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; }
.rt-presets-title { font-size: 13px; font-weight: 700; color: var(--gold); background: none; border: 0; text-align: left; padding: 2px 0; cursor: pointer; }
.rt-preset-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-preset { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; }
.rt-preset-use { background: none; border: 0; color: var(--text); font-weight: 700; font-size: 13px; padding: 6px 4px 6px 12px; cursor: pointer; }
.rt-preset-del { background: none; border: 0; color: var(--rt-down); font-size: 16px; padding: 4px 10px 4px 4px; cursor: pointer; }
.rt-preset-empty { font-size: 12px; color: var(--text-dim); }
.rt-preset-save { display: flex; gap: 6px; align-items: center; }
.rt-preset-name { flex: 1; min-width: 0; height: 38px; border-radius: 10px; border: 1px solid var(--card-border); background: rgba(0, 0, 0, 0.25); color: var(--text); padding: 0 10px; font-size: 14px; }
.rt-preset-save .btn { flex: none; width: auto; margin: 0; padding: 8px 14px; }
.rt-preset-msg { font-size: 12px; color: var(--gold); }

.rt-motive { text-align: center; font-weight: 700; color: var(--gold); font-size: 14px; margin: 4px 0 6px; }
.rt-motive:empty { display: none; }
.rt-reveal-total { color: var(--gold); font-weight: 700; }
.rt-pick-random { display: flex; }
.rt-pick-random .rt-act { flex: 1; }

/* winners: a gold-lined frame that glows */
.rt-glow {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 0 10px 3px rgba(240, 192, 64, 0.75), inset 0 0 8px rgba(240, 192, 64, 0.45);
  border-radius: 8px;
  animation: rtGlow 1.1s ease-in-out infinite alternate;
}
.rt-reveal .rt-pocket.rt-glow { border-radius: 50%; }
@keyframes rtGlow {
  from { box-shadow: 0 0 6px 1px rgba(240, 192, 64, 0.5), inset 0 0 4px rgba(240, 192, 64, 0.3); }
  to { box-shadow: 0 0 16px 5px rgba(240, 192, 64, 0.95), inset 0 0 10px rgba(240, 192, 64, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .rt-glow { animation: none; } }

/* Draft, one by one: who holds a side option */
.rt-opt-avatars { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; min-height: 14px; }
.rt-opt-avatar { font-size: 12px; line-height: 1; }
.rt-out-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.rt-out-btn.is-on:disabled { opacity: 1; }

/* Draft choice of a game mode, in the hub */
.draft-prefs { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.draft-prefs[hidden] { display: none; }
.draft-prefs-change { font-size: 12px; font-weight: 700; color: var(--gold); background: none; border: 1px solid var(--gold); border-radius: 8px; padding: 2px 10px; cursor: pointer; }