/* =====================================================================
   TEMA FAROESTE / TREM  (formas geométricas = placeholder)
   Variáveis para calibrar cores e tamanhos.
===================================================================== */
:root {
  --frame-w: 410px;
  --frame-h: 760px;

  --c-sky-top: #5bb6dd;
  --c-sky-bot: #f3d27a;
  --c-sand: #e0b277;
  --c-sand-dark: #b9824a;
  --c-canyon: #a85a2a;
  --c-wood: #3a2616;
  --c-wood-light: #5c3d22;
  --c-wood-edge: #241509;
  --c-gold: #f4c542;
  --c-gold-dark: #c9961f;
  --c-rail: #6b5336;
  --c-bar: #241712;
  --c-text: #ffffff;
}

/* fora do card/palco: transparente (padrão train/candy) */
html,
body {
  height: 100%;
  background: transparent;
}

body {
  overflow: hidden !important;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100vh;
}

/* MOLDURA MASTER do jogo (portrait, como na imagem) */
.container {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--frame-w);
  height: var(--frame-h);
  max-height: 100vh;
  overflow: hidden;
  font-size: 16px;
  color: var(--c-text);
  font-family: system-ui, Arial, sans-serif;
  /* céu -> areia, base do cenário desértico */
}

/* (regra legada do #button-mute removida — posição única no contexto .stage) */

/* ===================== 2. FILEIRA DE CARRINHOS ===================== */
.cart-row {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  padding: 4px 8px 8px;
  position: relative;
}

/* trilho sob os carrinhos */
.cart-row::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 4px;

  border-radius: 2px;
}

.cart {
  position: relative;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cart-value {
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 13px;
  font-weight: 800;
  color: #6b3b00;
  margin-bottom: 2px;
  white-space: nowrap;
}

.cart-body {
  width: 58px;
  height: 30px;

  border-radius: 4px 4px 8px 8px;
}

.cart-wheels {
  display: flex;
  justify-content: space-between;
  width: 44px;
  margin-top: -3px;
}

.cart-wheels span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* ===================== 3. GRID DE SÍMBOLOS ===================== */
.zone-reels {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 0 10px;
  min-height: 0;
}

.zone-reels .kraken-title {
  flex: 0 0 auto;
}

#slot {
  background: transparent !important;
  position: relative;
  width: 100%;
  /* moldura de madeira do grid */

  border-radius: 12px;

  padding: 6px;
}

#reels {
  background: transparent !important;
  display: flex;
  width: 100%;
  height: 270px;
  max-height: 40vh;
  padding: 6px;
  margin-bottom: 12px;
  border-radius: 8px;

  overflow: hidden;
}

.reel {
  overflow: hidden;
  width: 20%;
  position: relative;
  margin-bottom: 8px;
}

.reel > .icons {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.reel > .icons > .slot-cell {
  position: relative;
  width: calc(95% + 1px);
  margin: -15px 5px 0px 3px;
  padding-top: 0;
  transform: translate3d(0, 0, 0);
  box-sizing: border-box;
}

.reel > .icons > .slot-cell.slot-cell-phantom {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.reel > .icons > .slot-cell > .slot-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 96%;
  height: 98%;
  min-width: 96%;
  min-height: 98%;
  pointer-events: none;
  z-index: 999;
  display: block;
  overflow: visible;
  transform: translateY(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

#slot.has-win-effect .reel > .icons > .slot-cell > .slot-effect,
.reel > .icons > .slot-cell > .slot-effect.has-win-effect {
  opacity: 1;
  visibility: visible;
  animation: slot-effect-loop 1.5s ease-in-out infinite;
}

.reel > .icons > .slot-cell > .slot-effect svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.reel > .icons > .slot-cell > img {
  display: block;
  width: calc(95% + 1px);
  height: auto;
  padding-top: 15px;
  transform: translate3d(0, 0, 0);
  position: relative;
  z-index: 0;
}

@keyframes slot-effect-loop {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
    opacity: 1;
  }

  50% {
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 1));
    opacity: 0.95;
  }
}

/* Pulo em loop: mesmo gatilho do effect (has-win-effect). Objeto todo (ícone + effect) pula. */
#slot.has-win-effect
  .reel
  > .icons
  > .slot-cell:has(.slot-effect.has-win-effect),
.reel > .icons > .slot-cell:has(.slot-effect.has-win-effect) {
  animation: slot-cell-bounce 1.5s ease-in-out infinite;
}

@keyframes slot-cell-bounce {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  25% {
    transform: translate3d(0, -5px, 0);
  }

  50% {
    transform: translate3d(0, 0, 0);
  }

  75% {
    transform: translate3d(0, -5px, 0);
  }
}

#slot.inverted .reel > .icons > .slot-cell:has(.slot-effect.has-win-effect) {
  animation: slot-cell-bounce-inverted 1.5s ease-in-out infinite;
}

@keyframes slot-cell-bounce-inverted {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleY(-1);
  }

  25% {
    transform: translate3d(0, 10px, 0) scaleY(-1);
  }

  50% {
    transform: translate3d(0, 0, 0) scaleY(-1);
  }

  75% {
    transform: translate3d(0, 5px, 0) scaleY(-1);
  }
}

#controls {
}

#controls label {
  display: flex;
  align-items: center;
  margin: 0;
}

#controls label input {
  margin-right: 5px;
}

input[type='checkbox'] {
  width: 40px;
  height: 40px;
}

#jackpot {
  color: #000;
  font-size: 14px;
  text-align: center;
  margin-top: -120px;
}

#slot.inverted .reel {
  transform: scaleY(-1);
}

#slot.inverted .reel > .icons > .slot-cell {
  transform: translate3d(0, 0, 0) scaleY(-1);
}

#slot.inverted .reel > .icons > .slot-cell > .slot-effect {
  z-index: 999;
}

#coins {
  color: white;
  font-size: 14px;
  padding-top: -5px;
}

#value-earning {
  color: white;
  font-size: 14px;
  max-height: 40px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

#value-earning-number {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* slot-earning-container: painel amarelo 20% mais largo e centralizado */
#slot-earning-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  padding: 6px 8px;
  box-sizing: border-box;
  border-radius: 8px;

  color: orangered;
  font-weight: bold;
  font-size: 20px;
}

.points-panel-card {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.points-panel-card-back {
  position: absolute;
  inset: 0;

  border-radius: 4px;
  pointer-events: none;
}

/* Reel do slot: área visível + tira que anima */
.points-panel-digit-reel-wrap {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 20px;
  overflow: hidden;
}

.points-panel-digit-reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
}

.points-panel-reel-digit {
  width: 12px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: #333;
}

/* Ponto de milhar no painel (ex: 100.000) */
.points-panel-dot {
  min-width: 4px;
  padding: 0;
}

.points-panel-dot-char {
  font-size: 0.9rem;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

/* ===================== 4. FAIXA DE PRÊMIO ===================== */
.zone-prize {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0 2px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.prize-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-gold);
  letter-spacing: 1px;
}

#value-earning {
  color: var(--c-text);
  max-height: none;
  margin: 0;
}

#value-earning-number {
  font-size: 26px;
  font-weight: 900;
  color: var(--c-gold);
}

.prize-sub {
  font-size: 9px;
  color: #fff3d6;
  opacity: 0.85;
}

/* ===================== 5. DESERTO + TRILHOS ===================== */
.zone-desert {
  flex: 0 0 70px;
  position: relative;
  overflow: hidden;
}

/* trilhos que entram em perspectiva (placeholder triangular) */
.rails {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}

.rails span {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 100%;

  transform-origin: bottom center;
}

.rails span:nth-child(1) {
  left: 42%;
  transform: rotate(8deg);
}

.rails span:nth-child(2) {
  left: 58%;
  transform: rotate(-8deg);
}

/* ===================== 6. BARRA INFERIOR ===================== */
.bottom-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.bb-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;

  color: var(--c-gold);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bb-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.bb-label {
  font-size: 9px;
  color: #c9a227;
  letter-spacing: 0.5px;
}

/* =====================================================================
   CENÁRIO DO TREM (no topo do #slot, dentro da moldura, acima do #reels)
   Loco (esquerda = front) + 3 vagões trailing. Entra da direita na 1ª
   spin e estaciona. Em spins seguintes os vagões trocam (sai esquerda,
   entra direita) trazendo novos valores em moedas.
===================================================================== */

#train-scenery {
  position: relative;
  width: 100%;
  padding: 0 10px;
  margin-bottom: 6px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.train-band {
  position: relative;
  /* largura justa pra 3 vagões (86px cada + 4px gap) + folga pequena */
  width: 282px;
  height: 120px;
  overflow: hidden;
  border-radius: 6px;
}

/* camadas de parallax — trem anda pra esquerda, então o mundo rola pra direita.
   Velocidades: rails (chão direto sob o trem) = mais rápido, sincronizado com
   as rodas; cactos um pouco mais lento; montanhas e nuvens lentos pra dar
   profundidade. */
.scn {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background-repeat: repeat-x;
}

.scn-clouds {
  top: 4px;
  height: 30px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 300 30%27%3E%3Cg fill=%27%23ffffff%27 opacity=%27.92%27%3E%3Cellipse cx=%2728%27 cy=%2718%27 rx=%2720%27 ry=%278%27/%3E%3Cellipse cx=%2744%27 cy=%2714%27 rx=%2714%27 ry=%277%27/%3E%3Cellipse cx=%2738%27 cy=%2720%27 rx=%2712%27 ry=%276%27/%3E%3Cellipse cx=%27150%27 cy=%2716%27 rx=%2724%27 ry=%279%27/%3E%3Cellipse cx=%27168%27 cy=%2712%27 rx=%2714%27 ry=%277%27/%3E%3Cellipse cx=%27240%27 cy=%2720%27 rx=%2720%27 ry=%278%27/%3E%3Cellipse cx=%27222%27 cy=%2717%27 rx=%2713%27 ry=%276%27/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 30px;
  animation: scn-scroll-300 30s linear infinite;
}

.scn-mountains {
  bottom: 26px;
  height: 56px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 240 56%27 preserveAspectRatio=%27none%27%3E%3Cpolygon points=%270,56 30,18 56,40 90,8 130,56%27 fill=%27%238a5a3a%27/%3E%3Cpolygon points=%27100,56 138,22 168,40 210,12 240,56%27 fill=%27%236b3f24%27/%3E%3Cpolygon points=%270,56 30,18 56,40 90,8 130,56%27 fill=%27%23000%27 opacity=%27.08%27/%3E%3C/svg%3E");
  background-size: 240px 56px;
  background-position: 0 bottom;
  animation: scn-scroll-240 10s linear infinite;
  opacity: 0.85;
}

.scn-cacti {
  bottom: 16px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 180 32%27%3E%3Cg fill=%27%23357a2a%27 stroke=%27%231e4a17%27 stroke-width=%271%27%3E%3Crect x=%2728%27 y=%276%27 width=%278%27 height=%2724%27 rx=%273%27/%3E%3Crect x=%2722%27 y=%2714%27 width=%276%27 height=%2710%27 rx=%272%27/%3E%3Crect x=%2736%27 y=%2717%27 width=%276%27 height=%278%27 rx=%272%27/%3E%3Crect x=%2798%27 y=%272%27 width=%279%27 height=%2728%27 rx=%273%27/%3E%3Crect x=%2792%27 y=%2710%27 width=%276%27 height=%2710%27 rx=%272%27/%3E%3Crect x=%27107%27 y=%2714%27 width=%276%27 height=%278%27 rx=%272%27/%3E%3Crect x=%27150%27 y=%2710%27 width=%277%27 height=%2720%27 rx=%273%27/%3E%3C/g%3E%3Cg fill=%27%23a0703a%27 opacity=%27.7%27%3E%3Crect y=%2729%27 width=%27180%27 height=%273%27/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 32px;
  animation: scn-scroll-180 3s linear infinite;
}

.scn-rails {
  bottom: 0;
  height: 14px;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 14%27 preserveAspectRatio=%27none%27%3E%3Crect width=%27200%27 height=%2714%27 fill=%27%23a06a3a%27/%3E%3Crect y=%274%27 width=%27200%27 height=%272%27 fill=%27%235a3818%27/%3E%3Crect y=%2710%27 width=%27200%27 height=%272%27 fill=%27%235a3818%27/%3E%3Cg fill=%27%233a200d%27%3E%3Crect x=%270%27 y=%275%27 width=%2714%27 height=%274%27/%3E%3Crect x=%2730%27 y=%275%27 width=%2714%27 height=%274%27/%3E%3Crect x=%2760%27 y=%275%27 width=%2714%27 height=%274%27/%3E%3Crect x=%2790%27 y=%275%27 width=%2714%27 height=%274%27/%3E%3Crect x=%27120%27 y=%275%27 width=%2714%27 height=%274%27/%3E%3Crect x=%27150%27 y=%275%27 width=%2714%27 height=%274%27/%3E%3Crect x=%27180%27 y=%275%27 width=%2714%27 height=%274%27/%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 14px;
  /* mesma cadência das rodas (wheel-spin 0.35s) — dormentes deslocando pra
     direita a cada giro da roda */
  animation: scn-scroll-200 1.3s linear infinite;
}

/* trem indo pra esquerda → mundo rola pra direita (position-x positivo) */
@keyframes scn-scroll-300 {
  to {
    background-position-x: 300px;
  }
}

@keyframes scn-scroll-240 {
  to {
    background-position-x: 240px;
  }
}

@keyframes scn-scroll-180 {
  to {
    background-position-x: 180px;
  }
}

@keyframes scn-scroll-200 {
  to {
    background-position-x: 200px;
  }
}

.train {
  position: absolute;
  /* trem repousa em cima da faixa do trilho (.scn-rails tem 14px). Os corpos
     dos vagões ficam exatamente acima da faixa de dormentes. */
  bottom: 14px;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  will-change: left;
  z-index: 2;
}

/* sprites */
.loco,
.wagon {
  position: relative;
  display: block;
}

.loco {
  width: 110px;
  height: 60px;
}

.wagon {
  width: 86px;
  height: 56px;
}

/* rodas (giram em loop) */
.wheel {
  position: absolute;
  bottom: -2px;
  width: 18px;
  height: 18px;
  animation: wheel-spin 0.35s linear infinite;
}

@keyframes wheel-spin {
  to {
    transform: rotate(-360deg);
  }
}

.loco .wheel.l1 {
  left: 14px;
}

.loco .wheel.l2 {
  left: 40px;
}

.loco .wheel.l3 {
  left: 66px;
}

.wagon .wheel.w1 {
  left: 12px;
}

.wagon .wheel.w2 {
  left: 56px;
}

/* fumaça subindo da chaminé do loco (chaminé do sprite está em x≈24 do loco) */
.smoke {
  position: absolute;
  left: 24px;
  top: -6px;
  width: 22px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
  animation: smoke-rise 1.7s ease-out infinite;
}

.smoke.s1 {
  animation-delay: 0s;
}

.smoke.s2 {
  animation-delay: 0.42s;
}

.smoke.s3 {
  animation-delay: 0.85s;
}

.smoke.s4 {
  animation-delay: 1.28s;
}

@keyframes smoke-rise {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }

  18% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: translate(-12px, -32px) scale(1.5);
  }
}

/* label de valor (moedas) acima de cada vagão */
.wagon-value {
  position: absolute;
  /* dentro do corpo do vagão (centralizado), não mais flutuando acima */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 6px;
  border-radius: 4px;

  color: #2a1100;
  font:
    800 10px/1.3 system-ui,
    Arial,
    sans-serif;
  white-space: nowrap;
  pointer-events: none;

  z-index: 2;
}

/* placa central do prêmio (aparece quando o trem para com win > 0).
   Vive dentro da .train-band, flutua acima do trem. */
.prize-tag {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  padding: 4px 12px;

  border-radius: 6px;
  color: #2a1100;
  font:
    900 14px/1 system-ui,
    Arial,
    sans-serif;
  letter-spacing: 0.5px;
  white-space: nowrap;

  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 3;
}

.prize-tag.show {
  transform: translateX(-50%) scale(1);
}

/* glow dourado em volta da banda quando o trem entrega o prêmio */
.train-band.win-focus {
}

/* tag de valor estampada nas células do slot que tiveram Golden Ticket */
.slot-cash-tag {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 5px;

  color: #2a1100;
  font:
    900 12px/1 system-ui,
    Arial,
    sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;

  z-index: 1000;
  pointer-events: none;
  animation: cash-stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cash-stamp {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) scale(0.4);
  }

  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(2px) scale(1.15);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Linha de último ganho (bônus abaixo do prêmio) */
#last-win {
  margin-top: 2px;
}

/* Botões redondos da barra: i (info) e hambúrguer */
.bb-icon {
  text-decoration: none;
}

#menu-button {
  font-size: 18px;
  line-height: 1;
}

/* =====================================================================
   MENU DO HAMBÚRGUER
===================================================================== */
.game-menu {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.game-menu[hidden] {
  display: none;
}

.game-menu-panel {
  position: relative;
  width: 70%;
  border-radius: 12px;
  padding: 16px;
  color: #ffe9b0;
  text-align: center;
  overflow: hidden;
  /* fundo preto transparente no lugar da textura da placa */
  background: rgba(0, 0, 0, 0.7);
}

.game-menu-panel h3 {
  color: var(--c-gold);
  margin: 0 0 10px;
}

.game-menu-panel a,
.game-menu-item {
  display: block;
  width: 100%;
  color: var(--c-gold);
  padding: 8px;

  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.game-menu-item.active {
}

#auto-state {
  font-weight: 800;
}

/* =====================================================================
   MEGAWAYS — grid 6 colunas com peças duplas/triplas (altura variável)
===================================================================== */

/* Contador de "ways" no topo do grid */
#mw-ways {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  padding: 4px 0;
  border-radius: 8px;
}

#mw-ways .mw-ways-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--c-gold);
  text-shadow: 0 0 6px rgba(244, 197, 66, 0.6);
  letter-spacing: 1px;
}

#mw-ways .mw-ways-label {
  font-size: 9px;
  font-weight: 700;
  color: #cfe6ff;
  letter-spacing: 2px;
}

/* Grid: 6 colunas; cada coluna é um sub-grid de 7 linhas iguais */
#reels.mw-reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  width: 100%;
  height: 300px;
  max-height: 46vh;
  padding: 6px;

  border-radius: 8px;

  overflow: hidden;
}

.mw-reel {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  min-height: 0;
}

/* vídeo da explosão da DINAMITE: cobre TODO o #reels. O clip é a explosão
   sobre fundo PRETO; mix-blend-mode: screen apaga o preto e deixa só o fogo. */
.mw-explosion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 40;
  display: none;
  mix-blend-mode: screen;
}

/* Cada peça é uma PEDRA montada em 9-slice (top/bottom/left/right + mid).
   As bordas escalam com a altura do bloco (dupla/tripla). A gema fica por cima. */
.mw-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background:
    url(/4092891cc685091837d9.png) top center / 100% 10px no-repeat,
    url(/9417e287abb0dfaa687a.png) bottom center / 100% 10px no-repeat,
    url(/8e2176b5d3145e5353da.png) left center / 10px 100% no-repeat,
    url(/08ecc37273a685f19a2b.png) right center / 10px 100% no-repeat,
    url(/ecdcc59035785ee61dc1.png) center / 100% 100% no-repeat;
  overflow: hidden;
}

/* a gema/símbolo desenhada sobre a pedra — nítida, sombra mínima (sem halo) */
.mw-cell > img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 82%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  -webkit-user-drag: none;
  user-select: none;
}

/* peças grandes / diamante: sem glow borrado (objetos nítidos) */
.mw-cell-triple > img,
.mw-cell-scatter > img {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* diamante: objeto menor, deixando espaço para a luz ao redor */
.mw-cell-scatter > img {
  width: 60%;
  height: 60%;
}

/* Diamante: cópia da imagem atrás, MUITO borrada e tingida de azul-diamante,
   virando um brilho suave da mesma cor no fundo da pedra. */
.mw-cell-scatter > img.mw-scatter-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 60%;
  object-fit: contain;
  z-index: 0;
  transform: translate(-50%, -50%) scale(1.05);
  /* borrão forte: o diamante se dissolve numa luz azul difusa */
  filter: blur(14px) saturate(1.8) brightness(1.6)
    drop-shadow(0 0 12px rgba(120, 200, 255, 1))
    drop-shadow(0 0 22px rgba(120, 200, 255, 0.8));
  opacity: 0.95;
  pointer-events: none;
  animation: mw-scatter-glow-pulse 1.9s ease-in-out infinite;
}

@keyframes mw-scatter-glow-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Coluna girando: só tremor vertical (sem blur) */
.mw-reel.mw-spinning {
  animation: mw-spin-shake 0.12s linear infinite;
}

@keyframes mw-spin-shake {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2px);
  }
}

/* Peça vencedora — só brilho/escala (sem cor inserida) */
.mw-cell.mw-win {
  animation: mw-win-pulse 0.9s ease-in-out infinite;
  z-index: 2;
}

@keyframes mw-win-pulse {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }

  50% {
    filter: brightness(1.5);
    transform: scale(1.06);
  }
}

/* Banner de feature (rodadas grátis / respins): preso ao rodapé dos rolos,
   contido pelo overflow:hidden do #reels — não vaza para outros painéis. */
.mw-banner {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 30;
  min-width: 180px;
  max-width: 92%;
  padding: 10px 22px;
  text-align: center;
  /* moldura de madeira (placa) para o div sem frame */
  background: url(/104cc233669f5750ec34.png) center / 100% 100% no-repeat;
  pointer-events: none;
}

.mw-banner[hidden] {
  display: none;
}

.mw-banner-title {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(244, 197, 66, 0.6);
}

.mw-banner-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #cfe6ff;
}

/* =====================================================================
   EFEITOS DE QUEBRA — ferramenta de mina sobre os blocos que vão sumir.
   PICARETA (poucos) · TRABALHADOR (alguns) · DINAMITE (vários + vizinhas).
===================================================================== */
/* ---- Pedra sendo quebrada (estilhaça) ---- */
.mw-cell.mw-breaking {
  z-index: 5;
  animation: mw-break 0.6s ease-in forwards;
}

.mw-cell.mw-breaking > img {
  animation: mw-break-img 0.6s ease-in forwards;
}

@keyframes mw-break {
  0% {
    filter: brightness(1.4);
  }

  18% {
    transform: translate(-2px, 1px);
  }

  /* tremor do golpe */
  30% {
    transform: translate(3px, -2px) scale(1.1);
    filter: brightness(1.9);
  }

  45% {
    transform: translate(-2px, 2px) scale(1.05);
  }

  100% {
    transform: scale(0.18) rotate(16deg);
    opacity: 0;
    filter: brightness(0.5);
  }
}

@keyframes mw-break-img {
  0% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: polygon(
      20% 0,
      45% 25%,
      75% 10%,
      100% 40%,
      80% 70%,
      100% 100%,
      55% 85%,
      25% 100%,
      0 60%,
      15% 30%
    );
    transform: rotate(-12deg);
  }
}

/* ferramenta (picareta / trabalhador / dinamite) por cima da pedra */
.mw-tool {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mw-tool > img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

/* picareta: golpe rápido em diagonal */
/* picareta: ergue devagar, segura e dá o golpe (lenta) — fica no impacto até
   a pedra estourar */
.mw-tool-pick {
  animation: mw-pick 0.75s ease-in forwards;
  transform-origin: 75% 75%;
}

@keyframes mw-pick {
  0% {
    transform: translate(-25%, -45%) rotate(-62deg) scale(0.8);
    opacity: 0;
  }

  30% {
    transform: translate(-12%, -24%) rotate(-52deg) scale(1);
    opacity: 1;
  }

  /* segura erguida */
  58% {
    transform: translate(-12%, -24%) rotate(-52deg) scale(1);
    opacity: 1;
  }

  /* golpe */
  100% {
    transform: translate(3%, 7%) rotate(24deg) scale(1.08);
    opacity: 1;
  }
}

/* dinamite: cai, fica e explode (some no clarão) */
.mw-tool-tnt {
  animation: mw-tnt 0.74s ease-in forwards;
}

@keyframes mw-tnt {
  0% {
    transform: translateY(-120%) scale(0.8);
    opacity: 0;
  }

  30% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  60% {
    transform: translateY(0) scale(1.05);
    opacity: 1;
  }

  72% {
    transform: scale(1.4);
    filter: brightness(2.5);
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* lamparina: acende forte e o clarão varre pros lados */
.mw-tool-lamp {
  animation: mw-lamp 0.7s ease-out forwards;
}

@keyframes mw-lamp {
  0% {
    transform: scale(0.7);
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 210, 120, 0));
    opacity: 0;
  }

  35% {
    transform: scale(1.05);
    filter: brightness(1.8) drop-shadow(0 0 14px rgba(255, 210, 120, 0.95));
    opacity: 1;
  }

  /* clarão que estoura pros lados (horizontal) */
  70% {
    transform: scaleX(2.6) scaleY(1.1);
    filter: brightness(2.4) drop-shadow(0 0 22px rgba(255, 220, 140, 1));
    opacity: 1;
  }

  100% {
    transform: scaleX(3.4) scaleY(0.9);
    opacity: 0;
  }
}

/* novo símbolo que CAI para preencher o bloco quebrado (tumble) */
.mw-cell.mw-dropin {
  animation: mw-dropin 0.34s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes mw-dropin {
  0% {
    transform: translateY(-130%) scale(0.85);
    opacity: 0;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Reel horizontal do topo (decorativo, como no jogo original) */
.mw-top-reel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 66%;
  margin: 0 auto 4px;
  padding: 4px;
  border-radius: 8px 8px 0 0;
}

.mw-top-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 5px;
}

.mw-top-cell > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 2px;
}

/* Flash do símbolo mistério ao se revelar */
.mw-cell.mw-mystery {
  animation: mw-mystery-flip 0.55s ease;
}

@keyframes mw-mystery-flip {
  0% {
    transform: rotateY(90deg);
    filter: brightness(2);
  }

  100% {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
}

/* =====================================================================
   TEMA MINA DE DIAMANTES — palco fixo 495x574 (= tamanho do frame.png)
   Posições medidas do frame.png / example.svg. NADA é esticado (sem blur).
===================================================================== */
body {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden !important;
  margin: 0;
  background: transparent;
}

/* O palco tem o tamanho NATIVO do frame. Escala só pra CABER (nunca amplia,
   pra não borrar). Vector (poço) atrás + frame (moldura) na frente = fundo. */
.stage {
  background:
    url(/71d0bab82d1860f15a08.png) 0 0 / 495px 574px no-repeat,
    url(/ac1b866b8769a48f9a29.png) 0 0 / 495px 574px no-repeat;
  position: relative;
  width: 495px;
  height: 574px;
  flex: 0 0 auto;
  overflow: hidden;
  /* clipa qualquer efeito (megawin) que vaze do palco */
  transform: scale(min(1, calc(100vw / 495px), calc(100vh / 574px)));
  /* palco ancorado embaixo da viewport (padrão train/candy) */
  transform-origin: bottom center;

  font-family: system-ui, Arial, sans-serif;
  color: #fff;
}

/* todas as imagens do tema sem suavização de upscale */
.stage img {
  image-rendering: auto;
}

/* CHARACTER (minerador): idle parado; toca o gif do detonador na explosão */
.character {
  position: absolute;
  left: -113px;
  bottom: -9px;
  width: 250px;
  height: auto;
  z-index: 7;
  pointer-events: none;
}

/* RESET dos botões: sem fundo branco/borda padrão do navegador (só o ícone) */
.stage button {
  background-color: transparent;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Título (example.svg: x=129 y=0 236x236) */
.game-title {
  background: url(/35fd7cb837713d709207.png) center top / contain no-repeat;
  position: absolute;
  left: 129px;
  top: 2px;
  width: 236px;
  height: 128px;
  margin: 0;
}

/* ACHE OS 3 DIAMANTES — placa.png (171x62) + 3 gems (Frame 142.svg) */
.diamonds {
  background: url(/104cc233669f5750ec34.png) center / 100% 100% no-repeat;
  position: absolute;
  left: 162px;
  top: 80px;
  width: 171px;
  height: 50px;
}

.diamond-slot {
  background: url(/12ab141aab0db632c423.png) center / contain no-repeat;
  position: absolute;
  top: 7px;
  width: 54px;
  height: 34px;

  filter: grayscale(1) brightness(0.35);
  /* apagado até cair o scatter */
  opacity: 0.65;
  transition:
    filter 0.25s,
    opacity 0.25s,
    transform 0.25s;
}

.diamond-slot[data-i='0'] {
  left: 4px;
}

.diamond-slot[data-i='1'] {
  left: 58px;
}

.diamond-slot[data-i='2'] {
  left: 112px;
}

.diamond-slot.lit {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

/* GRID na janela transparente da moldura (frame.png: 110,142 263x206) */
#slot {
  position: absolute !important;
  left: 110px;
  top: 142px;
  width: 263px;
  height: 206px;
  padding: 0 !important;
  margin: 0 !important;
}

#reels {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2px !important;

  border-radius: 0 !important;
}

/* contador de ways e reel decorativo do topo não entram no tema mina */
#mw-ways,
.mw-top-reel {
  display: none !important;
}

/* ===== BOTÕES — padrão de UI dos demais slots (train/candy/golden-egypt):
   VOLTAR topo-esq · SOM topo-dir · TURBO/MENU inferior-esq · SPIN inferior-dir */

/* VOLTAR/FECHAR — topo-esquerda, círculo escuro no estilo dos outros botões */
.back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3b3b46, #17171e 75%);
  border: 2px solid #f4c542;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  z-index: 20;
}

.back-btn svg {
  width: 26px;
  height: 26px;
  display: block;
}

.back-btn:active {
  transform: scale(0.92);
}

/* SPIN 96x96 — canto inferior-DIREITO, na altura da barra de prêmio/crédito */
.spin-btn {
  position: absolute;
  right: 10px;
  bottom: 48px;
  width: 96px;
  height: 96px;
  padding: 0;
  background: url(/19f9ad9a09c3e54f6fc1.png) center / contain no-repeat;
  cursor: pointer;
  z-index: 99;
}

.spin-btn:disabled {
  filter: grayscale(0.6) brightness(0.8);
  cursor: not-allowed;
}

.spin-btn:active {
  transform: scale(0.94);
}

/* TURBO/velocidade — canto inferior-esquerdo, centro alinhado ao SPIN
   (spin: bottom 48 + 96/2 = centro a 96px do chão → 96 - 44/2 = bottom 74) */
#speed-toggle {
  position: absolute;
  left: 12px;
  bottom: 74px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: url(/84e494a603c83c4d6321.png) center / contain no-repeat;
  cursor: pointer;
  z-index: 20;
}

#speed-toggle.fast {
  background-image: url(/b994467cbc2d3cad8a90.png);
}

/* SOM (mute) — topo-DIREITA. Regra ÚNICA de posição no contexto do .stage
   (o JS troca a classe mute/unmute; o id garante a posição sempre). */
.mute,
#button-mute {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  width: 44px;
  height: 44px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 20;
}

.corner-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 20;
}

/* MENU (hambúrguer) — segundo botão do inferior-esquerdo, ao lado do speed */
#menu-button {
  left: 64px;
  bottom: 74px;
  background-image: url(/bccab1b2e562e2c8620a.png);
}

.corner-info {
  display: none;
}

/* PRÊMIO — encolhido à direita (x até 379) pra dar espaço ao SPIN,
   como no train onde o SPIN fica à direita da barra */
.zone-prize {
  position: absolute;
  left: 79px;
  bottom: 82px;
  width: 300px;
  height: 74px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  text-align: center;
  background: url(/f9075d663d8403333ab2.png) center / 100% 100% no-repeat;
}

.zone-prize .prize-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #f4c542;
}

.zone-prize #value-earning-number {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

/* CRÉDITO — barra inferior encolhida (par com a APOSTA) pra não ficar
   embaixo do SPIN no canto direito */
.panel-credit {
  background: url(/09eb00998ba5beb04466.png) center / 100% 100% no-repeat;
  position: absolute;
  left: 79px;
  bottom: 40px;
  width: 146px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  font-size: 11px;
}

.panel-credit .bb-label {
  color: #f4c542;
  letter-spacing: 1px;
}

.panel-credit .bb-value {
  font-weight: 800;
  color: #fff;
}

/* APOSTA — idem CRÉDITO; termina em x=379, antes do SPIN (x≥389) */
.panel-bet {
  background: url(/09eb00998ba5beb04466.png) center / 100% 100% no-repeat;
  position: absolute;
  left: 233px;
  bottom: 40px;
  width: 146px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

.panel-bet button {
  width: 28px;
  height: 28px;

  font-size: 0;
  cursor: pointer;
}

#decrease-value-bet {
  background-image: url(/eb80ac159434e164d140.png);
}

#increase-value-bet {
  background-image: url(/f33cc420665197666c24.png);
}

.panel-bet button:active {
  transform: scale(0.9);
}

.panel-bet-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.panel-bet-mid .bb-label {
  font-size: 8px;
  letter-spacing: 1px;
  color: #f4c542;
}

.panel-bet-mid .bb-value {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

/* botão SPIN piscando quando o automático está ligado */
.spin-btn.auto-on {
  animation: spin-auto-pulse 1s ease-in-out infinite;
}

@keyframes spin-auto-pulse {
  50% {
  }
}

.game-menu-hint {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 8px;
}

.game-menu-close {
  position: absolute;
  top: 6px;
  right: 10px;

  color: #ffe9b0;
  font-size: 20px;
  cursor: pointer;
}

/* =====================================================================
   POPUP DE REGRAS / INFORMAÇÕES (botão "i" e item do menu)
===================================================================== */
.rules-popup {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
}

.rules-popup[hidden] {
  display: none;
}

.rules-panel {
  position: relative;
  width: 82%;
  max-height: 80%;
  overflow-y: auto;

  border-radius: 12px;
  padding: 16px 16px 18px;
  color: #ffe9b0;
  /* fundo preto transparente no lugar da textura da placa */
  background: rgba(0, 0, 0, 0.7);
}

.rules-panel h3 {
  color: var(--c-gold);
  text-align: center;
  margin: 0 0 8px;
}

.rules-panel h4 {
  color: var(--c-gold);
  font-size: 13px;
  margin: 12px 0 4px;
}

.rules-panel p,
.rules-panel li {
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 4px;
}

.rules-panel ul {
  padding-left: 18px;
  margin: 4px 0;
}

/* chuva de moedas dentro da train-band quando ganha */
.train-coin {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  animation: coin-fall 1.4s ease-in forwards;
}

@keyframes coin-fall {
  0% {
    opacity: 1;
    transform: translate(0, -10px) rotate(0);
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 80px)) rotate(720deg);
  }
}

.bb-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--c-text);
}

/* CSS */
.button-1 {
  width: 130px;
  height: 40px;

  cursor: pointer;
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: -5px;
  margin-left: -10px;
  padding-right: -5px;
}

.button-1-shadow {
  width: 130px;
  border-radius: 12px;
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button-1-edge {
  align-items: flex-start;
  align-content: flex-start;
  margin-top: -20px;
  border-radius: 12px;
  height: 40px;
  width: 130px;
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button-1-front {
  width: 130px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  font-size: 14px;
  color: white;
}

.button-1-front-text {
  color: white;
  width: 130px;
  margin-top: -20px;
}

.button-1:hover {
  filter: brightness(110%);
  -webkit-filter: brightness(110%);
}

.button-1:hover .button-1-front {
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-1:active .button-1-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-1:hover .button-1-shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-1:active .button-1-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-1:focus:not(:focus-visible) {
  outline: none;
}

.button-1:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.8;
}

.button-1:disabled .button-1-front {
}

#value-bet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform: scale(2);
}

/* botões de aposta: estilizados em style.css (.panel-bet button) com +.png/-.png */

.mute {
  background-image: url(/fb22f6077075a1ae3306.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 44px;
  height: 44px;
}

#button-mute {
  width: 44px;
  height: 44px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.unmute {
  background-image: url(/d01a338abe8f98e3ec94.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 44px;
  height: 44px;
}

#info {
  position: absolute;
  bottom: -12%;
  left: 10px;
  outline: none;
  text-decoration: none;

  color: #fff;
  width: 64px;
  height: 64px;
  background-image: url(/5e52ab69b58914456ed1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#fast-forward {
  position: absolute;
  bottom: -12%;
  right: 2px;
  outline: none;
  text-decoration: none;

  color: #fff;
  width: 50px;
  height: 50px;
  background-image: url(/cc3bbc6611b3cf3eaffa.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}