/* Roulette practice pages: the shift bet drill (six neighbours on the wheel,
   placed on the layout against the clock) and the payout drill (colour chips on
   the layout, the dolly on the winning number, the payout for each colour).
   Loaded after kit.css and roulette.css. */

/* ---------- felt ---------- */

.rd-felt {
  grid-template-columns: minmax(0, 1fr) clamp(200px, 26%, 300px);
  grid-template-areas:
    "board wheel"
    "msg msg";
  padding-bottom: 22px;
}

.rd-pay .rd-felt {
  grid-template-areas:
    "board result"
    "board explain"
    "msg msg";
  grid-template-rows: auto 1fr auto;
}

.rd-msg {
  grid-area: msg;
  justify-self: center;
  margin: 0;
  min-height: 1.5em;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ivory);
  text-align: center;
}

.rd-msg:empty {
  visibility: hidden;
}

.rd-msg[data-tone="good"] { color: var(--good); }
.rd-msg[data-tone="bad"] { color: var(--bad); }

/* ---------- wheel: the lit sector ---------- */

.ro-wheel .ro-wedge,
.ro-wheel .ro-wn {
  transition: opacity 0.25s ease;
}

.ro-wheel.focus .ro-wedge:not(.hl),
.ro-wheel.focus .ro-wn:not(.hl) {
  opacity: 0.28;
}

.ro-wheel .ro-wedge.hl {
  stroke: #f6d77d;
  stroke-width: 1.1;
}

.ro-wheel .ro-wn.done {
  fill: #f6d77d;
}

#ro-sector {
  fill: #f6d77d;
  filter: drop-shadow(0 0 3px rgba(246, 215, 125, 0.9));
}

/* ---------- layout ---------- */

.rd .ro-cell {
  touch-action: manipulation;
}

.rd-shift .ro-cell:not(.ro-straight),
.pd-board .ro-cell,
.rd[data-phase="idle"] .ro-cell {
  cursor: default;
}

.rd-shift .ro-cell:not(.ro-straight),
.pd-board .ro-cell {
  pointer-events: none;
}

.rd[data-phase="idle"] .ro-cell:hover {
  background: transparent;
}

.ro-cell.miss {
  animation: rd-miss 0.45s ease-out;
}

@keyframes rd-miss {
  0%, 40% { background: rgba(230, 70, 70, 0.6); box-shadow: inset 0 0 0 3px #ff8a8f; }
}

.rd-shift .ro-chip {
  min-width: 20px;
  height: 20px;
}

/* payout: one colour per spot, with the number of chips on top */
.rd-pay .ro-chip {
  min-width: 22px;
  height: 22px;
  padding: 0 3px;
  font-size: 11px;
}

.rd-pay .ro-board-wrap {
  align-self: start;
}

.rd-pay .ro-chip b {
  color: var(--fg, #fff);
  text-shadow: none;
}

.rd-pay .ro-chip.lost {
  opacity: 0.18;
}

.rd-pay .ro-dolly {
  transform: translate(calc(-50% + 15px), -100%);
}

/* ---------- payout: result and explanation ---------- */

.pd-result {
  grid-area: result;
  justify-self: start;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.pd-result b {
  min-width: 54px;
  height: 54px;
  font-size: 28px;
}

.pd-explain {
  grid-area: explain;
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 440px;
  overflow-y: auto;
}

.pd-explain[hidden] {
  display: none;
}

.pd-x {
  padding: 6px 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 106, 0.3);
  background: rgba(0, 0, 0, 0.3);
}

.pd-x h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ivory);
}

.pd-x h3 b {
  margin-left: auto;
  font-family: "Bodoni Moda", serif;
  font-size: 18px;
  color: var(--brass-hi);
}

.pd-x ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: rgba(244, 235, 214, 0.88);
}

.pd-x li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.pd-calc {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pd-none {
  color: var(--muted);
}

.pd-swatch {
  min-width: 16px;
  height: 16px;
  padding: 0;
  flex-shrink: 0;
}

.pd-swatch::before {
  inset: 3px;
}

/* ---------- console ---------- */

.rd-dock {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin-top: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border: 1px solid rgba(212, 175, 106, 0.45);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(36, 16, 12, 0.96), rgba(16, 6, 5, 0.98));
  box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rd-score {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 0;
}

.rd-score div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.rd-score dt {
  font-size: 12px;
  color: var(--muted);
}

.rd-score dd {
  margin: 0;
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--brass-hi);
  font-variant-numeric: tabular-nums lining-nums;
}

.rd-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.rd-actions .btn-deal {
  min-width: 160px;
  min-height: 46px;
}

.rd-actions [hidden] {
  display: none;
}

/* shift: the six pockets and the clock */
.rd-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  width: 100%;
}

.rd[data-phase="idle"] .rd-target {
  display: none;
}

.rd-label {
  font-size: 12px;
  color: var(--muted);
}

.rd-strip {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rd-strip li {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: #18151a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.rd-strip li[data-tone="red"] { background: #b3122e; }
.rd-strip li[data-tone="green"] { background: #11784b; }

.rd-strip li.done {
  box-shadow: 0 0 0 2px #f6d77d;
}

.rd-strip li.done::after {
  content: "✓";
  position: absolute;
  right: -5px;
  top: -7px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  color: #1b0e05;
  background: #f6d77d;
}

/* the stopwatch sits at the bottom left of the table */
.rd-felt .rd-timer {
  position: absolute;
  left: 14px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 12px 4px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 106, 0.35);
  background: rgba(0, 0, 0, 0.42);
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

.rd-timer b {
  display: inline-block;
  min-width: 3.6em;
  font-family: "Bodoni Moda", serif;
  font-size: 22px;
  color: var(--ivory);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

/* payout: one answer box per colour */
.pd-answers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 10px;
  width: 100%;
}

.rd[data-phase="idle"] .pd-answers {
  display: none;
}

.pd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  grid-template-areas: "who in" "mark mark";
  align-items: center;
  gap: 2px 8px;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 106, 0.25);
  background: rgba(0, 0, 0, 0.25);
}

.pd-row label {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ivory);
}

.pd-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-in {
  grid-area: in;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 106, 0.5);
  background: rgba(0, 0, 0, 0.45);
  color: var(--ivory);
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-size: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.pd-in:focus {
  outline: 2px solid var(--brass-hi);
  outline-offset: 1px;
}

.pd-in:disabled {
  opacity: 0.85;
}

.pd-mark {
  grid-area: mark;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.pd-mark:empty {
  display: none;
}

.pd-row[data-ok="1"] {
  border-color: rgba(120, 220, 160, 0.6);
}

.pd-row[data-ok="1"] .pd-mark { color: var(--good); }

.pd-row[data-ok="0"] {
  border-color: rgba(240, 120, 120, 0.6);
}

.pd-row[data-ok="0"] .pd-mark { color: var(--bad); }

.pd-pays {
  max-width: 420px;
  margin: 10px 0 6px;
}

/* ---------- report ---------- */

.rd-rlist {
  display: grid;
  gap: 3px;
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid rgba(212, 175, 106, 0.3);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  list-style: none;
  font-size: 12px;
  text-align: left;
}

.rd-rlist li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.rl-no {
  color: var(--muted);
  text-align: right;
}

.rl-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.rl-nums i {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 2px;
  border-radius: 4px;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  background: #18151a;
}

.rl-nums i[data-tone="red"] { background: #b3122e; }
.rl-nums i[data-tone="green"] { background: #11784b; }

.rl-t {
  font-weight: 700;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}

.rl-m[data-tone="good"] { color: var(--good); }
.rl-m[data-tone="bad"] { color: var(--bad); }

.rd-r-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.rd-r-btns .btn-deal {
  min-width: 200px;
}

.kr-list dd[data-tone="good"] {
  color: var(--good);
}

/* ---------- the old tools page ---------- */

.moved-box {
  margin: 60px auto;
  text-align: center;
}

.moved-box h1 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  color: var(--brass-hi);
}

/* ---------- phones ---------- */

@media (max-width: 760px) {
  .rd-felt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "wheel"
      "board"
      "msg";
  }

  .rd-shift .ro-wheel-wrap {
    justify-self: center;
    width: 64%;
  }

  .rd-shift .rd-felt {
    grid-template-areas:
      "wheel"
      "board"
      "timer"
      "msg";
  }

  .rd-felt .rd-timer {
    position: static;
    grid-area: timer;
    justify-self: start;
  }

  .rd-pay .rd-felt {
    grid-template-areas:
      "result"
      "board"
      "explain"
      "msg";
    grid-template-rows: none;
  }

  .rd .ro-board-wrap {
    width: min(100%, 300px);
  }

  .pd-explain {
    max-height: none;
  }

  .rd-strip li {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .rd-timer b {
    font-size: 18px;
  }

  .rd-actions {
    width: 100%;
  }

  .rd-actions .btn {
    flex: 1;
    min-width: 0;
  }

  .pd-answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 6px;
  }

  .pd-row {
    grid-template-columns: minmax(0, 1fr) 62px;
    padding: 4px 6px;
  }

  .pd-in {
    height: 32px;
    font-size: 16px;
  }

  .rd-r-btns .btn {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ro-cell.miss {
    animation: none;
    background: rgba(230, 70, 70, 0.4);
  }
}