/* ==========================================================================
   Juegos arcade del Cripto-Casino: control de apuesta, Plinko, Crash, Minas, Dados, Torres,
   Video Póker y Rueda diaria.
   ========================================================================== */

.arcade {
  font-family: var(--font-mono);
}

.arcade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
}

.arcade-stage {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: radial-gradient(600px 300px at 50% 0%, rgba(255, 255, 255, 0.04) 0% 17.5%, color-mix(in srgb, transparent 33%, rgba(255, 255, 255, 0.04)) 17.5% 35%, color-mix(in srgb, transparent 67%, rgba(255, 255, 255, 0.04)) 35% 52.5%, transparent 52.5% 70%, transparent 70%),
    var(--cy-panel);
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.5);
}

.arcade-controls {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: var(--cy-panel);
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.45);
}

.arcade-controls .btn-row {
  justify-content: stretch;
}

.arcade-controls .btn-row .btn {
  flex: 1 1 auto;
}

.btn-xl {
  min-height: 52px;
  font-size: 1rem;
}

.arcade-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 6px;
  margin: 0;
}

.arcade-stats div {
  padding: 8px 10px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
}

.arcade-stats dt {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy-mute);
}

.arcade-stats dd {
  margin: 2px 0 0;
  color: var(--cy-accent);
  font-size: 1.05rem;
  font-weight: 800;
}

.arcade-message {
  min-height: 2.6em;
  margin: 0;
  color: var(--cy-ink);
  font-size: 0.9rem;
  text-align: center;
}

.field-block {
  display: grid;
  gap: 6px;
}

.field-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy-mute);
}

.seg-wrap {
  flex-wrap: wrap;
}

.arcade .field {
  display: grid;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--cy-dim);
}

.arcade .field input,
.arcade .field select {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--cy-ink);
  font: 0.95rem var(--font-mono);
}

.arcade .field input:focus,
.arcade .field select:focus {
  outline: none;
  border-color: var(--cy-accent);
  box-shadow: 0 0 0 2px var(--cy-glow);
}

/* Resultados recientes */

.recent-strip {
  display: flex;
  gap: 6px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  mask-image: linear-gradient(90deg, #000 80% 85%, color-mix(in srgb, transparent 33%, #000) 85% 90%, color-mix(in srgb, transparent 67%, #000) 90% 95%, transparent 95% 100%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 80% 85%, color-mix(in srgb, transparent 33%, #000) 85% 90%, color-mix(in srgb, transparent 67%, #000) 90% 95%, transparent 95% 100%, transparent 100%);
}

.recent-item {
  flex: none;
  padding: 4px 9px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cy-dim);
  font-size: 0.76rem;
  font-weight: 800;
  animation: feed-in 0.4s var(--ease-out);
}

.recent-item.is-win {
  background: rgba(61, 255, 154, 0.14);
  color: var(--cy-ok);
}

.recent-item.is-big {
  background: rgba(255, 210, 63, 0.16);
  color: var(--cy-warn);
}

.recent-item.is-jackpot {
  background: rgba(255, 59, 92, 0.2);
  color: #ff8fa3;
}

.recent-item.is-loss {
  color: var(--cy-mute);
}

/* ---------- Control de apuesta ---------- */

.bet-control {
  display: grid;
  gap: 8px;
}

.bet-control.is-locked {
  opacity: 0.6;
}

.bet-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy-mute);
}

.bet-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
}

.bet-limits {
  grid-template-columns: 1fr 1fr;
}

.bet-input {
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.55);
  color: var(--cy-accent);
  font: 800 1.15rem var(--font-mono);
  text-align: center;
}

.bet-input:focus {
  outline: none;
  border-color: var(--cy-accent);
  box-shadow: 0 0 0 2px var(--cy-glow);
}

.bet-btn {
  min-width: 48px;
}

.bet-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.chip-mini {
  width: 100%;
  max-width: 46px;
  justify-self: center;
  aspect-ratio: 1;
  padding: 0;
}

/* ---------- Plinko ---------- */

.pk-board {
  width: 100%;
  height: auto;
}

/* ---------- Crash ---------- */

.cr-stage {
  overflow: hidden;
}

.cr-canvas {
  width: 100%;
  height: auto;
}

.cr-readout {
  position: absolute;
  top: 26px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.cr-mult {
  font: 900 clamp(2rem, 7vw, 3.4rem) var(--font-mono);
  color: var(--cy-ink);
  text-shadow: none;
}

.cr-state {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cy-dim);
}

.cr-stage[data-state="flying"] .cr-mult {
  color: var(--cy-accent);
}

.cr-stage.is-cashed .cr-mult {
  color: var(--cy-ok);
}

.cr-stage.is-crashed .cr-mult {
  color: var(--cy-danger);
  text-shadow: none;
}

.cr-radar {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border: 1px solid var(--cy-danger);
  border-radius: 0;
  background: rgba(40, 0, 8, 0.85);
  color: #ffb3c0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Alarma del radar: un marco rojo que late con la opacidad. */
.cr-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 4px var(--cy-danger);
  opacity: 0;
  pointer-events: none;
}

.cr-stage.is-radar::after {
  animation: radar-pulse 0.6s ease-in-out infinite;
}

.cr-stage.is-crashed::after {
  animation: none;
  opacity: 0;
}

#cr-action.is-cashout {
  border-color: var(--cy-ok);
  background: var(--cy-ok);
  color: #002214;
  box-shadow: none;
}

/* ---------- Minas ---------- */

.mn-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(5px, 1.4vw, 10px);
  width: min(100%, 460px);
  margin: 0 auto;
}

.mn-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 16%;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0% 25%, color-mix(in srgb, rgba(0, 0, 0, 0.3) 33%, rgba(255, 255, 255, 0.08)) 25% 50%, color-mix(in srgb, rgba(0, 0, 0, 0.3) 67%, rgba(255, 255, 255, 0.08)) 50% 75%, rgba(0, 0, 0, 0.3) 75% 100%, rgba(0, 0, 0, 0.3) 100%), var(--cy-panel-2);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.mn-grid.is-live .mn-cell[data-state="hidden"]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.4);
}

.mn-cell:disabled {
  cursor: default;
}

.mn-cell[data-state="gem"] {
  background: radial-gradient(circle, rgba(61, 255, 154, 0.3) 0% 17.5%, color-mix(in srgb, transparent 33%, rgba(61, 255, 154, 0.3)) 17.5% 35%, color-mix(in srgb, transparent 67%, rgba(61, 255, 154, 0.3)) 35% 52.5%, transparent 52.5% 70%, transparent 70%), var(--cy-panel-2);
  border-color: var(--cy-ok);
  animation: tile-pop 0.35s var(--ease-out);
}

.mn-cell[data-state="mine"],
.mn-cell[data-state="spare"] {
  opacity: 0.55;
}

.mn-cell[data-state="boom"] {
  border-color: var(--cy-danger);
  background: radial-gradient(circle, rgba(255, 59, 92, 0.55) 0% 18.75%, color-mix(in srgb, transparent 33%, rgba(255, 59, 92, 0.55)) 18.75% 37.5%, color-mix(in srgb, transparent 67%, rgba(255, 59, 92, 0.55)) 37.5% 56.25%, transparent 56.25% 75%, transparent 75%), #2a0008;
  animation: tile-pop 0.35s var(--ease-out);
}

.mn-icon {
  width: 100%;
  height: 100%;
}

.mn-icon.is-gem {
  color: #3dff9a;
  filter: none;
}

.mn-icon.is-mine {
  color: #ff3b5c;
  filter: none;
}

/* ---------- Dados ---------- */

.dc-stage {
  justify-items: center;
  padding-block: 22px;
}

.dc-roll {
  font: 900 clamp(2.6rem, 9vw, 4.4rem) var(--font-mono);
  color: var(--cy-ink);
  text-shadow: none;
}

.dc-roll.is-rolling {
  color: var(--cy-dim);
}

.dc-roll[data-result="win"] {
  color: var(--cy-ok);
}

.dc-roll[data-result="loss"] {
  color: var(--cy-danger);
}

.dc-track {
  position: relative;
  width: 100%;
  height: 46px;
}

.dc-zone {
  --from: 0%;
  --to: 49%;
  position: absolute;
  top: 17px;
  right: 0;
  left: 0;
  height: 12px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 59, 92, 0.75) 0 var(--from) 0% 12.5%, color-mix(in srgb, rgba(61, 255, 154, 0.85) var(--from) var(--to) 33%, rgba(255, 59, 92, 0.75) 0 var(--from)) 12.5% 25%, color-mix(in srgb, rgba(61, 255, 154, 0.85) var(--from) var(--to) 67%, rgba(255, 59, 92, 0.75) 0 var(--from)) 25% 37.5%, rgba(61, 255, 154, 0.85) var(--from) var(--to) 37.5% 50%, rgba(61, 255, 154, 0.85) var(--from) var(--to) 50% 62.5%, color-mix(in srgb, rgba(255, 59, 92, 0.75) var(--to) 33%, rgba(61, 255, 154, 0.85) var(--from) var(--to)) 62.5% 75%, color-mix(in srgb, rgba(255, 59, 92, 0.75) var(--to) 67%, rgba(61, 255, 154, 0.85) var(--from) var(--to)) 75% 87.5%, rgba(255, 59, 92, 0.75) var(--to) 87.5% 100%, rgba(255, 59, 92, 0.75) var(--to) 100%);
  box-shadow: none;
}

.dc-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 46px;
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.dc-marker::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -8px;
  border: 8px solid transparent;
  border-top-color: var(--cy-ink);
}

.dc-marker::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -2px;
  width: 4px;
  height: 18px;
  border-radius: 0;
  background: var(--cy-ink);
  box-shadow: none;
}

.dc-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.dc-slider::-webkit-slider-thumb {
  width: 22px;
  height: 34px;
  border: 2px solid var(--cy-accent-ink);
  border-radius: 0;
  background: var(--cy-accent);
  box-shadow: none;
  -webkit-appearance: none;
}

.dc-slider::-moz-range-thumb {
  width: 22px;
  height: 34px;
  border: 2px solid var(--cy-accent-ink);
  border-radius: 0;
  background: var(--cy-accent);
  box-shadow: none;
}

.dc-slider::-webkit-slider-runnable-track {
  height: 46px;
  background: transparent;
}

.dc-slider::-moz-range-track {
  background: transparent;
}

.dc-scale {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.72rem;
  color: var(--cy-mute);
}

/* ---------- Torres ---------- */

.tw-tower {
  display: grid;
  gap: 8px;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tw-floor {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background 0.2s, border-color 0.2s;
}

.tw-floor.is-active {
  border-color: var(--cy-accent);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.tw-floor.is-passed .tw-floor-mult {
  color: var(--cy-ok);
}

.tw-floor-mult {
  color: var(--cy-dim);
  font-weight: 800;
  font-size: 0.86rem;
  text-align: right;
}

.tw-tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.tw-tile {
  min-height: 42px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0% 25%, color-mix(in srgb, rgba(0, 0, 0, 0.3) 33%, rgba(255, 255, 255, 0.08)) 25% 50%, color-mix(in srgb, rgba(0, 0, 0, 0.3) 67%, rgba(255, 255, 255, 0.08)) 50% 75%, rgba(0, 0, 0, 0.3) 75% 100%, rgba(0, 0, 0, 0.3) 100%), var(--cy-panel-2);
  color: var(--cy-ink);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.tw-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: none;
}

.tw-tile:disabled {
  cursor: default;
}

.tw-tile[data-state="safe"] {
  border-color: var(--cy-ok);
  background: rgba(61, 255, 154, 0.18);
  animation: tile-pop 0.35s var(--ease-out);
}

.tw-tile[data-state="trap"],
.tw-tile[data-state="spare"] {
  opacity: 0.5;
}

.tw-tile[data-state="fall"] {
  border-color: var(--cy-danger);
  background: rgba(255, 59, 92, 0.35);
  animation: tile-pop 0.35s var(--ease-out);
}

/* ---------- Video póker ---------- */

.vp-machine {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
  border: 2px solid var(--cy-accent);
  border-radius: 0;
  background: linear-gradient(180deg, var(--cy-panel-2) 0% 25%, color-mix(in srgb, var(--cy-bg) 33%, var(--cy-panel-2)) 25% 50%, color-mix(in srgb, var(--cy-bg) 67%, var(--cy-panel-2)) 50% 75%, var(--cy-bg) 75% 100%, var(--cy-bg) 100%);
  box-shadow: 0 24px 0 rgba(0, 0, 0, 0.6);
}

.vp-marquee {
  font: 900 clamp(1.2rem, 4vw, 1.8rem) var(--font-mono);
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--cy-accent);
  text-shadow: none;
}

.vp-marquee b {
  color: var(--cy-accent-2);
}

.vp-paytable-wrap {
  overflow-x: auto;
}

.vp-paytable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.vp-paytable th,
.vp-paytable td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: right;
  color: var(--cy-dim);
}

.vp-paytable tbody th {
  text-align: left;
  color: var(--cy-ink);
  font-weight: 700;
}

.vp-paytable .is-current {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cy-accent);
  font-weight: 800;
}

.vp-paytable tr.is-hit th,
.vp-paytable tr.is-hit td {
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
}

.vp-hand {
  --card-w: clamp(54px, 15vw, 118px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.6vw, 14px);
  justify-items: center;
}

.vp-slot {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.vp-card {
  transition: transform 0.2s var(--ease-out);
}

.vp-card.is-clickable {
  cursor: pointer;
}

.vp-slot.is-held .vp-card {
  transform: translateY(-8px);
}

.vp-slot.is-held .card-face {
  box-shadow: 0 0 0 4px var(--cy-accent);
}

.vp-hold {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--cy-dim);
  font: 800 0.66rem var(--font-mono);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.vp-hold[aria-pressed="true"] {
  border-color: var(--cy-accent);
  background: var(--cy-accent);
  color: var(--cy-accent-ink);
}

.vp-hold:disabled {
  opacity: 0.4;
  cursor: default;
}

.vp-controls {
  display: grid;
  gap: 10px;
}

.vp-controls .btn-row {
  justify-content: center;
}

/* ---------- Rueda diaria ---------- */

.wh-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: center;
}

.wh-wrap {
  position: relative;
  width: min(100%, 460px);
  margin: 0 auto;
}

.wh-canvas {
  width: 100%;
  height: auto;
  filter: none;
}

.wh-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  border: 16px solid transparent;
  border-top: 30px solid var(--cy-accent);
  transform: translateX(-50%);
  filter: none;
}

.wh-side {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--cy-line);
  border-radius: 0;
  background: var(--cy-panel);
}

.wh-title {
  margin: 0;
  color: var(--cy-accent);
  font-size: 1.3rem;
}

.wh-text {
  margin: 0;
  color: var(--cy-dim);
  font-size: 0.86rem;
}

.wh-cooldown {
  margin: 0;
  color: var(--cy-dim);
  font-size: 0.86rem;
  text-align: center;
}

.wh-cooldown.is-ready {
  color: var(--cy-ok);
}

.wh-odds {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.wh-odds th,
.wh-odds td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  color: var(--cy-dim);
}

.wh-odds td + td,
.wh-odds th + th {
  text-align: right;
}

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .arcade-layout,
  .wh-stage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .arcade-stage,
  .arcade-controls {
    padding: 10px;
    border-radius: 0;
  }

  .tw-floor {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .vp-machine {
    padding: 10px;
  }
}