:root {
    --brand-color: #a3e635;
    --brand-hover: #86c724;
    --pink-glow: #ff007f; 
}

body, html {
    margin: 0; padding: 0; 
    width: 100%; height: 100%;
    font-family: 'Montserrat', sans-serif;
    background-color: #0b0c10;
    overflow: hidden; 
}

.main-bg {
    position: relative;
    width: 100%; height: 100%;
    /* Фон задается через config.js -> script.js */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

/* --- ЛОГОТИП И ЗАГОЛОВОК --- */
.logo-top-left {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 35px;
    z-index: 30;
}

.header-title {
    position: relative;
    display: flex;
    margin-top: 7%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2vh;
    z-index: 30;
}

.title-main {
    font-size: 3rem;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
    margin-bottom: 5px;
    text-align: center;
    line-height: 1;
}

.title-sub {
    font-size: 1.5rem;
    color: var(--brand-color);
    border: 2px solid var(--brand-color);
    border-radius: 30px;
    padding: 8px 25px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    font-weight: 700;
    text-transform: lowercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.3);
}

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(5px);
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
    z-index: 40;
}

/* --- СБОРКА КОЛЕСА --- */
.wheel-wrapper {
    position: relative;
    width: min(90vw, 550px);
    aspect-ratio: 1 / 1;
    transform: scale(.8);
    margin-top: 0; 
    z-index: 10;
    transition: opacity 0.5s ease, transform 0.5s ease;
    container-type: inline-size;
}

@keyframes idle-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wheel-spinner {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    animation: idle-spin 20s linear infinite; 
}

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

.win-section {
    position: absolute;
    top: 7.3%; left: 50%; transform: translateX(-50%);
    width: 21%; height: 36%; z-index: 15; pointer-events: none; 
}

/* --- ТЕКСТЫ НА КОЛЕСЕ --- */
.sector-text {
    position: absolute; top: 57%; left: 50%; width: 44%; height: 6px; 
    margin-top: -45px; transform-origin: 0% 50%; display: flex;
    align-items: center; justify-content: flex-end; padding-right: 6%; 
    box-sizing: border-box; font-size: clamp(12px, 4.5vw, 22px); font-size: 4.8cqw; 
    font-weight: 900; color: #fff;
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1px 1px #000, -1px -1px #000;
    z-index: 5; white-space: nowrap; 
}

.sector-text span { display: inline-block; transition: all 0.3s ease; }

.pink-win-glow {
    color: #fff !important;
    text-shadow: 0 0 10px var(--pink-glow), 0 0 20px var(--pink-glow), 1px 1px 0 #000 !important;
    transform: scale(1.3); background: rgba(255, 0, 127, 0.5);
    padding: 4px 10px; border-radius: 12px; box-shadow: 0 0 15px var(--pink-glow);
}

.wheel-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 25%; cursor: pointer; z-index: 25; transition: transform 0.1s ease;
    filter: drop-shadow(0 0 15px rgba(255,0,85,0.5));
}
.wheel-btn:active { transform: translate(-50%, -50%) scale(0.95); }

.wheel-arrow {
    position: absolute; top: -5%; left: 50%; transform: translateX(-50%);
    width: 14%; z-index: 20; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

.btn-bottom-register {
    display: none; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    background: var(--brand-color); color: #000; width: 90%; max-width: 400px; padding: 18px;
    border: none; border-radius: 10px; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: 0.3s; z-index: 10;
}
.btn-bottom-register:hover { background: var(--brand-hover); }
.btn-bottom-register:active { transform: translateX(-50%) scale(0.97); }

/* --- ФОРМА РЕГИСТРАЦИИ --- */
#form-container {
    display: none; opacity: 0; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9); background: #ffffff; color: #333;
    width: 90%; max-width: 400px; border-radius: 20px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    text-align: center; transition: opacity 0.4s ease, transform 0.4s ease; z-index: 50; box-sizing: border-box;
}
.win-banner { background: var(--brand-color); color: #000; font-size: 1.8rem; font-weight: 900; padding: 15px; border-radius: 15px; margin-top: -55px; margin-bottom: 20px; box-shadow: 0 10px 20px rgba(163, 230, 53, 0.4); }
.tabs { display: flex; margin-bottom: 20px; border-radius: 10px; overflow: hidden; background: #f0f0f0;}
.tab-btn { flex: 1; padding: 12px; border: none; background: transparent; font-weight: 700; cursor: pointer; color: #666;}
.tab-btn.active { background: #fff; color: #000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.tab-content { display: none; }
.tab-content.active { display: block; }
input.main-input, select.main-input { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 10px; font-size: 1rem; background: #fafafa; box-sizing: border-box;}
.checkbox-wrap { display: flex; align-items: flex-start; text-align: left; font-size: 0.8rem; color: #666; margin-bottom: 20px; gap: 10px; }
.btn-submit { width: 100%; padding: 15px; border: none; border-radius: 10px; background: var(--brand-color); color: #000; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: 0.3s; }

.social-login { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px;}
.social-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px;}
.soc-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; background: #fff; cursor: pointer; text-decoration: none; transition: 0.2s;}
.soc-btn:hover { background: #f9f9f9; transform: scale(1.05); }
.soc-btn img { width: 24px; height: 24px; object-fit: contain; }

.error-box { display: none; background: #ffebee; color: #c62828; padding: 10px; border-radius: 8px; margin-bottom: 15px; font-weight: bold; }

@media screen and (max-width: 620px) { 
    .sector-text { font-size: 3.8cqw; padding-right: 8%; top: 59%; } 
    .title-main { font-size: 2.2rem; }
    .title-sub { font-size: 1.1rem; padding: 6px 18px; }
}
@media screen and (max-width: 450px) { .sector-text { top: 62%; } }
@media screen and (max-width: 350px) { .sector-text { top: 64%; } }