/* Game specific styles for Slot Machine */

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.back-btn {
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.3s ease;
}

.back-btn:hover {
  transform: translateX(-5px);
  color: var(--primary);
}

.game-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
}

.game-info {
  background-color: var(--surface);
  padding: 2rem;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}

.stat-item i {
  font-size: 1.2rem;
  color: var(--primary);
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.controls h3 {
  margin-bottom: 0.5rem;
}

.bet-controls, .payline-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.5rem;
}

.control-btn {
  background-color: var(--primary);
  color: var(--text);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-btn:hover {
  transform: scale(1.1);
  background-color: var(--accent);
}

.action-btn {
  background-color: var(--accent);
  color: var(--text);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(255, 137, 6, 0.4);
}

.action-btn.secondary {
  background-color: rgba(255, 255, 255, 0.2);
}

#spin-btn {
  font-size: 1.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, #ff8906 0%, #f25f4c 100%);
  margin-top: auto;
}

.streak-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bonus-meter {
  height: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.bonus-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  transition: width 0.3s ease;
}

.gameplay-area {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.message-banner {
  background-color: var(--surface);
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.slot-machine {
  position: relative;
  padding: 20px;
}

.jackpot-display {
  background-color: rgba(212, 175, 55, 0.3);
  color: gold;
  padding: 0.8rem;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  width: 100%;
}

.reels-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 10px;
  border: 2px solid var(--primary);
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1/1;
  margin: 1rem auto;
}

.reel {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  height: auto;
}

.symbol-container {
  aspect-ratio: 1/1;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.symbol-container.spinning {
  animation: spin-blur 0.1s infinite;
}

.symbol-icon {
  width: 70%;
  height: 70%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Symbol icons */
.symbol-icon.cherry {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red"><circle cx="8" cy="16" r="6"/><circle cx="19" cy="16" r="6"/><path d="M8,10 Q12,2 16,10" stroke="green" stroke-width="2" fill="none"/></svg>');
}

.symbol-icon.lemon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="yellow"><ellipse cx="12" cy="12" rx="8" ry="5" transform="rotate(45, 12, 12)"/></svg>');
}

.symbol-icon.orange {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="orange"><circle cx="12" cy="12" r="8"/></svg>');
}

.symbol-icon.plum {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="purple"><circle cx="12" cy="12" r="8"/></svg>');
}

.symbol-icon.bell {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gold"><path d="M12,22 C13.1,22 14,21.1 14,20 L10,20 C10,21.1 10.9,22 12,22 Z M18,16 L18,11 C18,7.93 16.37,5.36 13.5,4.68 L13.5,4 C13.5,3.17 12.83,2.5 12,2.5 C11.17,2.5 10.5,3.17 10.5,4 L10.5,4.68 C7.64,5.36 6,7.92 6,11 L6,16 L4,18 L4,19 L20,19 L20,18 L18,16 Z"/></svg>');
}

.symbol-icon.bar {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="silver"><rect x="3" y="6" width="18" height="4" rx="1"/><rect x="3" y="12" width="18" height="4" rx="1"/><rect x="3" y="18" width="18" height="4" rx="1"/></svg>');
}

.symbol-icon.seven {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red"><path d="M8,4 L16,4 L12,20 L8,20 L12,8 L7,8 Z"/></svg>');
}

.symbol-icon.diamond {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="cyan"><path d="M12,3 L20,10 L12,21 L4,10 Z"/></svg>');
}

.symbol-icon.wild {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gold"><path d="M12,2 L15,8 L21,9 L17,14 L18,20 L12,17 L6,20 L7,14 L3,9 L9,8 Z"/></svg>');
}

.symbol-icon.scatter {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="magenta"><circle cx="12" cy="12" r="10" stroke="white" stroke-width="1"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">S</text></svg>');
}

.symbol-value {
  margin-top: 0.5rem;
  font-weight: bold;
  color: var(--accent);
}

/* Paylines display */
.paylines-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.payline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.payline.active {
  opacity: 1;
}

.payline-indicator {
  position: absolute;
  left: -25px;
  background-color: var(--primary);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.payline-path {
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: var(--primary);
  border-radius: 5px;
}

/* Payline indicator positioning */
.payline[data-payline="1"] .payline-indicator {
  top: calc(50% - 10px);
}

.payline[data-payline="2"] .payline-indicator {
  top: calc(16.66% - 10px);
}

.payline[data-payline="3"] .payline-indicator {
  top: calc(83.33% - 10px);
}

.payline[data-payline="4"] .payline-indicator {
  top: -10px;
}

.payline[data-payline="5"] .payline-indicator {
  bottom: -10px;
}

/* Payline paths */
.middle-row {
  top: calc(50% - 2px);
}

.top-row {
  top: calc(16.66% - 2px);
}

.bottom-row {
  top: calc(83.33% - 2px);
}

/* Diagonal paylines */
.diagonal-down {
  position: absolute;
  height: 4px;
  background-color: var(--primary);
  width: 141%;
  top: 0;
  left: 0;
  transform: rotate(45deg);
  transform-origin: top left;
}

.diagonal-up {
  position: absolute;
  height: 4px;
  background-color: var(--primary);
  width: 141%;
  bottom: 0;
  left: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
}

/* Win display */
.win-display {
  display: none;
  background: linear-gradient(135deg, #ffd700 0%, #ff8906 100%);
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: black;
  margin: 1rem 0;
  width: 100%;
}

.win-display.active {
  display: block;
}

.recent-wins {
  background-color: var(--surface);
  padding: 1.5rem;
  border-radius: 15px;
}

.recent-wins h3 {
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
}

#wins-history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
}

.win-history-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.win-history-item .win-amount {
  color: var(--accent);
  font-weight: bold;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--surface);
  padding: 2rem;
  border-radius: 15px;
  max-width: 90%;
  width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--primary);
}

.modal-content h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary);
  font-size: 2rem;
}

.paytable-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.paytable-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.special-symbols {
  margin-bottom: 2rem;
}

.special-symbols h3 {
  margin-bottom: 1rem;
}

.special-symbol {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.special-details h4 {
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.paylines-info {
  margin-bottom: 2rem;
}

.paylines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.payline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.payline-diagram {
  width: 100%;
  height: 50px;
  position: relative;
  margin-bottom: 0.5rem;
}

.paytable-rules {
  margin-bottom: 2rem;
}

.paytable-rules ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.paytable-rules li {
  margin-bottom: 0.5rem;
}

/* Bonus Game Styles */
.bonus-boxes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.bonus-box {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.bonus-box:hover {
  transform: scale(1.05);
}

.bonus-box.revealed {
  background: linear-gradient(135deg, #ffd700 0%, #ff8906 100%);
  color: black;
}

.bonus-result {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  min-height: 2rem;
}

/* Jackpot Win Styles */
.jackpot-content {
  background: linear-gradient(135deg, #ffd700 0%, #ff8906 100%);
  color: black;
}

.jackpot-win-amount {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin: 2rem 0;
  animation: pulse 1s infinite;
}

#jackpot-win-amount::before {
  content: "$";
}

/* Free Spins Styles */
#free-spins-count {
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent);
}

/* Animations */
@keyframes spin-blur {
  0% {
    filter: blur(0);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    filter: blur(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes coin-rain {
  0% {
    transform: translateY(-100vh) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}

.win-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.coin {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: gold;
  border-radius: 50%;
  animation: coin-rain 3s linear;
}

/* Media Queries */
@media (max-width: 1200px) {
  .game-container {
    grid-template-columns: 1fr 1.5fr;
  }
}

@media (max-width: 768px) {
  .game-container {
    grid-template-columns: 1fr;
  }
  
  .game-info {
    order: 2;
  }
  
  .gameplay-area {
    order: 1;
  }
  
  .reels-container {
    padding: 1rem;
  }
  
  .symbol-container {
    font-size: 1.8rem;
  }
  
  .paytable-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .paylines-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .reels-container {
    max-width: 100%;
  }
  
  .symbol-icon {
    width: 70%;
    height: 70%;
  }
}