/* Добавьте эти стили в ваш dist/style_roulette.css */

/* Уменьшение контрастности (проблема затемнения) была решена ранее */

/* Global styles */
body {
  font-family: 'Roboto', sans-serif !important;
  background-color: #F0F8FF !important;
  /* Very light синий */
  color: #333333 !important;
  /* Темный серый текст */
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  position: relative !important;
}

/* Общие элементы интерфейса */
* {
  box-sizing: border-box;
}

/* Falling Stars Background */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Put stars behind the content */
  pointer-events: none;
  background-repeat: repeat;
}

body::before {
  background-image: radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1.5px 1.5px at 50% 10%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(2px 2px at 10% 90%, rgba(255, 255, 255, 0.6), transparent);
  background-size: 150px 150px, 120px 120px, 180px 180px, 100px 100px, 160px 160px;
  animation: starsFall1 60s linear infinite;
  opacity: 0.4;
  /* Adjust initial opacity for lighter background */
}

body::after {
  background-image: radial-gradient(3px 3px at 40% 60%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(2.5px 2.5px at 80% 20%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(3.5px 3.5px at 15% 50%, rgba(255, 255, 255, 0.5), transparent);
  background-size: 250px 250px, 200px 200px, 300px 300px;
  animation: starsFall2 120s linear infinite;
  opacity: 0.3;
}

@keyframes starsFall1 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 15000px;
  }
}

@keyframes starsFall2 {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 25000px;
  }
}

/* === HEADER === */
header {
  background-color: #FFFFFF !important;
  padding: 1rem !important;
  text-align: center !important;
  border-bottom: 1px solid #D1E0F7 !important;
  position: relative !important;
  z-index: 100 !important;
  color: #1E3A8A !important;
}

header .max-w-md {
  max-width: 768px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 44px !important;
}

header .logo-and-support {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

header h1 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1E3A8A !important;
  margin: 0 !important;
}

/* Class for rotating the icon during loading */
.star-icon {
  color: #3390EC !important;
  font-size: 1.5rem !important;
  flex-shrink: 0 !important;
}

.star-icon.star-icon--loading {
  animation: spin 1s linear infinite !important;
  animation-name: spin !important;
  animation-duration: 1s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Header buttons */
.header-action-button {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

#support-header-button {
  background: #D1E0F7 !important;
  /* Light синий */
  color: #1E3A8A !important;
  /* Темный синий текст */
  margin-left: auto !important;
}

#support-header-button:hover {
  background: #B9D0ED !important;
  transform: scale(1.02) !important;
}

#support-header-button:active {
  transform: scale(0.98) !important;
}

#recharge-header-button {
  background: #3390EC !important;
  /* Telegram blue */
  color: #fff !important;
  /* White text on blue */
  box-shadow: 0 4px 10px rgba(51, 144, 236, 0.2) !important;
}

#recharge-header-button:hover {
  background: #2A79CC !important;
  transform: scale(1.02) !important;
  box-shadow: 0 6px 14px rgba(51, 144, 236, 0.3) !important;
}

#recharge-header-button:active {
  transform: scale(0.98) !important;
}

@media (max-width: 480px) {
    #support-header-button span {
        display: none !important;
    }

    #support-header-button {
        padding: 4px 6px !important;
    }

    #support-header-button .fa-headset {
        margin-right: 0 !important;
    }

    header h1 {
        font-size: 1rem !important;
    }

    header .logo-and-support {
        gap: 4px !important;
    }
}

/* === MAIN CONTENT === */
main {
    flex-grow: 1 !important;
    background: #F5F9FF !important;
    padding-top: 56px !important;
}

main .max-w-md {
    max-width: 768px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem !important;
    text-align: center !important;
}

/* === ROULETTE CONTAINER === */
.roulette-container {
    max-width: 600px !important;
    width: 100% !important;
    padding: 2rem !important;
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Typography */
h2 {
    color: #1E3A8A !important;
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
}

p {
    color: #64748B !important;
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* === CASE SELECTION === */
.case-selection {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}

.case-button {
    background-color: #EBF0FF !important;
    /* Light Blue-Gray */
    color: #334155 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 100px !important;
    position: relative !important;
    overflow: hidden !important;
}

.case-button i {
    font-size: 1.2rem !important;
    margin-bottom: 0.3rem !important;
    color: #64748B !important;
}

.case-button .case-cost {
    font-size: 0.75rem !important;
    color: #718096 !important;
    font-weight: 500 !important;
    /* Added font-weight */
}

.case-button .stars-price {
    color: #FBBF24 !important;
    margin-left: 0.3rem !important;
}

.case-button:hover {
    background-color: #D1E0F7 !important;
    transform: translateY(-2px) !important;
}

.case-button.active {
    background-color: #3390EC !important;
    color: #FFFFFF !important;
    transform: scale(1.05) !important;
}

.case-button.active i {
    color: #FFFFFF !important;
}

.case-button .case-tags {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.case-button .case-tag {
    background-color: var(--tag-bg-color-default) !important;
    color: #FFFFFF !important;
    padding: 0.1rem 0.3rem !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    box-shadow: 0 0 5px var(--tag-glow-color-default) !important;
    margin-bottom: 0.1rem !important;
    white-space: nowrap !important;
}

/* NEW: Styles for Quantity Selection */
.quantity-selection {
    margin-bottom: 1.5rem !important;
}

.quantity-selection label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    color: #64748B !important;
    font-size: 0.9rem !important;
}

.quantity-buttons {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: center !important;
}

.quantity-buttons .qty-btn {
    background-color: #EBF0FF !important;
    /* Light Blue-Gray */
    color: #334155 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
}

.quantity-buttons .qty-btn:hover {
    background-color: #D1E0F7 !important;
    transform: translateY(-1px) !important;
}

.quantity-buttons .qty-btn.active {
    background-color: #3390EC !important;
    color: #FFFFFF !important;
}

/* NEW: Styles for Currency Selection */
.currency-selection {
    margin-bottom: 1.5rem !important;
}

.currency-selection label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    color: #64748B !important;
    font-size: 0.9rem !important;
}

.currency-options {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
}

.currency-options label {
    background-color: #EBF0FF !important;
    color: #334155 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}

.currency-options label.disabled {
    background-color: #D1E0F7 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.currency-options label:hover {
    background-color: #D1E0F7 !important;
    transform: translateY(-1px) !important;
}

.currency-options label.active {
    background-color: #3390EC !important;
    color: #FFFFFF !important;
}

.currency-options input[type="radio"] {
    display: none !important;
}

/* NEW: Styles for Quick Spin Option */
.quick-spin-option {
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    color: #64748B !important;
    font-size: 0.9rem !important;
}

.quick-spin-option input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

/* Styles for cost display (цена открытия) */
.cost-display {
    margin-bottom: 1.5rem !important;
    font-size: 1.1rem !important;
    color: #333333 !important;
    font-weight: 500 !important;
}

.cost-display .cost-label {
    color: #64748B !important;
    margin-right: 0.5rem !important;
}

/* Стили для полосы с кейсами */
.case-strip-container {
    width: 100% !important;
    max-width: 400px !important;
    /* <--- ОЧЕНЬ ВАЖНО: Должно соответствовать JS и CSS, чтобы работало центрирование */
    height: 120px !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 12px !important;
    transform: none !important;
    /* Сброс возможных трансформаций */
}

.case-strip {
    display: flex !important;
    height: 100% !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    transition: transform 0.5s ease-out !important;
    /* Плавная анимация прокрутки */
    scroll-behavior: smooth !important;
}

/* Стили для одного элемента в полосе */
.case-item {
    min-width: 100px !important;
    /* <--- ОЧЕНЬ ВАЖНО: Должно соответствовать JS */
    height: 100% !important;
    background-color: #EBF0FF !important;
    /* Светлый синий фон */
    color: #333333 !important;
    border: 1px solid #D1E0F7 !important;
    /* Рамка вокруг приза */
    border-radius: 12px !important;
    box-sizing: border-box !important;
    transform: scale(1) !important;
    transition: transform 0.3s ease-out, background-color 0.3s, border-color 0.3s !important;
    margin-right: 5px !important;
    /* добавили небольшой отступ */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.case-item:last-child {
    border-right: none !important;
    margin-right: 0 !important;
}

/* Position the 'case-pointer' in the center */
.case-pointer {
    position: absolute !important;
    left: calc(50% - 10px) !important;
    /* 10px это половина (border-left + border-right) */
    top: calc(50% - 5px) !important;
    /* 15px это высота border-bottom */
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-top: 15px solid #FBBF24 !important;
    /* Уменьшили высоту стрелки */
    border-bottom: none !important;
    /* Убрали нижнюю границу */
    z-index: 2 !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
    /* Сброс возможных трансформаций */
}

.case-item .item-icon {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
    color: #444444 !important;
}

/* NEW: Styles for gift images in case strip */
.item-gift-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    margin-bottom: 0.5rem !important;
    /* Adjust as needed */
    display: block; /* Добавим это */
}
/* Стили для кнопки спина */
.spin-button {
    background-color: #3390EC !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    margin-top: 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.spin-button:hover {
    background-color: #2A79CC !important;
    transform: translateY(-2px) !important;
}

.spin-button:disabled {
    background-color: #C4CDD4 !important;
    color: #8C9BA8 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Стили для кнопки демо-спина */
.demo-spin-button {
    background-color: #E0E0E0 !important;
    /* Светлый серый */
    color: #333333 !important;
    border: 1px solid #DDDDDD !important;
    /* Light border */
    border-radius: 10px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    margin-top: 0.75rem !important;
    /* Reduced margin */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important; /* Reduced gap */
}

.demo-spin-button:hover {
    background-color: #CCCCCC !important;
    transform: translateY(-1px) !important;
}

.demo-spin-button:disabled {
    background-color: #AAAAAA !important;
    color: #555555 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* NEW: Apply vars */
:root {
    --tag-bg-color-default: #7dd3fc !important;
    /* Sky Blue */
    --tag-glow-color-default: rgba(129, 202, 255, 0.5) !important;
    /* Soft blue glow */
    --tag-bg-color-discount: #6ee7b7 !important;
    /* Teal green */
    --tag-glow-color-discount: rgba(110, 231, 183, 0.5) !important;
    /* Soft green glow */
    --tag-bg-color-new: #a5b4fc !important;
    /* Light Indigo */
    --tag-glow-color-new: rgba(165, 180, 252, 0.5) !important;
    /* Soft indigo glow */
    --tag-bg-color-popular: #fcd34d !important;
    /* Amber Yellow */
    --tag-glow-color-popular: rgba(252, 211, 77, 0.5) !important;
}

/* === ANIMATION === */
@keyframes infiniteScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.case-strip {
    display: flex !important;
    height: 100% !important;
    will-change: transform !important;
    transition: transform 0.5s ease-out !important; /* Плавная анимация прокрутки */
}

/* Класс для активной бесконечной прокрутки */
.case-strip.scrolling-idle {
    animation: infiniteScroll 60s linear infinite !important;
    /* Медленная прокрутка 60 секунд */
}

/* Когда рулетка начинает спин (активируется JS-анимация) */
.case-strip.spinning {
    animation: none !important;
    /* Отключаем бесконечную прокрутку во время спина */
    transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    /* Включаем анимацию спина с замедлением */
}

/* Быстрый прокрут */
.case-strip.spinning.quick {
    transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    /* Более быстрая анимация спина */
}

/* Анимация остановки - используется для сброса положения без мгновенного скачка */
.case-strip.stopped {
    transition: transform 0.5s ease-out !important;
    /* Анимация остановки */
}

/* Дополнительные стили для адаптивности */
@media (max-width: 600px) {
    .roulette-container {
        padding: 1.5rem !important;
    }

    .case-selection {
        gap: 0.4rem !important;
    }

    .case-button {
        font-size: 0.8rem !important;
        padding: 0.6rem 0.8rem !important;
    }

    .info-section,
    .policy-links-section {
        padding: 0 0.5rem !important;
    }
}