/* Колесо фортуны в кабинете игрока. Исход решает сервер — здесь только анимация. */

.fw-card {
    background: linear-gradient(160deg, #171c2b 0%, #0f131e 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 22px 22px 26px;
    margin: 0 0 26px;
    color: #eef1f7;
    text-align: center;
}

.fw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    margin-bottom: 18px;
}

.fw-kicker {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold, #f2c85b);
}

.fw-head h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
}

.fw-sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: #9aa3b7;
}

.fw-badge {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(37, 197, 63, .14);
    color: var(--green, #25c53f);
    border: 1px solid rgba(37, 197, 63, .3);
}

/* Все размеры колеса считаем по внешней рамке. Виджет висит в общем layout и на
   лендинге, а глобальный border-box есть не на каждой странице — без этого рамки и
   отступы «съезжали» бы, и подписи крутились бы вокруг точки ниже центра. */
.fw-card,
.fw-card *,
.fw-fab,
.fw-modal,
.fw-modal * {
    box-sizing: border-box;
}

/* Сцена обязана быть строго квадратной, иначе диск выходит овалом. Квадрат держим
   отступом в 100% от ширины, а не aspect-ratio: его нет в iOS 13 и старых Android
   WebView, а с них на сайт заходят — там высота сцены схлопывалась в ноль. */
.fw-stage {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

    .fw-stage::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

.fw-wheel {
    position: absolute;
    /* top/right/bottom/left вместо inset: inset не понимают те же старые WebView,
       где колесо и разъезжалось. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    /* Силуэт диска остаётся круглым, даже если длинная подпись вылезет за обод. */
    overflow: hidden;
    border: 6px solid rgba(255, 255, 255, .1);
    /* Секторы задаются разметкой через --fw-start / --fw-stops, а геометрия отрисовки —
       здесь, и только здесь. Раньше градиент писали инлайновым background: — короткая
       запись сбрасывает background-origin в padding-box, поэтому круг заливки был на
       12px меньше самого диска (288 против 300). Обод полупрозрачный, и под ним
       браузер дорисовывал следующую «плитку» градиента — обрезок с противоположной
       стороны колеса. Слева это выглядело как светлый серп между секторами и ободом.
       border-box совмещает центр и радиус заливки с диском, no-repeat убирает плитки. */
    background-image: conic-gradient(from var(--fw-start, 0deg), var(--fw-stops, #1b2233 0deg 360deg));
    background-origin: border-box;
    background-clip: border-box;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 3px rgba(242, 200, 91, .35), 0 18px 40px rgba(0, 0, 0, .45);
    /* Стартовое положение: сектор 0 под указателем. */
    transform: rotate(0deg);
    transition: transform 3.4s cubic-bezier(.14, .84, .21, 1);
    will-change: transform;
}

/* Подписи секторов. Обёртка — «спица» от центра колеса до обода: её низ совпадает
   с центром, поэтому поворот вокруг transform-origin: 50% 100% ставит подпись ровно
   в свой сектор. Раньше вращался сам текст, а translateY(-46%) считался от высоты
   строки (~8px) — надписи не доезжали до обода и слипались в центре. */
.fw-label {
    position: absolute;
    left: 50%;
    top: 0;
    width: 92px;
    height: 50%;
    margin-left: -46px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14px;
    transform-origin: 50% 100%;
    pointer-events: none;
}

.fw-label-text {
    max-width: 100%;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    overflow-wrap: anywhere;
}

.fw-pointer {
    position: absolute;
    left: 50%;
    top: -12px;
    z-index: 3;
    width: 0;
    height: 0;
    margin-left: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 20px solid var(--gold, #f2c85b);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

.fw-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: #0f131e;
    border: 3px solid var(--gold, #f2c85b);
    pointer-events: none;
}

.fw-btn {
    display: inline-block;
    margin: 22px auto 0;
    padding: 12px 34px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    color: #08210d;
    background: var(--green, #25c53f);
    transition: filter .18s ease, opacity .18s ease;
}

.fw-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.fw-btn:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.fw-result {
    min-height: 22px;
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--gold, #f2c85b);
}

.fw-result.is-muted {
    font-weight: 400;
    color: #9aa3b7;
}

.fw-result.is-error {
    color: #ff8080;
}

/* Ссылка «войти» для гостя выглядит как кнопка прокрута. */
.fw-btn-link {
    text-decoration: none;
    text-align: center;
}

/* ---------- Плавающая кнопка ----------
   Десктоп: прижата к правому краю по центру высоты. Мобильные: внизу по центру,
   в стороне от чат-виджета в правом нижнем углу. */
.fw-fab {
    position: fixed;
    z-index: 1080;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 0;
    border-radius: 16px 0 0 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    color: #20170a;
    background: linear-gradient(135deg, #f7d879 0%, #e0a93d 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    transition: filter .18s ease;
}

.fw-fab:hover {
    filter: brightness(1.06);
}

.fw-fab-icon {
    font-size: 20px;
    line-height: 1;
    animation: fw-fab-turn 7s linear infinite;
}

@keyframes fw-fab-turn {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fw-fab-icon {
        animation: none;
    }
}

/* ---------- Модалка ---------- */
.fw-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.fw-modal.is-open {
    display: flex;
}

.fw-modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(4, 7, 14, .74);
}

.fw-modal-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
}

    .fw-modal-box .fw-card {
        margin: 0;
    }

.fw-modal-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #eef1f7;
    background: rgba(255, 255, 255, .12);
}

    .fw-modal-close:hover {
        background: rgba(255, 255, 255, .2);
    }

/* Пока колесо открыто, страница под ним не прокручивается. */
.fw-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .fw-fab {
        top: auto;
        bottom: 16px;
        right: 50%;
        transform: translateX(50%);
        border-radius: 999px;
        padding: 11px 20px;
    }
}

@media (max-width: 575px) {
    .fw-head {
        flex-direction: column;
    }

    .fw-head h2 {
        font-size: 19px;
    }

    .fw-stage {
        max-width: 250px;
    }

    .fw-label {
        width: 78px;
        margin-left: -39px;
        padding-top: 11px;
    }

    .fw-label-text {
        font-size: 11px;
    }
}