.games { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 14px; }
.game {
    --r-card: 20px;
    background: transparent; box-shadow: none;
}
.game:hover { transform: translateY(-4px); box-shadow: none; }
.game .g-scene {
    aspect-ratio: 1 / 1.08; border-radius: var(--r-card);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    transition: box-shadow .26s var(--ease);
}
.game:hover .g-scene {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--env) 50%, transparent),
                0 22px 40px -22px color-mix(in srgb, var(--env) 70%, #000);
}
.game .g-body { position: static; padding: 10px 2px 0; }
.game .g-body h3 { font-size: 14.5px; padding-right: 0; transition: color .2s; }
.game:hover .g-body h3 { color: #fff; }
.game .g-desc { display: none; }
.game .g-chips { margin-top: 3px; gap: 0; }
.game .chip { display: none; }
.game .chip.win {
    display: inline; height: auto; padding: 0; background: none; box-shadow: none;
    color: var(--faint); font-size: 12px; font-weight: 700;
}

.game .g-play {
    inset: 0 0 auto 0; top: 0; right: 0; width: auto; height: auto; aspect-ratio: 1 / 1.08;
    border: 0; border-radius: var(--r-card); background: rgba(6,10,20,.38); box-shadow: none;
    opacity: 0; transition: opacity .22s var(--ease);
}
.game .g-play svg {
    width: 52px; height: 52px; padding: 17px 15px 17px 19px; margin: 0; border-radius: 50%;
    background: var(--acc-grad); box-shadow: 0 14px 30px -10px rgba(77,141,255,.95);
    transform: scale(.85); transition: transform .22s var(--ease);
}
.game:hover .g-play, .game:focus-visible .g-play { opacity: 1; transform: none; box-shadow: none; }
.game:hover .g-play svg { transform: none; }
.game .badge, .game .online { top: 9px; height: 20px; font-size: 9.5px; }
.game .badge { left: 9px; letter-spacing: .04em; }
.game .online { right: 9px; }
@media (hover: none) { .game .g-play { display: none; } }

.game.is-wide { grid-column: span 2; }
.game.is-wide .g-scene { position: absolute; inset: 0; aspect-ratio: auto; }
.game.is-wide .g-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
    transition: transform .7s var(--ease);
}
.game.is-wide:is(:hover, .is-live) .g-bg { transform: scale(1.05); }
.game.is-wide .g-glow { opacity: .4; }
.game.is-wide .g-halo { left: 72%; top: 52%; width: 62%; }
.game.is-wide .g-scene::after {
    background: linear-gradient(90deg, rgba(5,8,17,.88) 0%, rgba(6,10,20,.55) 34%, transparent 58%),
                linear-gradient(180deg, transparent 60%, rgba(5,8,17,.5) 100%);
}
.game.is-wide .g-art.is-hero { inset: 4% 1% 0 50%; animation: heroFloat 5.6s ease-in-out infinite; transform-origin: 50% 90%; }
.game.is-wide .g-hero { object-position: center bottom; }
.game.is-wide .g-body {
    position: absolute; left: 0; bottom: 0; z-index: 4; width: 46%;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 0 0 20px 20px;
}

.game.is-wide .g-body h3 { font-size: clamp(24px, 2vw, 34px); letter-spacing: -.045em; color: #fff; overflow: visible; display: block; padding-left: 2px; }
.game.is-wide .g-body > * { text-shadow: 0 2px 10px rgba(4,7,15,.85); }
.game.is-wide .g-desc {
    display: block; min-height: 0; margin-top: 4px;
    color: rgba(226,233,248,.8); font-size: 12.5px; font-weight: 600;
}
.game.is-wide .chip.win { color: var(--gold-pale); font-size: 12.5px; }
.game.is-wide .g-cta {
    margin-top: 12px; height: 38px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px;
    border-radius: 12px; color: #fff; background: var(--acc-grad);
    font-size: 13.5px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 14px 30px -12px rgba(77,141,255,.95), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform .22s var(--ease), box-shadow .22s;
}
.game.is-wide .g-cta svg { width: 11px; height: 11px; }
.game.is-wide:hover .g-cta { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(77,141,255,1), inset 0 1px 0 rgba(255,255,255,.35); }
.game.is-wide .g-play { display: none; }
@media (max-width: 760px) {
    .game.is-wide .g-art.is-hero { inset: 8% 0 0 44%; }
    .game.is-wide .g-body { width: 58%; padding: 0 0 10px 10px; }
    .game.is-wide .g-body h3 { font-size: 19px; }
    .game.is-wide .g-desc { display: none; }
    .game.is-wide .chip.win { font-size: 11px; }
    .game.is-wide .g-cta { margin-top: 8px; height: 28px; padding: 0 11px; border-radius: 9px; font-size: 11.5px; gap: 6px; }
}

.games-head { align-items: center; }
.games-head .filters {
    gap: 2px; padding: 3px; border-radius: 13px;
    background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.games-head .filters button { min-height: 32px; padding: 0 13px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.games-head .filters button.on { background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.games-head .filters button.on .n { background: rgba(255,255,255,.14); color: #fff; }
.filters .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 3px rgba(255,77,109,.18); }

.h-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; align-items: stretch; }
.h-progress > [hidden] { display: none; }

.h-progress > .level {
    align-self: stretch; flex-direction: column; justify-content: center; text-align: center; gap: 16px;
    padding: 24px 20px; background: var(--panel); border-color: rgba(255,255,255,.06);
}
.h-progress > .level .ring { width: 112px; height: 112px; }
.h-progress > .level .ring b { width: 92px; height: 92px; font-size: 24px; }
.h-progress > .level .tx { flex: none; }
.h-progress > .level .tx b { font-size: 15px; }
.h-progress .lv-link { display: inline-block; margin-top: 10px; color: var(--cyan-2, #8ae6ff); font-size: 12.5px; font-weight: 700; }
.h-progress .lv-link:hover { color: #fff; }
.h-progress .s-history .hist > :nth-child(n+5) { display: none; }
.h-progress .card-h .note { color: var(--faint); }
.h-progress .card-h a.note:hover { color: var(--text); }

@media (max-width: 760px) {
    .games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
    .game { --r-card: 16px; }
    .game .g-body { padding: 7px 1px 0; }
    .game .g-body h3 { font-size: 12px; letter-spacing: -.03em; }
    .game .chip.win { font-size: 10.5px; }
    .game .badge, .game .online { top: 6px; height: 17px; padding: 0 6px; font-size: 8.5px; }
    .game .badge { left: 6px; }
    .game .online { right: 6px; gap: 4px; }
    .game .online .w { display: none; }
    .games-head .filters {
        flex: 1 1 100%; margin: 4px 0 0; overflow-x: auto; scrollbar-width: none; padding: 3px;
    }
    .games-head .filters::-webkit-scrollbar { display: none; }
    .games-head .filters button { flex: 1 0 auto; justify-content: center; min-height: 34px; padding: 0 10px; font-size: 12px; }
    .screen.home .s-progress { order: 6; }
    .h-progress { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .h-progress > .level { padding: 20px 16px; }
    .h-progress > .level .ring { width: 88px; height: 88px; }
    .h-progress > .level .ring b { width: 72px; height: 72px; font-size: 19px; }
}

body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) :is(.pf-kpi, .hx-tile) { container-type: inline-size; }
body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) :is(.pf-kpi, .hx-tile) b[style*="--len"] {
    font-size: min(var(--fs, 20px), calc(100cqw / (var(--len) * .66)));
    overflow: hidden; text-overflow: clip;
}
body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .pf-kpi b { --fs: 19px; }
body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-tile b { --fs: 20px; }
@media (max-width: 760px) {
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .pf-kpi b { --fs: 17px; }
}

@media (max-width: 760px) {
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-summary { grid-template-columns: minmax(0, 1fr); gap: 0; }
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-won { grid-column: auto; margin-bottom: 8px; }
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-tile {
        flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
        padding: 12px 14px; border-radius: 0; border-top-width: 0;
    }
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-tile:nth-child(2) { border-top-width: 1px; border-radius: 16px 16px 0 0; }
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-tile:last-child { border-radius: 0 0 16px 16px; }
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-tile small { font-size: 12.5px; }
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .hx-tile b[style*="--len"] { margin-top: 0; font-size: 15px; }
}

body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen :is(.cap, .hx-won small, .hx-tile small, .hx-cols, .pt-list-h, .pt-tier .lv,
               .ref-nums .n small, .ms-st small, .stats-list .s span, .lx-toc .legal-toc__title, .lx-card small,
               .pc-hist-t, .wg-sum small, .fx-block__head span, .eyebrow, .msc-pl span, .bg-row .back small) {
    text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600;
}
@media (max-width: 760px) {
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen :is(.cap, .hx-won small, .hx-tile small, .pt-tier .lv, .ref-nums .n small, .ms-st small) { font-size: 11px; }
}

body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen .btn-acc:not(.h-cta) { box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen .btn-acc:not(.h-cta):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -14px rgba(77,141,255,.8); }
body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen .btn-gold { box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }

body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen .card { background: var(--panel); border-color: rgba(255,255,255,.06); }

body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .pt-tiers__steps { align-items: stretch; padding-top: 12px; }
body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .pt-tier { height: auto; min-height: 92px; }
@media (max-width: 760px) { body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .pt-tier { height: auto; min-height: 72px; } }

@keyframes rfIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes rfFill { from { transform: scaleX(0); } }
@supports (animation-timeline: view()) {
    html:not(.is-lite) body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen > :not(.s-promo, .h-hero, .s-ticker, .ticker),
    html:not(.is-lite) body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen :is(.h-progress, .pf-kpis, .hx-summary, .pt-steps, .cols-2 > .col) > *,
    html:not(.is-lite) .games .game {
        animation: rfIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }
}

html:not(.is-lite) body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen :is(.bar, .prog, .pt-tiers__bar, [data-wager-bar], [data-ref-tier-bar]) > i,
html:not(.is-lite) body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen :is([data-wager-bar], [data-ref-tier-bar], [data-level-bar]) {
    transform-origin: left center;
    animation: rfFill 1.1s cubic-bezier(.2,.8,.2,1) .15s both;
}
@media (prefers-reduced-motion: reduce) {
    body:is([data-page="home"],[data-page="slots"],[data-page="bonuses"],[data-page="history"],[data-page="missions"],[data-page="partner"],[data-page="profile"],[data-page="support"],[data-page="faq"],[data-page="terms"],[data-page="privacy"],[data-page="notfound"]) .screen *, .games .game { animation: none !important; }
}

.h-progress > .level.lv2 { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 0; padding: 20px 22px; }
.lv2-head { display: flex; align-items: center; gap: 12px; }
.lv2-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; color: #241a00; background: var(--gold-grad); box-shadow: 0 8px 20px -10px rgba(247,201,75,.8); }
.lv2-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.lv2-head b { display: block; margin-top: 2px; font-size: 20px; font-weight: 900; color: var(--gold-text); text-transform: none; }
.lv2-pct { font-size: 22px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.lv2-bar { position: relative; height: 10px; margin: 18px 0 12px; border-radius: 6px; background: var(--surface-4); overflow: hidden; }
.lv2-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold-grad); box-shadow: 0 0 14px rgba(247,201,75,.45); transition: width .6s ease; }
.lv2-next { margin: 0; font-size: 13.5px; color: var(--dim); }
.lv2-next b { color: var(--text); }
.lv2-perks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.lv2-perks:empty { display: none; }
.lv2-perks small { width: 100%; font-size: 11.5px; font-weight: 700; color: var(--faint); }
.lv2-perks span { padding: 4px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: var(--gold-pale); background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(247,201,75,.18); }
.h-progress > .level.lv2 .lv-link { margin-top: auto; padding-top: 14px; }

.h-progress > .s-quests { display: flex; flex-direction: column; }
.sq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--faint); }
.sq-play { margin-left: auto; padding: 5px 11px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--acc-grad); box-shadow: var(--acc-sh); }
.sq-play:hover { filter: brightness(1.1); }
.sq-foot {
    display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: 12px;
    font-size: 12px; line-height: 1.45; color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-soft);
    transition: color .15s, background .15s;
}
.s-quests [data-c="quests"] + .sq-foot { margin-top: 14px; }
.s-quests > [data-c="quests"] { flex: 1 1 auto; }
.sq-foot i { font-style: normal; color: var(--lilac); }
.sq-foot:hover { color: var(--text); background: var(--surface-3); }

.hist .h2 { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: 12px; color: inherit; transition: background .15s; }
.hist .h2:hover { background: var(--surface-2); }
.hist .h2 + .h2 { box-shadow: 0 -1px 0 var(--line-soft); }
.hist .h2 small em { font-style: normal; font-weight: 800; color: var(--dim); }
.hist .h2.is-win small em { color: var(--mint); }
.h2-r { text-align: right; }
.h2-r small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--faint); white-space: nowrap; }
