/*
 * Mariachi Oro Slot - Estilo exclusivo
 * Paleta: #FF6F00 (laranja pôr do sol), #4A1B2A (bordô), #FFD700 (ouro), #2E7D32 (verde cacto), #FFFFFF (texto)
 * Comentários em português
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap');

:root {
  --item-height: 100px;
}

body {
  background: linear-gradient(135deg, #FF6F00 0%, #4A1B2A 100%);
  color: #fff;
  font-family: 'Lato', Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.decoracao-topo, .decoracao-baixo {
  width: 100vw;
  min-width: 320px;
}

.titulo-jogo {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  color: #FFD700;
  margin: 0 0 8px 0;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #4A1B2A88;
}
.subtitulo-jogo {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 24px 0;
  text-align: center;
  font-family: 'Lato', Arial, sans-serif;
  text-shadow: 0 1px 4px #FFD70044;
}

#container {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  padding: 36px 18px 24px 18px;
  box-shadow: 0 10px 32px #FFD70022;
  border-radius: 2em;
  max-width: 540px;
  margin: 32px auto 24px auto;
  position: relative;
}

.window {
  position: relative;
  overflow: hidden;
  height: calc(3 * var(--item-height));
  background: linear-gradient(120deg, #FFD70022 60%, #FF6F00 100%);
  border-radius: 1.2em;
  box-shadow: 0 2px 16px #FFD70033;
}

.window-border {
  padding: 8px;
  background-image: linear-gradient(to bottom, #FFD700, #FF6F00 80%, #4A1B2A 100%);
  border-radius: 1.5em;
  box-shadow: 0 4px 16px #FFD70044;
  margin-bottom: 18px;
}

.outer-col {
  overflow-y: hidden;
  width: 90px;
  float: left;
  background: linear-gradient(#4A1B2A 60%, #FFD70022 100%);
  height: calc(var(--item-height) * 3);
  border-radius: 1em;
  margin: 0 2px;
}

.outer-spacer {
  width: 8px;
  height: 100%;
  float: left;
  border-right: 2px solid #FFD70044;
  background: linear-gradient(#2E7D32 60%, #FFD70022 100%);
}

.col {
  padding: 0 10px;
  will-change: true;
  transform: translateY(calc(-100% + var(--item-height) * 3));
}

.col img {
  width: 100%;
  height: auto;
  margin: 10px 0;
  position: relative;
  z-index: 3;
  border-radius: 0.7em;
  box-shadow: 0 2px 8px #FFD70055;
  background: #fff8;
}

.icon {
  width: 70px;
  height: var(--item-height);
  display: block;
  position: relative;
}

.col .icon::after {
  content: "";
  clear: both;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background-color: white;
  box-shadow: 0 0 35px 30px #FFD70044;
  z-index: 2;
  border-radius: 100%;
}

/* Animação de giro */
#container.spinning .col {
  animation-name: scroll;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.65, 0.97, 0.72, 1);
}
@keyframes scroll {
  to {
    transform: translateY(0);
  }
}

/* Botão Girar */
.start-button {
  display: block;
  margin: 1.5em auto 0 auto;
  padding: 1em 2.5em;
  font-size: 1.5em;
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #FFD700 0%, #FF6F00 100%);
  border: none;
  border-radius: 1.5em;
  box-shadow: 0 4px 16px #FFD70055, 0 2px 8px #4A1B2A22;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  animation: pulse 1.5s infinite;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}
.start-button:hover,
.start-button:focus {
  background: linear-gradient(90deg, #FF6F00 0%, #FFD700 100%);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px #FFD70088, 0 2px 8px #FFD70055 inset;
  outline: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 #FFD70088; }
  70% { box-shadow: 0 0 0 16px #FFD70000; }
  100% { box-shadow: 0 0 0 0 #FFD70000; }
}

/* Resultado */
.win-description {
  min-height: 2em;
  text-align: center;
  font-size: 1.3em;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin: 1.2em 0 0.5em 0;
  color: #FFD700;
  text-shadow: 0 1px 4px #4A1B2A44;
  transition: opacity 0.3s, color 0.2s;
  opacity: 1;
  letter-spacing: 0.5px;
}
.win-description.vitoria {
  color: #2E7D32;
  text-shadow: 0 2px 8px #FFD70088;
}
.win-description.bonus {
  color: #FFD700;
  text-shadow: 0 2px 8px #FF6F00AA;
}
.win-description.sem {
  color: #fff;
  opacity: 0.7;
}

.center-win {
  outline: 4px solid #FFD700;
  background: linear-gradient(90deg, #fffbe0 0%, #ffe066 100%);
  border-radius: 0.7em;
  box-shadow: 0 0 16px 4px #FFD70099;
  transition: outline 0.2s, background 0.2s;
  position: relative;
  z-index: 10;
}

/* Адаптивность */
@media (max-width: 900px) {
  .window-border { padding: 4px; }
  .outer-col { width: 60px; }
  .icon { width: 44px; }
  .window { min-width: 0; width: 340px; max-width: 99vw; }
  #container { padding: 10px; min-width: 0; width: 99vw; max-width: 420px; }
}
@media (max-width: 600px) {
  :root { --item-height: 60px; }
  .window { height: calc(3 * var(--item-height)); min-width: 0; width: 240px; max-width: 99vw; }
  .outer-col { width: 38px; height: calc(var(--item-height) * 3); }
  .icon { width: 28px; height: var(--item-height); }
  #container { padding: 4px; min-width: 0; width: 99vw; max-width: 270px; }
  .titulo-jogo { font-size: 1.5rem; }
  .subtitulo-jogo { font-size: 1rem; }
}