/* Ruleta V9 · ocho salones cinematográficos.
   La hoja sólo modifica presentación; resultados, pagos y RTP siguen en el servidor. */

:root {
  color-scheme: dark;
}

.roulette-showcase *,
.roulette-cinematic * {
  box-sizing: border-box;
}

/* ───────────────── selector de ocho mesas ───────────────── */

.roulette-showcase {
  min-height: 100vh;
  padding: 0 0 clamp(60px, 8vw, 110px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(212, 163, 70, .13), transparent 29%),
    #040505;
  color: #f8f2e8;
}

.roulette-showcase__hero {
  position: relative;
  isolation: isolate;
  min-height: min(650px, 78vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(100px, 13vw, 168px) 24px clamp(72px, 9vw, 118px);
  text-align: center;
}

.roulette-showcase__hero::before,
.roulette-showcase__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.roulette-showcase__hero::before {
  background: url("../images/cinematic/roulette/ruleta-coleccion.webp") center 52% / cover no-repeat;
  filter: saturate(.9) contrast(1.04);
}

.roulette-showcase__hero::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .34) 34%, #040505 100%),
    radial-gradient(circle at center, rgba(0, 0, 0, .04), rgba(0, 0, 0, .7) 78%);
}

.roulette-showcase__back {
  position: absolute;
  top: clamp(24px, 4vw, 46px);
  left: clamp(20px, 5vw, 72px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 17px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(0, 0, 0, .46);
  color: #fff8ea;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.roulette-showcase__eyebrow,
.roulette-theme-card__copy > p {
  margin: 0;
  color: #e8c06b;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.roulette-showcase__hero h1 {
  max-width: 920px;
  margin: 12px 0 14px;
  color: #fff9ed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 6.8rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.045em;
  text-shadow: 0 10px 48px rgba(0, 0, 0, .92);
}

.roulette-showcase__lead {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 248, 236, .78);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.65;
  text-shadow: 0 3px 14px #000;
}

.roulette-showcase__rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.roulette-showcase__rules span {
  padding: 9px 14px;
  border: 1px solid rgba(255, 226, 159, .2);
  border-radius: 999px;
  background: rgba(3, 3, 4, .65);
  color: rgba(255, 248, 236, .8);
  font-size: .77rem;
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
}

.roulette-showcase__rules b {
  color: #f3ca70;
}

.roulette-theme-grid {
  position: relative;
  z-index: 2;
  width: min(1480px, calc(100% - 40px));
  margin: clamp(-52px, -4vw, -28px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}

.roulette-theme-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-accent-rgb), .34);
  border-radius: 28px;
  background: #090a0b;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .57), inset 0 1px rgba(255, 255, 255, .06);
}

.roulette-theme-card__visual {
  position: relative;
  isolation: isolate;
  min-height: clamp(310px, 32vw, 440px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #070809;
}

.roulette-theme-card__visual::before,
.roulette-theme-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.roulette-theme-card__visual::before {
  background-image: var(--theme-card-bg);
  background-position: center;
  background-size: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
}

.roulette-theme-card__visual::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .2) 55%, #090a0b 100%),
    radial-gradient(circle at center, rgba(var(--theme-accent-rgb), .05), rgba(0, 0, 0, .56));
}

.roulette-theme-card:hover .roulette-theme-card__visual::before {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.04);
}

.roulette-theme-card__number,
.roulette-theme-card__material {
  position: absolute;
  z-index: 3;
  top: 20px;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px #000;
}

.roulette-theme-card__number {
  left: 22px;
  color: var(--theme-accent-bright);
}

.roulette-theme-card__material {
  right: 22px;
  max-width: 58%;
  color: rgba(255, 255, 255, .74);
  text-align: right;
}

.roulette-theme-card__wheel {
  position: relative;
  width: min(58%, 280px);
  aspect-ratio: 1;
  border: clamp(8px, 1.2vw, 14px) solid rgba(8, 8, 9, .92);
  border-radius: 50%;
  background:
    radial-gradient(circle, #08090b 0 21%, transparent 22%),
    repeating-conic-gradient(from -4.86deg, #961f2b 0 4.86deg, #090a0c 4.86deg 9.72deg);
  box-shadow:
    0 24px 55px rgba(0, 0, 0, .76),
    0 0 0 2px var(--theme-accent),
    0 0 38px rgba(var(--theme-accent-rgb), .44),
    inset 0 0 0 7px rgba(222, 180, 91, .46),
    inset 0 0 34px #000;
  transform: perspective(850px) rotateX(18deg);
}

.roulette-theme-card__wheel::before,
.roulette-theme-card__wheel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.roulette-theme-card__wheel::before {
  inset: 18%;
  border: 2px solid rgba(255, 255, 255, .22);
  background: radial-gradient(circle, var(--theme-secondary), #050607 72%);
}

.roulette-theme-card__wheel::after {
  top: -14px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 20px solid var(--theme-accent-bright);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 8px rgba(var(--theme-accent-rgb), .9));
}

.roulette-theme-card__wheel i {
  position: absolute;
  inset: 34%;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--theme-accent-bright), var(--theme-accent) 30%, #090a0b 70%);
  box-shadow: 0 0 18px rgba(var(--theme-accent-rgb), .58);
}

.roulette-theme-card__wheel b {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #070809;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
}

.roulette-theme-card__copy {
  padding: clamp(25px, 3.4vw, 42px);
}

.roulette-theme-card__copy > p {
  color: var(--theme-accent);
}

.roulette-theme-card__copy h2 {
  margin: 9px 0 12px;
  color: #fff8ea;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -.03em;
}

.roulette-theme-card__copy > span {
  display: block;
  min-height: 3.2em;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6;
}

.roulette-theme-card__copy a,
.roulette-showcase__footer a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  color: var(--theme-accent-bright, #f3cb74);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}

.roulette-theme-card__copy a b {
  font-size: 1.2rem;
  transition: transform .2s ease;
}

.roulette-theme-card__copy a:hover b {
  transform: translateX(4px);
}

.roulette-showcase__footer {
  width: min(900px, calc(100% - 40px));
  margin: clamp(52px, 7vw, 90px) auto 0;
  text-align: center;
}

.roulette-showcase__footer p {
  color: rgba(255, 255, 255, .58);
  line-height: 1.65;
}

.roulette-showcase__footer a {
  color: #e7bf69;
}

/* ───────────────── sala y rueda ───────────────── */

html:has(.roulette-cinematic) {
  min-height: 100%;
  background: #030405;
}

body.roulette-cinematic {
  --wheel-size: clamp(430px, 42vw, 640px);
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #030405;
  color: #f8f5ef;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.roulette-cinematic::before,
body.roulette-cinematic::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.roulette-cinematic::before {
  z-index: -2;
  background-image: var(--roulette-bg);
  background-position: center;
  background-size: cover;
  filter: saturate(.92) contrast(1.04);
}

body.roulette-cinematic::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .3)),
    linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .32));
}

.roulette-confetti {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.roulette-room {
  width: min(1540px, calc(100% - 34px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px 0 38px;
}

.roulette-room__header {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--theme-accent-rgb), .24);
  border-radius: 20px;
  background: rgba(2, 3, 5, .66);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
}

.roulette-room__back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  color: var(--theme-accent-bright);
  font-size: 1.2rem;
  text-decoration: none;
}

.roulette-room__header p,
.roulette-panel__heading p {
  margin: 0 0 3px;
  color: var(--theme-accent);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.roulette-room__header h1 {
  margin: 0;
  color: #fff9ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 500;
}

.roulette-room__header > span {
  color: rgba(255, 255, 255, .58);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.roulette-console {
  min-height: calc(100vh - 128px);
  display: grid;
  grid-template-columns: minmax(500px, 1.35fr) minmax(410px, .86fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 4vw, 64px) clamp(4px, 2vw, 28px);
}

.roulette-stage {
  position: relative;
  min-width: 0;
  min-height: calc(var(--wheel-size) + 95px);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 28px 45px rgba(0, 0, 0, .55));
}

.roulette-stage__halo {
  position: absolute;
  width: calc(var(--wheel-size) * 1.25);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--theme-accent-rgb), .22), rgba(var(--theme-accent-rgb), .06) 38%, transparent 69%);
  filter: blur(12px);
  opacity: .78;
}

.roulette-wheel {
  position: relative;
  z-index: 3;
  width: var(--wheel-size);
  aspect-ratio: 1;
  border: clamp(14px, 1.6vw, 24px) solid #08090a;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(0, 0, 0, .22) 19% 24%, transparent 25%),
    var(--roulette-sectors, repeating-conic-gradient(from -4.86deg, #9c1f2c 0 4.86deg, #07080a 4.86deg 9.72deg));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .74),
    0 0 0 2px rgba(255, 255, 255, .17),
    0 0 0 5px var(--theme-secondary),
    0 0 40px rgba(var(--theme-accent-rgb), .32),
    inset 0 0 0 5px rgba(228, 186, 94, .58),
    inset 0 0 0 14px rgba(0, 0, 0, .48),
    inset 0 0 45px #000;
  transform-origin: center;
  transition: transform 4s ease-out;
  will-change: transform;
}

.roulette-wheel::before,
.roulette-wheel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.roulette-wheel::before {
  inset: 17%;
  border: 2px solid rgba(255, 255, 255, .22);
  background: var(--theme-wheel-inner);
  box-shadow: inset 0 0 44px #000, 0 0 0 7px rgba(0, 0, 0, .62);
}

.roulette-wheel::after {
  inset: 27%;
  border: 1px solid rgba(var(--theme-accent-rgb), .42);
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .12) 0 1deg, transparent 1deg 30deg),
    radial-gradient(circle, rgba(var(--theme-accent-rgb), .18), transparent 67%);
}

.roulette-wheel__rim {
  position: absolute;
  inset: 9.5%;
  z-index: 3;
  border: 2px solid rgba(242, 205, 124, .5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .34), 0 0 12px rgba(var(--theme-accent-rgb), .2);
}

.roulette-wheel__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  width: 23%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, var(--theme-accent-bright), var(--theme-accent) 25%, var(--theme-secondary) 55%, #050607 78%);
  box-shadow: 0 10px 26px #000, 0 0 28px rgba(var(--theme-accent-rgb), .5);
  transform: translate(-50%, -50%);
}

.roulette-wheel__hub span {
  color: rgba(2, 3, 4, .82);
  font-size: clamp(1.4rem, 3vw, 2.7rem);
  text-shadow: 0 1px rgba(255, 255, 255, .22);
}

.roulette-wheel__numbers {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 50%;
}

.roulette-number {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.15em;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.52rem, 1.02vw, .87rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 3px #000, 0 0 3px #000;
  transform: translate(-50%, -50%) rotate(var(--number-angle)) translateY(calc(var(--wheel-size) * -.427)) rotate(90deg);
  transform-origin: center;
}

.roulette-pointer {
  position: absolute;
  top: calc(50% - (var(--wheel-size) / 2) - 14px);
  left: 50%;
  z-index: 12;
  width: clamp(38px, 4vw, 58px);
  height: clamp(48px, 5vw, 70px);
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .72)) drop-shadow(0 0 10px rgba(var(--theme-accent-rgb), .75));
}

.roulette-pointer::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 100%, 5% 0, 95% 0);
  background: linear-gradient(90deg, var(--theme-secondary), var(--theme-accent-bright), var(--theme-secondary));
}

.roulette-pointer i {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 9px;
  height: 9px;
  z-index: 2;
  border-radius: 50%;
  background: #fff7dd;
  transform: translateX(-50%);
}

.roulette-ball-track {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: calc(var(--wheel-size) * .785);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.roulette-ball {
  position: absolute;
  top: -6px;
  left: 50%;
  width: clamp(12px, 1.5vw, 20px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff, #eee3c9 45%, #8b795e 76%, #17181a);
  box-shadow: 0 4px 9px #000, 0 0 9px #fff5cf;
  transform: translateX(-50%);
}

.roulette-is-spinning .roulette-ball-track {
  animation: roulette-ball-orbit .72s linear infinite reverse;
}

.roulette-is-spinning .roulette-stage__halo {
  animation: roulette-halo 1.2s ease-in-out infinite alternate;
}

.roulette-stage__caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 13;
  min-width: 185px;
  padding: 10px 18px;
  border: 1px solid rgba(var(--theme-accent-rgb), .33);
  border-radius: 999px;
  background: rgba(2, 3, 5, .78);
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

.roulette-stage__caption small,
.roulette-stage__caption strong {
  display: block;
}

.roulette-stage__caption small {
  color: rgba(255, 255, 255, .56);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.roulette-stage__caption strong {
  margin-top: 2px;
  color: var(--theme-accent-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
}

@keyframes roulette-ball-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes roulette-halo {
  to { opacity: 1; transform: scale(1.035); }
}

/* ───────────────── panel y tablero ───────────────── */

.roulette-panel {
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(var(--theme-accent-rgb), .31);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .06), transparent 22%),
    var(--theme-panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .67), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px);
}

.roulette-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.roulette-panel__heading h2 {
  margin: 0;
  color: #fff9ef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -.025em;
}

.roulette-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .6);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.roulette-panel__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55d892;
  box-shadow: 0 0 11px #55d892;
}

.roulette-stats {
  display: grid;
  grid-template-columns: 1.3fr 1fr .72fr;
  gap: 8px;
  margin: 16px 0;
}

.roulette-stats article {
  min-width: 0;
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(0, 0, 0, .31);
}

.roulette-stats span,
.roulette-controls label > span,
.roulette-number-bet__heading span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .5);
  font-size: .58rem;
  font-weight: 820;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.roulette-stats strong,
.roulette-stats input {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #fff8ea;
  font-family: inherit;
  font-size: clamp(.82rem, 1.5vw, 1rem);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: 0;
}

.roulette-controls {
  display: grid;
  grid-template-columns: .85fr .85fr 1.3fr;
  gap: 9px;
}

.roulette-controls label {
  min-width: 0;
}

.roulette-controls select,
.roulette-controls input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  background: rgba(0, 0, 0, .38);
  color: #fff8ed;
  padding: 0 11px;
  font: inherit;
  font-size: .83rem;
  outline: 0;
}

.roulette-controls select:focus,
.roulette-controls input:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), .13);
}

.roulette-number-bet[hidden] {
  display: none !important;
}

.roulette-number-bet {
  position: relative;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(var(--theme-accent-rgb), .24);
  border-radius: 18px;
  background: rgba(0, 0, 0, .3);
}

.roulette-number-bet__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.roulette-number-bet__heading span {
  margin: 0;
}

.roulette-number-bet__heading output {
  min-width: 32px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--theme-accent);
  color: #050607;
  font-weight: 900;
}

#bet-number {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.roulette-number-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.roulette-number-button {
  min-width: 0;
  height: 29px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  color: #fff;
  font-size: .66rem;
  font-weight: 850;
  cursor: pointer;
}

.roulette-number-button--red { background: linear-gradient(145deg, #b42835, #68131c); }
.roulette-number-button--black { background: linear-gradient(145deg, #25282d, #08090a); }
.roulette-number-button--green { background: linear-gradient(145deg, #269467, #0a5037); }

.roulette-number-button:hover,
.roulette-number-button.is-selected {
  border-color: var(--theme-accent-bright);
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), .3), 0 0 15px rgba(var(--theme-accent-rgb), .34);
  transform: translateY(-1px);
}

.roulette-hint {
  min-height: 18px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .52);
  font-size: .72rem;
  line-height: 1.5;
}

.roulette-hint.is-ready {
  color: var(--theme-accent-bright);
}

.roulette-actions {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10px;
  margin-top: 16px;
}

.roulette-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.roulette-button--quiet {
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .72);
}

.roulette-button--primary {
  background: linear-gradient(135deg, var(--theme-accent-bright), var(--theme-accent) 48%, var(--theme-secondary));
  color: #050607;
  box-shadow: 0 10px 28px rgba(var(--theme-accent-rgb), .22);
}

.roulette-button--primary b {
  font-size: 1.1rem;
  transition: transform .2s ease;
}

.roulette-button--primary:not(:disabled):hover b {
  transform: translateX(4px);
}

.roulette-button:disabled {
  opacity: .36;
  cursor: not-allowed;
  filter: grayscale(.55);
}

@media (max-width: 1050px) {
  body.roulette-cinematic {
    --wheel-size: min(78vw, 560px);
  }

  body.roulette-cinematic::before {
    background-image: var(--roulette-bg-mobile);
    background-position: center top;
  }

  .roulette-console {
    grid-template-columns: 1fr;
    padding-top: 22px;
  }

  .roulette-stage {
    min-height: calc(var(--wheel-size) + 80px);
  }

  .roulette-panel {
    width: min(680px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .roulette-theme-grid {
    width: min(100% - 24px, 620px);
    grid-template-columns: 1fr;
  }

  .roulette-theme-card__visual {
    min-height: 330px;
  }

  .roulette-theme-card__visual::before {
    background-image: var(--theme-card-bg-mobile);
    background-position: center 38%;
  }

  .roulette-showcase__hero {
    min-height: 590px;
  }

  .roulette-room {
    width: min(100% - 16px, 680px);
    padding-top: 8px;
  }

  .roulette-room__header {
    position: relative;
    z-index: 20;
    min-height: 60px;
    gap: 10px;
    border-radius: 16px;
  }

  .roulette-room__header > span {
    display: none;
  }

  .roulette-room__header h1 {
    font-size: 1rem;
  }

  .roulette-room__back {
    width: 38px;
    height: 38px;
  }

  .roulette-console {
    min-height: 0;
    gap: 12px;
    padding: 10px 0 26px;
  }

  .roulette-stage__caption {
    bottom: 2px;
    min-width: 154px;
    padding: 8px 13px;
  }

  .roulette-panel {
    padding: 16px;
    border-radius: 22px;
  }

  .roulette-panel__heading h2 {
    font-size: 1.55rem;
  }

  .roulette-stats article {
    min-height: 68px;
    padding: 10px;
  }

  .roulette-controls {
    grid-template-columns: 1fr 1fr;
  }

  .roulette-controls label:last-child {
    grid-column: 1 / -1;
  }

  .roulette-number-board {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  body.roulette-cinematic {
    --wheel-size: min(89vw, 430px);
  }

  .roulette-showcase__hero {
    min-height: 540px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .roulette-showcase__hero h1 {
    font-size: clamp(2.8rem, 16vw, 4.4rem);
  }

  .roulette-showcase__rules {
    max-width: 350px;
  }

  .roulette-theme-card__visual {
    min-height: 285px;
  }

  .roulette-theme-card__wheel {
    width: min(61%, 230px);
  }

  .roulette-stage {
    min-height: calc(var(--wheel-size) + 66px);
  }

  .roulette-number {
    font-size: clamp(.42rem, 2vw, .58rem);
  }

  .roulette-pointer {
    top: calc(50% - (var(--wheel-size) / 2) - 9px);
  }

  .roulette-panel__status {
    display: none;
  }

  .roulette-stats {
    grid-template-columns: 1.2fr 1fr .72fr;
    gap: 5px;
  }

  .roulette-stats article {
    padding: 9px 7px;
  }

  .roulette-stats span,
  .roulette-controls label > span {
    font-size: .52rem;
  }

  .roulette-controls select,
  .roulette-controls input {
    height: 43px;
    padding: 0 8px;
    font-size: .77rem;
  }

  .roulette-number-bet {
    padding: 10px;
  }

  .roulette-number-board {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 3px;
  }

  .roulette-number-button {
    height: 28px;
  }

  .roulette-actions {
    grid-template-columns: .72fr 1.28fr;
  }

  .roulette-button {
    min-height: 50px;
    font-size: .64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roulette-theme-card__visual::before,
  .roulette-number-button,
  .roulette-button b {
    transition: none !important;
  }

  .roulette-stage__halo {
    animation: none !important;
  }
}