/* Import Clash Display Font from Fontshare */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@200,300,400,500,600,700&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Предотвращение горизонтального переполнения */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Общие настройки для переноса текста */
.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

/* Принудительный перенос для длинных текстов */
p, .hero-title, .hero-subtitle, .section-title, .jackpot-description-figma, 
.legal-text, .step-text, .feature-description, .contact-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

/* Общие адаптивные стили для кнопок */
button, .btn, [class*="btn"] {
    box-sizing: border-box;
    min-height: 44px;        /* Минимальная высота для удобного нажатия */
    touch-action: manipulation; /* Оптимизация для тач-устройств */
    -webkit-tap-highlight-color: transparent; /* Убираем выделение при тапе */
    width: 100%;             /* Адаптивная ширина по умолчанию */
    max-width: 100%;         /* Предотвращаем переполнение */
}

/* Общие адаптивные стили для контейнеров */
.container, .section-container, .header-container, .footer-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;      /* Предотвращаем горизонтальное переполнение */
}

/* Общие адаптивные стили для текста */
h1, h2, h3, h4, h5, h6, p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* Дополнительные стили для предотвращения переполнения */
@media (max-width: 1200px) {
    .container {
        padding: 0 50px;
    }
    
    .header-container {
        padding: 8px 50px;
        z-index: 1001;
        position: relative;
    }
    
    .main {
        padding: 0 50px;
    }
    
    .footer-container {
        padding: 40px 50px;
    }
}

@media (max-width: 900px) {
    .container {
        padding: 0 30px;
    }
    
    .header-container {
        padding: 8px 30px;
    }
    
    .main {
        padding: 0 30px;
    }
    
    .footer-container {
        padding: 30px 30px;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 0 20px;
    }
    
    .header-container {
        padding: 8px 20px;
    }
    
    .main {
        padding: 0 20px;
    }
    
    .footer-container {
        padding: 30px 20px;
    }
}

/* Адаптивность кнопок на очень маленьких экранах */
@media (max-width: 360px) {
    button, .btn, [class*="btn"] {
        font-size: 13px !important;  /* Еще меньший шрифт для маленьких экранов */
        padding: 10px 16px !important; /* Уменьшаем отступы */
        min-height: 40px;           /* Минимальная высота */
    }
    
    .play-btn {
        max-width: 280px !important;
    }
    
    .more-info-btn,
    .all-results-btn,
    .signup-btn-main,
    .load-more-btn,
    .signup-btn {
        max-width: 260px !important;
    }
    
    /* Дополнительное уменьшение логотипов футера для очень маленьких экранов */
    .footer-logos {
        gap: 10px;              /* Еще меньший gap */
        margin: 10px 0;         /* Меньшие отступы */
        padding: 0 4px;         /* Минимальные боковые отступы */
    }
    
    .footer-logo:nth-child(1) {
        width: 44px;    /* Gambling Therapy: еще меньше */
        height: 37px;
    }
    
    .footer-logo:nth-child(2) {
        width: 68px;    /* Gamstop: еще меньше */
        height: 13px;
    }
    
    .footer-logo:nth-child(3) {
        width: 75px;    /* GamCare: еще меньше */
        height: 22px;
    }
    
    .footer-logo:nth-child(4) {
        width: 83px;    /* RAIG: еще меньше */
        height: 27px;
    }
    
    .footer-logo:nth-child(5) {
        width: 101px;   /* BeGambleAware: еще меньше */
        height: 18px;
    }
}

body {
    font-family: 'Clash Display', sans-serif;
    background-color: #060606;
    color: #ffffff;
    line-height: 1.2;
    overflow-x: hidden;
    /* Базовые настройки переноса текста */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    width: 100%;
    box-sizing: border-box;
}

.section-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Header согласно Figma */
.header {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%); /* fill_U0XVCK */
    border-radius: 0px 0px 20px 20px; /* borderRadius 0px 0px 20px 20px */
    box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 1); /* effect_RRWEUD */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 100px;
    width: 100%;
    box-sizing: border-box;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.logo {
    width: 202px;
    height: 42px;
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
    width: 100%;
    height: 100%;
}

.logo a:hover {
    opacity: 0.8;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav {
    display: flex;
    align-items: center;
    gap: 17px;
}

.nav-link {
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-link:hover {
    opacity: 0.8;
}

.auth-link {
    background: #FF5C05;
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.auth-link:hover {
    background: #e04a00;
    transform: translateY(-2px);
    box-shadow: 0px 4px 12px rgba(255, 92, 5, 0.3);
    opacity: 1;
}

/* Main Content */
.main {
    margin-top: 150px;  /* 80px (header height) + 70px (gap по Figma) = 150px */
    margin-bottom: 70px;  /* Добавляем отступ снизу такой же как gap между секциями */
    display: flex;
    flex-direction: column;
    gap: 70px;  /* По Figma: layout_S9SV4Y gap 70px */
    padding: 0 100px;  /* По Figma: layout_S9SV4Y padding 0px 100px */
    max-width: 1440px;  /* По Figma: layout_S9SV4Y dimensions width 1440 */
    margin-left: auto;
    margin-right: auto;
}

/* Hero Section */
.hero-section {
    display: flex;
    justify-content: stretch;  /* По Figma: layout_LAYWR5 justifyContent stretch */
    align-items: stretch;  /* По Figma: layout_LAYWR5 alignItems stretch */
    align-self: stretch;  /* По Figma: layout_LAYWR5 alignSelf stretch */
    gap: -38px;  /* По Figma: layout_LAYWR5 gap -38px */
    padding: 50px 70px 50px 32px;  /* По Figma: layout_LAYWR5 padding 50px 70px 50px 32px */
    background-image: url('../images/hero-bg.webp');  /* По Figma: fill_95FITS IMAGE background */
    background-size: cover;  /* По Figma: backgroundSize cover */
    background-position: center;
    background-repeat: no-repeat;  /* По Figma: backgroundRepeat no-repeat */
    border: 1px solid #ffffff;  /* По Figma: stroke_BAP9MU */
    border-radius: 20px;  /* По Figma: borderRadius 20px */
    width: 100%;  /* Растягиваем по ширине контейнера */
}

.hero-container {
    display: flex;
    justify-content: space-between;  /* По Figma: layout_YKL39D justifyContent space-between */
    gap: 20px;  /* По Figma: layout_YKL39D gap 20px */
    width: 100%;  /* По Figma: layout_YKL39D sizing horizontal fill */
    height: auto;  /* По Figma: layout_YKL39D sizing vertical hug */
}

.hero-content {
    display: contents;  /* Убираем дублирование flex контейнера */
}

.hero-text {
    width: 100%;  /* Адаптивная ширина */
    max-width: 683px;  /* Максимальная ширина по Figma */
    display: flex;
    flex-direction: column;  /* По Figma: mode column */
    gap: 16px;  /* По Figma: gap 16px */
    flex-shrink: 0;  /* Не позволяем тексту сжиматься */
    box-sizing: border-box;
}

.hero-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    text-align: left;
}

.hero-subtitle {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    text-align: left;
}

.play-btn {
    width: 100%;  /* Адаптивная ширина */
    max-width: 400px;  /* Максимальная ширина по Figma */
    padding: 12px 72px;  /* По Figma: padding 12px 72px */
    background-color: #FF5C05;  /* По Figma: fill_6CHEUA */
    color: #ffffff;
    border: none;
    border-radius: 10px;  /* По Figma: borderRadius 10px */
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;  /* Убираем margin, используем gap в родителе */
    flex-shrink: 0;  /* Не позволяем кнопке сжиматься */
    box-sizing: border-box;
}

.play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

.hero-jackpot {
    width: 100%;  /* Адаптивная ширина */
    max-width: 435px;  /* Максимальная ширина по Figma */
    background: rgba(6, 6, 6, 0.7);  /* По Figma: fill_LRSQ80 */
    border: 1px solid #ffffff;  /* По Figma: stroke_Q81YKU */
    border-radius: 20px;  /* По Figma: borderRadius 20px */
    padding: 30px 16px;  /* По Figma: padding 30px 16px */
    display: flex;
    flex-direction: column;  /* По Figma: mode column */
    justify-content: center;  /* По Figma: justifyContent center */
    align-items: center;  /* По Figma: alignItems center */
    gap: 10px;  /* По Figma: gap 10px */
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 1);  /* По Figma: effect_995HSM */
    flex-shrink: 0;  /* Не позволяем блоку сжиматься */
    box-sizing: border-box;
}

.jackpot-amount {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
}

.countdown-timer {
    display: flex;
    gap: 8px;
    align-items: center;
}

.timer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;  /* По Figma: layout_SR6X1X gap 6px */
}

.timer-number-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60px;  /* По Figma: dimensions width 60 */
    height: 50px;  /* По Figma: dimensions height 50 */
    background: #FF5C05;  /* По Figma: fill_RFRXUC */
    border-radius: 5px;  /* По Figma: borderRadius 5px */
    padding: 8px;  /* По Figma: padding 8px */
}

.timer-number {
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;  /* По Figma: style_MD8XRK fontWeight 500 */
    font-size: 24px;  /* По Figma: style_MD8XRK fontSize 24 */
    line-height: 1.2;  /* По Figma: style_MD8XRK lineHeight 1.2 */
    color: #ffffff;  /* По Figma: fill_XHCI8S */
    text-align: center;  /* По Figma: textAlignHorizontal CENTER */
}

.timer-label {
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;  /* По Figma: style_B45LD2 fontWeight 500 */
    font-size: 12px;  /* По Figma: style_B45LD2 fontSize 12 */
    line-height: 1.2;  /* По Figma: style_B45LD2 lineHeight 1.2 */
    color: #ffffff;  /* По Figma: fill_XHCI8S */
    text-align: center;  /* По Figma: textAlignHorizontal CENTER */
}

/* How to Play Section */
.how-to-play {
    margin: 0;
}

.section-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    margin-bottom: 30px;
    width: 100%;
    max-width: 575px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.steps-grid {
    display: flex;
    gap: 20px;  /* По Figma: layout_XL9UKN - gap 20px */
    margin-bottom: 30px;
    justify-content: center;  /* Центрирование блоков */
}

.step-card {
    width: 100%;  /* Адаптивная ширина */
    max-width: 295px;  /* Максимальная ширина по Figma */
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 16px;  /* По Figma: padding 16px */
    display: flex;
    align-items: center;  /* По Figma: alignItems center */
    box-sizing: border-box;
}

.step-card:first-child {
    align-items: stretch;  /* По Figma: layout_64BG5P - alignSelf stretch */
    justify-content: stretch;  /* По Figma: justifyContent stretch для первого */
}

.step-card:not(:first-child) {
    justify-content: stretch;  /* По Figma: layout_YW62WB - justifyContent stretch */
    align-items: stretch;  /* По Figma: alignItems stretch */
}

.step-card .step-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;  /* По Figma: layout_AQ8WUR - gap 10px для первого */
    width: 100%;
}

.step-card:not(:first-child) .step-content {
    gap: 10px;  /* По Figma: layout_SAT0C7 - gap 10px для остальных */
}

.step-card:last-child .step-content {
    gap: 4px;  /* По Figma: layout_DZP8W6 - gap 4px для последнего */
}

.step-number {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 60px;  /* По Figma: style_QS1PEI - fontSize 60 */
    line-height: 1.2em;  /* По Figma: lineHeight 1.2em */
    text-transform: uppercase;
    color: #ffffff;
    text-align: left;  /* По Figma: textAlignHorizontal LEFT */
}

.step-text {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;  /* По Figma: style_G5L4SV - fontSize 16 */
    line-height: 1.2;  /* По Figma: lineHeight 1.2 */
    color: #ffffff;
    text-align: left;  /* По Figma: textAlignHorizontal LEFT */
    display: grid;
    place-items: center;
    margin-left: 12px;
}

.step-card:not(:first-child) .step-text {
    width: 165px;  /* По Figma: layout_7PRO02 - width 165px */
}

.more-info-btn {
    width: 100%;
    max-width: 400px;
    padding: 12px 72px;
    background-color: #FF5C05;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}

.more-info-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Results Section согласно Figma node-id=1-74 */
/* Основная секция - layout_40HWSY */
.results-section {
    display: flex;
    flex-direction: column;  /* layout_40HWSY mode column */
    align-items: center;     /* layout_40HWSY alignItems center */
    align-self: stretch;     /* layout_40HWSY alignSelf stretch */
    gap: 0;                 /* Убираем общий gap, используем индивидуальные отступы */
    margin: 0;
}

/* Заголовок Results - layout_BJD9QY, style_TX6BSD */
.results-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_TX6BSD fontWeight 700 */
    font-size: 34px;        /* style_TX6BSD fontSize 34 */
    line-height: 1em;       /* style_TX6BSD lineHeight 1em */
    text-transform: uppercase; /* style_TX6BSD textCase UPPER */
    text-align: center;     /* style_TX6BSD textAlignHorizontal CENTER */
    color: #ffffff;         /* fill_MLUHQE */
    width: 100%;            /* Адаптивная ширина для центрирования */
    max-width: 575px;       /* Максимальная ширина из макета */
    margin: 0 auto 40px auto; /* Центрируем заголовок и добавляем отступ снизу */
}

/* Контейнер карточек - layout_YVP2VZ */
.results-container {
    display: flex;
    flex-direction: column;  /* layout_YVP2VZ mode column */
    align-self: stretch;     /* layout_YVP2VZ alignSelf stretch */
    gap: 20px;              /* layout_YVP2VZ gap 20px */
    margin-bottom: 40px;    /* Добавляем отступ снизу от контента до кнопки */
}

/* Ряд карточек - layout_1QWTJF */
.results-row {
    display: flex;
    flex-direction: row;     /* layout_1QWTJF mode row */
    justify-content: stretch; /* layout_1QWTJF justifyContent stretch */
    align-items: stretch;    /* layout_1QWTJF alignItems stretch */
    align-self: stretch;     /* layout_1QWTJF alignSelf stretch */
    gap: 20px;              /* layout_1QWTJF gap 20px */
}

/* Карточка результата - layout_QPHLDJ, fill_6EOIVS, stroke_0I2F8L */
.result-card-figma {
    display: flex;
    flex-direction: column;   /* layout_QPHLDJ mode column */
    justify-content: stretch; /* layout_QPHLDJ justifyContent stretch */
    align-items: stretch;     /* layout_QPHLDJ alignItems stretch */
    align-self: stretch;      /* layout_QPHLDJ alignSelf stretch */
    flex: 1;                 /* sizing horizontal fill, vertical fill */
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%); /* fill_6EOIVS */
    border: 1px solid #ffffff; /* stroke_0I2F8L */
    border-radius: 20px;      /* borderRadius 20px */
    padding: 0;
    overflow: hidden;
}

/* Заголовок карточки с датой - layout_NV3NYO (для больших карточек) */
.result-header {
    display: flex;
    flex-direction: row;     /* layout_NV3NYO mode row */
    align-items: center;     /* layout_NV3NYO alignItems center */
    gap: 16px;              /* layout_NV3NYO gap 16px */
    min-height: 60px;
}

/* Дата - layout_9F08ST, fill_N3TY0S */
.result-date {
    display: flex;
    flex-direction: column;  /* layout_9F08ST mode column */
    justify-content: center; /* layout_9F08ST justifyContent center */
    align-items: center;     /* layout_9F08ST alignItems center */
    align-self: stretch;     /* layout_9F08ST alignSelf stretch */
    gap: 10px;              /* layout_9F08ST gap 10px */
    padding: 10px 16px;     /* layout_9F08ST padding 10px 16px */
    background: #060606;    /* fill_N3TY0S */
    min-width: 100px;
}

/* Текст даты - style_JZ7PEW */
.date-text {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_JZ7PEW fontWeight 700 */
    font-size: 20px;        /* style_JZ7PEW fontSize 20 */
    line-height: 1.2em;     /* style_JZ7PEW lineHeight 1.2em */
    text-align: left;       /* style_JZ7PEW textAlignHorizontal LEFT */
    color: #ffffff;         /* fill_MLUHQE */
}

/* Контент карточки - layout_6PPMI9 */
.result-content {
    display: flex;
    flex-direction: column;  /* layout_6PPMI9 mode column */
    justify-content: center; /* layout_6PPMI9 justifyContent center */
    gap: 16px;              /* layout_6PPMI9 gap 16px */
    flex: 1;                /* sizing horizontal fill, vertical hug */
    padding: 16px;
}

/* Секция с номерами - layout_864J0I */
.result-numbers-section {
    display: flex;
    flex-direction: column;  /* layout_864J0I mode column */
    justify-content: center; /* layout_864J0I justifyContent center */
    gap: 8px;               /* layout_864J0I gap 8px */
    width: 100%;            /* Адаптивная ширина */
    max-width: 410.61px;    /* Максимальная ширина по Figma */
    box-sizing: border-box;
}

/* Выигрышные номера - layout_QRXD5G */
.winning-numbers {
    display: flex;
    flex-direction: row;     /* layout_QRXD5G mode row */
    align-items: center;     /* layout_QRXD5G alignItems center */
    gap: 8px;               /* layout_QRXD5G gap 8px */
}

/* Основные номера - layout_F6SZ0G */
.main-numbers {
    display: flex;
    flex-direction: row;     /* layout_F6SZ0G mode row */
    align-items: center;     /* layout_F6SZ0G alignItems center */
    gap: 4px;               /* layout_F6SZ0G gap 4px */
}

/* Дополнительные номера - layout_F6SZ0G */
.bonus-numbers {
    display: flex;
    flex-direction: row;     /* layout_F6SZ0G mode row */
    align-items: center;     /* layout_F6SZ0G alignItems center */
    gap: 4px;               /* layout_F6SZ0G gap 4px */
}

/* Номерной шарик - layout_5UWI76, style_M8F3J1 */
.number-ball {
    display: flex;
    flex-direction: column;  /* layout_5UWI76 mode column */
    justify-content: center; /* layout_5UWI76 justifyContent center */
    align-items: center;     /* layout_5UWI76 alignItems center */
    gap: 10px;              /* layout_5UWI76 gap 10px */
    padding: 10px;          /* layout_5UWI76 padding 10px */
    width: 48px;            /* layout_5UWI76 dimensions width 48 */
    height: 48px;           /* layout_5UWI76 dimensions height 48 */
    background: #ffffff;     /* fill_MLUHQE */
    border-radius: 34px;     /* borderRadius 34px */
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_M8F3J1 fontWeight 700 */
    font-size: 17px;        /* style_M8F3J1 fontSize 17 */
    line-height: 1.2;       /* style_M8F3J1 lineHeight 1.2 */
    text-align: center;     /* style_M8F3J1 textAlignHorizontal CENTER */
    color: #060606;         /* fill_N3TY0S */
    box-sizing: border-box;
}

/* Знак плюс - layout_RULJ9D, stroke_CI8D9A */
.plus-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;            /* layout_RULJ9D dimensions width 24 */
    height: 24px;           /* layout_RULJ9D dimensions height 24 */
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;         /* stroke_CI8D9A */
    text-align: center;
}

/* Количество победителей - layout_Q47R08, style_EO0IBN */
.winners-count {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_EO0IBN fontWeight 700 */
    font-size: 17px;        /* style_EO0IBN fontSize 17 */
    line-height: 1.2;       /* style_EO0IBN lineHeight 1.2 */
    text-align: left;       /* style_EO0IBN textAlignHorizontal LEFT */
    color: #ffffff;         /* fill_MLUHQE */
    width: 100%;            /* layout_Q47R08 sizing horizontal fill */
}

/* Кнопка All results - layout_TCYFTM, style_2ZV6GU */
.all-results-btn-figma {
    display: flex;
    flex-direction: row;     /* layout_TCYFTM mode row */
    justify-content: center; /* layout_TCYFTM justifyContent center */
    align-items: center;     /* layout_TCYFTM alignItems center */
    gap: 10px;              /* layout_TCYFTM gap 10px */
    padding: 12px 72px;     /* layout_TCYFTM padding 12px 72px */
    width: 100%;            /* Адаптивная ширина */
    max-width: 400px;       /* Максимальная ширина по Figma */
    background: #FF5C05;    /* fill_QYCSVK */
    border: none;
    border-radius: 10px;    /* borderRadius 10px */
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_2ZV6GU fontWeight 700 */
    font-size: 16px;        /* style_2ZV6GU fontSize 16 */
    line-height: 1.2;       /* style_2ZV6GU lineHeight 1.2 */
    text-transform: uppercase; /* style_2ZV6GU textCase UPPER */
    color: #ffffff;         /* fill_MLUHQE */
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
    box-sizing: border-box;
}

.all-results-btn-figma:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Старые стили для совместимости */
.results {
    margin: 0;
}

.results-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.result-card {
    flex: 1;
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 16px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-numbers {
    display: flex;
    gap: 8px;
    align-items: center;
}

.all-results-btn {
    width: 400px;
    padding: 12px 72px;
    background-color: #FF5C05;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
}

.all-results-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Jackpot Information Section - Figma node-id=1-188 */
/* Основной контейнер - layout_JX9O06 */
.jackpot-info-figma {
    display: flex;
    flex-direction: column;  /* layout_JX9O06 mode column */
    align-items: center;     /* layout_JX9O06 alignItems center */
    align-self: stretch;     /* layout_JX9O06 alignSelf stretch */
    gap: 20px;              /* layout_JX9O06 gap 20px */
    margin: 70px 0;         /* Добавляем вертикальные отступы */
    padding: 40px 20px;     /* Добавляем внутренние отступы */
}

/* Текстовая часть - layout_9WVPAO */
.jackpot-text-figma {
    display: flex;
    flex-direction: column;  /* layout_9WVPAO mode column */
    gap: 30px;              /* layout_9WVPAO gap 30px */
    align-items: center;
    margin-bottom: 20px;    /* Дополнительное расстояние от текста до контента */
}

/* Заголовок - layout_GSY1VQ, style_KI6X6Z */
.jackpot-title-figma {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_KI6X6Z fontWeight 700 */
    font-size: 34px;        /* style_KI6X6Z fontSize 34 */
    line-height: 1em;       /* style_KI6X6Z lineHeight 1em */
    text-transform: uppercase; /* style_KI6X6Z textCase UPPER */
    text-align: center;     /* style_KI6X6Z textAlignHorizontal CENTER */
    color: #ffffff;         /* fill_CDF2X2 */
    width: 100%;            /* Адаптивная ширина */
    max-width: 575px;       /* Максимальная ширина по Figma */
    margin: 0;
    box-sizing: border-box;
}

/* Описание - layout_KSK31D, style_09FGRZ */
.jackpot-description-figma {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;       /* style_09FGRZ fontWeight 400 */
    font-size: 16px;        /* style_09FGRZ fontSize 16 */
    line-height: 1.2em;     /* style_09FGRZ lineHeight 1.2000000476837158em */
    text-align: center;     /* style_09FGRZ textAlignHorizontal CENTER */
    color: #ffffff;         /* fill_CDF2X2 */
    width: 100%;            /* Адаптивная ширина */
    max-width: 603px;       /* Максимальная ширина по Figma */
    margin: 0;
    box-sizing: border-box;
}

/* Ряд карточек - layout_17I3ID */
.schedule-cards-figma {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    align-items: stretch;    /* layout_17I3ID alignItems stretch */
    align-self: stretch;     /* layout_17I3ID alignSelf stretch */
    gap: 24px;              /* layout_17I3ID gap 24px */
}

/* Карточка расписания - layout_AC5O53, layout_PP7EWK, layout_T7LQC5 */
.schedule-card-figma {
    display: flex;
    flex-direction: column;  /* layout_AC5O53 mode column */
    justify-content: center; /* layout_AC5O53 justifyContent center */
    align-items: center;     /* layout_AC5O53 alignItems center */
    align-self: stretch;     /* layout_AC5O53 alignSelf stretch */
    gap: 4px;               /* layout_AC5O53 gap 10px -> обычные 4px */
    padding: 20px 16px;     /* Увеличиваем вертикальные отступы */
    flex: 1;                /* равномерное распределение */
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%); /* fill_H3A2LK */
    border: 1px solid #ffffff; /* stroke_KVFO1I */
    border-radius: 20px;
    position: relative;
    box-sizing: border-box;
}

/* MAX карточка - layout_T7LQC5 */
.schedule-card-figma.schedule-card-max {
    gap: 70px;              /* layout_T7LQC5 gap 70px */
}

/* Дата в карточке - layout_CY3YRR, style_AKSKRC, style_09FGRZ, style_0J1I7V */
.schedule-date-figma {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;       /* style_AKSKRC, style_09FGRZ fontWeight 400 */
    font-size: 16px;        /* style_AKSKRC fontSize 16 */
    line-height: 1.5em;     /* style_AKSKRC lineHeight 1.5em */
    text-align: center;     /* style_AKSKRC textAlignHorizontal CENTER */
    color: #ffffff;         /* fill_CDF2X2 */
    width: 100%;            /* layout_CY3YRR sizing horizontal fill */
    margin: 0;
}

/* Дата в MAX карточке - style_0J1I7V */
.schedule-card-max .schedule-date-figma {
    font-size: 18px;        /* style_0J1I7V fontSize 18 */
    line-height: 1.2em;     /* style_0J1I7V lineHeight 1.2000000211927626em */
}

/* Сумма в карточке - layout_9M555K, style_VFLO3T */
.schedule-amount-figma {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_VFLO3T fontWeight 700 */
    font-size: 26px;        /* style_VFLO3T fontSize 26 */
    line-height: 1.2em;     /* style_VFLO3T lineHeight 1.200000029343825em */
    text-transform: uppercase; /* style_VFLO3T textCase UPPER */
    text-align: center;     /* style_VFLO3T textAlignHorizontal CENTER */
    color: #ffffff;         /* fill_CDF2X2 */
    margin: 0;
}

/* Третья карточка - специальная ширина - layout_ZG2NG0 */
.schedule-cards-figma .schedule-card-figma:nth-child(3) .schedule-amount-figma {
    width: 186px;           /* layout_ZG2NG0 dimensions width 186 */
}

/* Контейнер для карточек с лейблами */
.schedule-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* Лейбл MIN/MAX - layout_BWL8KB, layout_THDOPW, style_HTV2YG */
.schedule-label-figma {
    position: absolute;     /* layout_BWL8KB, layout_THDOPW position absolute */
    display: flex;
    flex-direction: row;
    justify-content: center; /* layout_BWL8KB justifyContent center */
    align-items: center;    /* layout_BWL8KB alignItems center */
    gap: 10px;             /* layout_BWL8KB gap 10px */
    padding: 4px 24px;     /* layout_BWL8KB padding 4px 24px */
    background: #FF5C05aa;   /* fill_BZWWZ8 */
    border-radius: 20px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_HTV2YG fontWeight 700 */
    font-size: 16px;        /* style_HTV2YG fontSize 16 */
    line-height: 1.2em;     /* style_HTV2YG lineHeight 1.2000000476837158em */
    text-align: center;     /* style_HTV2YG textAlignHorizontal CENTER */
    color: #ffffff;         /* fill_CDF2X2 */
    top: 0.31px;           /* layout_BWL8KB locationRelativeToParent y 0.31 */
    right: 0px;            /* layout_BWL8KB locationRelativeToParent x 0 */
}

/* MAX лейбл - layout_THDOPW */
.schedule-card-max .schedule-label-figma {
    left: -0.2px;          /* layout_THDOPW locationRelativeToParent x -0.2 */
    right: auto;
    text-transform: uppercase;
}

/* Legal Information Section */
.legal-info {
    margin: 0;
    border: 1px solid #FF5C05;
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.legal-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #FF5C05;
    text-align: center;
    margin-bottom: 16px;
}

.legal-text {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    color: #ffffff;
    width: 100%;
    max-width: 620px;
    margin: 0 auto 24px;
    padding: 0 20px;
    box-sizing: border-box;
}

.legal-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    margin-top: 0;
    flex-wrap: wrap;
}

.legal-logo {
    height: auto;
    object-fit: contain;
}

.legal-logo:nth-child(1) {
    width: 190px;
    height: 56px;
}

.legal-logo:nth-child(2) {
    width: 93px;
    height: 93px;
}

.legal-logo:nth-child(3) {
    width: 181px;
    height: 39px;
}

.legal-logo:nth-child(4) {
    width: 124px;
    height: 72px;
}

/* About Page Styles */
.about-page {
    margin: 0;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.about-description {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1000px;
}

.feature-item {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
}

.feature-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 15px;
}

.feature-description {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

/* Contact Section */
.contact-section {
    margin: 0;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 30px;
}

.contact-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 15px;
}

.contact-description {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.contact-details {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: #FF5C05;
    margin: 0;
}

/* Signup Form - согласно Figma node-id=2-2281 */
.signup-form-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* Заголовок Sign Up - layout_GE7O6B, style_ZOOE3U */
.signup-form-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;  /* style_ZOOE3U fontWeight 700 */
    font-size: 36px;   /* style_ZOOE3U fontSize 36 */
    line-height: 1em;  /* style_ZOOE3U lineHeight 1em */
    text-transform: uppercase;  /* style_ZOOE3U textCase UPPER */
    color: #ffffff;    /* fill_77H9FQ */
    text-align: center;  /* style_ZOOE3U textAlignHorizontal CENTER */
    margin: 0 0 30px 0;  /* layout_7E8Z4J gap 30px */
}

/* Обертка формы - layout_8GOH56 */
.signup-form-wrapper {
    display: flex;
    justify-content: center;  /* layout_8GOH56 justifyContent center */
    align-self: stretch;
    gap: 24px;  /* layout_8GOH56 gap 24px */
    padding: 0px 64px;  /* layout_8GOH56 padding 0px 64px */
    border-radius: 35px;  /* borderRadius 35px */
    width: 100%;
    box-sizing: border-box;
}

/* Основная форма - layout_K9ZORT */
.signup-form-main {
    display: flex;
    flex-direction: column;
    gap: 12px;  /* layout_K9ZORT gap 12px */
    width: 100%;  /* Адаптивная ширина */
    max-width: 820px;  /* Максимальная ширина по Figma */
    box-sizing: border-box;
}

.form-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;
}

.form-description {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    margin: 0 0 30px 0;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Группа полей формы - layout_BGB3NC */
.form-group {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 8px;  /* layout_BGB3NC gap 8px */
}

/* Поля ввода Sign Up формы - layout_55JZ8Z */
.form-input-signup {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 10px;  /* layout_55JZ8Z gap 10px */
    padding: 24px;  /* layout_55JZ8Z padding 24px */
    background: #ffffff;  /* fill_77H9FQ */
    border: none;
    border-radius: 10px;  /* borderRadius 10px */
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;  /* style_7QXDGB fontWeight 400 */
    font-size: 16px;   /* style_7QXDGB fontSize 16 */
    line-height: 1.2;  /* style_7QXDGB lineHeight 1.2 */
    color: #060606;    /* fill_AAKL2T */
    text-align: left;  /* style_7QXDGB textAlignHorizontal LEFT */
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-input-signup::placeholder {
    color: #060606;  /* fill_AAKL2T */
    opacity: 0.7;
}

.form-input-signup:focus {
    outline: none;
    box-shadow: 0 0 0 2px #FF5C05;
}

/* Старые стили для совместимости */
.form-input {
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form-input:focus {
    outline: none;
    border-color: #FF5C05;
    background: rgba(255, 255, 255, 0.15);
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.form-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #FF5C05;
}

.checkbox-text {
    font-family: 'Clash Display', sans-serif;
    font-size: 14px;
    color: #ffffff;
    line-height: 1.4;
}

/* Кнопка Sign Up - layout_853YHX */
.signup-btn-main {
    display: flex;
    justify-content: center;  /* layout_853YHX justifyContent center */
    align-items: center;     /* layout_853YHX alignItems center */
    align-self: stretch;     /* layout_853YHX alignSelf stretch */
    gap: 10px;              /* layout_853YHX gap 10px */
    padding: 12px 40px;     /* layout_853YHX padding 12px 40px */
    background: #FF5C05;    /* fill_MAMQKQ */
    border: none;
    border-radius: 10px;    /* borderRadius 10px */
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;       /* style_0N20H4 fontWeight 700 */
    font-size: 16px;        /* style_0N20H4 fontSize 16 */
    line-height: 1.2;       /* style_0N20H4 lineHeight 1.2 */
    text-transform: uppercase;  /* style_0N20H4 textCase UPPER */
    color: #ffffff;         /* fill_77H9FQ */
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.signup-btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Контейнер для ссылки Log In - layout_5HT2UW */
.login-link-container {
    display: flex;
    flex-direction: column;
    align-items: center;     /* layout_5HT2UW alignItems center */
    align-self: stretch;     /* layout_5HT2UW alignSelf stretch */
    gap: 12px;              /* layout_5HT2UW gap 12px */
    margin-top: 8px;
}

/* Обертка для текста и ссылки - layout_7FGZVO */
.login-link-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;               /* layout_7FGZVO gap 8px */
    align-items: center;
}

/* Текст "Already have an account?" - style_P9IWT8 */
.login-text {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;       /* style_P9IWT8 fontWeight 400 */
    font-size: 16px;        /* style_P9IWT8 fontSize 16 */
    line-height: 1.2;       /* style_P9IWT8 lineHeight 1.2 */
    text-align: center;     /* style_P9IWT8 textAlignHorizontal CENTER */
    color: #ffffff;         /* fill_77H9FQ */
}

/* Ссылка "Log In" - style_P9IWT8 с цветом fill_MAMQKQ */
.login-link {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;       /* style_P9IWT8 fontWeight 400 */
    font-size: 16px;        /* style_P9IWT8 fontSize 16 */
    line-height: 1.2;       /* style_P9IWT8 lineHeight 1.2 */
    text-align: center;     /* style_P9IWT8 textAlignHorizontal CENTER */
    color: #FF5C05;         /* fill_MAMQKQ */
    text-decoration: none;
    transition: all 0.3s ease;
}

.login-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Старые стили для совместимости */
.signup-btn {
    padding: 15px 30px;
    background-color: #FF5C05;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.signup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Results Page Styles */
.results-page {
    margin: 0;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.result-card {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-card.latest {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #FF5C05 0%, #0B02D2 100%);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-date {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 16px;
}

.date-text {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
}

.result-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.winning-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.main-numbers,
.bonus-numbers {
    display: flex;
    gap: 4px;
}

.number-ball {
    width: 48px;
    height: 48px;
    background: #ffffff;
    color: #060606;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
}

.number-ball.bonus {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.plus-icon {
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin: 0 4px;
}

.winners-count {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #ffffff;
    margin: 0;
}

.load-more-section {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.load-more-btn {
    padding: 12px 32px;
    background-color: #FF5C05;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Prize Information */
.prize-info {
    margin: 0;
}

.prize-table-container {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid #ffffff;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.prize-table {
    width: 100%;
    border-collapse: collapse;
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
}

.prize-table th {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    padding: 16px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.prize-table td {
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.prize-table tr.division-1 {
    background: rgba(255, 92, 5, 0.2);
}

.prize-table tr.division-1 td {
    font-weight: 700;
    color: #FF5C05;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 1);
    margin-top: 0;
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.responsible-gaming {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.responsible-icon {
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    color: #060606;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.responsible-icon-img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.responsible-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1em;
    text-transform: uppercase;
    color: #ffffff;
}

.footer-text {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 20px 0;
}

.footer-logo {
    height: auto;
    object-fit: contain;
}

.footer-logo:nth-child(1) {
    width: 74px;
    height: 63px;
}

.footer-logo:nth-child(2) {
    width: 114px;
    height: 21px;
}

.footer-logo:nth-child(3) {
    width: 125px;
    height: 36px;
}

.footer-logo:nth-child(4) {
    width: 139px;
    height: 45px;
}

.footer-logo:nth-child(5) {
    width: 169px;
    height: 30px;
}

.footer-navigation {
    display: flex;
    gap: 8px;
}

.footer-nav-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
    flex: 1;
}

.footer-nav-legal {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 37px;
    flex: 1;
}

.footer-link {
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-link:hover {
    opacity: 0.8;
}

.footer-link-small {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-link-small:hover {
    opacity: 0.8;
}


@media (max-width: 1450px) and (min-width: 868px) {
    .hero-container {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .steps-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
        gap: 20px;
    }
    .step-card {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    .results-row {
        flex-direction: column;
    }

    .schedule-label-figma {
        border-radius: 20px;
    }

}
/* Tablet Design (600px) */
@media (max-width: 868px) and (min-width: 481px) {
    .main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-family: 'Clash Display', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        text-transform: uppercase;
        color: #ffffff;
        margin-top: 140px;  /* 80px (header height) + 60px (gap по Figma планшет) = 140px */
        padding: 0 24px;
        gap: 60px;  /* По Figma для планшета */
        margin-bottom: 60px;  /* Отступ снизу равен gap для планшета */
        width: 100%;
        box-sizing: border-box;
    }
    
    .section-container {
        padding: 0;
        max-width: 552px;  /* По Figma для планшета */
        width: 100%;
        box-sizing: border-box;
    }
    
    .header-container {
        padding: 0px 24px;  /* По Figma для планшета */
        height: 60px;  /* По Figma для планшета */
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Планшетная навигация - стили уже определены в основном разделе */
    
    .nav {
        display: none !important;
    }
    
    .mobile-nav-overlay {
        display: block !important;
    }
    
    .hero-section {
        width: 100%;  /* Адаптивная ширина */
        max-width: 552px;  /* Максимальная ширина по Figma для планшета */
        margin: 0 auto;
        padding: 30px 20px;  /* По Figma для планшета */
        gap: 20px;  /* Убираем отрицательный gap для планшета */
        box-sizing: border-box;
    }
    
    .hero-container {
        flex-direction: column;  /* По Figma планшет: column layout */
        align-items: center;  /* По Figma планшет: center alignment */
        gap: 20px;  /* По Figma планшет: gap 20px */
    }
    
    .hero-content {
        display: contents;
    }
    
    .hero-text {
        width: 100%;
        text-align: center;
    }
    
    .section-title {
        font-size: 30px;  /* По Figma планшет: style_XXDIVA */
        width: 100%;
    }
    
    .steps-grid {
        flex-direction: column;  /* По Figma планшет: тоже column */
        align-items: center;  /* По Figma планшет: alignItems center */
        gap: 20px;  /* По Figma планшет: gap 20px */
    }
    
    .step-card {
        width: 100%;  /* По Figma планшет: полная ширина */
        max-width: 552px;  /* По Figma планшет: максимальная ширина контейнера */
        justify-content: stretch;
        align-items: stretch;
    }
    
    .step-card .step-content {
        gap: 10px;  /* По Figma планшет: gap 10px */
        justify-content: center;
    }
    
    .step-card:last-child .step-content {
        gap: 4px;  /* По Figma планшет: gap 4px для последнего */
    }
    
    .results-row {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Jackpot Information Section Tablet Styles */
    .jackpot-info-figma {
        gap: 20px;              /* Сохраняем основной gap */
        width: 100%;
        max-width: 600px;       /* Ограничиваем ширину для планшета */
        margin: 60px auto;      /* Адаптивные вертикальные отступы */
        padding: 30px 16px;     /* Адаптивные внутренние отступы */
    }
    
    .jackpot-title-figma {
        font-size: 30px;        /* Уменьшаем размер заголовка */
        width: 100%;
        max-width: 500px;
    }
    
    .jackpot-description-figma {
        width: 100%;
        max-width: 520px;       /* Адаптивная ширина */
        font-size: 16px;
    }
    
    .jackpot-text-figma {
        margin-bottom: 20px;    /* Дополнительное расстояние для планшета */
    }
    
    .schedule-cards-figma {
        flex-direction: column;  /* Переносим карточки в колонку */
        gap: 20px;              /* Уменьшаем gap между карточками */
    }
    
    .schedule-card-figma {
        width: 100%;            /* Полная ширина для планшета */
        max-width: 400px;       /* Ограничиваем максимальную ширину */
        margin: 0 auto;         /* Центрируем карточки */
    }
    
    .legal-info {
        padding: 40px 20px;  /* По Figma для планшета */
    }
    
    .legal-title {
        font-size: 30px;
        margin-bottom: 14px;
    }
    
    .legal-text {
        width: 100%;
        font-size: 16px;  /* По Figma планшет: style_M2QOGI */
        margin-bottom: 20px;
        padding: 0 10px;
    }
    
    .legal-logos {
        gap: 20px;
    }
    
    .footer-container {
        padding: 30px 24px;  /* По Figma для планшета */
        width: 600px;
        margin: 0 auto;
    }
    
    /* Адаптивные логотипы футера для планшета */
    .footer-logos {
        gap: 20px;               /* Уменьшаем gap для планшета */
        flex-wrap: wrap;         /* Разрешаем перенос если нужно */
        justify-content: center;
    }
    
    /* Немного уменьшаем размеры логотипов для планшета */
    .footer-logo:nth-child(1) {
        width: 67px;    /* Gambling Therapy: 74px -> 67px (90%) */
        height: 57px;   /* 63px -> 57px */
    }
    
    .footer-logo:nth-child(2) {
        width: 103px;   /* Gamstop: 114px -> 103px (90%) */
        height: 19px;   /* 21px -> 19px */
    }
    
    .footer-logo:nth-child(3) {
        width: 113px;   /* GamCare: 125px -> 113px (90%) */
        height: 32px;   /* 36px -> 32px */
    }
    
    .footer-logo:nth-child(4) {
        width: 125px;   /* RAIG: 139px -> 125px (90%) */
        height: 41px;   /* 45px -> 41px */
    }
    
    .footer-logo:nth-child(5) {
        width: 152px;   /* BeGambleAware: 169px -> 152px (90%) */
        height: 27px;   /* 30px -> 27px */
    }
    
    /* About Page Tablet Styles */
    .about-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .feature-item,
    .contact-item {
        padding: 25px;
    }
    
    /* Sign Up Form Tablet Styles */
    .signup-form-wrapper {
        padding: 0px 32px;  /* Уменьшаем боковые отступы для планшета */
    }
    
    .signup-form-main {
        width: 100%;  /* Адаптивная ширина для планшета */
        max-width: 600px;  /* Максимальная ширина */
    }
    
    /* Timer Tablet Styles */
    .timer-number-box {
        width: 50px;
        height: 40px;
        padding: 6px;
    }
    
    .timer-number {
        font-size: 20px;
    }
    
    .timer-label {
        font-size: 10px;
    }
    
    /* Results Page Tablet Styles */
    .results-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .result-card {
        padding: 16px;
    }
    
    .number-ball {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .number-ball.bonus {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    /* Results Section Tablet Styles */
    .results-title {
        font-size: 28px;     /* Уменьшаем размер заголовка */
        width: 100%;         /* Адаптивная ширина */
        max-width: 500px;
        margin: 0 auto 30px auto; /* Центрируем и уменьшаем отступ снизу для планшета */
    }
    
    .results-container {
        margin-bottom: 30px; /* Уменьшаем отступ снизу для планшета */
    }
    
    .result-numbers-section {
        width: 100%;         /* Адаптивная ширина */
        max-width: 350px;
    }
    
    .result-card-figma .number-ball {
        width: 40px;         /* Уменьшаем размер шариков */
        height: 40px;
        font-size: 14px;
    }
    
    .all-results-btn-figma {
        width: 300px;        /* Уменьшаем ширину кнопки */
        padding: 12px 48px;  /* Адаптируем отступы */
    }
    
    /* Адаптивные кнопки для планшета */
    .play-btn {
        width: 100%;         /* Адаптивная ширина */
        max-width: 350px;    /* Максимальная ширина для планшета */
        padding: 12px 48px;  /* Уменьшаем отступы */
        font-size: 15px;     /* Промежуточный размер шрифта */
        margin: 0 auto;      /* Центрируем кнопку */
        display: block;
    }
    
    .more-info-btn,
    .all-results-btn {
        width: 100%;         /* Адаптивная ширина */
        max-width: 320px;    /* Максимальная ширина для планшета */
        padding: 12px 40px;  /* Уменьшаем отступы */
        font-size: 15px;     /* Промежуточный размер шрифта */
        margin: 0 auto;      /* Центрируем кнопку */
    }
    
    .signup-btn-main {
        width: 100%;         /* Адаптивная ширина */
        max-width: 400px;    /* Максимальная ширина для планшета */
        padding: 12px 36px;  /* Адаптируем отступы */
        font-size: 15px;     /* Промежуточный размер шрифта */
        margin: 0 auto;      /* Центрируем кнопку */
    }
    
    .load-more-btn,
    .signup-btn {
        width: 100%;         /* Адаптивная ширина */
        max-width: 300px;    /* Максимальная ширина для планшета */
        padding: 12px 32px;  /* Уменьшаем отступы */
        font-size: 15px;     /* Промежуточный размер шрифта */
        margin: 0 auto;      /* Центрируем кнопку */
    }
    
    .prize-table th,
    .prize-table td {
        padding: 10px 8px;
        font-size: 14px;
    }
}

/* Mobile Design (360px) */
@media (max-width: 480px) {
    .main {
        margin-top: 120px;  /* 80px (header height) + 40px (gap по Figma мобайл) = 120px */
        padding: 0 16px;  /* Увеличиваем боковые отступы для предотвращения переполнения */
        gap: 40px;  /* По Figma для мобильного */
        margin-bottom: 40px;  /* Отступ снизу равен gap для мобильного */
        width: 100%;
        max-width: 100vw;  /* Предотвращаем горизонтальное переполнение */
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Мобильная навигация - стили уже определены в основном разделе */
    
    .nav {
        display: none !important;
    }
    
    .mobile-nav-overlay {
        display: block !important;
    }
    
    .section-container {
        padding: 0 8px;  /* Добавляем боковые отступы */
        max-width: 100%;  /* Адаптируем под ширину экрана */
        width: 100%;
        box-sizing: border-box;
    }
    
    .header-container {
        padding: 0px 16px;  /* По Figma для мобильного */
        height: 60px;  /* По Figma для мобильного */
    }
    
    .hero-section {
        width: 100%;  /* Адаптивная ширина */
        max-width: 328px;  /* Максимальная ширина по Figma */
        margin: 0 auto;
        padding: 30px 16px;  /* Уменьшаем боковые отступы */
        gap: 20px;  /* Убираем отрицательный gap для мобильного */
        box-sizing: border-box;
    }
    
    .hero-container {
        flex-direction: column;  /* По Figma мобильный: column layout */
        gap: 20px;  /* По Figma мобильный: gap 20px */
    }
    
    .hero-content {
        display: contents;
    }
    
    .hero-text {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .hero-title {
        font-size: 26px;  /* По Figma мобильный: style_AIW4O8 */
        width: 100%;
        max-width: 100%;
        line-height: 1.1;  /* Улучшаем читаемость */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .hero-subtitle {
        width: 100%;
        max-width: 100%;
        font-size: 14px;  /* Уменьшаем для мобильного */
        line-height: 1.3;
    }
    
    .section-title {
        font-size: 26px;  /* По Figma мобильный: style_AIW4O8 */
        width: 100%;
        max-width: 100%;
        line-height: 1.1;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Адаптивные кнопки для мобильного */
    .play-btn {
        width: 100%;          /* Полная ширина на мобильном */
        max-width: 320px;     /* Максимальная ширина */
        padding: 14px 24px;   /* Уменьшаем отступы для мобильного */
        font-size: 14px;      /* Мобильный размер шрифта */
        margin: 0 auto;       /* Центрируем кнопку */
        display: block;
    }
    
    .more-info-btn {
        width: 100%;          /* Полная ширина на мобильном */
        max-width: 280px;     /* Максимальная ширина */
        padding: 12px 20px;   /* Уменьшаем отступы */
        font-size: 14px;      /* Мобильный размер шрифта */
        margin: 0 auto;       /* Центрируем кнопку */
    }
    
    .all-results-btn {
        width: 100%;          /* Полная ширина на мобильном */
        max-width: 280px;     /* Максимальная ширина */
        padding: 12px 20px;   /* Уменьшаем отступы */
        font-size: 14px;      /* Мобильный размер шрифта */
        margin: 0 auto;       /* Центрируем кнопку */
    }
    
    .steps-grid {
        flex-direction: column;  /* По Figma мобильный: layout_7Q3V6C - mode column */
        align-items: center;  /* По Figma мобильный: alignItems center */
        gap: 20px;  /* По Figma мобильный: gap 20px */
        padding: 0 10px;  /* По Figma мобильный: padding 0px 10px */
    }
    
    .step-card {
        width: 100%;  /* По Figma мобильный: alignSelf stretch */
        max-width: 100%;  /* Предотвращаем переполнение */
        justify-content: stretch;  /* По Figma мобильный: justifyContent stretch */
        align-items: stretch;  /* По Figma мобильный: alignItems stretch */
        gap: 1px;  /* По Figma мобильный: layout_SRLJWS - gap 1px */
        border-radius: 10px;  /* По Figma мобильный: borderRadius 10px */
        margin: 0 auto;
        box-sizing: border-box;
        padding: 16px 12px;  /* Уменьшаем внутренние отступы */
    }
    
    .step-card .step-content {
        gap: 10px;  /* По Figma мобильный: layout_BVPSWA - gap 10px */
        justify-content: center;  /* По Figma мобильный: justifyContent center */
    }
    
    .step-card:last-child .step-content {
        gap: 4px;  /* По Figma мобильный: layout_FT897R - gap 4px */
    }
    
    .step-text {
        font-size: 14px;  /* По Figma мобильный: style_J3UK3B - fontSize 14 */
        line-height: 1.2;  /* По Figma мобильный: lineHeight 1.2 */
    }
    
    .results-row {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Jackpot Information Section Mobile Styles */
    .jackpot-info-figma {
        gap: 20px;              /* Сохраняем основной gap */
        width: 100%;
        max-width: 360px;       /* Увеличиваем ширину с учетом padding */
        margin: 40px auto;      /* Компактные вертикальные отступы */
        padding: 24px 16px;     /* Внутренние отступы для мобильного */
        box-sizing: border-box;
    }
    
    .jackpot-title-figma {
        font-size: 24px;        /* Мобильный размер заголовка */
        width: 100%;
        max-width: 320px;
    }
    
    .jackpot-description-figma {
        width: 100%;
        max-width: 328px;       /* Мобильная ширина */
        font-size: 14px;        /* Меньший размер шрифта */
        line-height: 1.4em;     /* Улучшенная читаемость */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .jackpot-text-figma {
        margin-bottom: 20px;    /* Дополнительное расстояние для мобильного */
    }
    
    .schedule-cards-figma {
        flex-direction: column;  /* Колоночная раскладка */
        gap: 16px;              /* Компактный gap */
        width: 100%;
        max-width: 328px;
        margin: 0 auto;
    }
    
    .schedule-card-figma {
        width: 100%;            /* Полная ширина */
        padding: 20px 16px;     /* Адаптивные отступы */
        border-radius: 16px;    /* Меньший border-radius */
    }
    
    .schedule-date-figma {
        font-size: 14px;        /* Меньший размер даты */
    }
    
    .schedule-amount-figma {
        font-size: 22px;        /* Меньший размер суммы */
    }
    
    .schedule-label-figma {
        font-size: 14px;        /* Меньший размер лейбла */
        padding: 3px 16px;      /* Компактный padding */
    }
    
    .legal-info {
        padding: 20px 16px;  /* Увеличиваем боковые отступы */
        width: 100%;
        max-width: 328px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .legal-title {
        font-size: 26px;  /* style_AIW4O8 - точно из Figma мобайл */
        margin-bottom: 12px;
        width: 100%;
        max-width: 100%;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .legal-text {
        width: 100%;
        max-width: 100%;
        font-size: 14px;  /* По Figma мобильный: style_743AP9 */
        line-height: 1.4;
        margin-bottom: 16px;
        padding: 0;  /* Убираем внутренний padding */
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
    
    .legal-logos {
        gap: 15px;
        justify-content: center;
    }
    
    .legal-logo {
        max-width: 60px;
        height: auto;
    }
    
    .footer-container {
        padding: 30px 16px;  /* По Figma для мобильного */
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .footer-text {
        font-size: 14px;  /* По Figma мобильный: style_743AP9 */
    }
    
    /* Адаптивные логотипы футера для мобильного */
    .footer-logos {
        flex-wrap: wrap;          /* Разрешаем перенос логотипов */
        gap: 15px;               /* Уменьшаем gap для мобильного */
        justify-content: center;  /* Центрируем */
        align-items: center;
        margin: 15px 0;          /* Уменьшаем отступы */
        padding: 0 8px;          /* Добавляем боковые отступы */
    }
    
    /* Уменьшаем размеры логотипов для мобильного */
    .footer-logo:nth-child(1) {
        width: 52px;    /* Gambling Therapy: 74px -> 52px (70%) */
        height: 44px;   /* 63px -> 44px */
    }
    
    .footer-logo:nth-child(2) {
        width: 80px;    /* Gamstop: 114px -> 80px (70%) */
        height: 15px;   /* 21px -> 15px */
    }
    
    .footer-logo:nth-child(3) {
        width: 88px;    /* GamCare: 125px -> 88px (70%) */
        height: 25px;   /* 36px -> 25px */
    }
    
    .footer-logo:nth-child(4) {
        width: 97px;    /* RAIG: 139px -> 97px (70%) */
        height: 32px;   /* 45px -> 32px */
    }
    
    .footer-logo:nth-child(5) {
        width: 118px;   /* BeGambleAware: 169px -> 118px (70%) */
        height: 21px;   /* 30px -> 21px */
    }
    
    /* Адаптивные таблицы для мобильного */
    .prize-table-container {
        width: 100%;
        overflow-x: auto;  /* Горизонтальная прокрутка для больших таблиц */
        -webkit-overflow-scrolling: touch;
    }
    
    .prize-table {
        min-width: 300px;  /* Минимальная ширина таблицы */
        width: 100%;
        font-size: 12px;  /* Уменьшаем размер шрифта */
    }
    
    .prize-table th,
    .prize-table td {
        padding: 8px 4px;  /* Уменьшаем отступы */
        font-size: 12px;
        white-space: nowrap;  /* Предотвращаем перенос в ячейках */
    }
    
    /* Адаптивные карточки результатов */
    .result-card,
    .result-card-full {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }
    
    .winning-numbers {
        flex-wrap: wrap;  /* Позволяем переносить номера */
        gap: 8px;
        justify-content: center;
    }
    
    .number-ball {
        flex-shrink: 0;  /* Предотвращаем сжатие */
        min-width: 32px;
        min-height: 32px;
    }
    
    .footer-navigation {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Мобильная навигация */
    .nav-links {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    
    .nav-link {
        white-space: nowrap;  /* Предотвращаем разрыв ссылок */
        font-size: 14px;
    }
    
    /* Дополнительные стили для предотвращения переполнения */
    .timer,
    .hero-jackpot {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .countdown-timer {
        gap: 12px;  /* Уменьшаем gap между элементами таймера */
    }
    
    .timer-item {
        min-width: 60px;  /* Минимальная ширина элементов таймера */
    }
    
    /* Специальные стили для форм */
    .signup-form,
    .contact-form {
        width: 100%;
        max-width: 100%;
    }
    
    .form-input,
    .form-textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    .footer-nav-main,
    .footer-nav-legal {
        justify-content: center;
    }
    
    .footer-nav-legal {
        gap: 20px;
    }
    
    /* How to Play Mobile */
    .play-steps-detailed {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .step-number-large {
        font-size: 60px;
    }
    
    .step-title {
        font-size: 20px;
    }
    
    .prize-table {
        padding: 15px;
    }
    
    .prize-row {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: left;
    }
    
    .prize-row > div {
        padding: 5px 0;
    }
    
    .rules-content {
        grid-template-columns: 1fr;
        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    
    .rule-item {
        padding: 20px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .play-now-btn,
    .register-btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* About Page Mobile */
    .about-content-section {
        padding: 30px 20px;
    }
    
    .about-main-title {
        font-size: 26px;  /* По Figma мобильный */
    }
    
    .signup-container {
        padding: 30px 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .signup-btn {
        width: 100%;
        min-width: auto;
    }
    
    /* Results Page Mobile */
    .result-card-full {
        padding: 15px;
    }
    
    .result-details {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .load-more-btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Results Section Mobile Styles */
    .results-title {
        font-size: 24px;     /* Мобильный размер заголовка */
        width: 100%;
        max-width: 320px;
        margin: 0 auto 24px auto; /* Центрируем и уменьшаем отступ снизу для мобильного */
    }
    
    .results-container {
        margin-bottom: 24px; /* Уменьшаем отступ снизу для мобильного */
    }
    
    .results-row {
        flex-direction: column; /* Колоночное расположение на мобильном */
        gap: 15px;
    }
    
    .result-card-figma {
        width: 100%;
        max-width: 328px;
        margin: 0 auto;
    }
    
    .result-header {
        flex-direction: column; /* Колоночное расположение даты */
        align-items: stretch;
        gap: 0;
        min-height: auto;
    }
    
    .result-date {
        padding: 12px 16px;
        min-width: auto;
        width: 100%;
    }
    
    .date-text {
        font-size: 16px;     /* Уменьшаем размер даты */
    }
    
    .result-content {
        padding: 12px;
    }
    
    .result-numbers-section {
        width: 100%;
        max-width: 100%;
    }
    
    .winning-numbers {
        flex-wrap: wrap;     /* Переносим номера */
        justify-content: center;
        gap: 6px;
    }
    
    .main-numbers,
    .bonus-numbers {
        gap: 3px;           /* Уменьшаем gap между номерами */
    }
    
    .result-card-figma .number-ball {
        width: 32px;        /* Мобильный размер шариков */
        height: 32px;
        font-size: 12px;
        padding: 6px;
    }
    
    .plus-icon {
        width: 20px;        /* Уменьшаем размер плюса */
        height: 20px;
        font-size: 14px;
    }
    
    .winners-count {
        font-size: 14px;    /* Уменьшаем размер текста */
        text-align: center; /* Центрируем текст */
    }
    
    .all-results-btn-figma {
        width: 100%;        /* Полная ширина на мобильном */
        max-width: 280px;
        padding: 12px 24px;
        font-size: 14px;
    }
    
    /* About Page Mobile Styles */
    .about-description {
        font-size: 16px;
        text-align: left;
    }
    
    .about-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-item,
    .contact-item {
        padding: 20px;
    }
    
    /* Sign Up Form Mobile Styles */
    .signup-form-title {
        font-size: 28px;  /* Уменьшаем размер заголовка для мобильного */
        margin-bottom: 20px;
    }
    
    .signup-form-wrapper {
        padding: 0px 16px;  /* Минимальные боковые отступы для мобильного */
    }
    
    .signup-form-main {
        width: 100%;  /* Полная ширина для мобильного */
        max-width: 100%;
    }
    
    .form-input-signup {
        padding: 20px 16px;  /* Уменьшаем внутренние отступы для мобильного */
        font-size: 14px;     /* Уменьшаем размер шрифта */
    }
    
    .signup-btn-main {
        width: 100%;          /* Полная ширина на мобильном */
        max-width: 280px;     /* Максимальная ширина */
        padding: 14px 24px;   /* Адаптируем размер кнопки */
        font-size: 14px;
        margin: 0 auto;       /* Центрируем кнопку */
    }
    
    /* Дополнительные кнопки для мобильного */
    .load-more-btn {
        width: 100%;          /* Полная ширина на мобильном */
        max-width: 280px;     /* Максимальная ширина */
        padding: 12px 20px;   /* Уменьшаем отступы */
        font-size: 14px;      /* Мобильный размер шрифта */
        margin: 0 auto;       /* Центрируем кнопку */
    }
    
    .signup-btn {
        width: 100%;          /* Полная ширина на мобильном */
        max-width: 280px;     /* Максимальная ширина */
        padding: 12px 20px;   /* Уменьшаем отступы */
        font-size: 14px;      /* Мобильный размер шрифта */
        margin: 10px auto 0;  /* Центрируем с отступом сверху */
    }
    
    .login-text,
    .login-link {
        font-size: 14px;     /* Уменьшаем размер текста ссылки */
    }
    
    .feature-title,
    .contact-title {
        font-size: 18px;
    }
    
    .form-title {
        font-size: 20px;
    }
    
    .checkbox-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    /* Timer Mobile Styles */
    .countdown-timer {
        gap: 0px;
    }
    
    .timer-number-box {
        width: 40px;
        height: 35px;
        padding: 4px;
    }
    
    .timer-number {
        font-size: 18px;
    }
    
    .timer-label {
        font-size: 9px;
    }
    
    /* Results Page Mobile Styles */
    .results-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .result-card {
        padding: 12px;
        gap: 12px;
    }
    
    .winning-numbers {
        gap: 6px;
    }
    
    .main-numbers,
    .bonus-numbers {
        gap: 3px;
    }
    
    .number-ball {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .number-ball.bonus {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    .plus-icon {
        font-size: 18px;
        margin: 0 2px;
    }
    
    .date-text {
        font-size: 16px;
    }
    
    .winners-count {
        font-size: 14px;
    }
    
    .prize-table-container {
        font-size: 12px;
    }
    
    .prize-table th,
    .prize-table td {
        padding: 8px 4px;
        font-size: 12px;
    }
    
    /* Стили для мобильной навигации уже определены выше */
    .mobile-nav-overlay {
        display: block !important;
    }
    
    /* Мобильные стили header согласно Figma node-id=1-6144 */
    /* layout_UQ1K1I - основной хедер */
    .header-container {
        display: flex;
        flex-direction: row;       /* layout_UQ1K1I mode row */
        justify-content: space-between;  /* Исправляем на space-between */
        align-items: center;       /* Исправляем на center */
        gap: 20px;                /* layout_UQ1K1I gap 20px */
        padding: 8px 16px !important;  /* layout_UQ1K1I padding 8px 16px */
        width: 100% !important;       /* Исправляем на 100% */
        max-width: 360px !important;  /* Максимальная ширина */
        height: 60px !important;       /* layout_UQ1K1I dimensions height 60 */
        margin: 0 auto !important;
        box-sizing: border-box;
    }
    
    /* layout_K7S8BU - внутренний контейнер */
    .nav-wrapper {
        display: flex;
        flex-direction: row;        /* layout_K7S8BU mode row */
        justify-content: space-between; /* layout_K7S8BU justifyContent space-between */
        align-items: center;        /* layout_K7S8BU alignItems center */
        gap: 8px;                  /* layout_K7S8BU gap 8px */
        width: 100%;               /* layout_K7S8BU sizing horizontal fill */
        height: auto;              /* layout_K7S8BU sizing vertical hug */
    }
    
    /* layout_MH155Y - логотип */
    .logo {
        width: 202px !important;   /* layout_MH155Y dimensions width 102 */
        height: 42px !important;   /* layout_MH155Y dimensions height 32 */
        flex-shrink: 0;
        display: block !important;  /* Убеждаемся что логотип виден */
    }
    
    .logo a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .logo a img,
    .logo-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;  /* Убеждаемся что изображение видно */
    }
    
    /* Бургер-меню для мобильной версии - стили уже определены в основном разделе */
    
    .burger-line {
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    /* Убеждаемся, что хедер виден на мобильном */
    .header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
    
    /* Мобильная навигация - стили уже определены в основном разделе */
    .mobile-nav-overlay {
        display: block !important;
    }
}

/* Burger Menu Styles согласно Figma node-id=1-6144 */
/* layout_MSFPRZ - контейнер бургера */
.burger-menu {
    display: none;
    flex-direction: column;    /* layout_MSFPRZ mode column */
    justify-content: center;   /* layout_MSFPRZ justifyContent center */
    align-items: center;       /* layout_MSFPRZ alignItems center */
    gap: 6px;                 /* layout_MSFPRZ gap 6px */
    padding: 6px 4px;         /* layout_MSFPRZ padding 6px 4px */
    width: 50px;              /* layout_MSFPRZ dimensions width 50 */
    height: auto;             /* layout_MSFPRZ sizing vertical hug */
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-sizing: border-box;
    min-width: 44px;          /* Минимальная ширина для удобного тапа */
    min-height: 44px;         /* Минимальная высота для удобного тапа */
    z-index: 1001;            /* Убеждаемся что бургер поверх других элементов */
    position: relative;       /* Для правильного позиционирования */
}

/* Показываем бургер-меню на планшетах и мобильных */
@media (max-width: 868px) {
    .burger-menu {
        display: flex !important;
    }
    
    .nav {
        display: none !important;
    }
    
    .mobile-nav-overlay {
        display: block !important;
    }
}

/* Дополнительные стили для мобильной навигации */
@media (max-width: 868px) {
    /* Улучшаем мобильную навигацию */
    .mobile-nav-link {
        font-size: 16px;
        padding: 20px 0;
        min-height: 50px;
    }
    
    .mobile-nav {
        padding: 30px 20px;
        gap: 20px;
    }
}

/* layout_DCJWQF - линии бургера */
.burger-line {
    width: 100%;              /* layout_DCJWQF sizing horizontal fill */
    height: 2px;              /* layout_DCJWQF dimensions height 2 */
    background-color: #ffffff; /* fill_3WBAZL */
    border-radius: 2px;       /* borderRadius 2px */
    transition: all 0.3s ease;
}

.burger-menu:hover .burger-line {
    opacity: 0.8;
}

.burger-menu.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 60px;  /* Высота мобильного хедера */
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;        /* Добавляем вертикальную прокрутку */
    box-sizing: border-box;
}

.mobile-nav-overlay.active {
    transform: translateY(0);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-nav-link {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;        /* Минимальная высота для удобного тапа */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: #FF5C05;
    transform: translateX(10px);
}

.mobile-nav-link.auth-link {
    background: #FF5C05;
    color: #ffffff !important;
    margin-top: 10px;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
}

.mobile-nav-link.auth-link:hover {
    background: #e04a00;
    transform: translateX(0);
}

/* Auth Page Styles */
.auth-main {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-section {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.auth-container {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
}

.auth-subtitle {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-tab.active {
    background: #ffffff;
    color: #0B02D2;
}

.auth-tab:hover:not(.active) {
    color: #ffffff;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:focus {
    outline: none;
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.forgot-password {
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #FF5C05;
    text-decoration: none;
    transition: all 0.3s ease;
}

.forgot-password:hover {
    color: #ffffff;
    text-decoration: underline;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #FF5C05;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-text {
    flex: 1;
}

.terms-link {
    color: #FF5C05;
    text-decoration: none;
    transition: all 0.3s ease;
}

.terms-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.auth-btn {
    width: 100%;
    padding: 16px 24px;
    background: #FF5C05;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-btn:hover {
    background: #e04a00;
    transform: translateY(-2px);
    box-shadow: 0px 5px 15px rgba(255, 92, 5, 0.4);
}

.auth-btn:active {
    transform: translateY(0);
}

/* Success Popup Styles */
.success-popup {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 2px solid #ffffff;
    max-width: 400px;
    text-align: center;
}

.popup-icon {
    width: 60px;
    height: 60px;
    background: #FF5C05;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #ffffff;
    margin: 0 auto 20px;
    font-weight: bold;
}

/* Mobile Styles for Auth */
@media (max-width: 868px) {
    .auth-main {
        margin-top: 60px;
        padding: 20px 16px;
    }
    
    .auth-container {
        padding: 30px 20px;
    }
    
    .auth-title {
        font-size: 28px;
    }
    
    .auth-subtitle {
        font-size: 14px;
    }
    
    .auth-tab {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .form-input {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .auth-btn {
        padding: 14px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .auth-container {
        padding: 25px 16px;
    }
    
    .auth-title {
        font-size: 24px;
    }
    
    .auth-tabs {
        margin-bottom: 25px;
    }
    
    .auth-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Policy Pages Styles */
.policy-main {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    padding: 40px 20px;
}

.policy-section {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.policy-container {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.policy-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: #ffffff;
    margin-bottom: 10px;
    text-align: center;
}

.policy-updated {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-bottom: 30px;
}

.policy-content {
    color: #ffffff;
    line-height: 1.6;
}

.policy-content h2 {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #ffffff;
    margin: 30px 0 15px 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

.policy-content h3 {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #FF5C05;
    margin: 25px 0 10px 0;
}

.policy-content h4 {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    margin: 20px 0 8px 0;
}

.policy-content p {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.policy-content ul {
    margin: 15px 0;
    padding-left: 20px;
}

.policy-content li {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.policy-content a {
    color: #FF5C05;
    text-decoration: none;
    transition: all 0.3s ease;
}

.policy-content a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.contact-info {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid #FF5C05;
}

.contact-info p {
    margin-bottom: 10px;
    font-weight: 500;
}

.support-organizations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.support-org {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.support-org h4 {
    color: #FF5C05;
    margin-bottom: 10px;
}

.support-org p {
    margin-bottom: 8px;
    font-size: 14px;
}

/* Mobile Styles for Policy Pages */
@media (max-width: 768px) {
    .policy-main {
        margin-top: 60px;
        padding: 20px 16px;
    }
    
    .policy-container {
        padding: 30px 20px;
    }
    
    .policy-title {
        font-size: 28px;
    }
    
    .policy-content h2 {
        font-size: 20px;
    }
    
    .policy-content h3 {
        font-size: 18px;
    }
    
    .policy-content h4 {
        font-size: 16px;
    }
    
    .policy-content p,
    .policy-content li {
        font-size: 14px;
    }
    
    .support-organizations {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .policy-container {
        padding: 25px 16px;
    }
    
    .policy-title {
        font-size: 24px;
    }
    
    .policy-content h2 {
        font-size: 18px;
    }
    
    .policy-content h3 {
        font-size: 16px;
    }
    
    .policy-content h4 {
        font-size: 14px;
    }
}

/* Results Page Styles */
.results-page {
    margin: 70px 0;
}

.results-full-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.result-card-full {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 150px;
}

.result-date {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    opacity: 0.8;
}

.result-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-prize {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
}

.result-winners {
    font-family: 'Clash Display', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    opacity: 0.9;
}

.load-more-section {
    text-align: center;
    margin-top: 40px;
}

.load-more-btn {
    width: 400px;
    padding: 12px 72px;
    background-color: #FF5C05;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Navigation Active State */
.nav-link.active {
    color: #FF5C05;
    font-weight: 700;
}

/* About Page Styles */
.about-page {
    margin: 70px 0;
}

.about-content-section {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 40px 20px;
    margin: 70px 0;
}

.about-text-content {
    text-align: center;
    color: #ffffff;
}

.about-main-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 30px;
}

.about-description {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
}

/* Signup Section Styles */
.signup-section {
    margin: 70px 0;
}

.signup-container {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 40px;
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
}

.form-group .form-input {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-group .form-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
}

.form-group .form-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.terms-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Clash Display', sans-serif;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: #FF5C05;
    border-color: #FF5C05;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
}

.signup-btn {
    padding: 18px 40px;
    background: #FF5C05;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    align-self: center;
    min-width: 250px;
}

.signup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 92, 5, 0.4);
}

/* How to Play Page Styles */
.howtoplay-page {
    margin: 70px 0;
}

.play-steps-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin: 70px 0;
}

.play-step-detailed {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
}

.step-number-large {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 80px;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 20px;
}

.step-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 15px;
}

.step-description {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
}

/* Prize Information Styles */
.prize-info-section {
    margin: 70px 0;
}

.prize-table {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 20px;
    overflow-x: auto;
}

.prize-row {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1.5fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    align-items: center;
}

.prize-row:last-child {
    border-bottom: none;
}

.prize-header {
    font-weight: 700;
    font-size: clamp(12px, 1vw, 16px);
    text-transform: uppercase;
    border-bottom: 2px solid #ffffff;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.prize-division,
.prize-match,
.prize-odds,
.prize-amount {
    font-family: 'Clash Display', sans-serif;
    color: #ffffff;
    text-align: left;
}

.prize-header .prize-division,
.prize-header .prize-match,
.prize-header .prize-odds,
.prize-header .prize-amount {
    font-weight: 700;
    font-size: clamp(9px, 1vw, 14px);
    text-transform: uppercase;
}

.prize-division {
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

/* Game Rules Styles */
.game-rules-section {
    margin: 70px 0;
}

.rules-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
@media (max-width: 410px) {
    .rules-content {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
}

.rule-item {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 15px;
    padding: 25px;
}

.rule-item h3 {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.rule-item p {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
}

/* CTA Section Styles */
.cta-section {
    margin: 70px 0;
    text-align: center;
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 50px 40px;
}

.cta-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
}

.cta-description {
    font-family: 'Clash Display', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.play-now-btn,
.register-btn {
    padding: 15px 40px;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
}

.play-now-btn {
    background: #FF5C05;
    color: #ffffff;
}

.register-btn {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.play-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 92, 5, 0.4);
}

.register-btn:hover {
    background: #ffffff;
    color: #0B02D2;
}

/* Sign In Page Styles */
.signin-page {
    margin: 70px 0;
}

.signin-form-container {
    background: linear-gradient(135deg, #0B02D2 0%, #3DFDA9 100%);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
}

.signin-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-input {
    padding: 15px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Clash Display', sans-serif;
    font-size: 16px;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
}

.signin-btn {
    padding: 15px 30px;
    background: #FF5C05;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.signin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 92, 5, 0.3);
}

/* Smooth animations */
.step-card,
.result-card,
.result-card-full,
.schedule-item,
.play-btn,
.more-info-btn,
.all-results-btn,
.load-more-btn,
.play-step-detailed {
    transition: all 0.3s ease;
}

.step-card:hover,
.result-card:hover,
.result-card-full:hover,
.schedule-item:hover,
.play-step-detailed:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}