/* V12 · Previsualizaciones fieles al tablero interior de Tragamonedas. */

html.slot-detail-preloading,
html.slot-detail-preloading body {
  overflow: hidden;
}

html.slot-detail-preloading .slot-showcase {
  visibility: hidden;
  opacity: 0;
}

.slot-showcase {
  transition: opacity .42s ease;
}

.slot-detail-loader {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 36%, rgba(199, 142, 58, .18), transparent 32%),
    linear-gradient(145deg, #05080d, #0d0b0c 52%, #030407);
  color: #f6efe3;
  opacity: 1;
  transition: opacity .4s ease, visibility .4s ease;
}

.slot-detail-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 18%, rgba(255, 220, 158, .045) 44%, transparent 64%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, .018) 80px);
}

.slot-detail-loader.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.slot-detail-loader__panel {
  position: relative;
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  padding: clamp(30px, 6vw, 54px);
  overflow: hidden;
  border: 1px solid rgba(233, 187, 109, .3);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(25, 24, 27, .96), rgba(5, 8, 13, .97));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .68), inset 0 1px rgba(255, 255, 255, .09);
  text-align: center;
}

.slot-detail-loader__sigil {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(242, 195, 112, .46);
  border-radius: 50%;
  color: #f5c875;
  background: radial-gradient(circle, rgba(226, 161, 62, .25), rgba(226, 161, 62, .02) 65%);
  box-shadow: 0 0 34px rgba(217, 151, 53, .24);
  animation: slot-detail-sigil 1.7s ease-in-out infinite;
}

.slot-detail-loader__panel > p {
  margin: 0 0 9px;
  color: #dcae60;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.slot-detail-loader__panel h1 {
  max-width: 420px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 5vw, 2.45rem);
  line-height: 1.05;
}

.slot-detail-loader__panel > span:not(.slot-detail-loader__sigil) {
  max-width: 400px;
  margin-top: 14px;
  color: rgba(246, 239, 227, .65);
  font-size: .86rem;
  line-height: 1.55;
}

.slot-detail-loader__track {
  width: min(350px, 100%);
  height: 7px;
  margin-top: 25px;
  overflow: hidden;
  border: 1px solid rgba(235, 190, 110, .18);
  border-radius: 99px;
  background: rgba(0, 0, 0, .46);
}

.slot-detail-loader__track i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #8c551e, #f0c474, #fff0bd);
  box-shadow: 0 0 18px rgba(238, 187, 99, .55);
  transition: width .18s ease;
}

.slot-detail-loader output {
  margin-top: 9px;
  color: #eac17a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.slot-detail-loader button,
.slot-detail-loader a {
  margin-top: 18px;
  border: 1px solid rgba(238, 190, 106, .35);
  border-radius: 999px;
  color: #f4d79f;
  background: rgba(213, 151, 55, .1);
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.slot-detail-loader button {
  padding: 12px 22px;
  cursor: pointer;
}

.slot-detail-loader a {
  margin-top: 13px;
  padding: 8px 15px;
  border-color: transparent;
  background: transparent;
  color: rgba(246, 239, 227, .55);
}

.slot-detail-loader.has-error .slot-detail-loader__sigil {
  color: #ff9d87;
  border-color: rgba(255, 120, 90, .46);
  animation: none;
}

@keyframes slot-detail-sigil {
  0%, 100% { transform: scale(.96); opacity: .75; }
  50% { transform: scale(1.06); opacity: 1; }
}

.slot-theme-card__machine {
  width: min(88%, 560px);
  aspect-ratio: 1.72 / 1;
  padding: 9.5% 3.2% 4.5%;
  border-radius: 26px 26px 19px 19px;
  transform: perspective(900px) rotateX(2deg) translateY(6px);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1),
              box-shadow .55s ease;
}

.slot-theme-card:hover .slot-theme-card__machine {
  transform: perspective(900px) rotateX(0) translateY(0) scale(1.025);
  box-shadow:
    0 28px 68px rgba(0, 0, 0, .8),
    0 0 52px rgba(var(--theme-accent-rgb), .42),
    inset 0 1px rgba(255, 255, 255, .2);
}

.slot-theme-card__machine-title {
  position: absolute;
  top: 4.2%;
  left: 10%;
  right: 10%;
  overflow: hidden;
  color: var(--theme-accent-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.58rem, 1.15vw, .88rem);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0 14px rgba(var(--theme-accent-rgb), .95), 0 2px 8px #000;
  text-transform: uppercase;
  white-space: nowrap;
}

.slot-theme-card__reels {
  position: relative;
  gap: clamp(2px, .45vw, 5px);
  padding: clamp(3px, .55vw, 7px);
  border-color: rgba(var(--theme-accent-rgb), .42);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(var(--theme-accent-rgb), .08), transparent 22%),
    rgba(0, 0, 0, .9);
  box-shadow:
    inset 0 0 28px #000,
    0 0 20px rgba(var(--theme-accent-rgb), .2);
}

.slot-theme-card__reels::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 255, .12) 45%, transparent 57%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 18% 82%, rgba(255, 255, 255, .035));
  mix-blend-mode: screen;
}

.slot-theme-card__reel {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(1px, .28vw, 3px);
  padding: clamp(2px, .35vw, 4px);
  overflow: hidden;
  border: 1px solid rgba(var(--theme-accent-rgb), .21);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(var(--theme-accent-rgb), .09), transparent 22% 78%, rgba(var(--theme-accent-rgb), .06)),
    rgba(2, 3, 6, .94);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .88);
}

.slot-theme-card__reel--multiplier {
  border-color: rgba(var(--theme-accent-rgb), .58);
  background:
    linear-gradient(180deg, rgba(var(--theme-accent-rgb), .18), transparent 34% 68%, rgba(var(--theme-accent-rgb), .11)),
    #030406;
  box-shadow:
    inset 0 0 15px #000,
    0 0 12px rgba(var(--theme-accent-rgb), .16);
}

.slot-theme-card__symbol {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
  border-radius: 4px;
}

.slot-theme-card__symbol img {
  width: 88%;
  height: 88%;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, .88))
    drop-shadow(0 0 4px rgba(var(--theme-accent-rgb), .24));
  transform: translateZ(0);
  transition: filter .4s ease, transform .4s ease;
}

.slot-theme-card:hover .slot-theme-card__symbol img {
  filter:
    drop-shadow(0 4px 5px rgba(0, 0, 0, .92))
    drop-shadow(0 0 7px rgba(var(--theme-accent-rgb), .42));
  transform: scale(1.045);
}

.slot-theme-card__reel--multiplier .slot-theme-card__symbol img {
  width: 82%;
  height: 82%;
}

@media (max-width: 720px) {
  .slot-theme-card__machine {
    width: min(91%, 500px);
  }
}

@media (max-width: 520px) {
  .slot-theme-card__machine {
    width: 92%;
    padding: 10.5% 2.8% 4.5%;
    border-radius: 18px 18px 14px 14px;
  }

  .slot-theme-card__machine-title {
    top: 4.5%;
    font-size: .55rem;
    letter-spacing: .1em;
  }

  .slot-theme-card__reels {
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
  }

  .slot-theme-card__reel {
    gap: 1px;
    padding: 2px;
    border-radius: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot-detail-loader,
  .slot-detail-loader__track i,
  .slot-showcase,
  .slot-theme-card__machine,
  .slot-theme-card__symbol img {
    transition: none;
  }

  .slot-detail-loader__sigil {
    animation: none;
  }
}