/* Styles for mini game (slot machine) */

.game-modal {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* Ensure modal has a reasonable width on desktop and mobile */
  min-width: 280px;
  max-width: 95vw;
  padding: 1.5rem;
  /* Allow height to grow naturally; will be capped via media queries */
  max-height: 90vh;
  overflow-y: auto;
}

/* On larger screens remove height constraint to avoid internal scrolling */
@media (min-width: 769px) {
  .game-modal {
    max-height: none;
    overflow-y: visible;
  }
}

/* Sound toggle button styling */
.sound-toggle {
  position: absolute;
  top: 0.5rem;
  right: 2.5rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--accent-light);
  transition: var(--transition);
}
.sound-toggle:hover {
  color: var(--accent);
}

/* Grid layout for 3x3 slot machine */
.slot-grid {
  display: grid;
  /* enlarge slot cells for better visibility */
  /* expand cells for a more immersive casino feel */
  /* increase size of slot cells for a more immersive feel */
  grid-template-columns: repeat(3, 160px);
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
}
.slot-cell {
  width: 160px;
  height: 160px;
  border-radius: var(--radius);
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  position: relative;
}
.slot-cell img {
  width: 130px;
  height: 130px;
  object-fit: contain;
}

/* Highlight winning cells */
.slot-cell.winning {
  border: 2px solid var(--accent-light);
  /* highlight winning cells with a glowing background */
  background-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-light), 0 0 24px var(--accent);
}

.spin-button {
  padding: 0.6rem 1.2rem;
  background-color: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 1rem;
}
/* Start button shares styling with spin button but can be slightly larger */
.start-button {
  padding: 0.6rem 1.2rem;
  background-color: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 1rem;
}
.start-button:hover {
  background-color: var(--accent-light);
}

/* Hidden class to toggle visibility */
.hidden {
  display: none;
}

/* Introduction paragraph styling */
.game-intro {
  margin: 1rem 0;
  font-size: 1rem;
  color: var(--text-muted);
}
.spin-button:disabled {
  background-color: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}
.spin-button:hover:not(:disabled) {
  background-color: var(--accent-light);
}

.game-message {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: var(--accent-light);
}