:root {
    --bg:#11071b;
    --panel:#241334;
    --line:#4c2b64;
    --text:#fff;
    --muted:#c8b8d4;
    --purple:#aa2cff;
    --pink:#ff58df;
    --green:#2fe2a3;
    --shadow:0 18px 45px #05000866
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:radial-gradient(circle at 75% 5%,#35104d 0,transparent 27%),var(--bg);
    color:var(--text);
    font:16px/1.65 Arial,Helvetica,sans-serif;
    overflow-x:hidden
}

a {
    color:inherit;
    text-decoration:none
}

img {
    max-width:100%;
    height:auto
}

button,input,textarea {
    font:inherit
}

p,h1,h2,h3,a,span,li,summary,td,th {
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none
}

strong,b {
    font-weight:900
}

main {
    min-height:70vh
}

.eyebrow {
    display:block;
    color:var(--pink);
    font-size:12px;
    letter-spacing:.16em;
    font-weight:900;
    margin-bottom:10px
}

.top-note {
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(90deg,#7715d1,#c929ff,#7a16d2);
    position:relative;
    z-index:70;
    font-size:13px;
    font-weight:800
}

.top-note p {
    margin:0
}

.top-note span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:24px;
    border-radius:8px;
    background:#170821
}

.top-note a {
    text-decoration:underline
}

.header {
    height:72px;
    position:sticky;
    top:0;
    z-index:60;
    margin-left:230px;
    padding:0 max(24px,calc((100% - 230px - 1380px)/2));
    display:flex;
    align-items:center;
    gap:26px;
    background:#150920e8;
    border-bottom:1px solid #3d2051;
    backdrop-filter:blur(18px)
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;
    min-width:max-content
}

.brand img {
    width:48px;
    height:42px;
    object-fit:contain
}

.brand strong {
    font-size:20px;
    letter-spacing:.035em;
    line-height:1
}

.brand i {
    display:block;
    color:#b966ec;
    font-size:9px;
    font-style:normal;
    letter-spacing:.28em;
    margin-top:4px
}

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

.top-nav a {
    color:#d8c9e0;
    font-size:14px;
    font-weight:800
}

.top-nav a:hover {
    color:#fff
}

.head-actions {
    display:flex;
    align-items:center;
    gap:9px
}

.btn,.telegram-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    border-radius:11px;
    padding:10px 18px;
    border:1px solid transparent;
    font-weight:900;
    line-height:1.1;
    white-space:nowrap;
    transition:.2s transform,.2s filter,.2s box-shadow
}

.btn:hover,.telegram-btn:hover {
    transform:translateY(-2px);
    filter:brightness(1.08)
}

.btn.primary {
    background:linear-gradient(135deg,var(--green),#1ed69a);
    color:#07120d;
    box-shadow:0 9px 26px #2fe2a32b
}

.btn.secondary,.btn.login {
    background:#2a153b;
    border-color:#513067;
    color:#fff
}

.telegram-btn {
    padding:8px 12px;
    background:#28133b;
    border-color:#4b2c61
}

.telegram-btn img {
    width:26px;
    height:26px;
    border-radius:8px;
    object-fit:cover
}

.register {
    background:var(--green)
}

.mobile-menu {
    display:none;
    position:relative
}

.mobile-menu summary {
    list-style:none
}

.mobile-menu summary::-webkit-details-marker {
    display:none
}

.sidebar {
    position:fixed;
    z-index:65;
    left:0;
    top:36px;
    bottom:0;
    width:230px;
    padding:16px 13px;
    display:flex;
    flex-direction:column;
    gap:12px;
    background:#211130;
    border-right:1px solid #3d2250;
    overflow-y:auto
}

.online {
    display:grid;
    grid-template-columns:12px auto 1fr;
    align-items:center;
    gap:7px;
    color:#c6b4d0;
    padding:0 6px
}

.online span {
    width:9px;
    height:9px;
    border-radius:50%;
    background:#23e5a1;
    box-shadow:0 0 10px #23e5a1
}

.online b {
    color:#fff
}

.online small {
    font-size:11px
}

.side-login {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 14px;
    border-radius:12px;
    background:#301847;
    border:1px solid #46245e
}

.side-switch {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}

.side-switch a {
    padding:10px 7px;
    text-align:center;
    border-radius:10px;
    background:#42225a;
    font-size:13px;
    font-weight:900
}

.side-switch a:first-child {
    background:linear-gradient(135deg,#a62cff,#7a18d9)
}

.sidebar>nav {
    display:grid;
    gap:3px
}

.sidebar>nav a {
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 8px;
    border-radius:9px;
    color:#d6c5e0;
    font-size:13px;
    font-weight:800
}

.sidebar>nav a:hover {
    background:#321944;
    color:#fff
}

.sidebar>nav i {
    display:flex;
    align-items:center;
    justify-content:center;
    width:23px;
    height:23px;
    border-radius:7px;
    background:#402154;
    color:#efc7ff;
    font-size:12px;
    font-style:normal
}

.side-bottom {
    margin-top:auto;
    display:grid;
    gap:9px
}

.side-bottom>a:first-child {
    padding:14px;
    border-radius:12px;
    background:linear-gradient(135deg,#9018e0,#bd31fb);
    box-shadow:0 12px 25px #7b17dc33
}

.side-bottom b,.side-bottom small {
    display:block
}

.side-bottom small {
    color:#eee0f5
}

.side-bottom>a:last-child {
    text-align:center;
    padding:9px;
    border-radius:9px;
    background:#2d173e;
    color:#5ed0ff;
    font-size:13px;
    font-weight:900
}

.page-frame {
    margin-left:230px
}

.page-frame main,.page-frame footer {
    width:min(1380px,calc(100% - 42px));
    margin-left:auto;
    margin-right:auto
}

.hero {
    position:relative;
    min-height:610px;
    margin-top:22px;
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
    align-items:center;
    overflow:hidden;
    border:1px solid #54306c;
    border-radius:24px;
    background:radial-gradient(circle at 78% 36%,#8d24d0 0,#531187 25%,transparent 46%),linear-gradient(135deg,#24103a,#140721 68%);
    box-shadow:var(--shadow)
}

.hero::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 44%,#d76bff12 45%,transparent 46%),linear-gradient(120deg,transparent 58%,#d76bff0c 59%,transparent 60%);
    background-size:260px 100%;
    pointer-events:none
}

.hero-glow {
    position:absolute;
    width:420px;
    height:420px;
    right:80px;
    top:60px;
    border:1px solid #db8dff3b;
    border-radius:50%;
    box-shadow:0 0 0 42px #bb42ff10,0 0 0 88px #bb42ff09
}

.hero-copy {
    position:relative;
    z-index:3;
    padding:62px 0 62px 58px
}

.hero h1,.page-hero h1,.game-hero h1 {
    margin:.1em 0;
    font-size:clamp(42px,5.1vw,76px);
    line-height:1.02;
    letter-spacing:-.045em
}

.hero-copy>p,.page-hero>p,.game-hero p {
    max-width:730px;
    color:#dbcfe3;
    font-size:19px;
    line-height:1.65
}

.hero-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px
}

.hero-facts {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:25px
}

.hero-facts span {
    padding:8px 12px;
    border:1px solid #70438e;
    border-radius:99px;
    background:#2a133caa;
    color:#d7c5e2;
    font-size:12px
}

.hero-facts b {
    color:#60f0bc
}

.hero-visual {
    height:100%;
    position:relative;
    z-index:2
}

.hero-visual>img {
    position:absolute;
    right:16px;
    bottom:-165px;
    width:min(560px,96%);
    max-height:820px;
    object-fit:contain;
    object-position:bottom;
    filter:drop-shadow(0 32px 30px #09000ea8)
}

.orbit {
    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:78px;
    height:78px;
    border:3px solid #ffcf55;
    border-radius:24px;
    background:linear-gradient(145deg,#3d1653,#1b0a2b);
    color:#fff;
    font-size:12px;
    font-weight:900;
    box-shadow:0 10px 26px #0008,inset 0 0 20px #b237ff55;
    transform:rotate(-8deg)
}

.orbit::after {
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid #ffffff36;
    border-radius:17px
}

.orbit.one {
    top:115px;
    left:35px
}

.orbit.two {
    top:182px;
    right:50px;
    transform:rotate(8deg)
}

.win-chip {
    position:absolute;
    z-index:4;
    left:20px;
    bottom:72px;
    padding:12px 16px;
    border:1px solid #935bb1;
    border-radius:13px;
    background:#1a0a28dd;
    backdrop-filter:blur(10px);
    box-shadow:0 12px 30px #0007
}

.win-chip b,.win-chip span {
    display:block
}

.win-chip b {
    color:#61f0bd
}

.win-chip span {
    font-size:12px;
    color:#d8c6e2
}

.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:16px
}

.quick-grid a {
    display:grid;
    grid-template-columns:46px 1fr;
    grid-template-rows:auto auto;
    column-gap:12px;
    padding:17px;
    border-radius:15px;
    background:linear-gradient(145deg,#321a47,#241334);
    border:1px solid #4d2c62;
    transition:.2s transform,.2s border
}

.quick-grid a:hover {
    transform:translateY(-3px);
    border-color:#a657d0
}

.quick-grid i {
    grid-row:1/3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:13px;
    background:#aa2cff;
    color:#fff;
    font-style:normal;
    font-weight:900
}

.quick-grid b {
    font-size:16px
}

.quick-grid span {
    font-size:12px;
    color:#bfaec9
}

.content-section {
    margin-top:74px
}

.section-title {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px
}

.section-title h2,.intro h2,.two-col h2,.final-cta h2,.article-main h2 {
    font-size:clamp(29px,3.1vw,46px);
    line-height:1.08;
    letter-spacing:-.035em;
    margin:.1em 0
}

.section-title>a,.text-link {
    color:#58efb9;
    font-weight:900
}

.section-lead,.lead {
    font-size:18px;
    color:#cebdd8;
    max-width:850px
}

.intro {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:22px;
    align-items:start
}

.intro>div:first-child {
    padding:26px 4px
}

.intro p {
    color:#cdbdd7
}

.project-card {
    padding:22px;
    border-radius:18px;
    background:linear-gradient(145deg,#32164a,#211130);
    border:1px solid #55306f;
    box-shadow:var(--shadow)
}

.project-card>span {
    font-size:11px;
    color:#ff64e0;
    font-weight:900;
    letter-spacing:.15em
}

.project-card a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:14px 2px;
    border-bottom:1px solid #4b2b5e
}

.project-card a:last-child {
    border-bottom:0
}

.project-card em {
    color:#ab96b9;
    font-size:12px;
    font-style:normal;
    text-align:right
}

.table-wrap {
    width:100%;
    overflow-x:auto;
    border:1px solid #513166;
    border-radius:16px;
    background:#1b0c29;
    box-shadow:var(--shadow)
}

table {
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    text-align:left
}

th {
    padding:15px 17px;
    background:linear-gradient(90deg,#8a1dd9,#b52af2);
    font-size:13px
}

td {
    padding:15px 17px;
    color:#d4c4de;
    border-top:1px solid #432654;
    vertical-align:top
}

tbody tr:nth-child(even) {
    background:#261335
}

tbody tr:hover {
    background:#30173f
}

.games-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px
}

.game-card {
    min-width:0;
    display:flex;
    flex-direction:column;
    border:1px solid #4a2a5f;
    border-radius:16px;
    overflow:hidden;
    background:#211130;
    box-shadow:0 12px 28px #07000d4d
}

.game-image {
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:287/193
}

.game-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.25s transform
}

.game-card:hover .game-image img {
    transform:scale(1.04)
}

.game-image>span {
    position:absolute;
    left:9px;
    top:9px;
    padding:5px 8px;
    border-radius:8px;
    background:#170920db;
    color:#fff;
    font-size:10px;
    font-weight:900
}

.game-card>div {
    padding:15px;
    display:flex;
    flex-direction:column;
    flex:1
}

.game-card small {
    color:#bda7ca
}

.game-card h3 {
    font-size:18px;
    line-height:1.2;
    margin:5px 0
}

.game-card p {
    color:#c5b3d0;
    font-size:13px;
    line-height:1.5;
    flex:1
}

.game-tags span {
    display:inline-flex;
    padding:5px 7px;
    border-radius:7px;
    background:#39184f;
    color:#f689ec;
    font-size:10px
}

.game-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:12px
}

.game-actions .btn {
    min-height:38px;
    padding:8px
}

.game-actions .more {
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #5c3474;
    border-radius:10px;
    font-size:12px;
    font-weight:900
}

.banners {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}

.banners a {
    position:relative;
    overflow:hidden;
    border-radius:18px;
    border:1px solid #54306a;
    min-height:245px;
    background:#1e0c2c
}

.banners a::after {
    content:"";
    position:absolute;
    inset:25% 0 0;
    background:linear-gradient(transparent,#100519f2)
}

.banners img {
    width:100%;
    height:245px;
    display:block;
    object-fit:cover;
    transition:.25s transform
}

.banners a:hover img {
    transform:scale(1.035)
}

.banners div {
    position:absolute;
    z-index:2;
    left:20px;
    right:20px;
    bottom:18px
}

.banners span {
    color:#ff67e2;
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em
}

.banners h3 {
    font-size:24px;
    margin:2px 0
}

.banners p {
    margin:0;
    color:#d2c0dc;
    font-size:13px
}

.providers-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:22px
}

.providers-grid article {
    min-width:0;
    padding:13px;
    border-radius:14px;
    background:#241333;
    border:1px solid #4b2d5e
}

.providers-grid img {
    width:100%;
    height:74px;
    object-fit:contain;
    border-radius:10px;
    background:#1a0c27
}

.providers-grid h3 {
    margin:9px 0 0;
    font-size:16px
}

.providers-grid p {
    margin:2px 0;
    color:#bba7c8;
    font-size:12px
}

.two-col {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}

.two-col>article {
    padding:28px;
    border-radius:18px;
    background:linear-gradient(145deg,#2c173f,#1d0e2a);
    border:1px solid #4c2d60
}

.two-col p,.two-col li {
    color:#cbb8d5
}

.two-col ul {
    padding-left:20px
}

.reviews-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}

.reviews-grid article {
    padding:20px;
    border-radius:16px;
    background:#241333;
    border:1px solid #4c2c60
}

.review-head {
    display:flex;
    align-items:center;
    gap:11px
}

.review-head>span {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,#a629fa,#6f1cd1);
    font-weight:900
}

.review-head>div {
    min-width:0;
    margin-right:auto
}

.review-head h3 {
    font-size:16px;
    margin:0
}

.review-head small {
    color:#b9a4c6
}

.review-head>b {
    color:#ffd55b;
    font-size:13px;
    white-space:nowrap
}

.reviews-grid article>p {
    color:#cfbdd9;
    font-size:14px;
    margin-bottom:0
}

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

.faq-grid details {
    padding:17px 19px;
    border:1px solid #4e2d62;
    border-radius:14px;
    background:#251333
}

.faq-grid summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    font-weight:900;
    list-style:none
}

.faq-grid summary::-webkit-details-marker {
    display:none
}

.faq-grid summary span {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 28px;
    height:28px;
    border-radius:9px;
    background:#8f23dd
}

.faq-grid p {
    color:#c9b7d3;
    margin-bottom:2px
}

.final-cta {
    margin-top:75px;
    padding:32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    border:1px solid #774194;
    border-radius:20px;
    background:radial-gradient(circle at 75% 10%,#8b21d08c,transparent 38%),#2b153d
}

.final-cta p {
    margin:8px 0 0;
    color:#cfbdda
}

.page-hero,.game-hero {
    margin-top:22px;
    padding:45px 50px;
    border-radius:22px;
    border:1px solid #523068;
    background:radial-gradient(circle at 85% 15%,#66208b 0,transparent 34%),linear-gradient(145deg,#2c153f,#170923)
}

.page-hero h1,.game-hero h1 {
    max-width:980px;
    font-size:clamp(40px,4.8vw,68px)
}

.breadcrumbs {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:35px;
    color:#b9a4c6;
    font-size:13px
}

.breadcrumbs span {
    display:flex;
    gap:8px
}

.breadcrumbs i {
    font-style:normal;
    color:#7f688e
}

.byline {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:27px
}

.byline span,.byline b {
    padding:7px 10px;
    border-radius:8px;
    background:#2b163d;
    color:#beaac9;
    font-size:12px
}

.byline b {
    color:#62eebc
}

.article-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:22px;
    margin-top:28px
}

.article-main>section:not(.reviews-grid):not(.editor-note) {
    position:relative;
    margin-bottom:16px;
    padding:29px;
    border-radius:17px;
    background:#241333;
    border:1px solid #4b2d5e
}

.article-main>section>h2 {
    max-width:920px
}

.article-main>section>p,.article-main>p {
    font-size:17px;
    color:#d0bfda
}

.article-main ul {
    padding-left:22px;
    color:#cdbbd7
}

.article-main li {
    margin:8px 0
}

.section-number {
    display:inline-flex;
    padding:5px 8px;
    border-radius:8px;
    background:#8d23d9;
    color:#fff;
    font-size:11px;
    font-weight:900
}

.article-main>.providers-grid,.article-main>.reviews-grid,.article-main>.table-wrap {
    margin-bottom:22px
}

.article-main>.reviews-grid {
    grid-template-columns:repeat(2,1fr)
}

.article-main>h2 {
    margin-top:42px
}

.toc {
    position:sticky;
    top:92px;
    height:max-content;
    padding:20px;
    border-radius:15px;
    background:#241333;
    border:1px solid #4d2d61;
    display:grid;
    gap:0
}

.toc>b {
    margin-bottom:8px
}

.toc>a,.toc>span {
    padding:9px 0;
    border-bottom:1px solid #432654;
    color:#c7b3d2;
    font-size:13px
}

.toc hr {
    width:100%;
    border:0;
    border-top:1px solid #432654
}

.toc .btn {
    margin-top:13px;
    color:#07120d;
    border:0
}

.editor-note {
    padding:22px;
    border-left:4px solid #2ee3a2!important;
    background:#132f2a!important
}

.editor-note p {
    margin:7px 0;
    color:#c9e8df!important
}

.editor-note a {
    color:#55efbc;
    font-weight:900
}

.game-hero-grid {
    display:grid;
    grid-template-columns:360px 1fr;
    gap:35px;
    align-items:center
}

.game-hero-grid>img {
    width:100%;
    aspect-ratio:287/193;
    object-fit:cover;
    border-radius:18px;
    border:1px solid #71448c;
    box-shadow:var(--shadow)
}

.check-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px
}

.check-grid div {
    padding:16px;
    border-radius:12px;
    background:#311844;
    border:1px solid #543169
}

.check-grid b {
    display:block;
    color:#4deeb8
}

.check-grid span {
    text-transform:capitalize;
    color:#d7c6e1
}

footer {
    margin-top:80px!important;
    padding:36px 0 50px;
    border-top:1px solid #442457
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:35px
}

.footer-grid>div p {
    max-width:390px;
    color:#af9aba
}

.footer-grid nav {
    display:grid;
    align-content:start;
    gap:8px
}

.footer-grid nav b {
    margin-bottom:5px
}

.footer-grid nav a {
    color:#bba7c7;
    font-size:13px
}

.age {
    display:inline-flex;
    padding:6px 10px;
    border-radius:8px;
    background:#7e1fd0;
    font-weight:900
}

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid #3c214d;
    color:#9f8bac;
    font-size:12px
}

.footer-bottom p {
    margin:0;
    max-width:700px
}

.popup-backdrop[hidden] {
    display:none!important
}

.popup-backdrop {
    position:fixed;
    z-index:120;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:#08030db8;
    backdrop-filter:blur(12px)
}

.popup {
    position:relative;
    width:min(390px,100%);
    padding:28px;
    border:1px solid #70418b;
    border-radius:20px;
    background:radial-gradient(circle at 50% 0,#5c1a79,#251232 52%);
    text-align:center;
    box-shadow:0 30px 80px #000
}

.popup-logo {
    display:block;
    width:72px;
    height:64px;
    object-fit:contain;
    margin:0 auto 10px
}

.popup h2 {
    margin:5px 0;
    font-size:30px
}

.popup p {
    color:#ccb9d7
}

.popup .btn {
    width:100%;
    margin-top:10px
}

.popup-close {
    position:absolute;
    right:12px;
    top:12px;
    width:34px;
    height:34px;
    border:0;
    border-radius:10px;
    background:#422255;
    color:#fff;
    font-size:24px;
    cursor:pointer
}

.popup-return {
    margin-top:12px;
    border:0;
    background:transparent;
    color:#c1abc9;
    cursor:pointer
}

.pulse {
    animation:pulse 2s infinite
}

@keyframes pulse {
    0%,100% {
        box-shadow:0 0 0 0 #2fe2a355,0 9px 26px #2fe2a32b
    }

    50% {
        box-shadow:0 0 0 9px #2fe2a300,0 9px 32px #2fe2a34f
    }

}

@media(max-width:1250px) {
    .top-nav {
        display:none
    }

    .games-grid {
        grid-template-columns:repeat(4,1fr)
    }

    .providers-grid {
        grid-template-columns:repeat(4,1fr)
    }

    .hero {
        grid-template-columns:1.1fr .9fr
    }

    .hero-copy {
        padding-left:40px
    }

    .hero-visual>img {
        right:-30px
    }

    .article-main>.reviews-grid {
        grid-template-columns:1fr 1fr
    }

}

@media(max-width:1100px) {
    .sidebar {
        display:none
    }

    .header {
        margin-left:0;
        padding:0 18px
    }

    .page-frame {
        margin-left:0
    }

    .mobile-menu {
        display:block
    }

    .mobile-menu summary {
        width:42px;
        height:42px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:1px solid #59316f;
        border-radius:11px;
        background:#2b153d;
        cursor:pointer
    }

    .mobile-menu summary i {
        width:20px;
        height:2px;
        background:#fff
    }

    .mobile-menu>div {
        position:absolute;
        right:0;
        top:calc(100% + 12px);
        width:230px;
        padding:8px;
        display:grid;
        background:#1d0d2a;
        border:1px solid #553069;
        border-radius:13px;
        box-shadow:var(--shadow)
    }

    .mobile-menu>div a {
        padding:10px 12px;
        border-radius:8px;
        color:#d4c0df;
        font-size:13px;
        font-weight:800
    }

    .mobile-menu>div a:hover {
        background:#321846
    }

    .register {
        display:inline-flex
    }

    .page-frame main,.page-frame footer {
        width:min(1180px,calc(100% - 28px))
    }

    .games-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .providers-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .hero {
        grid-template-columns:1fr 420px
    }

    .hero-visual>img {
        right:-50px;
        width:490px
    }

    .hero-copy {
        padding:52px 0 52px 38px
    }

    .footer-grid {
        grid-template-columns:1.4fr 1fr 1fr
    }

    .footer-grid nav:last-child {
        grid-column:2/4
    }

}

@media(max-width:780px) {
    .top-note {
        height:auto;
        min-height:34px;
        padding:6px 12px
    }

    .top-note p {
        font-size:11px
    }

    .top-note a {
        display:none
    }

    .header {
        height:64px;
        padding:0 10px;
        gap:6px
    }

    .brand {
        gap:6px
    }

    .brand img {
        width:38px;
        height:34px
    }

    .brand strong {
        font-size:14px
    }

    .brand i {
        font-size:7px
    }

    .head-actions {
        gap:5px
    }

    .telegram-btn,.head-actions .btn {
        min-height:38px;
        padding:7px 9px;
        border-radius:9px;
        font-size:12px
    }

    .telegram-btn span {
        display:none
    }

    .telegram-btn img {
        width:24px;
        height:24px;
        border-radius:7px
    }

    .register {
        display:inline-flex
    }

    .mobile-menu summary {
        width:38px;
        height:38px
    }

    .hero {
        min-height:0;
        margin-top:12px;
        grid-template-columns:1fr;
        border-radius:18px
    }

    .hero-copy {
        padding:40px 20px 20px
    }

    .hero h1 {
        font-size:clamp(38px,11vw,54px);
        line-height:1.03
    }

    .hero-copy>p,.page-hero>p,.game-hero p {
        font-size:16px
    }

    .hero-actions {
        display:grid;
        grid-template-columns:1fr 1fr
    }

    .hero-actions .btn {
        width:100%;
        padding:11px 10px
    }

    .hero-facts {
        display:grid;
        grid-template-columns:1fr
    }

    .hero-facts span {
        width:100%
    }

    .hero-visual {
        height:420px
    }

    .hero-visual>img {
        right:50%;
        transform:translateX(50%);
        bottom:-145px;
        width:430px;
        max-height:610px
    }

    .hero-glow {
        width:300px;
        height:300px;
        right:50%;
        transform:translateX(50%);
        top:auto;
        bottom:55px
    }

    .orbit {
        width:62px;
        height:62px;
        border-radius:18px;
        font-size:10px
    }

    .orbit.one {
        top:86px;
        left:25px
    }

    .orbit.two {
        top:80px;
        right:28px
    }

    .win-chip {
        left:18px;
        bottom:28px
    }

    .quick-grid {
        grid-template-columns:1fr 1fr
    }

    .content-section {
        margin-top:55px
    }

    .intro,.two-col {
        grid-template-columns:1fr
    }

    .section-title {
        align-items:start
    }

    .section-title>a {
        font-size:12px;
        text-align:right
    }

    .games-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }

    .game-card>div {
        padding:12px
    }

    .game-card h3 {
        font-size:16px
    }

    .game-card p {
        font-size:12px
    }

    .game-actions {
        grid-template-columns:1fr
    }

    .game-actions .more {
        min-height:36px
    }

    .banners {
        grid-template-columns:1fr
    }

    .banners a,.banners img {
        min-height:210px;
        height:210px
    }

    .providers-grid {
        grid-template-columns:1fr 1fr
    }

    .reviews-grid,.article-main>.reviews-grid {
        grid-template-columns:1fr
    }

    .faq-grid {
        grid-template-columns:1fr
    }

    .final-cta {
        display:grid;
        padding:24px
    }

    .page-hero,.game-hero {
        margin-top:12px;
        padding:30px 20px;
        border-radius:17px
    }

    .page-hero h1,.game-hero h1 {
        font-size:clamp(36px,10vw,52px)
    }

    .breadcrumbs {
        margin-bottom:24px
    }

    .article-layout {
        grid-template-columns:1fr
    }

    .toc {
        position:static;
        order:-1
    }

    .article-main>section:not(.reviews-grid):not(.editor-note) {
        padding:22px
    }

    .article-main>section>p,.article-main>p {
        font-size:16px
    }

    .game-hero-grid {
        grid-template-columns:1fr;
        gap:20px
    }

    .game-hero-grid>img {
        max-width:520px
    }

    .check-grid {
        grid-template-columns:1fr
    }

    .footer-grid {
        grid-template-columns:1fr 1fr
    }

    .footer-grid>div {
        grid-column:1/3
    }

    .footer-grid nav:last-child {
        grid-column:auto
    }

    .footer-bottom {
        align-items:start;
        flex-direction:column
    }

    .project-card a {
        align-items:start
    }

    .table-wrap {
        margin-left:0;
        margin-right:0
    }

}

@media(max-width:520px) {
    .top-note p {
        max-width:280px;
        text-align:center
    }

    .register {
        display:inline-flex
    }

    .brand strong {
        display:none
    }

    .head-actions {
        margin-left:auto
    }

    .hero-copy {
        padding-left:16px;
        padding-right:16px
    }

    .hero-actions {
        grid-template-columns:1fr
    }

    .hero-visual {
        height:385px
    }

    .hero-visual>img {
        width:380px;
        bottom:-130px
    }

    .quick-grid {
        grid-template-columns:1fr
    }

    .games-grid {
        grid-template-columns:1fr 1fr
    }

    .providers-grid {
        grid-template-columns:1fr
    }

    .section-title h2,.intro h2,.two-col h2,.final-cta h2,.article-main h2 {
        font-size:30px
    }

    .section-title {
        display:block
    }

    .section-title>a {
        display:inline-flex;
        margin-top:8px
    }

    .reviews-grid article {
        padding:16px
    }

    .review-head {
        align-items:flex-start
    }

    .review-head>b {
        margin-left:auto
    }

    .page-frame main,.page-frame footer {
        width:calc(100% - 20px)
    }

    .page-hero,.game-hero {
        padding:25px 16px
    }

    .article-main>section:not(.reviews-grid):not(.editor-note) {
        padding:19px
    }

    .footer-grid {
        grid-template-columns:1fr
    }

    .footer-grid>div,.footer-grid nav:last-child {
        grid-column:auto
    }

    .game-card p {
        display:none
    }

    .game-card h3 {
        font-size:14px
    }

    .game-card small {
        font-size:10px
    }

    .game-tags {
        display:none
    }

    .game-actions .more {
        display:none
    }

    .game-actions {
        grid-template-columns:1fr
    }

    .game-card .btn {
        font-size:12px
    }

    .orbit.one {
        left:12px
    }

    .orbit.two {
        right:12px
    }

    .win-chip {
        font-size:12px
    }

}

@media(max-width:370px) {
    .games-grid {
        grid-template-columns:1fr
    }

    .top-note p {
        font-size:10px
    }

    .hero h1 {
        font-size:36px
    }

    .telegram-btn,.head-actions .btn {
        padding-left:7px;
        padding-right:7px
    }

    .head-actions {
        gap:4px
    }

}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important
    }

}

.top-note {
    min-height:34px;
    height:34px;
    padding:0 14px;
    white-space:nowrap
}

.top-note .top-age {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    height:24px;
    border-radius:8px;
    background:#170821;
    color:#fff;
    font-size:12px
}

.top-note p {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis
}

.top-note p b {
    color:#fff
}

.top-note p span {
    display:inline;
    width:auto;
    height:auto;
    border-radius:0;
    background:transparent
}

.hero-title {
    font-weight:650;
    text-wrap:balance
}

.hero-title strong {
    font-weight:950;
    color:#fff;
    text-shadow:0 5px 22px #d447ff55
}

.hero-title span {
    font-weight:650
}

.hero-title span b {
    font-weight:900;
    color:#fff
}

.hero-copy>p b,.hero-copy>p strong {
    color:#fff;
    font-weight:900
}

.popup-backdrop {
    background:#08030dcc;
    backdrop-filter:blur(14px) saturate(.75)
}

.popup {
    isolation:isolate;
    overflow:hidden;
    width:min(430px,100%);
    padding:26px 26px 22px;
    border:1px solid #9b5fbb;
    border-radius:24px;
    background:linear-gradient(155deg,#43165d 0,#281036 48%,#170921 100%);
    text-align:left;
    box-shadow:0 34px 90px #000c,0 0 0 1px #f6c8ff12 inset
}

.popup::before {
    content:"";
    position:absolute;
    z-index:-2;
    inset:-1px;
    background:radial-gradient(circle at 78% 0,#d540ff66,transparent 37%),radial-gradient(circle at 0 100%,#2fe2a329,transparent 35%)
}

.popup::after {
    content:"";
    position:absolute;
    z-index:-1;
    right:-75px;
    top:-85px;
    width:210px;
    height:210px;
    border:1px solid #ffb8ff2e;
    border-radius:50%;
    box-shadow:0 0 0 32px #c849ff10,0 0 0 68px #c849ff08
}

.popup-shine {
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(115deg,transparent 20%,#fff08 32%,transparent 43%);
    transform:translateX(-120%);
    animation:popup-shine 5.5s ease-in-out infinite
}

.popup-brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding-right:42px;
    margin-bottom:20px
}

.popup-logo-shell {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 60px;
    height:56px;
    border:1px solid #a767ca;
    border-radius:16px;
    background:#1c0929cc;
    box-shadow:inset 0 0 22px #ac35ef35
}

.popup-logo {
    width:46px;
    height:42px;
    margin:0;
    object-fit:contain
}

.popup-brand div {
    display:grid;
    line-height:1.2
}

.popup-brand small {
    color:#d8bfe4;
    font-size:9px;
    font-weight:900;
    letter-spacing:.15em
}

.popup-brand strong {
    margin-top:4px;
    color:#fff;
    font-size:15px;
    letter-spacing:.06em
}

.popup-kicker {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border:1px solid #713f88;
    border-radius:999px;
    background:#1c0b28aa;
    color:#ff82e8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em
}

.popup-kicker i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#2fe2a3;
    box-shadow:0 0 10px #2fe2a3
}

.popup h2 {
    margin:12px 0 8px;
    font-size:34px;
    line-height:1.06;
    letter-spacing:-.035em;
    text-wrap:balance
}

.popup h2 strong {
    color:#62f1bd
}

.popup p {
    margin:0;
    color:#d2c1dc;
    font-size:15px;
    line-height:1.6
}

.popup p b {
    color:#fff
}

.popup-benefits {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:17px
}

.popup-benefits span {
    padding:6px 9px;
    border:1px solid #654077;
    border-radius:9px;
    background:#1b0a27a6;
    color:#dac9e3;
    font-size:11px;
    font-weight:800
}

.popup .btn {
    width:100%;
    min-height:50px;
    margin-top:18px;
    border-radius:13px;
    font-size:15px
}

.popup-close {
    right:14px;
    top:14px;
    width:36px;
    height:36px;
    border:1px solid #704386;
    border-radius:11px;
    background:#261034cc;
    color:#fff;
    line-height:1
}

.popup-close:hover {
    background:#3b1950
}

.popup-return {
    display:block;
    width:100%;
    margin-top:10px;
    padding:8px;
    border:0;
    background:transparent;
    color:#cbb6d5;
    font-size:12px;
    font-weight:800;
    cursor:pointer
}

.popup-return:hover {
    color:#fff
}

.pulse {
    position:relative;
    overflow:hidden
}

.pulse::after {
    content:"";
    position:absolute;
    top:-70%;
    bottom:-70%;
    left:-35%;
    width:22%;
    background:#fff5;
    transform:rotate(18deg);
    animation:button-glint 2.8s ease-in-out infinite
}

@keyframes popup-shine {
    0%,55% {
        transform:translateX(-120%)
    }

    80%,100% {
        transform:translateX(120%)
    }

}

@keyframes button-glint {
    0%,55% {
        left:-35%
    }

    85%,100% {
        left:125%
    }

}

@media(max-width:780px) {
    .top-note {
        min-height:32px;
        height:32px;
        padding:0 10px;
        gap:7px
    }

    .top-note p {
        font-size:10px
    }

    .top-note .top-age {
        flex-basis:27px;
        height:22px;
        font-size:11px
    }

    .header {
        height:66px
    }

    .hero-title {
        font-size:clamp(38px,10.7vw,51px)!important
    }

    .hero-copy {
        padding-top:34px
    }

    .hero-visual {
        height:410px
    }

    .hero-visual>img {
        bottom:-120px;
        width:405px
    }

    .popup {
        padding:22px 20px 18px;
        border-radius:20px
    }

    .popup h2 {
        font-size:30px
    }

    .popup-brand {
        margin-bottom:16px
    }

    .popup-logo-shell {
        flex-basis:54px;
        height:50px
    }

    .popup-logo {
        width:42px;
        height:38px
    }

}

@media(max-width:520px) {
    .top-note p span {
        display:none
    }

    .top-note p {
        overflow:visible;
        text-overflow:clip
    }

    .register {
        display:inline-flex!important;
        width:auto!important;
        min-width:88px!important;
        padding:7px 10px!important;
        font-size:11px!important
    }

    .register::after {
        content:none!important
    }

    .header {
        padding:0 8px;
        gap:4px
    }

    .brand img {
        width:36px;
        height:32px
    }

    .head-actions {
        gap:4px
    }

    .telegram-btn,.head-actions .btn {
        min-height:36px;
        padding:7px 8px;
        font-size:11px
    }

    .telegram-btn {
        width:36px;
        padding:5px
    }

    .telegram-btn img {
        width:24px;
        height:24px
    }

    .mobile-menu summary {
        width:36px;
        height:36px
    }

    .hero {
        margin-top:10px
    }

    .hero-copy {
        padding:30px 16px 18px
    }

    .hero-title {
        font-size:clamp(36px,10.4vw,46px)!important;
        line-height:1.02!important
    }

    .hero-copy>p {
        font-size:15px;
        line-height:1.62
    }

    .hero-visual {
        height:400px
    }

    .hero-visual>img {
        width:400px;
        bottom:-118px
    }

    .popup-backdrop {
        padding:12px
    }

    .popup {
        padding:20px 17px 16px
    }

    .popup h2 {
        font-size:28px
    }

    .popup p {
        font-size:14px
    }

    .popup-brand small {
        font-size:8px
    }

    .popup-benefits {
        gap:5px
    }

    .popup-benefits span {
        font-size:10px
    }

    .popup .btn {
        min-height:48px
    }

    .popup-return {
        margin-top:7px
    }

}

@media(max-width:380px) {
    .top-note {
        justify-content:center
    }

    .top-note p {
        font-size:9px
    }

    .register {
        min-width:78px!important;
        padding-left:7px!important;
        padding-right:7px!important;
        font-size:10px!important
    }

    .brand img {
        width:33px;
        height:30px
    }

    .telegram-btn,.head-actions .btn,.mobile-menu summary {
        min-height:34px;
        height:34px
    }

    .telegram-btn,.mobile-menu summary {
        width:34px
    }

    .login {
        padding-left:7px!important;
        padding-right:7px!important
    }

    .hero-title {
        font-size:35px!important
    }

    .hero-visual {
        height:370px
    }

    .hero-visual>img {
        width:370px
    }

}

.hero-title {
    max-width:680px;
    font-size:clamp(42px,4.7vw,68px)!important;
    font-weight:400
}

.hero-title span {
    font-weight:400
}

.hero-title span b {
    font-weight:800
}

.hero-visual>img {
    right:-15px;
    bottom:-170px;
    width:min(610px,104%);
    max-height:840px
}

@media(max-width:1250px) {
    .hero-visual>img {
        right:-30px;
        bottom:-165px;
        width:560px
    }

}

@media(max-width:1100px) {
    .hero-title {
        font-size:clamp(42px,5.2vw,56px)!important
    }

    .hero-visual>img {
        right:-45px;
        bottom:-162px;
        width:530px
    }

}

@media(max-width:780px) {
    .hero-title {
        max-width:none;
        font-size:clamp(36px,10vw,48px)!important
    }

    .hero-visual {
        height:420px
    }

    .hero-visual>img {
        right:50%;
        bottom:-125px;
        width:420px;
        max-height:630px
    }

}

@media(max-width:520px) {
    .hero-title {
        font-size:clamp(35px,9.9vw,43px)!important
    }

    .hero-visual {
        height:400px
    }

    .hero-visual>img {
        width:410px;
        bottom:-120px
    }

}

@media(max-width:380px) {
    .hero-title {
        font-size:34px!important
    }

    .hero-visual {
        height:375px
    }

    .hero-visual>img {
        width:385px;
        bottom:-115px
    }

}

.hero-title {
    max-width:620px;
    font-size:clamp(40px,3.8vw,58px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
    font-weight:400
}

.hero-title strong {
    font-weight:850
}

.hero-title span {
    font-weight:400
}

.hero-title span b {
    font-weight:700
}

.hero-visual>img {
    right:42px;
    bottom:-2%;
    width:auto;
    height:102%;
    max-width:none;
    max-height:none;
    object-fit:contain
}

@media(max-width:1250px) {
    .hero-visual>img {
        right:20px;
        bottom:-1%;
        width:auto;
        height:100%
    }

}

@media(max-width:1100px) {
    .hero-title {
        font-size:clamp(40px,4.6vw,50px)!important
    }

    .hero-visual>img {
        right:18px;
        bottom:-1%;
        width:auto;
        height:100%
    }

}

@media(max-width:780px) {
    .hero-title {
        max-width:none;
        font-size:clamp(34px,8.6vw,40px)!important;
        line-height:1.08!important
    }

    .hero-visual {
        height:440px
    }

    .hero-visual>img {
        right:50%;
        bottom:-4%;
        width:auto;
        height:104%;
        max-width:none;
        max-height:none
    }

}

@media(max-width:520px) {
    .hero-title {
        font-size:clamp(33px,8.6vw,38px)!important
    }

    .hero-visual {
        height:430px
    }

    .hero-visual>img {
        bottom:-4%;
        width:auto;
        height:104%
    }

}

@media(max-width:380px) {
    .hero-title {
        font-size:33px!important
    }

    .hero-visual {
        height:400px
    }

    .hero-visual>img {
        bottom:-4%;
        width:auto;
        height:104%
    }

}