/* ==========================================================================
   Mesas: Blackjack multimano, Ruleta con racetrack y Slots con avalancha
   ========================================================================== */

/* ---------- BLACKJACK ---------- */

.bj-table {
  --card-base: clamp(48px, 7.2vw, 80px);
  --card-w: var(--card-base);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(560px, 74vh, 740px);
  padding: 20px clamp(10px, 2.5vw, 32px) 22px;
  padding-bottom: 30px;
  border: 10px solid #3a200c;
  border-radius: 0;
  outline: 2px solid rgba(212, 175, 55, 0.5);
  outline-offset: -16px;
  overflow: hidden;
}

.bj-arc {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-bottom: 6px;
  padding-inline: 90px;
  pointer-events: none;
  text-align: center;
  user-select: none;
}

.bj-arc-title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.bj-arc-rule {
  font-size: clamp(0.6rem, 1.4vw, 0.76rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--felt-line);
}

.bj-shoe {
  position: absolute;
  top: 24px;
  right: clamp(14px, 3vw, 40px);
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 78px;
}

.shoe-box {
  position: relative;
  width: 70px;
  height: 52px;
  border-radius: 0;
  background: linear-gradient(180deg, #2b2f35 0% 25%, color-mix(in srgb, #0e1013 33%, #2b2f35) 25% 50%, color-mix(in srgb, #0e1013 67%, #2b2f35) 50% 75%, #0e1013 75% 100%, #0e1013 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 6px 0 rgba(0, 0, 0, 0.5);
  transform: perspective(200px) rotateX(18deg);
}

.shoe-card {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 30px;
  border-radius: 0;
  background: repeating-linear-gradient(45deg, #9e1228 0 3px, #7d0b1c 3px 6px);
  border: 1.5px solid #f3e7c9;
}

.shoe-card:nth-child(2) {
  bottom: 11px;
  opacity: 0.8;
}

.shoe-card:nth-child(3) {
  bottom: 14px;
  opacity: 0.6;
}

.bj-shoe.is-shuffling .shoe-box {
  animation: shoe-shake 0.16s linear 7;
}

@keyframes shoe-shake {
  50% {
    transform: perspective(200px) rotateX(18deg) translateX(3px) rotate(2deg);
  }
}

.shoe-meter {
  position: relative;
  width: 70px;
  height: 6px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.shoe-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: var(--gold-grad);
  transition: transform 0.4s var(--ease-out);
}

.shoe-cut {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 25%;
  width: 2px;
  background: #ff4d6d;
}

.shoe-count {
  font-size: 0.68rem;
  color: var(--felt-ink);
  white-space: nowrap;
}

/* Entrenador Hi-Lo */

.bj-count {
  position: absolute;
  top: 24px;
  left: clamp(14px, 3vw, 40px);
  z-index: 4;
  display: grid;
  gap: 4px;
  min-width: 92px;
  padding: 8px 12px;
  border: 1px solid rgba(95, 214, 255, 0.45);
  border-radius: 0;
  background: rgba(4, 18, 30, 0.72);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}

.count-title {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9be7ff;
}

.count-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ink-dim);
}

.count-item output {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.bj-count[data-trend="hot"] {
  border-color: rgba(62, 207, 142, 0.8);
  box-shadow: none;
}

.bj-count[data-trend="cold"] {
  border-color: rgba(255, 90, 95, 0.7);
}

.bj-table.is-counting .card.is-face-up::after {
  content: attr(data-hilo);
  position: absolute;
  top: -7px;
  left: -5px;
  z-index: 3;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 0;
  font: 800 0.68rem/1.4 var(--font-ui);
  text-align: center;
  color: #fff;
  background: #4b515a;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.bj-table.is-counting .card[data-hilo="+1"].is-face-up::after {
  background: #1f9d55;
}

.bj-table.is-counting .card[data-hilo="-1"].is-face-up::after {
  background: #c0392b;
}

/* Crupier y manos */

.bj-dealer,
.bj-hand {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.hand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--felt-line);
}

.hand-cards {
  display: flex;
  justify-content: center;
  min-height: calc(var(--card-w) * 1.4);
  padding: 0 calc(var(--card-w) * 0.1);
}

.hand-cards .card + .card {
  margin-left: calc(var(--card-w) * -0.5);
}

.hand-cards[data-n="4"] .card + .card {
  margin-left: calc(var(--card-w) * -0.58);
}

.hand-cards[data-n="5"] .card + .card,
.hand-cards[data-n="6"] .card + .card,
.hand-cards[data-n="7"] .card + .card,
.hand-cards[data-n="8"] .card + .card {
  margin-left: calc(var(--card-w) * -0.66);
}

.hand-total {
  min-width: 42px;
  padding: 2px 10px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  letter-spacing: 0;
}

.hand-total:empty {
  visibility: hidden;
}

.bj-table .table-message {
  margin: 8px auto 10px;
  padding-inline: 8px;
}

/* Asientos */

.bj-seats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(4px, 1.6vw, 22px);
  width: 100%;
  margin-top: auto;
}

.bj-seat {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 6px;
  min-width: 0;
  padding: 6px 2px 4px;
  border-radius: 0;
  transition: opacity 0.3s, background 0.3s;
}

.bj-seat.is-playing {
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 240, 190, 0.07) 0% 17.5%, color-mix(in srgb, transparent 33%, rgba(255, 240, 190, 0.07)) 17.5% 35%, color-mix(in srgb, transparent 67%, rgba(255, 240, 190, 0.07)) 35% 52.5%, transparent 52.5% 70%, transparent 70%);
}

.bj-seat.is-idle {
  opacity: 0.4;
}

.seat-hands {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px 6px;
  min-height: calc(var(--card-base) * 1.4 + 34px);
  max-width: 100%;
}

.seat-hands[data-count="2"] .bj-hand {
  --card-w: calc(var(--card-base) * 0.84);
}

.seat-hands[data-count="3"] .bj-hand,
.seat-hands[data-count="4"] .bj-hand {
  --card-w: calc(var(--card-base) * 0.72);
}

.bj-hand {
  position: relative;
  padding: 6px 4px 4px;
  border-radius: 0;
  transition: background 0.3s, box-shadow 0.3s;
}

.bj-hand.is-active {
  background: rgba(255, 230, 150, 0.1);
  box-shadow: 0 0 0 2px rgba(247, 224, 138, 0.75);
}

.hand-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hand-bet {
  padding: 2px 8px;
  border-radius: 0;
  border: 1px solid rgba(247, 224, 138, 0.5);
  color: var(--gold-hi);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.hand-result {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 3px 10px;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.9vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
}

.hand-result:empty {
  display: none;
}

.bj-hand[data-result="win"] .hand-result,
.bj-hand[data-result="blackjack"] .hand-result {
  color: #1d1405;
  background: var(--gold-grad);
  box-shadow: none;
  animation: stamp 0.45s var(--ease-out);
}

.bj-hand[data-result="lose"] .hand-result,
.bj-hand[data-result="bust"] .hand-result {
  color: #fff;
  background: rgba(150, 10, 25, 0.92);
  animation: stamp 0.45s var(--ease-out);
}

.bj-hand[data-result="push"] .hand-result {
  color: #fff;
  background: rgba(40, 45, 55, 0.92);
  animation: stamp 0.45s var(--ease-out);
}

.bj-hand[data-result="lose"] .hand-cards,
.bj-hand[data-result="bust"] .hand-cards {
  filter: saturate(0.6) brightness(0.8);
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.8);
  }
}

.seat-sides {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.seat-sides:empty {
  display: none;
}

.seat-bets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 10px);
}

.bet-spot {
  --chip: 40px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.bet-spot.is-main {
  --chip: clamp(40px, 6vw, 56px);
  width: clamp(64px, 9.5vw, 96px);
}

.bet-spot.is-pp,
.bet-spot.is-t213 {
  --chip: clamp(26px, 3.6vw, 34px);
  width: clamp(44px, 5.8vw, 58px);
}

.bet-spot-ring {
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--felt-line);
  border-radius: 0;
  box-shadow: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.bet-spot.is-pp .bet-spot-ring,
.bet-spot.is-t213 .bet-spot-ring {
  border-style: dashed;
  border-width: 2px;
}

.bet-spot:hover:not(:disabled) .bet-spot-ring,
.bet-spot:focus-visible .bet-spot-ring {
  border-color: var(--gold-hi);
  box-shadow: none;
}

.bet-spot-label {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--felt-line);
  pointer-events: none;
}

.bet-spot.is-main .bet-spot-label {
  font-size: 1.4rem;
  opacity: 0.55;
}

.bet-spot.has-bet .bet-spot-label {
  opacity: 0;
}

.bet-spot-stack {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.bet-spot .chip-stack,
.bet-spot .chip-stack-item {
  width: var(--chip);
  height: var(--chip);
}

.bet-spot-amount {
  position: absolute;
  bottom: -9px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.75);
  color: var(--gold-hi);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

.bet-spot-amount:empty {
  display: none;
}

.bet-spot:disabled {
  cursor: default;
}

#panel-blackjack[data-mode="bet"] .bj-seats .bet-spot:not(:disabled) .bet-spot-ring::after {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  animation: glow-pulse 2.6s ease-in-out infinite;
}

#panel-blackjack[data-mode="bet"] #bj-play-controls,
#panel-blackjack[data-mode="bet"] #bj-insurance-controls,
#panel-blackjack[data-mode="play"] #bj-bet-controls,
#panel-blackjack[data-mode="play"] #bj-insurance-controls,
#panel-blackjack[data-mode="insurance"] #bj-bet-controls,
#panel-blackjack[data-mode="insurance"] #bj-play-controls {
  display: none;
}

#panel-blackjack:not([data-mode="bet"]) #bj-rack {
  opacity: 0.45;
  pointer-events: none;
}

/* Coach */

.bj-coach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(95, 214, 255, 0.4);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 34, 52, 0.92) 0% 25%, color-mix(in srgb, rgba(8, 18, 28, 0.95) 33%, rgba(14, 34, 52, 0.92)) 25% 50%, color-mix(in srgb, rgba(8, 18, 28, 0.95) 67%, rgba(14, 34, 52, 0.92)) 50% 75%, rgba(8, 18, 28, 0.95) 75% 100%, rgba(8, 18, 28, 0.95) 100%);
  box-shadow: var(--shadow-md);
}

.coach-badge {
  padding: 4px 10px;
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #04121c;
  background: linear-gradient(180deg, #bff1ff 0% 25%, color-mix(in srgb, #5fd6ff 33%, #bff1ff) 25% 50%, color-mix(in srgb, #5fd6ff 67%, #bff1ff) 50% 75%, #5fd6ff 75% 100%, #5fd6ff 100%);
}

.coach-tip {
  flex: 1 1 260px;
  margin: 0;
  font-weight: 600;
  color: #e7f8ff;
}

.coach-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 0.82rem;
  color: #9fc9dc;
}

.coach-score {
  color: #9be7ff;
  font-weight: 700;
}

.insure-label {
  color: var(--gold-hi);
  font-weight: 700;
}

/* ---------- RULETA ---------- */

.rl-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.rl-wheel-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 6px;
}

.rl-wheel {
  border-radius: 0;
  box-shadow: 0 30px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(212, 175, 55, 0.25);
}

.rl-result {
  position: absolute;
  right: 8%;
  top: 6%;
}

.result-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 3px solid var(--gold-hi);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.5);
  animation: badge-pop 0.5s var(--ease-out);
}

@keyframes badge-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

.rl-stats {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--panel-edge);
  border-radius: 0;
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

.stats-title {
  margin: 4px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.stats-title small {
  letter-spacing: 0.05em;
  text-transform: none;
}

.stats-hot {
  color: #ff8a65;
}

.stats-cold {
  color: #81d4fa;
}

.rl-history {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-history li:first-child {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--gold-hi);
}

.hotcold {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.num-list {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.num-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  font-size: 0.82rem;
}

.freq {
  display: grid;
  gap: 8px;
}

.freq-row {
  display: grid;
  grid-template-columns: 76px 1fr 76px;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--ink-dim);
}

.freq-label-right {
  text-align: right;
}

.freq-bar {
  display: flex;
  height: 10px;
  border-radius: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
}

.freq-bar span {
  flex-basis: 0;
  transition: flex-grow 0.6s var(--ease-out);
}

.freq-left {
  background: #c9a23a;
}

.freq-right {
  background: #6d7885;
}

.freq-zero {
  background: var(--roulette-green);
}

.freq-row.is-redblack .freq-left {
  background: var(--ruby);
}

.freq-row.is-redblack .freq-right {
  background: #30343a;
}

.freq-zero-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-mute);
}

.view-switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 2px auto 10px;
}

.rl-board-scroll,
.rl-track-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 6px 2px 14px;
  -webkit-overflow-scrolling: touch;
}

.rl-board {
  display: grid;
  grid-template-columns: minmax(48px, 0.9fr) minmax(0, 12fr) minmax(52px, 1fr);
  grid-template-rows: auto auto auto;
  min-width: 680px;
  padding: 16px 16px 20px;
  border: 8px solid #3a200c;
  border-radius: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.rl-board.is-locked .rb-spot {
  cursor: not-allowed;
}

.rb-spot {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--touch);
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--felt-line);
  background: transparent;
  color: var(--felt-ink);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.rb-spot:hover,
.rb-spot.is-covered {
  background: rgba(255, 246, 200, 0.16);
}

.rb-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.rb-zero {
  grid-row: 1;
  grid-column: 1;
  border-radius: 0;
  font-size: 1.3rem;
}

.rb-numbers {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(50px, 1fr));
}

.rb-num {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
}

.rb-num .rb-label,
.rb-zero .rb-label {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
}

.rb-num.is-red .rb-label {
  background: var(--ruby);
}

.rb-num.is-black .rb-label {
  background: var(--roulette-black);
}

.rb-zero .rb-label {
  background: var(--roulette-green);
}

.rb-spot.is-result {
  background: rgba(255, 236, 170, 0.35);
  box-shadow: inset 0 0 0 4px var(--gold-hi);
  z-index: 1;
}

.rb-hot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.rb-hot {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.rb-hot:hover,
.rb-hot:focus-visible {
  background: rgba(255, 246, 200, 0.35);
  box-shadow: 0 0 0 2px rgba(247, 224, 138, 0.8);
}

.rb-columns {
  grid-row: 1;
  grid-column: 3;
  display: grid;
  grid-template-rows: repeat(3, minmax(50px, 1fr));
}

.rb-dozens {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.rb-evens {
  grid-row: 3;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.rb-outside {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}

.rb-color::after {
  content: "";
  width: 34px;
  height: 22px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.rb-color.is-red::after {
  background: var(--ruby);
}

.rb-color.is-black::after {
  background: var(--roulette-black);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.rb-spot.is-winning .bet-marker {
  animation: marker-win 0.7s ease-in-out 3;
}

.rb-spot.is-losing .bet-marker {
  opacity: 0.35;
  transform: translate(-50%, -50%) scale(0.85);
}

@keyframes marker-win {
  50% {
    transform: translate(-50%, -50%) scale(1.25);
    filter: none;
  }
}

/* Racetrack francés */

.rl-track-wrap {
  display: grid;
  gap: 8px;
}

.rl-track-wrap .seg-group {
  justify-content: center;
}

.rl-track {
  display: block;
  width: 100%;
  min-width: 780px;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

.rt-base {
  fill: #3a200c;
  stroke: #c9a23a;
  stroke-width: 3;
}

.rt-sector,
.rt-cell {
  cursor: pointer;
  outline: none;
}

.rt-sector path {
  fill: var(--felt-a);
  stroke: var(--felt-line);
  stroke-width: 2;
  transition: filter 0.2s;
}

.rt-sector text {
  fill: var(--felt-ink);
  font: 700 26px var(--font-display);
  letter-spacing: 0.12em;
  pointer-events: none;
}

.rt-sector:hover path,
.rt-sector:focus-visible path {
  filter: brightness(1.35);
}

.rt-sector:focus-visible path {
  stroke: #fff;
  stroke-width: 4;
}

.rt-cell path {
  stroke: rgba(255, 236, 170, 0.65);
  stroke-width: 1.5;
  transition: fill 0.15s;
}

.rt-cell.is-red path {
  fill: #b3001b;
}

.rt-cell.is-black path {
  fill: #16181b;
}

.rt-cell.is-green path {
  fill: #0e8f47;
}

.rt-cell text {
  fill: #fff;
  font: 700 22px Georgia, serif;
  pointer-events: none;
}

.rt-cell.is-preview path,
.rt-cell:hover path {
  fill: #d4af37;
}

.rt-cell.is-preview text,
.rt-cell:hover text {
  fill: #1d1405;
}

.rt-cell.has-bet path {
  stroke: #ffe37a;
  stroke-width: 4;
}

.rt-cell.is-result path {
  fill: #ffe37a;
}

.rt-cell.is-result text {
  fill: #1d1405;
}

.rt-cell:focus-visible path {
  stroke: #fff;
  stroke-width: 4;
}

.rl-track.is-locked .rt-cell,
.rl-track.is-locked .rt-sector {
  cursor: not-allowed;
}

.rl-calls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.call-chip {
  padding: 4px 12px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 0;
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold-hi);
  font-size: 0.82rem;
  font-weight: 700;
  animation: toast-in 0.3s var(--ease-out);
}

/* ---------- SLOTS ---------- */

.slot-cabinet {
  --cell: clamp(62px, 16vw, 108px);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px clamp(12px, 3vw, 28px) 20px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0% 7.5%, color-mix(in srgb, transparent 33%, rgba(255, 255, 255, 0.08)) 7.5% 15%, color-mix(in srgb, transparent 67%, rgba(255, 255, 255, 0.08)) 15% 22.5%, transparent 22.5% 30%, transparent 30%),
    linear-gradient(135deg, #3b2a0a 0% 10%, color-mix(in srgb, #120c03 33%, #3b2a0a) 10% 20%, color-mix(in srgb, #120c03 67%, #3b2a0a) 20% 30%, #120c03 30% 40%, #120c03 40% 45%, color-mix(in srgb, #3b2a0a 33%, #120c03) 45% 50%, color-mix(in srgb, #3b2a0a 67%, #120c03) 50% 55%, #3b2a0a 55% 60%, #3b2a0a 60% 70%, color-mix(in srgb, #0d0902 33%, #3b2a0a) 70% 80%, color-mix(in srgb, #0d0902 67%, #3b2a0a) 80% 90%, #0d0902 90% 100%, #0d0902 100%);
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 4px #b8912a, 0 0 0 6px #3b2a0a, 0 0 0 8px #f2d27a, var(--shadow-lg);
}

.slot-marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.marquee-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.marquee-title b {
  font-style: italic;
}

.bulbs {
  position: relative;
  flex: 1;
  height: 10px;
  max-width: 140px;
  background-image: radial-gradient(circle, #fff6c2 0px, #fff6c2 3px 3.12px, color-mix(in srgb, transparent 33%, #fff6c2) 3.12px 3.25px, color-mix(in srgb, transparent 67%, #fff6c2) 3.25px 3.38px, transparent 3.38px 3.5px, transparent 3.5px);
  background-size: 18px 10px;
}

/* Las bombillas encendidas en dorado se superponen y parpadean solo con la opacidad. */
.bulbs::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #d4af37 0px, #d4af37 3px 3.12px, color-mix(in srgb, transparent 33%, #d4af37) 3.12px 3.25px, color-mix(in srgb, transparent 67%, #d4af37) 3.25px 3.38px, transparent 3.38px 3.5px, transparent 3.5px);
  background-size: 18px 10px;
  filter: none;
  opacity: 0;
  animation: bulbs 0.9s steps(1) infinite;
}

@keyframes bulbs {
  50%,
  100% {
    opacity: 1;
  }
}

#panel-slots.is-free-spins .slot-cabinet {
  box-shadow: 0 0 0 4px #5fd6ff, 0 0 0 6px #0b2a55, 0 0 0 8px #bff1ff, var(--shadow-lg);
}

.slot-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
}

.cascade-ladder {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cascade-ladder li {
  min-width: 48px;
  padding: 5px 10px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--ink-mute);
  font: 800 0.95rem var(--font-display);
  text-align: center;
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, box-shadow 0.25s;
}

.cascade-ladder li.is-passed {
  color: var(--gold);
  border-color: rgba(212, 175, 55, 0.6);
}

.cascade-ladder li.is-active {
  color: #1d1405;
  background: var(--gold-grad);
  box-shadow: none;
  transform: scale(1.15);
}

.fs-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 6px 14px;
  border: 1px solid #5fd6ff;
  border-radius: 0;
  background: linear-gradient(180deg, #0b2a55 0% 25%, color-mix(in srgb, #061530 33%, #0b2a55) 25% 50%, color-mix(in srgb, #061530 67%, #0b2a55) 50% 75%, #061530 75% 100%, #061530 100%);
  color: #cfefff;
  font-size: 0.88rem;
}

.fs-title {
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #9be7ff;
}

.fs-panel b,
.fs-panel output {
  color: #fff;
  font-weight: 800;
}

.slot-banner {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 8;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.slot-banner-text {
  padding: 10px 26px;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #1d1405;
  background: var(--gold-grad);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.6);
  animation: banner-in 0.6s var(--ease-out);
  transition: opacity 0.5s, transform 0.5s;
}

.slot-banner-text.is-free {
  color: #051a33;
  background: linear-gradient(180deg, #e8fdff 0% 13.75%, color-mix(in srgb, #5fd6ff 33%, #e8fdff) 13.75% 27.5%, color-mix(in srgb, #5fd6ff 67%, #e8fdff) 27.5% 41.25%, #5fd6ff 41.25% 55%, #5fd6ff 55% 66.25%, color-mix(in srgb, #1b5fd6 33%, #5fd6ff) 66.25% 77.5%, color-mix(in srgb, #1b5fd6 67%, #5fd6ff) 77.5% 88.75%, #1b5fd6 88.75% 100%, #1b5fd6 100%);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.6);
}

.slot-banner-text.is-jackpot {
  color: #fff;
  background: linear-gradient(180deg, #ff6b7d 0% 13.75%, color-mix(in srgb, #d0021b 33%, #ff6b7d) 13.75% 27.5%, color-mix(in srgb, #d0021b 67%, #ff6b7d) 27.5% 41.25%, #d0021b 41.25% 55%, #d0021b 55% 66.25%, color-mix(in srgb, #6d0010 33%, #d0021b) 66.25% 77.5%, color-mix(in srgb, #6d0010 67%, #d0021b) 77.5% 88.75%, #6d0010 88.75% 100%, #6d0010 100%);
  text-shadow: 0 2px 0 #3a0008;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.6);
}

.slot-banner-text.is-leaving {
  opacity: 0;
  transform: scale(1.3);
}

@keyframes banner-in {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-10deg);
  }
  70% {
    transform: scale(1.08);
  }
}

.slot-window {
  position: relative;
  padding: 10px;
  border-radius: 0;
  background: linear-gradient(180deg, #0a0a0c 0% 25%, color-mix(in srgb, #1a1a20 33%, #0a0a0c) 25% 50%, color-mix(in srgb, #1a1a20 67%, #0a0a0c) 50% 75%, #1a1a20 75% 100%, #1a1a20 100%);
  box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.55), inset 0 10px 0 rgba(0, 0, 0, 0.9);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--cell));
  gap: 6px;
}

.reel {
  position: relative;
  height: calc(var(--cell) * 4);
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0% 4.5%, color-mix(in srgb, transparent 33%, rgba(0, 0, 0, 0.55)) 4.5% 9%, color-mix(in srgb, transparent 67%, rgba(0, 0, 0, 0.55)) 9% 13.5%, transparent 13.5% 18%, transparent 18%, transparent 82% 86.5%, color-mix(in srgb, rgba(0, 0, 0, 0.55) 33%, transparent) 86.5% 91%, color-mix(in srgb, rgba(0, 0, 0, 0.55) 67%, transparent) 91% 95.5%, rgba(0, 0, 0, 0.55) 95.5% 100%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(90deg, #d9d4c7 0% 11.25%, color-mix(in srgb, #fbf9f3 33%, #d9d4c7) 11.25% 22.5%, color-mix(in srgb, #fbf9f3 67%, #d9d4c7) 22.5% 33.75%, #fbf9f3 33.75% 45%, #fbf9f3 45%, #fbf9f3 55% 66.25%, color-mix(in srgb, #cfc9ba 33%, #fbf9f3) 66.25% 77.5%, color-mix(in srgb, #cfc9ba 67%, #fbf9f3) 77.5% 88.75%, #cfc9ba 88.75% 100%, #cfc9ba 100%);
}

.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0% 7.5%, color-mix(in srgb, transparent 33%, rgba(255, 255, 255, 0.25)) 7.5% 15%, color-mix(in srgb, transparent 67%, rgba(255, 255, 255, 0.25)) 15% 22.5%, transparent 22.5% 30%, transparent 30%, transparent 70% 77.5%, color-mix(in srgb, rgba(0, 0, 0, 0.15) 33%, transparent) 77.5% 85%, color-mix(in srgb, rgba(0, 0, 0, 0.15) 67%, transparent) 85% 92.5%, rgba(0, 0, 0, 0.15) 92.5% 100%, rgba(0, 0, 0, 0.15) 100%);
}

.reel-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

.reel.is-spinning .reel-strip {
  filter: none;
}

.slot-cell {
  display: grid;
  place-items: center;
  height: var(--cell);
  padding: 12%;
}

.slot-cell .symbol-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
}

.slot-cell.is-win {
  position: relative;
  animation: cell-win 0.7s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 215, 90, 0.55) 0% 17.5%, color-mix(in srgb, transparent 33%, rgba(255, 215, 90, 0.55)) 17.5% 35%, color-mix(in srgb, transparent 67%, rgba(255, 215, 90, 0.55)) 35% 52.5%, transparent 52.5% 70%, transparent 70%);
}

.slot-cell.is-scatter {
  position: relative;
  animation: cell-win 0.8s ease-in-out infinite;
  background: radial-gradient(circle, rgba(95, 214, 255, 0.55) 0% 17.5%, color-mix(in srgb, transparent 33%, rgba(95, 214, 255, 0.55)) 17.5% 35%, color-mix(in srgb, transparent 67%, rgba(95, 214, 255, 0.55)) 35% 52.5%, transparent 52.5% 70%, transparent 70%);
}

/* El destello de las celdas ganadoras: halo fijo cuya opacidad late (sin filtros animados). */
.slot-cell.is-win::after,
.slot-cell.is-scatter::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  animation: glow-pulse 0.7s ease-in-out infinite;
}

.slot-cell.is-scatter::after {
  box-shadow: none;
  animation-duration: 0.8s;
}

.slot-cell.is-exploding {
  animation: explode 0.32s ease-in forwards;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.9) 0% 17.5%, color-mix(in srgb, transparent 33%, rgba(255, 240, 180, 0.9)) 17.5% 35%, color-mix(in srgb, transparent 67%, rgba(255, 240, 180, 0.9)) 35% 52.5%, transparent 52.5% 70%, transparent 70%);
}

@keyframes cell-win {
  50% {
    transform: scale(1.1);
  }
}

@keyframes explode {
  to {
    transform: scale(1.4);
    opacity: 0;
    filter: brightness(2.2);
  }
}

.slot-lines,
.slot-fx {
  position: absolute;
  inset: 10px;
  pointer-events: none;
}

.slot-lines {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.slot-fx {
  z-index: 6;
}

.win-line {
  fill: none;
  stroke: #ffe37a;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: line-draw 0.5s var(--ease-out) forwards;
}

.win-line.is-super {
  stroke: #ff5d73;
  stroke-width: 7;
  filter: none;
}

@keyframes line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.win-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 900 clamp(1.2rem, 4.5vw, 2rem) var(--font-display);
  color: #fff6c2;
  text-shadow: 0 4px 0 #7a4e06;
  white-space: nowrap;
  animation: pop-up 1.1s ease-out forwards;
}

@keyframes pop-up {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -130%) scale(1);
  }
}

/* Comodines pegajosos: candado y contador de giros sobre cada comodín fijo. La capa usa la misma
   rejilla que los rodillos, así que no gira con ellos. */
.slot-sticky {
  position: absolute;
  inset: 10px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, var(--cell));
  grid-template-rows: repeat(4, var(--cell));
  gap: 0 6px;
  pointer-events: none;
}

.sticky-wild {
  position: relative;
  border-radius: 0;
  box-shadow: inset 0 0 0 4px #c084fc;
}

.slot-sticky.is-spinning .sticky-wild {
  background: radial-gradient(circle, rgba(46, 16, 101, 0.92) 0% 25%, color-mix(in srgb, rgba(20, 6, 45, 0.96) 33%, rgba(46, 16, 101, 0.92)) 25% 50%, color-mix(in srgb, rgba(20, 6, 45, 0.96) 67%, rgba(46, 16, 101, 0.92)) 50% 75%, rgba(20, 6, 45, 0.96) 75% 100%, rgba(20, 6, 45, 0.96) 100%);
}

.slot-sticky.is-spinning .sticky-wild::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='7' y='7' width='86' height='86' rx='16' fill='%236d28d9' stroke='%23f7e08a' stroke-width='3'/%3E%3Cpath d='M20 62 L29 25 L42 50 L50 16 L58 50 L71 25 L80 62 Z' fill='%23a21caf' stroke='%23f7e08a' stroke-width='2.5'/%3E%3Ctext x='50' y='87' text-anchor='middle' font-family='Georgia' font-size='15' font-weight='900' fill='%23fff6c2'%3EWILD%3C/text%3E%3C/svg%3E") center / contain no-repeat;
}

.sticky-wild.is-fresh {
  animation: lock-in 0.45s var(--ease-out);
}

.sticky-lock,
.sticky-count {
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: 900;
  line-height: 1;
}

.sticky-lock {
  top: -6px;
  left: -6px;
  font-size: 0.9rem;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.8));
}

.sticky-count {
  right: -6px;
  bottom: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #1d0a3a;
  border-radius: 0;
  background: #f7e08a;
  color: #2e1065;
  font-size: 0.78rem;
}

.sticky-note {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid #c084fc;
  border-radius: 0;
  background: rgba(46, 16, 101, 0.6);
  color: #ead9ff;
  font-size: 0.8rem;
}

.win-line.is-wild {
  stroke: #d8b4fe;
  filter: none;
}

.slot-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.slot-meter {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.35);
}

.meter-label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.meter-value {
  min-width: 3ch;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold-hi);
  text-align: center;
}

.meter-win.is-lit {
  color: #9dffc9;
  text-shadow: none;
}

.meter-win.is-boosted {
  animation: boost 0.6s var(--ease-out);
}

@keyframes boost {
  40% {
    transform: scale(1.35);
    color: #fff6c2;
    text-shadow: none;
  }
}

.meter-foot {
  font-size: 0.72rem;
  color: var(--ink-mute);
  text-align: center;
}

.bet-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.paytable {
  width: 100%;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.25);
}

.paytable summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  cursor: pointer;
  color: var(--gold-hi);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.paytable-body {
  padding: 0 14px 14px;
  overflow-x: auto;
}

.pay-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.pay-table th,
.pay-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}

.pay-table th {
  color: var(--ink-mute);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pay-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left !important;
  white-space: nowrap;
}

.pay-symbol .symbol-svg {
  width: 32px;
  height: 32px;
}

.pay-super {
  color: #ff8fa0;
  font-weight: 700;
}

.pay-scatter {
  color: #9be7ff;
  font-size: 0.8rem;
}

.pay-rules {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--ink-dim);
  font-size: 0.82rem;
}

.pay-rules li + li {
  margin-top: 4px;
}

/* ---------- Responsivo de mesas ---------- */

@media (max-width: 900px) {
  .rl-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .bj-table {
    --card-base: 46px;
    min-height: 560px;
    padding: 14px 6px 16px;
    border-width: 6px;
    border-radius: 0;
  }

  .bj-arc {
    padding-inline: 74px;
  }

  .bj-arc-rule:last-child {
    display: none;
  }

  .bj-shoe {
    top: 12px;
    right: 10px;
    width: 64px;
  }

  .shoe-box {
    width: 56px;
    height: 40px;
  }

  .shoe-meter {
    width: 56px;
  }

  .bj-count {
    top: 12px;
    left: 10px;
    min-width: 72px;
    padding: 6px 8px;
  }

  .count-item {
    font-size: 0.68rem;
  }

  .count-item output {
    font-size: 0.9rem;
  }

  .hand-cards .card + .card {
    margin-left: calc(var(--card-w) * -0.6);
  }

  .hand-cards[data-n="4"] .card + .card,
  .hand-cards[data-n="5"] .card + .card,
  .hand-cards[data-n="6"] .card + .card,
  .hand-cards[data-n="7"] .card + .card,
  .hand-cards[data-n="8"] .card + .card {
    margin-left: calc(var(--card-w) * -0.7);
  }

  .seat-bets {
    display: grid;
    grid-template-columns: repeat(2, 44px);
    grid-template-areas: "pp side"
      "main main";
    justify-content: center;
    gap: 6px 6px;
  }

  .bet-spot.is-pp {
    grid-area: pp;
  }

  .bet-spot.is-t213 {
    grid-area: side;
  }

  .bet-spot.is-main {
    grid-area: main;
    justify-self: center;
    width: 60px;
    --chip: 40px;
  }

  .bet-spot.is-pp,
  .bet-spot.is-t213 {
    width: 44px;
    --chip: 26px;
  }

  .bet-spot-label {
    font-size: 0.66rem;
  }

  .slot-panel {
    grid-template-columns: 1fr 1fr;
  }

  .slot-panel .spin-button {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .slot-grid {
    gap: 4px;
  }

  .slot-window {
    padding: 6px;
  }

  .slot-lines,
  .slot-fx {
    inset: 6px;
  }

  .slot-lines {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }

  .cascade-ladder li {
    min-width: 44px;
    padding: 4px 8px;
  }
}