:root{
  --red:#1506e5;
  --red-bright:#5044ec;
  --red-deep:#1105b7;
  --red-dark:#0d0489;
  --gold:#0a0700;
  --gold-deep:#070500;
  --bg:#010113;
  --ink:#f8f2f2;
  --primary-rgb:21,6,229;
}
:root{
  --muted:#6b7280; --line:#e6e8ef;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
html{background:var(--bg);min-height:100%}
body{background:transparent}
body.has-site-bg{background:transparent !important}
body.has-site-bg .main,body.has-site-bg .sidebar,body.has-site-bg .page-main{background:rgba(255,255,255,.95);backdrop-filter:blur(2px);border-radius:10px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

.hdr{background-color:var(--bg);border-bottom:3px solid var(--red);position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hdr.has-bg{background-color:transparent;background-size:cover;background-position:center;background-repeat:no-repeat;position:sticky;border-bottom:none}
.hdr.has-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25));pointer-events:none}
.hdr.has-bg .hdr-inner{position:relative;z-index:1}
.hdr-inner{max-width:1280px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:18px;min-height:72px;box-sizing:border-box;overflow:hidden}
.hdr-inner.logo-center{position:relative}
.hdr-logo{display:flex;align-items:center;gap:10px;text-decoration:none;max-height:100%;overflow:hidden}
.hdr-logo img{max-height:var(--logo-size,80px);max-width:320px;width:auto;height:auto;object-fit:contain;display:block;transition:max-height .2s}
.hdr-logo .logo2{max-height:calc(var(--logo-size,80px) * 0.95);max-width:360px;width:auto;height:auto;object-fit:contain;display:block}
.hdr-inner.logo-center .hdr-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:60%}
.hdr-inner.logo-center .hdr-logo img,.hdr-inner.logo-center .hdr-logo .logo2{pointer-events:auto}
.hdr-home{width:38px;height:38px;border-radius:4px;background:linear-gradient(180deg,#ff2e4d,#b00020);color:#fff;border:none;display:grid;place-items:center;box-shadow:0 2px 6px rgba(176,0,32,.4);overflow:hidden}
.hdr-home img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box}
.hdr-home.has-img{background:transparent;box-shadow:none}
.hdr-home.has-img img{padding:0}
.hdr-spacer{flex:1}
.btn-login,.btn-register{padding:9px 28px;font-size:13.5px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:4px;letter-spacing:.04em;text-shadow:0 1px 0 rgba(0,0,0,.3);display:inline-block}
.btn-login{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);box-shadow:0 3px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-register{background:linear-gradient(180deg,var(--red-bright) 0%,var(--red-deep) 100%);box-shadow:0 3px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25)}

.mhdr{display:none}
.mhdr-bar{background-color:var(--bg);border-bottom:3px solid var(--red);position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:8px 14px;min-height:60px;box-sizing:border-box;overflow:hidden}
.mhdr-bar.has-bg{background-color:transparent;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;min-height:90px;border-bottom:none}
.mhdr-bar.has-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25));pointer-events:none}
.mhdr-bar.has-bg > *{position:relative;z-index:1}
.mhdr-bar.logo-center{position:relative}
.mhdr-burger{width:40px;height:40px;border-radius:4px;background:var(--red);color:#fff;border:none;display:grid;place-items:center;flex-shrink:0}
.mhdr-logo{display:flex;align-items:center;gap:8px;text-decoration:none;max-height:100%;overflow:hidden}
.mhdr-logo img{max-height:var(--logo-size-mobile,68px);max-width:200px;width:auto;height:auto;object-fit:contain;display:block}
.mhdr-logo .logo2{max-height:calc(var(--logo-size-mobile,68px) * 0.9);max-width:220px;width:auto;height:auto;object-fit:contain;display:block}
.mhdr-bar.logo-center .mhdr-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 110px)}
.mhdr-spacer{flex:1}
.mhdr-actions{display:flex;gap:8px;padding:8px 14px;background:var(--bg);border-bottom:1px solid var(--line);position:relative}
.mhdr-actions.has-bg{background-color:transparent;background-size:cover;background-position:center;background-repeat:no-repeat;border-bottom:none}
.mhdr-actions.has-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.25));pointer-events:none}
.mhdr-actions.has-bg > *{position:relative;z-index:1}
.mhdr-actions .btn-login,.mhdr-actions .btn-register{flex:1;text-align:center;padding:10px}

.shell{background:var(--bg);min-height:100vh}
.main{max-width:1280px;margin:0 auto;padding:20px 24px 60px;display:flex;gap:20px;align-items:flex-start}
.col-content{flex:1;min-width:0}

.sidebar{width:230px;flex-shrink:0;display:flex;flex-direction:column;gap:5px}
.sb-item{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:4px;background:linear-gradient(180deg,var(--red) 0%,var(--red-dark) 100%);color:#fff;font-size:13.5px;font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 2px rgba(0,0,0,.1);border:1px solid rgba(255,255,255,.08);transition:filter .15s ease}
.sb-item:hover{filter:brightness(1.1)}
.sb-ic{width:26px;height:26px;border-radius:4px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex-shrink:0}
.sb-ic-img{background:transparent;width:32px;height:32px;border-radius:6px;overflow:hidden;padding:0}
.sb-ic-img img{width:100%;height:100%;object-fit:contain;display:block}
.sb-label{flex:1;letter-spacing:.01em}
.sb-banner-blue{background:linear-gradient(180deg,#2e7bd6 0%,#14306e 100%)}
.sb-banner-purple{background:linear-gradient(180deg,#6f33d6 0%,#2b0d6e 100%)}
.sb-banner-red{background:linear-gradient(180deg,#ff5868 0%,#c50018 100%)}
.sb-gold{background:linear-gradient(180deg,#e6c069 0%,#8b6a1f 100%)}
.sb-banner-green{background:linear-gradient(180deg,#34d399 0%,#065f46 100%)}
.sb-banner-teal{background:linear-gradient(180deg,#2dd4bf 0%,#0f766e 100%)}
.sb-banner-orange{background:linear-gradient(180deg,#fb923c 0%,#9a3412 100%)}
.sb-banner-pink{background:linear-gradient(180deg,#f472b6 0%,#9d174d 100%)}
.sb-banner-black{background:linear-gradient(180deg,#374151 0%,#0f172a 100%)}
.sb-banner-cyan{background:linear-gradient(180deg,#22d3ee 0%,#155e75 100%)}
.sb-banner-emerald{background:linear-gradient(180deg,#10b981 0%,#064e3b 100%)}
.sb-banner-rose{background:linear-gradient(180deg,#fb7185 0%,#881337 100%)}
.sb-theme{background:linear-gradient(180deg,var(--red) 0%,var(--red-dark) 100%)}

.hero{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:1280/506;background:#0a0506;border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.12);isolation:isolate}
.hero-track{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity,transform,filter;transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.1s cubic-bezier(.22,.61,.36,1),filter .9s ease}
.hero-slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transform-origin:center center}
/* Outgoing slide — slight scale & blur as it leaves */
.hero-slide.is-leaving{opacity:0;transform:scale(1.06);filter:blur(4px) brightness(.7);transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,.61,.36,1),filter .9s ease;z-index:1}
/* Incoming slide — slides up with slight scale, then settles into Ken Burns */
.hero-slide.is-entering{opacity:0;transform:translateY(18px) scale(1.08);filter:blur(8px) brightness(.85);z-index:2}
.hero-slide.is-on{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);filter:blur(0) brightness(1);z-index:2}
/* Ken Burns — gentle pan & zoom on the active slide image */
@media (prefers-reduced-motion:no-preference){
  .hero-slide.is-on img{animation:kenBurns 14s ease-in-out forwards}
}
@keyframes kenBurns{
  0%{transform:scale(1.06) translate(0,0)}
  50%{transform:scale(1.12) translate(-1.5%,-1%)}
  100%{transform:scale(1.06) translate(1.5%,1%)}
}
/* Light sheen sweep across the banner — runs once per slide */
.hero-slide.is-on::before{content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:skewX(-18deg);pointer-events:none;z-index:3;animation:heroSheen 2.6s ease .35s 1}
@keyframes heroSheen{0%{left:-30%}100%{left:130%}}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:99px;background:rgba(0,0,0,.45);color:#fff;border:none;display:grid;place-items:center;z-index:4;cursor:pointer}
.hero-prev{left:12px}
.hero-next{right:12px}
.hero-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:4}
.hero-dot{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.7);border:none;transition:width .3s cubic-bezier(.2,.9,.3,1.2),background .25s ease;cursor:pointer;position:relative;overflow:hidden}
.hero-dot.is-on{width:26px;background:rgba(255,255,255,.25)}
/* Animated progress fill inside the active dot — restarts each slide */
.hero-dot.is-on::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--red));border-radius:99px;transform-origin:left center;animation:heroDotFill var(--hero-interval,5s) linear forwards}
@keyframes heroDotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .35s ease}
  .hero-slide.is-on::before,.hero-slide.is-on img{animation:none}
  .hero-dot.is-on::after{animation:none;transform:scaleX(1)}
}

.section{margin-top:14px}
.sect-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.sect-title{display:flex;align-items:center;gap:10px}

/* Decorative divider — gold/red gradient line with a center diamond */
.divider{position:relative;height:18px;margin:18px 0;display:flex;align-items:center}
.divider::before,.divider::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--red-bright) 20%,var(--gold-deep) 50%,var(--red-bright) 80%,transparent)}
.divider::before{margin-right:14px}
.divider::after{margin-left:14px}
.divider .diamond{width:10px;height:10px;background:linear-gradient(135deg,var(--gold),var(--red-bright));transform:rotate(45deg);box-shadow:0 0 8px rgba(227,6,19,.4),inset 0 0 4px rgba(255,255,255,.3);flex-shrink:0}

/* Marquee — horizontal scrolling hype bar between sections */
.marquee{position:relative;overflow:hidden;border:1px solid rgba(227,6,19,.35);border-radius:8px;margin:14px 0;padding:10px 0}
.marquee-fade-l,.marquee-fade-r{position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.marquee-fade-l{left:0}
.marquee-fade-r{right:0}
.marquee-track{display:flex;gap:48px;white-space:nowrap;animation:marquee-scroll 28s linear infinite;width:max-content}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.marquee-item::after{content:'•';color:var(--mq-accent,#e30613);margin-left:48px;font-size:18px;line-height:1;opacity:.85}
.marquee-item:last-child::after{content:''}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:900px){
  .marquee{margin:10px 0;padding:8px 0}
  .marquee-item{font-size:12px}
  .marquee-track{gap:36px}
  .marquee-item::after{margin-left:36px}
  .divider{margin:12px 0}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}

.sect-title h3{margin:0;font-size:20px;font-weight:800;color:var(--ink);white-space:nowrap}
.sect-icon{width:24px;height:24px;border-radius:5px;display:grid;place-items:center;color:#fff;overflow:hidden;flex-shrink:0}
.sect-icon img{width:100%;height:100%;object-fit:contain;display:block}
.sect-icon.has-img{background:transparent !important}
.sect-icon.ic-fire{background:linear-gradient(180deg,#ff5868,#b00020)}
.sect-icon.ic-gold{background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.sect-actions{display:flex;gap:8px;flex-shrink:0;align-items:center}
.ctl-arrow{width:30px;height:30px;border-radius:4px;background:#2a2a2a;color:#fff;border:none;display:grid;place-items:center}
.ctl-view{padding:7px 22px;font-size:13px;font-weight:700;background:linear-gradient(180deg,#ff3e58,#a30016);color:#fff;border:none;border-radius:4px;box-shadow:0 2px 6px rgba(176,0,32,.3);display:inline-block}
.ctl-view.ctl-gold{background:linear-gradient(180deg,var(--gold),var(--gold-deep));box-shadow:0 2px 6px rgba(163,120,32,.3)}

/* Hot Games — horizontal scroller with hover overlay */
.game-scroll{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--red-bright) transparent}
.game-scroll::-webkit-scrollbar{height:6px}
.game-scroll::-webkit-scrollbar-track{background:transparent}
.game-scroll::-webkit-scrollbar-thumb{background:var(--red-bright);border-radius:3px;opacity:.5}
.game-scroll::-webkit-scrollbar-thumb:hover{background:var(--red-deep)}

.game-card{position:relative;flex:0 0 140px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.05);scroll-snap-align:start;cursor:pointer;outline:none;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.game-card:hover,.game-card:focus-visible{transform:translateY(-3px);box-shadow:0 8px 18px rgba(176,0,32,.18);border-color:var(--red-bright)}
.game-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red-bright),var(--gold-deep));z-index:2}

.game-card-inner{width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.game-card-inner img{width:100%;height:100%;object-fit:cover;display:block}
.game-card-text{padding:12px;text-align:center;font-size:13px;font-weight:700;line-height:1.3;color:var(--ink)}

.game-info{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 9px;background:#0f0507;border-top:1px solid rgba(255,255,255,.06)}
.game-info-name{color:#fff;font-size:12px;font-weight:700;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.game-rtp{flex:0 0 auto;background:var(--red-deep,#a30016);color:#fff;font-size:11px;font-weight:800;letter-spacing:.2px;white-space:nowrap;padding:2px 6px;border-radius:5px}

.game-name{position:absolute;left:0;right:0;bottom:3px;padding:6px 8px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));color:#fff;font-size:11px;font-weight:600;text-align:center;z-index:1;transition:opacity .18s ease}

.game-overlay{position:absolute;top:0;left:0;right:0;aspect-ratio:3/4;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(176,0,32,.85));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;opacity:0;transition:opacity .2s ease;z-index:3}
.game-card:hover .game-overlay,.game-card:focus-visible .game-overlay,.game-card.is-active .game-overlay{opacity:1}
.game-card:hover .game-name,.game-card.is-active .game-name{opacity:0}

.g-btn{display:block;width:100%;max-width:120px;padding:8px 10px;border-radius:5px;font-size:11px;font-weight:800;text-align:center;text-decoration:none;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .12s ease,filter .12s ease}
.g-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.g-btn-play{background:linear-gradient(180deg,#ff3e58,#a30016);color:#fff;border:1px solid rgba(255,255,255,.15)}
.g-btn-trial{background:linear-gradient(180deg,#f0d27a,#c4912d);color:#1a0a0c;text-shadow:none;border:1px solid rgba(0,0,0,.08)}

.g-nav{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);padding:0;transition:background .15s,color .15s,border-color .15s}
.g-nav:hover{background:var(--red);color:#fff;border-color:var(--red)}

@media(max-width:900px){
  .game-card{flex-basis:120px}
  .g-btn{font-size:10px;padding:7px 8px;max-width:110px}
  .g-nav{width:28px;height:28px}
}
@media(max-width:560px){
  .game-card{flex-basis:108px;border-radius:8px}
  .g-btn{font-size:10px;max-width:100px}
}

.promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.promo-card{position:relative;overflow:hidden;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:#0a0506;box-shadow:0 2px 6px rgba(0,0,0,.06);aspect-ratio:1000/429;transition:transform .18s,box-shadow .18s}
.promo-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(176,0,32,.18)}
.promo-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(18px) saturate(1.1);transform:scale(1.15);z-index:0}
.promo-card img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
.promo-card.promo-fallback{background:linear-gradient(135deg,#b00020 0%,#5a0e15 100%);display:grid;place-items:center}
.promo-card.promo-fallback::after{content:attr(data-label);color:#fff;font-weight:800;font-size:18px;letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.4);padding:0 16px;text-align:center}
.promo-empty{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#b00020 0%,#5a0e15 100%);color:#fff;font-weight:800;font-size:18px;letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.4);padding:0 16px;text-align:center}

/* Image-only game card mode — name label hidden, only overlay buttons on hover/tap */
.game-card.is-image-only .game-name{display:none}

/* Announcement / featured content block (between Promotion and SEO) */
.section-announce{margin-top:24px}
.announce-card{display:flex;gap:20px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);position:relative}
.announce-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--red-bright),var(--gold-deep));z-index:2}
.announce-img{flex:0 0 38%;max-width:38%;background:linear-gradient(135deg,#fff 0%,#f8f4ee 100%);display:grid;place-items:center;overflow:hidden}
.announce-img img{width:100%;height:100%;object-fit:cover;display:block}
.announce-body{flex:1;padding:24px 28px 24px 24px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.announce-body h3{margin:0;font-size:22px;font-weight:800;color:var(--ink);line-height:1.25}
.announce-body .announce-text{font-size:14px;line-height:1.7;color:#444;margin:0}
.announce-body .announce-text p{margin:0 0 8px}
.announce-body .announce-text p:last-child{margin-bottom:0}
.announce-cta{align-self:flex-start;margin-top:6px;padding:10px 24px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,var(--red-bright),var(--red-deep));border-radius:6px;text-decoration:none;box-shadow:0 3px 8px rgba(0,0,0,.2);transition:transform .12s,filter .12s}
.announce-cta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.announce-card.no-img .announce-img{display:none}
.announce-card.no-img .announce-body{padding:24px 28px}

/* Full-width banner mode — when the image is a wide hero banner (>3:1 aspect),
   stack image on top spanning full width, with text below. */
.announce-card.layout-banner{flex-direction:column;gap:0}
.announce-card.layout-banner .announce-img{flex:0 0 auto;max-width:100%;width:100%;aspect-ratio:auto;background:transparent}
.announce-card.layout-banner .announce-img img{height:auto;object-fit:contain;width:100%}
.announce-card.layout-banner .announce-body{padding:18px 24px 22px;text-align:center;align-items:center}
.announce-card.layout-banner .announce-cta{align-self:center}

@media(max-width:700px){
  .announce-card{flex-direction:column}
  .announce-img{flex:0 0 auto;max-width:100%;aspect-ratio:1000/400}
  .announce-body{padding:18px 20px}
  .announce-body h3{font-size:18px}
}

.seo{margin-top:32px;padding:28px 32px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.seo h2{margin:0 0 14px;font-size:22px;font-weight:800;color:var(--ink);border-left:4px solid var(--red);padding-left:12px;line-height:1.3}
.seo p{margin:0 0 12px;font-size:14px;line-height:1.7;color:#333}
.seo p:last-child{margin-bottom:0}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:80}
.drawer{position:fixed;left:0;top:0;bottom:0;width:min(86vw,320px);background:#fff;transform:translateX(-100%);transition:transform .28s ease;z-index:90;padding:14px 12px 20px;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,.2)}
.md-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:4px;background:transparent;border:none;color:var(--red);display:grid;place-items:center}
.md-list{margin-top:36px;display:flex;flex-direction:column;gap:4px}
body.menu-open .overlay{opacity:1;pointer-events:auto}
body.menu-open .drawer{transform:translateX(0)}
body.menu-open{overflow:hidden}

@media (max-width:900px){
  .hdr{display:none}
  .mhdr{display:block}
  .main{padding:14px 12px 40px;gap:0}
  .sidebar{display:none}
  .promo-grid{grid-template-columns:1fr}
  .seo{padding:20px 18px}
  .seo h2{font-size:18px}
}
@media (min-width:901px){
  .mhdr,.overlay,.drawer{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   PRO-MAX UI ENHANCEMENTS — luxury casino feel (red/gold)
   Applies progressive enhancement on top of base styles.
   ═══════════════════════════════════════════════════════════════════ */

/* Smooth scrolling for anchor jumps */
html{scroll-behavior:smooth}

/* Selection color = brand gold */
::selection{background:rgba(232,196,104,.35);color:#1a0a0c}

/* Typography polish */
body{font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility}

/* HEADER: subtle gold underline shimmer */
.hdr{box-shadow:0 2px 12px rgba(176,0,32,.08),0 0 0 1px rgba(232,196,104,.15)}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,transparent 0%,var(--red) 20%,var(--gold) 50%,var(--red) 80%,transparent 100%);background-size:200% 100%;animation:shimmer 6s linear infinite;opacity:.85;pointer-events:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* HEADER BUTTONS: deeper press / glow */
.btn-login,.btn-register{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s ease,filter .15s ease}
.btn-login:hover,.btn-register:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-login:active,.btn-register:active{transform:translateY(0);filter:brightness(.96)}
.btn-login::before,.btn-register::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:left .55s ease;pointer-events:none}
.btn-login:hover::before,.btn-register:hover::before{left:160%}

/* SIDEBAR ITEMS: glass + lift on hover */
.sb-item{transition:filter .15s ease,transform .18s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden}
.sb-item::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .6s ease;pointer-events:none}
.sb-item:hover{transform:translateX(2px);filter:brightness(1.12);box-shadow:0 4px 12px rgba(176,0,32,.25),inset 0 0 0 1px rgba(232,196,104,.35)}
.sb-item:hover::before{left:120%}
.sb-ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s ease}
.sb-item:hover .sb-ic{transform:rotate(-6deg) scale(1.08);background:rgba(232,196,104,.3)}

/* HERO: cinematic vignette + indicator polish */
.hero{box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 1px rgba(232,196,104,.18)}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.18) 100%);pointer-events:none;z-index:1}
.hero-nav{backdrop-filter:blur(6px);background:rgba(0,0,0,.5);border:1px solid rgba(232,196,104,.25);transition:transform .18s ease,background .15s ease,border-color .15s ease}
.hero-nav:hover{background:rgba(176,0,32,.85);border-color:var(--gold);transform:translateY(-50%) scale(1.08)}
.hero-dot{box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* SECTION HEADERS: gold underline on title */
.sect-title h3{position:relative;padding-bottom:6px}
.sect-title h3::after{content:'';position:absolute;left:0;bottom:0;width:36px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px}

/* HOT GAMES: tile shadow + overlay polish */
.game-tile{transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s ease,border-color .2s ease;will-change:transform}
.game-tile:hover{box-shadow:0 12px 24px rgba(176,0,32,.22),0 0 0 1px var(--gold);border-color:var(--gold)}
.game-overlay{backdrop-filter:blur(2px);background:linear-gradient(180deg,rgba(15,5,7,.55),rgba(15,5,7,.78))}
.game-btn{transition:transform .15s ease,filter .15s ease,box-shadow .2s ease}
.game-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 6px 14px rgba(232,196,104,.4)}

/* PROMO CARDS: hover lift + gold glow */
.promo-card{transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s ease,border-color .2s ease;position:relative}
.promo-card::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(232,196,104,0);transition:box-shadow .35s ease;pointer-events:none}
.promo-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.promo-card:hover::after{box-shadow:0 0 24px 4px rgba(232,196,104,.3),0 12px 28px rgba(176,0,32,.18)}

/* SEO BLOCK: gold accent bar */
.seo{position:relative;overflow:hidden}
.seo::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--red),var(--gold));border-radius:2px 0 0 2px}
.seo h2{padding-left:16px}

/* SECTION ARROWS / VIEW BUTTONS: micro-interactions */
.ctl-arrow{transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.ctl-arrow:hover{transform:scale(1.08);background:linear-gradient(180deg,var(--red),var(--red-deep));box-shadow:0 4px 10px rgba(176,0,32,.3)}
.ctl-view{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s ease}
.ctl-view::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .55s ease;pointer-events:none}
.ctl-view:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(176,0,32,.35)}
.ctl-view:hover::before{left:150%}

/* SCROLL-DRIVEN reveal animations — direction-aware, distinct per section */
@media (prefers-reduced-motion:no-preference){
  /* Hero — dramatic entrance on page load */
  .hero{opacity:0;transform:translateY(-22px) scale(.96);animation:heroIntro .9s cubic-bezier(.22,.61,.36,1) .1s forwards}
  @keyframes heroIntro{to{opacity:1;transform:translateY(0) scale(1)}}

  /* Base reveal — element starts offset, settles when in view. JS sets data-scroll-dir */
  .reveal{opacity:0;transform:translateY(60px) scale(.97);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform,opacity}
  /* Scroll up → element drops in from above */
  body[data-scroll-dir="up"] .reveal:not(.in-view){transform:translateY(-40px) scale(.97)}
  /* In view — settled, fully visible */
  .reveal.in-view{opacity:1;transform:translateY(0) scale(1)}

  /* HOT GAMES — slides in from the right */
  body[data-scroll-dir="down"] .reveal.section-games:not(.in-view){transform:translateX(80px) scale(.96)}
  body[data-scroll-dir="up"] .reveal.section-games:not(.in-view){transform:translateX(-80px) scale(.96)}
  .reveal.section-games.in-view{transform:translate(0,0) scale(1)}
  /* Hot games CARDS — flip up one by one */
  .reveal.section-games.in-view .game-scroll > *{opacity:0;transform:translateY(40px) rotateX(20deg);transform-origin:center bottom;animation:cardFlipUp .65s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes cardFlipUp{to{opacity:1;transform:translateY(0) rotateX(0)}}

  /* PROMOTION cards — burst in from alternating sides */
  .reveal.section-promo.in-view .promo-grid > *{opacity:0;animation:promoBurst .7s cubic-bezier(.22,.61,.36,1) forwards}
  .reveal.section-promo.in-view .promo-grid > *:nth-child(odd){transform:translateX(-50px) scale(.9)}
  .reveal.section-promo.in-view .promo-grid > *:nth-child(even){transform:translateX(50px) scale(.9)}
  @keyframes promoBurst{to{opacity:1;transform:translate(0,0) scale(1)}}

  /* SEO block — slide up */
  body[data-scroll-dir="down"] .reveal.seo:not(.in-view){transform:translateY(60px)}
  .reveal.seo.in-view{transform:translateY(0)}

  /* Announcement block — zoom in from center */
  body[data-scroll-dir="down"] .reveal.announce:not(.in-view){transform:scale(.88)}
  .reveal.announce.in-view{transform:scale(1)}

  /* Stagger delays */
  .reveal.in-view .game-scroll > *:nth-child(1){animation-delay:.04s}
  .reveal.in-view .game-scroll > *:nth-child(2){animation-delay:.10s}
  .reveal.in-view .game-scroll > *:nth-child(3){animation-delay:.16s}
  .reveal.in-view .game-scroll > *:nth-child(4){animation-delay:.22s}
  .reveal.in-view .game-scroll > *:nth-child(5){animation-delay:.28s}
  .reveal.in-view .game-scroll > *:nth-child(6){animation-delay:.34s}
  .reveal.in-view .game-scroll > *:nth-child(n+7){animation-delay:.40s}

  .reveal.in-view .promo-grid > *:nth-child(1){animation-delay:.05s}
  .reveal.in-view .promo-grid > *:nth-child(2){animation-delay:.13s}
  .reveal.in-view .promo-grid > *:nth-child(3){animation-delay:.21s}
  .reveal.in-view .promo-grid > *:nth-child(4){animation-delay:.29s}
  .reveal.in-view .promo-grid > *:nth-child(n+5){animation-delay:.35s}
}

/* MOBILE drawer slide polish */
.drawer{box-shadow:6px 0 24px rgba(0,0,0,.25),inset -1px 0 0 rgba(232,196,104,.2)}
.mhdr-burger{transition:transform .15s ease,background .15s ease}
.mhdr-burger:hover,.mhdr-burger:active{transform:scale(1.05);background:linear-gradient(180deg,var(--red-bright),var(--red-deep))}

/* FOOTER polish — gold top accent */
footer{position:relative}
footer::before{content:'';position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:80px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:2px}

/* Reduce transitions for users who request it */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ─── Center Popup Modal ──────────────────────────────────────────── */
.site-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9998;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s ease;padding:20px;backdrop-filter:blur(3px)}
.site-popup-overlay.is-open{opacity:1;pointer-events:auto}
.site-popup-box{position:relative;max-width:90vw;max-height:90vh;transform:scale(.9) translateY(20px);opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
.site-popup-overlay.is-open .site-popup-box{transform:scale(1) translateY(0);opacity:1}
.site-popup-link{display:block;line-height:0}
.site-popup-link img{max-width:min(560px,90vw);max-height:80vh;width:auto;height:auto;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:block}
.site-popup-close{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;background:#fff;color:#1a1a1a;border:2px solid var(--red);display:grid;place-items:center;cursor:pointer;font-size:20px;font-weight:700;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .2s ease}
.site-popup-close:hover{transform:scale(1.1);background:var(--red);color:#fff}
@media(max-width:600px){
  .site-popup-link img{max-width:88vw;max-height:75vh}
  .site-popup-close{top:-10px;right:-10px;width:34px;height:34px;font-size:18px}
}

/* ─── Floating Side Banner ────────────────────────────────────────── */
.site-floating{position:fixed;top:50%;transform:translateY(-50%);z-index:998;transition:transform .3s ease,right .3s ease,left .3s ease}
.site-floating.pos-right{right:10px}
.site-floating.pos-left{left:10px}
.site-floating.is-hidden.pos-right{transform:translate(120%,-50%)}
.site-floating.is-hidden.pos-left{transform:translate(-120%,-50%)}
.site-floating-link{display:block;line-height:0}
.site-floating-link img{max-width:110px;max-height:380px;width:auto;height:auto;border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.35);display:block;transition:transform .25s ease}
.site-floating-link:hover img{transform:scale(1.04)}
.site-floating-close{position:absolute;top:-8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;cursor:pointer;font-size:14px;font-weight:700;line-height:1;padding:0;transition:background .2s ease}
.site-floating.pos-right .site-floating-close{right:-8px}
.site-floating.pos-left .site-floating-close{left:-8px}
.site-floating-close:hover{background:var(--red)}
@media(max-width:600px){
  .site-floating-link img{max-width:75px;max-height:240px}
  .site-floating.pos-right{right:6px}
  .site-floating.pos-left{left:6px}
}