/* ========================================
   АДАПТИВНЫЕ СТИЛИ ДЛЯ ИГРОВЫХ СТРАНИЦ
   ======================================== */

/* === GAME CONTAINER === */
@media (max-width: 1024px) {
  .game-container {
    max-width: 90% !important;
    margin: 30px auto !important;
    padding: 30px !important;
  }
}

@media (max-width: 768px) {
  .game-container {
    max-width: 95% !important;
    margin: 20px auto !important;
    padding: 20px !important;
    border-radius: 15px !important;
  }

  .game-title {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }

  .stats,
  .controls {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .stat,
  .control {
    width: 100% !important;
    text-align: center !important;
    padding: 0.75rem !important;
  }

  button,
  .game-btn,
  .btn {
    width: 100% !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
  }
}

@media (max-width: 480px) {
  .game-container {
    padding: 15px !important;
    margin: 15px auto !important;
  }

  .game-title {
    font-size: 1.5rem !important;
  }

  button,
  .game-btn,
  .btn {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
}

/* === LUCKY WHEEL === */
@media (max-width: 768px) {
  .wheel-wrapper {
    width: 280px !important;
    height: 280px !important;
  }

  #wheel {
    width: 280px !important;
    height: 280px !important;
  }

  .wheel-center {
    width: 50px !important;
    height: 50px !important;
  }

  .spin-button {
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .wheel-wrapper {
    width: 240px !important;
    height: 240px !important;
  }

  #wheel {
    width: 240px !important;
    height: 240px !important;
  }

  .wheel-center {
    width: 40px !important;
    height: 40px !important;
  }
}

/* === CARD FLIP === */
@media (max-width: 768px) {
  .memory-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important;
  }

  .card {
    height: 80px !important;
    font-size: 1.5rem !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .memory-grid {
    gap: 0.5rem !important;
  }

  .card {
    height: 70px !important;
    font-size: 1.25rem !important;
  }
}

/* === COIN FLIP === */
@media (max-width: 768px) {
  .coin-wrapper {
    width: 200px !important;
    height: 200px !important;
  }

  .coin {
    width: 200px !important;
    height: 200px !important;
    font-size: 3rem !important;
  }

  .bet-controls {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .bet-button {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .coin-wrapper {
    width: 160px !important;
    height: 160px !important;
  }

  .coin {
    width: 160px !important;
    height: 160px !important;
    font-size: 2.5rem !important;
  }
}

/* === COSMIC SLOTS === */
@media (max-width: 768px) {
  .slots-machine {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
    padding: 1.5rem !important;
  }

  .slot {
    height: 120px !important;
    font-size: 3rem !important;
  }

  .spin-controls {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .bet-amount,
  .balance-display {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .slots-machine {
    gap: 0.5rem !important;
    padding: 1rem !important;
  }

  .slot {
    height: 100px !important;
    font-size: 2.5rem !important;
  }
}

/* === DICE ROYALE === */
@media (max-width: 768px) {
  .dice-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .die {
    width: 80px !important;
    height: 80px !important;
    font-size: 2.5rem !important;
  }

  .bet-options {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .bet-option {
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

@media (max-width: 480px) {
  .dice-container {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .die {
    width: 70px !important;
    height: 70px !important;
    font-size: 2rem !important;
  }

  .bet-options {
    grid-template-columns: 1fr !important;
  }
}

/* === NUMBER RUSH === */
@media (max-width: 768px) {
  .number-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0.5rem !important;
  }

  .number-button {
    height: 50px !important;
    font-size: 1.125rem !important;
  }

  .timer,
  .score-display {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .number-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.4rem !important;
  }

  .number-button {
    height: 45px !important;
    font-size: 1rem !important;
  }

  .timer,
  .score-display {
    font-size: 1.125rem !important;
  }
}

/* === ОБЩИЕ ИГРОВЫЕ ЭЛЕМЕНТЫ === */
@media (max-width: 768px) {
  .result-message {
    font-size: 1.125rem !important;
    padding: 0.875rem !important;
  }

  .score,
  .balance,
  .multiplier {
    font-size: 1rem !important;
  }

  .game-info {
    padding: 1rem !important;
    font-size: 0.875rem !important;
  }

  .history {
    max-height: 200px !important;
  }

  .history-item {
    padding: 0.5rem !important;
    font-size: 0.8125rem !important;
  }
}

@media (max-width: 480px) {
  .result-message {
    font-size: 1rem !important;
    padding: 0.75rem !important;
  }

  .score,
  .balance,
  .multiplier {
    font-size: 0.9375rem !important;
  }

  .game-info {
    padding: 0.75rem !important;
    font-size: 0.8125rem !important;
  }
}

/* === МОДАЛЫ В ИГРАХ === */
@media (max-width: 768px) {
  .game-modal {
    padding: 1.5rem !important;
    max-width: 90% !important;
  }

  .game-modal h2 {
    font-size: 1.5rem !important;
  }

  .game-modal p {
    font-size: 0.9375rem !important;
  }
}

@media (max-width: 480px) {
  .game-modal {
    padding: 1.25rem !important;
  }

  .game-modal h2 {
    font-size: 1.25rem !important;
  }

  .game-modal p {
    font-size: 0.875rem !important;
  }
}

/* === АНИМАЦИИ (ОТКЛЮЧЕНИЕ ДЛЯ ПРОИЗВОДИТЕЛЬНОСТИ) === */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .coin,
  .die,
  .slot,
  .card,
  .wheel {
    animation: none !important;
    transition: none !important;
  }
}

/* === LANDSCAPE MODE === */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .game-container {
    margin: 15px auto !important;
    padding: 15px !important;
  }

  .game-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }

  .wheel-wrapper,
  .coin-wrapper {
    width: 180px !important;
    height: 180px !important;
  }

  #wheel,
  .coin {
    width: 180px !important;
    height: 180px !important;
  }
}