/* Страницы этапа 4: бонусы, акции, правила, колесо фортуны, турниры. Общие таймеры, лайки, аккордеоны. */

.page-title { margin: 0 0 32px; font-family: var(--font-head); font-size: 38px; font-weight: 600; line-height: 38px; letter-spacing: -.72px; }
.page-lead { max-width: 720px; margin: -20px 0 32px; color: var(--muted); font-size: 14px; line-height: 20px; }
.page-section + .page-section { margin-top: 32px; }
.page-section .section-title { margin-bottom: 24px; font-size: 24px; line-height: 24px; }

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-top: 24px;
    padding: 0 16px;
    border-radius: var(--r-s);
    background: var(--surface);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    transition: background-color .2s;
}
.back-btn .icon { width: 16px; height: 16px; }
.back-btn:hover { background: var(--surface-hover); }
.back-btn + .page-title { margin-top: 12px; }

/* ---------- таймер ---------- */

.timer { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timer__num { font-weight: 600; }
.timer__sep { font-style: normal; opacity: .7; }
.timer__part { display: inline-flex; align-items: baseline; }
.timer small { margin-left: 1px; font-size: inherit; }
.timer--chips { gap: 0; color: #fff; font-size: 12px; line-height: 16px; }
.timer--chips .timer__num { min-width: 24px; padding: 2px 4px; border-radius: 6px; background: rgba(255, 255, 255, .2); text-align: center; }
.timer--chips .timer__sep { width: 5px; color: rgba(255, 255, 255, .64); font-size: 14px; font-weight: 600; line-height: 20px; text-align: center; opacity: 1; }
.timer--plain { gap: 4px; height: 24px; padding: 2px 8px; border-radius: 999px; background: #2e243f; font-size: 14px; line-height: 20px; }
.timer--plain .timer__sep { color: var(--muted); font-weight: 600; opacity: 1; }
.timer--pill { padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: 11px; line-height: 16px; }

/* ---------- аккордеон ---------- */

.acc { border-radius: var(--r-m); background: var(--panel); }
.acc + .acc { margin-top: 12px; }
.acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    list-style: none;
    cursor: pointer;
    transition: background-color .2s;
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head:hover { color: #fff; }
.acc__arrow { color: var(--muted); transition: transform .2s; }
.acc[open] .acc__arrow { transform: rotate(180deg); }
.acc__body { padding: 0 16px 16px; color: var(--muted); font-size: 14px; line-height: 20px; }
.acc__body p + p, .acc__body p + ul, .acc__body ul + p { margin-top: 12px; }
.acc__body strong { font-weight: 700; }
.acc__body ul { padding-left: 16px; list-style: disc; }
.acc__body a { color: var(--accent-hover); }

/* ---------- бонусы ---------- */

.bonus-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 360px;
    max-width: 100%;
    height: 260px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(270deg, #ffb200 0%, #7d5100 100%);
    overflow: hidden;
}
.bonus-card__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.bonus-card__info { display: grid; place-items: center; color: #fff; }
.bonus-card__info .icon { width: 16px; height: 16px; }
.bonus-card__title { position: relative; z-index: 1; margin-top: auto; color: #fff; font-family: var(--font-head); font-size: 24px; font-weight: 600; line-height: 24px; }
.bonus-card__text { position: relative; z-index: 1; max-width: 170px; margin: 8px 0 12px; color: rgba(255, 255, 255, .64); font-size: 12px; line-height: 16px; }
.bonus-card .btn { position: relative; z-index: 1; }
.bonus-card__img { position: absolute; right: 0; bottom: 0; width: 230px; height: 242px; object-fit: contain; object-position: right bottom; }

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

/* ---------- акции ---------- */

.promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.promo-grid { gap: 16px; }
.promo-card { display: flex; flex-direction: column; gap: 16px; }
.promo-card__link { display: flex; flex-direction: column; gap: 12px; }
.promo-card__img { width: 100%; height: auto; aspect-ratio: 360 / 152; border-radius: var(--r-l); object-fit: cover; background: var(--panel); transition: filter .2s; }
.promo-card__link:hover .promo-card__img { filter: brightness(1.08); }
.promo-card__title { display: flex; text-wrap: balance; align-items: flex-start; justify-content: space-between; gap: 8px; color: #fff; font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 20px; }
.promo-card__title .icon { margin-top: 2px; color: var(--muted); }
.promo-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }

.like {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--surface);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    transition: background-color .2s, color .2s;
}
.like:hover { background: var(--surface-hover); }
.like .icon { width: 16px; height: 16px; color: var(--text); transition: color .2s, transform .2s; }
.like[aria-pressed="true"] .icon { color: #ff4d6d; transform: scale(1.15); }

/* ---------- правила ---------- */

.rules { max-width: 741px; }
.rules__group { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 20px; }
.rules__group .icon { width: 24px; height: 24px; color: #5a9bff; }
.rules .acc__body { max-height: 70vh; overflow-y: auto; }

/* ---------- колесо фортуны ---------- */

.wheel-page { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 48px; align-items: center; }
.wheel { position: relative; width: 100%; aspect-ratio: 1; }
.wheel__disc {
    --turn: 0deg;
    position: absolute;
    inset: 0;
    border: 10px solid #3b2152;
    border-radius: 50%;
    background: conic-gradient(from -22.5deg,
        #8a2be2 0 45deg, #2d1640 45deg 90deg, #b633fe 90deg 135deg, #2d1640 135deg 180deg,
        #8a2be2 180deg 225deg, #2d1640 225deg 270deg, #b633fe 270deg 315deg, #2d1640 315deg 360deg);
    box-shadow: 0 0 0 4px #f0c14b, 0 24px 64px rgba(0, 0, 0, .5), inset 0 0 40px rgba(0, 0, 0, .4);
    transform: rotate(var(--turn));
    transition: transform 5s cubic-bezier(.17, .67, .12, 1);
}
.wheel__label {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    width: 46%;
    margin-top: -12px;
    padding-left: 22%;
    color: #fff;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    transform-origin: 0 50%;
    white-space: nowrap;
}
/* Каждая подпись — по центру своего сектора, читается от центра к краю. Сектор 1 — сверху.
   В левой половине колеса текст переворачивается, чтобы не стоять вверх ногами. */
.wheel__label span { flex: 1; }
.wheel__label:nth-child(n+6) span { transform: rotate(180deg); }
.wheel__label:nth-child(1) { transform: rotate(-90deg); }
.wheel__label:nth-child(2) { transform: rotate(-45deg); }
.wheel__label:nth-child(3) { transform: rotate(0deg); }
.wheel__label:nth-child(4) { transform: rotate(45deg); }
.wheel__label:nth-child(5) { transform: rotate(90deg); }
.wheel__label:nth-child(6) { transform: rotate(135deg); }
.wheel__label:nth-child(7) { transform: rotate(180deg); }
.wheel__label:nth-child(8) { transform: rotate(225deg); }
.wheel__pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -16px;
    border: 16px solid transparent;
    border-top: 30px solid #f0c14b;
    border-bottom: 0;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}
.wheel__hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26%;
    aspect-ratio: 1;
    border: 4px solid #f0c14b;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c35cff, #6c1fb0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    color: #fff;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 800;
    transform: translate(-50%, -50%);
    transition: filter .2s;
}
.wheel__hub:hover:not(:disabled) { filter: brightness(1.1); }
.wheel-page.is-spinning [data-wheel-spin] { opacity: .6; }

.wheel-info__text { margin-bottom: 24px; color: var(--muted); font-size: 15px; line-height: 22px; }
.wheel-info .section-title { margin-bottom: 12px; }
.wheel-info__prizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.wheel-info__prizes li { padding: 10px 14px; border-radius: var(--r); background: var(--surface); font-size: 14px; font-weight: 600; }
.wheel-info__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- турниры ---------- */

.tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tour-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--panel); }
.tour-card__img { width: 100%; height: auto; aspect-ratio: 360 / 152; object-fit: cover; }
.tour-card__body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 20px; }
.tour-card__title { text-wrap: balance; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 26px; }
.tour-card__facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.tour-card__facts dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; line-height: 16px; }
.tour-card__facts dd { margin: 0; }
.tour-card__fund { font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 28px; color: var(--green); }
.tour-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- ширина экрана ---------- */

@media (max-width: 1279px) {
    .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wheel-page { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 1023px) {
    .page-title { margin: 0 0 24px; font-size: 24px; line-height: 26px; letter-spacing: -.4px; }
    .page-section .section-title { margin-bottom: 20px; font-size: 20px; line-height: 26px; }
    .page-section + .page-section { margin-top: 24px; }
    .back-btn { height: 24px; margin-top: 12px; padding: 0; background: none; }
    .back-btn:hover { background: none; color: #fff; }
    .back-btn + .page-title { margin-top: 8px; }
    .rules__group { margin-bottom: 20px; font-size: 18px; line-height: 20px; }
    .promo-card__title { font-size: 18px; }
    .bonus-card { width: 100%; height: 260px; }
    .faq { grid-template-columns: 1fr; }
    .faq__col + .faq__col .acc:first-child { margin-top: 0; }
    .promo-grid { gap: 20px; }
    .wheel-page { grid-template-columns: 1fr; gap: 24px; }
    .wheel { max-width: 420px; margin: 0 auto; }
    .wheel__label { font-size: 13px; }
    .wheel__hub { font-size: 15px; }
}

@media (max-width: 599px) {
    .promo-grid, .tour-grid { grid-template-columns: 1fr; }
}