/* Roulette phone controller (public/js/play/roulette.js): the casino felt.
   Portrait draws the table vertically; a short landscape viewport redraws the
   classic horizontal felt with the chip tray in a right-hand column. Tokens
   live in tokens.css under body.play--roulette. */

/* The felt owns the whole phone while the roulette runs. */
body.play--roulette .play-header { display: none; }
body.play--roulette .play-stage {
  padding: var(--p-space-200) var(--p-space-300) calc(var(--p-space-200) + env(safe-area-inset-bottom));
  overflow: hidden;
}

.rp {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "hud" "felt" "dock";
  gap: var(--p-space-200);
}

/* ------------------------------------------------------------------ HUD */
.rp-hud {
  grid-area: hud;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--p-space-300);
  padding: var(--p-space-150) var(--p-space-150) var(--p-space-150) var(--p-space-400);
  border-radius: var(--p-border-radius-400);
  background: linear-gradient(180deg, var(--p-color-bg-surface-secondary), var(--p-color-bg-surface));
  border: 1px solid var(--p-color-border);
  box-shadow: inset 4px 0 0 var(--team-color, var(--p-color-border-focus)), var(--p-shadow-200);
}
.rp-hud__team { display: grid; place-items: center; }
.rp-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-stat__label {
  font-size: 0.66rem;
  font-weight: var(--p-font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-color-text-secondary);
}
.rp-stat__value {
  font-family: var(--p-font-family-display);
  font-size: 1.3rem;
  line-height: 1.05;
  color: var(--p-color-roulette-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-stat--button {
  align-items: flex-end;
  text-align: right;
  min-height: 44px;
  padding: var(--p-space-100) var(--p-space-200) var(--p-space-100) var(--p-space-300);
  border-radius: var(--p-border-radius-300);
  border: 1px solid var(--p-color-border);
  background: rgba(255, 255, 255, 0.04);
}
.rp-stat--button:active { background: var(--p-color-bg-surface-hover); }
.rp-stat--button .rp-stat__value { color: var(--p-color-text); }
.rp-stat__row { display: flex; align-items: center; gap: var(--p-space-100); max-width: 100%; }
.rp-stat__chev { font-size: 1.35rem; line-height: 1; color: var(--p-color-text-secondary); }

.rp-clock { position: relative; width: 52px; height: 52px; display: grid; place-items: center; }
.rp-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-clock__track { fill: rgba(0, 0, 0, 0.28); stroke: rgba(255, 255, 255, 0.12); stroke-width: 4; }
.rp-clock__arc {
  fill: none;
  stroke: var(--p-color-roulette-gold);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke var(--p-motion-duration-200);
}
.rp-clock__num { position: relative; font-family: var(--p-font-family-display); font-size: 1.15rem; line-height: 1; }
.rp-clock--hot .rp-clock__arc { stroke: var(--p-color-bg-fill-critical); }
.rp-clock--hot .rp-clock__num { color: var(--p-color-text-critical); animation: rp-pulse 0.5s ease-in-out infinite alternate; }
.rp[data-phase="spinning"] .rp-clock__arc { stroke: var(--p-color-text-disabled); }
.rp[data-phase="results"] .rp-clock__arc { stroke: var(--p-color-bg-fill-info); }

/* ------------------------------------------------------------------ felt */
.rp-felt {
  grid-area: felt;
  position: relative;
  min-height: 0;
  padding: 5px;
  border-radius: var(--p-border-radius-400);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--p-color-roulette-felt-light), transparent 65%),
    radial-gradient(150% 110% at 50% 100%, var(--p-color-roulette-felt-deep), var(--p-color-roulette-felt) 72%);
  box-shadow:
    0 0 0 3px var(--p-color-roulette-rail),
    0 0 0 4px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(247, 222, 150, 0.25),
    inset 0 0 24px rgba(0, 0, 0, 0.45),
    var(--p-shadow-300);
  margin: 3px;
}
.rp-felt__scroll {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: var(--p-border-radius-300);
}
.rp-felt__scroll::-webkit-scrollbar { display: none; }

.rp-table {
  display: grid;
  height: 100%;
  min-height: 396px;           /* the row minimums below: shorter screens scroll the felt */
  grid-template-columns: repeat(2, minmax(38px, 0.64fr)) repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(30px, 1.1fr) repeat(12, minmax(26px, 1fr)) minmax(28px, 0.95fr);
  gap: 2px;
}

.rp-cell {
  grid-row: var(--pr);
  grid-column: var(--pc);
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--p-border-radius-roulette-cell);
  background: rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 0 0 1px var(--p-color-roulette-line);
  color: #fff;
  font-family: var(--p-font-family-display);
  font-size: clamp(0.9rem, 2.3vh, 1.2rem);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--p-motion-duration-150) var(--p-motion-ease), filter var(--p-motion-duration-300) var(--p-motion-ease);
}
.rp-cell:active { transform: scale(0.94); }
.rp-cell:focus-visible { outline: 2px solid var(--p-color-roulette-gold); outline-offset: 1px; z-index: 3; }
.rp-cell--red { background: linear-gradient(180deg, var(--p-color-roulette-red), var(--p-color-roulette-red-deep)); }
.rp-cell--black { background: linear-gradient(180deg, var(--p-color-roulette-black), var(--p-color-roulette-black-deep)); }
.rp-cell--green { background: linear-gradient(180deg, var(--p-color-roulette-green), var(--p-color-roulette-green-deep)); }
.rp-cell--zero { font-size: clamp(1.05rem, 2.8vh, 1.45rem); }
.rp-cell--even,
.rp-cell--dozen,
.rp-cell--col {
  font-family: var(--p-font-family-body);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}
.rp-cell--even,
.rp-cell--dozen { flex-direction: column; }
.rp-cell--col { color: #fbe7b0; }
.rp-cell__label { position: relative; transition: transform var(--p-motion-duration-150) var(--p-motion-ease); }
.rp-cell--num.has-stake .rp-cell__label,
.rp-cell--zero.has-stake .rp-cell__label,
.rp-cell--col.has-stake .rp-cell__label { transform: translateX(-9px); }
.rp-cell__diamond {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  transform: rotate(45deg);
  border: 2px solid rgba(255, 255, 255, 0.9);
  margin-bottom: 3px;
}

/* chips: casino look shared by the tray and the stakes on the felt */
.rp-chip,
.rp-stake {
  --chip: var(--p-color-chip-blue);
  --chip-edge: #ffffff;
  --chip-ink: #ffffff;
  color: var(--chip-ink);
  background:
    radial-gradient(circle closest-side, var(--chip) 0 63%, transparent 64%),
    radial-gradient(circle closest-side, var(--chip-edge) 0 71%, transparent 72%),
    repeating-conic-gradient(from 10deg, var(--chip-edge) 0 18deg, var(--chip) 18deg 60deg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.rp-tone--blue { --chip: var(--p-color-chip-blue); }
.rp-tone--green { --chip: var(--p-color-chip-green); }
.rp-tone--orange { --chip: var(--p-color-chip-orange); }
.rp-tone--black { --chip: var(--p-color-chip-black); --chip-edge: #d9dce6; }
.rp-tone--purple { --chip: var(--p-color-chip-purple); }
.rp-tone--gold { --chip: var(--p-color-chip-gold); --chip-edge: #fff4c7; --chip-ink: #3a2800; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }

.rp-stake {
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 50%;
  width: var(--p-space-roulette-stake);
  height: var(--p-space-roulette-stake);
  margin-top: calc(var(--p-space-roulette-stake) / -2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 0.6rem/1 var(--p-font-family-body);
  letter-spacing: -0.03em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
/* tall strip cells (portrait): the stake stacks under the label */
.rp-cell--even .rp-stake,
.rp-cell--dozen .rp-stake { position: static; margin: 4px 0 0; }
.rp-stake.is-drop { animation: rp-drop 280ms var(--p-motion-ease-bounce); }

/* help + round corners of the felt */
.rp-corner {
  grid-row: var(--pr);
  grid-column: var(--pc);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-150);
  color: rgba(251, 231, 176, 0.8);
  font-size: 0.72rem;
  font-weight: var(--p-font-weight-bold);
}
.rp-corner--help {
  border-radius: var(--p-border-radius-roulette-cell);
  border: 1px dashed rgba(247, 222, 150, 0.4);
  -webkit-tap-highlight-color: transparent;
}
.rp-corner--help:active { background: rgba(247, 222, 150, 0.12); }
.rp-corner__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(247, 222, 150, 0.2);
  color: var(--p-color-roulette-gold);
  font-weight: 800;
}
.rp-corner--round {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6rem;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ spin + results on the felt */
.rp:not([data-phase="betting"]) .rp-cell,
.rp.rp--closed .rp-cell { pointer-events: none; }
.rp[data-phase="spinning"] .rp-table,
.rp.rp--closed .rp-table { filter: brightness(0.72) saturate(0.8); }
.rp[data-phase="results"] .rp-cell:not(.is-win) { filter: saturate(0.3) brightness(0.45); }
.rp-cell.is-win {
  z-index: 2;
  box-shadow: inset 0 0 0 2px var(--p-color-roulette-gold), 0 0 14px var(--p-color-roulette-gold-soft);
  animation: rp-glow 0.9s ease-in-out infinite alternate;
}
.rp-cell.is-hit .rp-stake { box-shadow: 0 0 0 2px var(--p-color-roulette-gold), 0 0 12px var(--p-color-roulette-gold); }
.rp-cell.is-miss .rp-stake { opacity: 0.5; filter: grayscale(1); }
.rp-cell__win {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-roulette-gold);
  color: #2a1d00;
  font: 800 0.66rem/1.1 var(--p-font-family-body);
  text-shadow: none;
  white-space: nowrap;
  box-shadow: var(--p-shadow-200);
  animation: rp-pop 0.45s var(--p-motion-ease-bounce);
}

/* ------------------------------------------------------------------ toast */
.rp-toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translate(-50%, 8px);
  padding: var(--p-space-200) var(--p-space-400);
  border-radius: var(--p-border-radius-full);
  background: var(--p-color-roulette-scrim);
  border: 1px solid rgba(247, 222, 150, 0.4);
  box-shadow: var(--p-shadow-300);
  color: var(--p-color-text);
  font-size: 0.82rem;
  font-weight: var(--p-font-weight-semibold);
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--p-motion-duration-200) var(--p-motion-ease), transform var(--p-motion-duration-200) var(--p-motion-ease);
}
.rp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.rp-toast--critical { border-color: rgba(248, 113, 113, 0.7); background: rgba(69, 10, 10, 0.95); }
.rp-toast--warning { border-color: rgba(253, 224, 71, 0.7); background: rgba(66, 50, 4, 0.95); }

/* ------------------------------------------------------------------ dock */
.rp-dock {
  grid-area: dock;
  display: flex;
  flex-direction: column;
  gap: var(--p-space-200);
  min-height: var(--p-space-roulette-dock);
}
.rp-tray {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--p-space-100);
  padding: var(--p-space-200) var(--p-space-100) 0;
}
.rp-chip {
  position: relative;
  flex: 0 0 auto;
  width: var(--p-space-roulette-chip);
  height: var(--p-space-roulette-chip);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 0.86rem/1 var(--p-font-family-body);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--p-motion-duration-200) var(--p-motion-ease-bounce),
    box-shadow var(--p-motion-duration-200) var(--p-motion-ease),
    opacity var(--p-motion-duration-200) var(--p-motion-ease);
}
.rp-chip.rp-tone--gold .rp-chip__face { font-size: 0.62rem; letter-spacing: 0.02em; }
.rp-chip[aria-pressed="true"] {
  transform: translateY(-6px) scale(1.1);
  box-shadow: 0 0 0 3px var(--p-color-roulette-gold), 0 0 18px var(--p-color-roulette-gold-soft), 0 8px 14px rgba(0, 0, 0, 0.5);
}
.rp-chip[aria-disabled="true"] { opacity: 0.3; filter: grayscale(0.75); }
.rp-chip:focus-visible { outline: 2px solid var(--p-color-border-focus); outline-offset: 3px; border-radius: 50%; }

.rp-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--p-space-200); }
.rp-action {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-150);
  padding: 0 var(--p-space-200);
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border);
  color: var(--p-color-text);
  font-size: var(--p-font-size-body-sm);
  font-weight: var(--p-font-weight-semibold);
  white-space: nowrap;
  transition: transform var(--p-motion-duration-150) var(--p-motion-ease), opacity var(--p-motion-duration-200);
}
.rp-action:active { transform: scale(0.97); background: var(--p-color-bg-surface-hover); }
.rp-action[aria-disabled="true"] { opacity: 0.4; }
.rp-action__icon { font-size: 1.05rem; font-weight: 800; line-height: 1; color: var(--p-color-roulette-gold); }

/* spin + results card takes the dock's place, same footprint so the felt keeps its size */
.rp-status { display: none; }
.rp:not([data-phase="betting"]) .rp-tray,
.rp:not([data-phase="betting"]) .rp-actions { display: none; }
.rp:not([data-phase="betting"]) .rp-status {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--p-space-400);
  padding: var(--p-space-300) var(--p-space-400);
  border-radius: var(--p-border-radius-400);
  background: linear-gradient(180deg, var(--p-color-bg-surface-secondary), var(--p-color-bg-surface));
  border: 1px solid var(--p-color-border);
  box-shadow: var(--p-shadow-200);
}
.rp-status__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-status__title { font-size: 1.35rem; color: var(--p-color-roulette-gold); }
.rp-status__text { color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-sm); }
.rp-wheel {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #3b2a14 0 36%, #d9b25b 37% 43%, transparent 44%),
    repeating-conic-gradient(var(--p-color-roulette-red) 0 9.73deg, var(--p-color-roulette-black-deep) 9.73deg 19.46deg);
  box-shadow: 0 0 0 3px var(--p-color-roulette-rail), 0 0 0 5px rgba(247, 222, 150, 0.4), var(--p-shadow-200);
  animation: rp-spin 1.4s linear infinite;
}
.rp-ball {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--p-font-family-display);
  font-size: 1.75rem;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, 0.35),
    inset 0 6px 10px rgba(255, 255, 255, 0.22),
    0 0 0 3px var(--p-color-roulette-gold),
    0 0 24px var(--p-color-roulette-gold-soft);
  animation: rp-pop 0.5s var(--p-motion-ease-bounce);
}
.rp-ball--red { background: radial-gradient(circle at 35% 30%, #ef5a64, var(--p-color-roulette-red-deep)); }
.rp-ball--black { background: radial-gradient(circle at 35% 30%, #4a4f60, var(--p-color-roulette-black-deep)); }
.rp-ball--green { background: radial-gradient(circle at 35% 30%, #34d17c, var(--p-color-roulette-green-deep)); }
.rp-result__title { font-weight: var(--p-font-weight-bold); font-size: var(--p-font-size-body-md); }
.rp-result__traits { font-weight: var(--p-font-weight-medium); color: var(--p-color-text-secondary); }
.rp-result__net { font-size: 1.85rem; line-height: 1.1; }
.rp-result__net.is-up { color: var(--p-color-text-success); }
.rp-result__net.is-down { color: var(--p-color-text-critical); }
.rp-result__foot { font-size: var(--p-font-size-body-sm); color: var(--p-color-text-secondary); }

/* ------------------------------------------------------------------ bets sheet (Polaris Sheet-style bottom panel) */
.rp-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 8, 14, 0.62);
  backdrop-filter: blur(2px);
  animation: rp-fade var(--p-motion-duration-200) var(--p-motion-ease);
}
.rp-sheet {
  width: 100%;
  max-width: 560px;
  max-height: min(80dvh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--p-space-400) calc(var(--p-space-500) + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--p-color-bg-surface);
  border: 1px solid var(--p-color-border);
  border-bottom: none;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  animation: rp-sheet-in var(--p-motion-duration-300) var(--p-motion-ease);
}
.rp-sheet__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--p-space-300);
  padding: var(--p-space-400) 0 var(--p-space-300);
  background: var(--p-color-bg-surface);
  border-bottom: 1px solid var(--p-color-border-secondary);
}
.rp-sheet__head h2 { font-size: var(--p-font-size-heading-lg); }
.rp-sheet__total { margin-left: auto; color: var(--p-color-roulette-gold); font-weight: var(--p-font-weight-bold); white-space: nowrap; }
.rp-sheet__close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border);
  font-size: 1rem;
}
.rp-sheet__empty { color: var(--p-color-text-secondary); margin: var(--p-space-400) 0; }
.rp-sheet__actions { display: flex; justify-content: flex-end; margin: var(--p-space-300) 0 0; }
.rp-bet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--p-space-300);
  padding: var(--p-space-200) 0;
  border-bottom: 1px solid var(--p-color-border-secondary);
}
/* grid items honour z-index even when static: keep the row chips under the sticky head */
.rp-bet .rp-stake { position: static; z-index: auto; margin: 0; width: 38px; height: 38px; font-size: 0.72rem; box-shadow: var(--p-shadow-100); }
.rp-bet__name { display: flex; flex-direction: column; min-width: 0; }
.rp-bet__name small { color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-xs); overflow-wrap: anywhere; }
.rp-bet__win { display: flex; flex-direction: column; align-items: flex-end; font-weight: var(--p-font-weight-bold); color: var(--p-color-text-success); }
.rp-bet__win small { color: var(--p-color-text-secondary); font-weight: var(--p-font-weight-medium); font-size: 0.68rem; }
.rp-bet__win.is-lost { color: var(--p-color-text-critical); }
.rp-bet__remove {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--p-color-border);
  color: var(--p-color-text-secondary);
}
.rp-bet__remove:active { background: rgba(239, 68, 68, 0.15); color: var(--p-color-text-critical); }
.rp-help { scroll-margin-top: 80px; }
.rp-help:focus { outline: none; }
.rp-help h3 { font-size: var(--p-font-size-heading-md); margin: var(--p-space-500) 0 var(--p-space-200); }
.rp-help__steps {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: var(--p-space-100);
  color: var(--p-color-text-secondary);
  font-size: var(--p-font-size-body-sm);
}
.rp-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-space-300);
  padding: var(--p-space-200) var(--p-space-300);
  margin-bottom: var(--p-space-200);
  border-radius: var(--p-border-radius-300);
  background: var(--p-color-bg-surface-secondary);
}
.rp-pay__what { display: flex; flex-direction: column; min-width: 0; }
.rp-pay__what small { color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-xs); }
.rp-pay__times { color: var(--p-color-roulette-gold); font-size: 1.3rem; }
.rp-help__note { color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-sm); margin: var(--p-space-200) 0 0; }

/* ------------------------------------------------------------------ short portrait phones */
@media (orientation: portrait) and (max-height: 700px) {
  body.play--roulette { --p-space-roulette-chip: min(44px, 12.5vw); --p-space-roulette-stake: 22px; --p-space-roulette-dock: 100px; }
  .rp { gap: var(--p-space-150); }
  .rp-hud { gap: var(--p-space-200); padding-block: var(--p-space-100); }
  .rp-clock { width: 44px; height: 44px; }
  .rp-stat__value { font-size: 1.1rem; }
  .rp-tray { padding-top: var(--p-space-150); }
  .rp-action { min-height: 40px; }
}

/* ------------------------------------------------------------------ landscape phones: horizontal felt
   (small embeds such as the /demo controllers keep the vertical felt, scrolled) */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 540px) {
  body.play--roulette { --p-space-roulette-chip: 42px; --p-space-roulette-stake: 22px; }
  body.play--roulette .play-app { max-width: none; }
  body.play--roulette .play-stage {
    padding-left: max(var(--p-space-300), env(safe-area-inset-left));
    padding-right: max(var(--p-space-300), env(safe-area-inset-right));
  }
  .rp {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "hud hud" "felt dock";
  }
  .rp-hud { grid-template-columns: auto auto minmax(0, 1fr) auto; padding-block: 2px; }
  .rp-clock { width: 42px; height: 42px; justify-self: center; }
  .rp-stat { flex-direction: row; align-items: baseline; gap: var(--p-space-200); }
  .rp-stat--button { flex-direction: row; align-items: center; justify-content: flex-end; min-height: 40px; }
  .rp-stat__value { font-size: 1.15rem; }
  .rp-status__title { font-size: 1.05rem; }
  .rp-wheel, .rp-ball { width: 52px; height: 52px; }
  .rp-ball { font-size: 1.4rem; }

  .rp-dock { width: 152px; min-height: 0; justify-content: flex-end; }
  .rp-tray {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    row-gap: var(--p-space-300);
    padding: var(--p-space-200) 0 0;
  }
  .rp-actions { gap: var(--p-space-150); }
  .rp-action { flex-direction: column; gap: 1px; padding: 0; min-height: 46px; font-size: 0.64rem; }
  .rp:not([data-phase="betting"]) .rp-status { flex-direction: column; justify-content: center; text-align: center; padding: var(--p-space-300); }
  .rp-status__body { align-items: center; }
  .rp-result__net { font-size: 1.5rem; }

  .rp-table {
    min-height: 196px;
    grid-template-columns: minmax(30px, 0.8fr) repeat(12, minmax(0, 1fr)) minmax(30px, 0.8fr);
    grid-template-rows: repeat(3, minmax(30px, 1.3fr)) repeat(2, minmax(26px, 1fr));
  }
  .rp-cell,
  .rp-corner { grid-row: var(--lr); grid-column: var(--lc); }
  .rp-cell { font-size: clamp(0.8rem, 3.6vh, 1.1rem); }
  .rp-cell--even { flex-direction: row; }
  .rp-cell__diamond { margin: 0 2px 0 0; }
  /* numbers and 2:1 are taller than wide here: stake under the label */
  .rp-cell--num .rp-stake,
  .rp-cell--zero .rp-stake,
  .rp-cell--col .rp-stake {
    right: auto;
    top: auto;
    left: 50%;
    bottom: 3px;
    margin: 0 0 0 calc(var(--p-space-roulette-stake) / -2);
  }
  .rp-cell--num.has-stake .rp-cell__label,
  .rp-cell--zero.has-stake .rp-cell__label,
  .rp-cell--col.has-stake .rp-cell__label { transform: translateY(-9px); }
  .rp-cell--even .rp-stake,
  .rp-cell--dozen .rp-stake {
    position: absolute;
    right: 5px;
    top: 50%;
    margin: calc(var(--p-space-roulette-stake) / -2) 0 0;
  }
  .rp-cell--even.has-stake .rp-cell__label,
  .rp-cell--dozen.has-stake .rp-cell__label { transform: translateX(-10px); }
  .rp-corner { flex-direction: column; gap: 2px; font-size: 0.6rem; }
  /* the even-money row sits at the bottom here: toast over the top edge instead */
  .rp-toast { bottom: auto; top: 10px; transform: translate(-50%, -8px); }
  .rp-toast.is-on { transform: translate(-50%, 0); }
}

/* ------------------------------------------------------------------ motion */
@keyframes rp-drop { from { transform: translateY(-12px) scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rp-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rp-pulse { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes rp-glow { from { box-shadow: inset 0 0 0 2px var(--p-color-roulette-gold), 0 0 6px var(--p-color-roulette-gold-soft); } to { box-shadow: inset 0 0 0 2px var(--p-color-roulette-gold), 0 0 18px var(--p-color-roulette-gold); } }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes rp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }