/* NovaOrbit CA — Main stylesheet v2
   Lightweight, responsive, dark cosmic theme with polished mobile UX. */

/* ==============================
   Design tokens
   ============================== */
:root{
  /* Base palette */
  --bg-0:#0c0b10; --bg-1:#14121b; --bg-2:#1b1926;
  --surface-2:#211c2c; --surface-3:#2a2336; /* richer cards */
  --card:#1a1823;

  /* Brand */
  --brand:#ffd24d;  /* brighter for contrast */
  --brand-2:#ff8a1a;
  --brand-edge:#ffe98e;

  /* Text */
  --text:#e9e6f2; --text-strong:#ffffff; --muted:#a29fb1;

  /* Layout */
  --radius:14px; --radius-sm:10px;
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --gap:16px; --gap-lg:24px; --gap-xl:32px;

  /* Breakpoints */
  --bp-lg:1200px; --bp-md:1024px; --bp-sm:720px; --bp-xs:480px;

  /* Side-rail */
  --rail-z: 60;
  --rail-w: 100px;                 /* desktop collapsed */
  --rail-w-expanded: 260px;       /* desktop expanded */
  --rail-w-mobile: min(84vw, 320px);
}

/* ==============================
   Base
   ============================== */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%}
body{
  margin:0;
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, #1a1625 0%, #0c0b10 60%) fixed,
    radial-gradient(1000px 600px at 120% 10%, #1a1625 0%, #0c0b10 60%) fixed,
    var(--bg-0);
}
img{max-width:100%; height:auto; vertical-align:middle}

/* Subtle “star” texture without images */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.25) 40%, transparent 41%),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.18) 40%, transparent 41%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.15) 40%, transparent 41%),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,.22) 40%, transparent 41%);
}

/* ==============================
   Utilities
   ============================== */
.container {
    width: 100%;
    margin-inline: auto;
    padding: 24px 0;
    max-width: min(var(--bp-lg), 92vw);
}
.card{position:relative; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-1)}
.muted{color:var(--muted)}
.small{font-size:.9rem} .xsmall{font-size:.8rem}
.accent{color:var(--brand)}
.block-link{position:absolute; inset:0; border-radius:inherit}
.hide-on-mobile{display:none}
.only-mobile{display:none}
@media (max-width: 720px){ .only-mobile{display:inline-flex} }
.link{color:var(--brand); text-decoration:none}
.link:hover{text-decoration:underline}

/* ==============================
   Buttons
   ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.9rem 1.25rem;
  border:0; border-radius:12px; text-decoration:none; white-space:nowrap;
  color:#1a1309; background:linear-gradient(180deg, var(--brand), #ffb800);
  font-weight:700;
  box-shadow:0 10px 24px rgba(255,200,40,.18), inset 0 0 0 1px rgba(0,0,0,.12);
  transition:transform .06s ease-out, filter .2s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px) scale(.99) }
.btn:focus-visible{
  outline:0; box-shadow:0 0 0 3px rgba(255,213,77,.5), 0 10px 24px rgba(255,200,40,.2);
}
.btn--ghost{
  color:var(--brand); background:transparent;
  border:1px solid rgba(255,213,77,.45);
}
.btn--ghost:hover{ background:rgba(255,213,77,.08) }
.btn--accent{ background:linear-gradient(180deg, #ffe27a, #ffb800); color:#1a1309 }
.btn--small{ padding:.55rem .8rem; font-size:.9rem }

/* ==============================
   Header / Navigation
   ============================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(20,18,27,.98), rgba(20,18,27,.92));
  backdrop-filter:saturate(1.2);
}
.header-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--gap)}
.logo img{height:42px; width:auto}
.nav-toggle{display:none; background:transparent; border:0; padding:.5rem; margin:.5rem; cursor:pointer}
.nav-toggle__bar{display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px}

.primary-nav{position:relative}
.primary-nav .menu{display:flex; gap:12px; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.primary-nav .menu a{
  display:block; padding:.75rem .9rem; color:var(--text); text-decoration:none; border-radius:10px;
}
.primary-nav .menu a:hover,
.primary-nav .menu a:focus-visible{ background:rgba(255,255,255,.06); outline:0 }

.header-cta{display:flex; gap:10px; align-items:center}

.subnav{border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.subnav .menu{display:flex; gap:12px; list-style:none; margin:0; padding:10px 0}
.subnav .menu a{color:var(--muted); text-decoration:none; padding:.25rem .5rem}

/* Mobile nav state */
@media (max-width: 720px){
  .nav-toggle{display:block}
  .primary-nav{
    position:absolute; left:0; right:0; top:100%;
    background:rgba(20,18,27,.98);
    border-bottom:1px solid rgba(255,255,255,.06);
    transform:translateY(-110%); opacity:0; pointer-events:none; transition:.25s;
  }
  .primary-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto }
  .primary-nav .menu{flex-direction:column; padding:10px; gap:0}
  .header-cta .btn--accent{display:none}
  .subnav{display:none}
}

/* ==============================
   Breadcrumbs
   ============================== */
.breadcrumbs{margin:16px 0 0}
.breadcrumbs ol{display:flex; gap:8px; list-style:none; padding:0; margin:0; color:var(--muted)}
.breadcrumbs a{color:var(--brand); text-decoration:none}

/* ==============================
   Layout with sidebar
   ============================== */
.layout{display:grid; grid-template-columns:1fr; gap:var(--gap-lg)}
.layout--with-sidebar{grid-template-columns:minmax(0,1fr) 300px}
.layout__main{padding:20px}
.layout__aside{display:grid; gap:var(--gap)}
/* Sidebar styling + sticky on desktop */
.side-nav{ background:linear-gradient(180deg, var(--surface-2), var(--card)); border:1px solid rgba(255,255,255,.06)}
.side-nav .menu{list-style:none; margin:0; padding:12px}
.side-nav .menu a{display:block; padding:.55rem .6rem; color:#ddd; text-decoration:none; border-radius:8px}
.side-nav .menu a:hover{color:#fff; background:rgba(255,255,255,.06)}
@media (min-width: 1025px){ .layout__aside{ position:sticky; top:84px; align-self:start } }
@media (max-width: 720px){ .layout--with-sidebar{ grid-template-columns:1fr } }

/* ==============================
   Hero
   ============================== */
.hero{padding:22px 0 8px}
.hero__viewport{position:relative; overflow:hidden}
.hero__slide{
  display:grid; grid-template-columns:1.4fr 1fr; gap:var(--gap-lg);
  padding:16px; min-height:360px; background:var(--surface-2); border-radius:var(--radius);
}
.hero__media{overflow:hidden; border-radius:12px}
.hero__img,.hero__placeholder{
  width:100%; height:100%; object-fit:cover; min-height:320px;
  background:
    radial-gradient(400px 200px at 80% 20%, rgba(255,191,0,.25), transparent 60%),
    radial-gradient(600px 260px at 20% 80%, rgba(255,140,0,.18), transparent 60%),
    #151321;
}
.hero__content{display:flex; flex-direction:column; justify-content:center; gap:12px; padding:8px}
.hero__title{font-size:2rem; line-height:1.15; margin:0; color:var(--text-strong)}
.hero__subtitle{margin:0 0 8px; color:#d9d4e8}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap}
.hero__cta .btn{ min-width:140px }
.hero__login{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-top:12px}
.hero__login input{
  border:1px solid rgba(255,255,255,.18); background:#12101a; color:#fff; border-radius:10px; padding:.7rem .8rem; outline:none;
}
.hero__login input::placeholder{ color:#b7b3c7 }
.hero__login input:focus{ border-color:#ffe27a; box-shadow:0 0 0 2px rgba(255,226,122,.25) }

/* Hero nav (dots + arrows) */
.hero__dots{display:flex; gap:8px; margin:10px auto 0; justify-content:center}
.hero__dots .dot{width:10px; height:13px; border-radius:50%; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.35)}
.hero__dots .dot.active{ background:linear-gradient(180deg,#ffe27a,#ffb800); border-color:#ffcf31 }

.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(12,11,16,.6); border:1px solid rgba(255,255,255,.2); color:#fff; backdrop-filter: blur(4px);
}
.hero__arrow--prev{ left:8px } .hero__arrow--next{ right:8px }
.hero__arrow:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(255,226,122,.4) }

/* Mobile hero improvements */
@media (max-width: 1024px){ .hero__slide{ grid-template-columns:1fr; min-height:unset } }
@media (max-width: 720px){
  .hero{ padding:12px 0 4px }
  .hero__slide{ padding:12px; gap:12px; background:transparent }
  .hero__content{
    margin-top:-24vw;
    padding:12px;
    background:linear-gradient(180deg, rgba(10,9,14,0) 0%, rgba(10,9,14,.75) 45%, rgba(10,9,14,.92) 100%);
    border-radius:12px;
  }
  .hero__title{ font-size:clamp(1.25rem, 5.8vw, 1.6rem) }
  .hero__subtitle{ font-size:.95rem }
  .hero__login{ grid-template-columns:1fr; gap:10px }
  .hero__dots{ margin-top:8px }
  .hero__arrow{ width:34px; height:34px; top:44% }
}

/* ==============================
   Section head
   ============================== */
.section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:26px 0 12px}
.section-title{margin:0; font-size:1.4rem}

/* ==============================
   Ticker
   ============================== */
.ticker{display:flex; gap:10px; overflow:auto; scrollbar-width:none}
.ticker::-webkit-scrollbar{display:none}
.ticker__item{padding:.5rem .7rem; white-space:nowrap}

/* ==============================
   Game grid (Home)
   ============================== */
.game-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
@media (max-width: 1024px){ .game-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width: 720px){ .game-grid{ grid-template-columns:repeat(2,1fr); gap:12px } }

.game-card{overflow:hidden; background:linear-gradient(180deg, var(--surface-2), var(--card))}
.game-card__media{position:relative; border-bottom:1px solid rgba(255,255,255,.06)}
.game-thumb,.ph--game{width:100%; aspect-ratio:16/10; object-fit:cover; background:#2a2638}
.game-card__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.25));
}
.game-card:hover .game-thumb{ filter:saturate(1.08) brightness(1.03) }
.game-card .badge{
  position:absolute; left:10px; top:10px;
  padding:.25rem .5rem; font-size:.8rem; font-weight:800;
  color:#1b160e; background:linear-gradient(180deg,#ffe27a,#ffb800);
  border-radius:10px; box-shadow:0 6px 18px rgba(255,200,60,.25);
}
.game-card__head{padding:10px 12px}
.game-card__title{font-size:1rem; margin:0; color:#fff}
.game-card__foot{padding:0 12px 12px}

/* ==============================
   Jackpot
   ============================== */
.jackpot{padding:10px 0}
.jackpot__wrap{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--gap-lg);
  padding:18px; background:linear-gradient(180deg, var(--surface-2), var(--card)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
}
.jackpot__title{font-size:1.4rem; margin:0 0 8px; color:#fff}
.jackpot__value{
  font:800 clamp(1.4rem, 6vw, 2.4rem)/1.1 "Roboto", system-ui;
  color:#fff; text-shadow:0 0 16px rgba(255,200,60,.25);
}

/* ==============================
   Bonuses
   ============================== */
.bonus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
@media (max-width: 1024px){ .bonus-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 720px){ .bonus-grid{ grid-template-columns:1fr; gap:12px } }

.bonus-card__media{ position:relative }
.bonus-card__media .bonus-thumb,.ph--bonus{width:100%; height:180px; object-fit:cover; background:#272338}
.bonus-card__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.48));
}
.bonus-card__head{padding:10px 12px}
.bonus-card__title{margin:0; color:#fff}
.bonus-card__foot{display:flex; align-items:center; justify-content:space-between; padding:0 12px 12px}

/* ==============================
   Reviews
   ============================== */
.review-slider{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc(33.333% - 10px);
  gap:var(--gap); overflow:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
}
@media (max-width: 1024px){ .review-slider{ grid-auto-columns:calc(50% - 10px) } }
@media (max-width: 720px){ .review-slider{ grid-auto-columns:88% } }
.review-slider::-webkit-scrollbar{height:0}
.review-card{scroll-snap-align:start; padding:14px; background:linear-gradient(180deg, var(--surface-2), var(--card))}
.review-card__head{display:flex; align-items:center; gap:10px}
.review-avatar,.ph--avatar{width:56px; height:56px; border-radius:50%; background:#2a2638}

/* ==============================
   FAQ (Accordion)
   ============================== */
.accordion{display:grid; gap:10px}
.acc-item{padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01))}
.acc-head{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  list-style:none; padding:16px 18px; font-weight:700;
}
.acc-title{font-weight:700}
.acc-icon{
  width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.12);
  display:inline-grid; place-items:center; transition:transform .2s;
}
.acc-item[open] .acc-icon{ transform:rotate(45deg) }
.acc-body{ padding:0 16px 14px; color:#d8d4e6; animation:accFade .2s ease-out both }
@keyframes accFade { from{opacity:.6; transform:translateY(-2px)} to{opacity:1; transform:none} }

/* ==============================
   Entry (single/page) — readable on dark
   ============================== */
.entry__header{padding:16px}
.entry__thumb img{border-radius:10px}
.entry__content{padding:0 16px 16px}
.entry__cta{padding:0 16px 20px}
.post-nav{display:flex; align-items:center; justify-content:space-between; padding:12px 16px}

.entry__content, .entry__content p, .entry__content li, .entry__content td, .entry__content th{ color:var(--text) }
.entry__content a{ color:var(--brand); text-decoration:underline }
.entry__content h1, .entry__content h2, .entry__content h3{ color:#fff }
.entry__content .wp-block-quote{
  border-left:3px solid var(--brand); padding-left:14px; color:#e9e6f2;
  background:rgba(255,255,255,.04); border-radius:8px; padding:12px 14px; margin:14px 0;
}
/* Force-fix black text from editors/inline styles */
.entry__content .has-black-color,
.entry__content .has-dark-gray-color,
.entry__content [style*="color:#000"],
.entry__content [style*="color: #000"],
.entry__content [style*="color:rgb(0, 0, 0)"]{ color:var(--text) !important }

/* Tables in dark */
.entry__content table{ width:100%; border-collapse:collapse; margin:12px 0; background:rgba(255,255,255,.03); border-radius:8px; overflow:hidden }
.entry__content th, .entry__content td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06) }
.entry__content tr:last-child td{ border-bottom:0 }

/* ==============================
   404
   ============================== */
.page-404{padding:32px 0 40px}
.notfound{padding:30px; text-align:center}
.nf__code{font:800 5rem/1 sans-serif; color:#312a44; text-shadow:0 4px 18px rgba(0,0,0,.45)}
.nf__title{margin:10px 0}
.nf__actions{display:flex; gap:10px; justify-content:center; margin-top:14px}

/* ==============================
   Footer
   ============================== */
.site-footer{margin-top:24px; padding:30px 0 40px; background:linear-gradient(180deg, rgba(20,18,27,.92), rgba(12,11,16,.95))}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--gap-lg)}
@media (max-width: 720px){ .footer-grid{ grid-template-columns:1fr } }
.footer-brand{display:grid; gap:12px; align-content:start}
.footer-logo img{height:36px}
.payment-icons{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.footer-menus{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap)}
@media (max-width: 720px){ .footer-menus{ grid-template-columns:1fr } }
.menu--footer{list-style:none; margin:0; padding:0}
.menu--footer a{display:block; padding:.4rem 0; color:var(--muted); text-decoration:none}
.menu--footer a:hover{color:#fff}
.footer-legal{grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.06); margin-top:16px; padding-top:12px}

/* ==============================
   Accessibility
   ============================== */
.sr-only,.screen-reader-text{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden}

/* ==============================
   Side Rail (vertical menu with icons, unified)
   ============================== */


/* Каркас рейла */
.side-rail{
  position:fixed; top:0; bottom:0; left:0; right:auto;
  display:grid;
  grid-template:auto 1fr auto / 100%;
  background:linear-gradient(180deg, rgba(20,18,27,.96), rgba(12,11,16,.98));
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow: 8px 0 32px rgba(0,0,0,.45);
  z-index:var(--rail-z);
  width:var(--rail-w);                /* desktop collapsed */
  transition:transform .28s cubic-bezier(.22,.7,.26,1), width .25s ease, box-shadow .25s ease;
}
.side-rail.expanded{ width:var(--rail-w-expanded) }

/* Desktop collapsed: показываем только иконки */
@media (min-width: 1025px){
  .side-rail.collapsed .side-rail__menu > li > a{ justify-content:center; padding:12px }
  .side-rail.collapsed .side-rail__menu > li > a span,
  .side-rail.collapsed .side-rail__menu > li > a .menu-item-text{ display:none }
}

/* Mobile / Tablet: off-canvas */
@media (max-width: 1024px){
  .side-rail{
    width: var(--rail-w-mobile);
    transform: translateX(-105%);
    border-top-right-radius:14px; border-bottom-right-radius:14px;
  }
  body.sr-open .side-rail{ transform:none }
  body.sr-open{ overflow:hidden; touch-action:none }
}

/* Admin bar fix */
@media (max-width: 782px){
  body.admin-bar .side-rail{ top:46px }
  body.admin-bar .side-rail__scrim{ top:46px }
}

/* Safe area */
.sr-head{ padding-top: calc(env(safe-area-inset-top) + 10px); padding-left:12px; padding-right:12px; padding-bottom:10px }
.sr-foot{ padding-bottom: calc(env(safe-area-inset-bottom) + 10px); padding-left:12px; padding-right:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06) }
.sr-cta{ width:100%; justify-content:center }

/* Pin button (desktop only) */
.sr-pin{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.18);
  border-radius:10px; background:rgba(255,255,255,.05);
  display:grid; place-items:center; cursor:pointer;
}
.sr-pin__dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45) }
.side-rail.expanded .sr-pin__dot{ background:linear-gradient(180deg,#ffe27a,#ffb800) }
@media (max-width: 1024px){ .sr-pin{ display:none } }

/* Optional close button (mobile) */
.sr-close{
  width:36px; height:36px; margin-left:8px;
  border:1px solid rgba(255,255,255,.18); border-radius:10px;
  background:rgba(255,255,255,.05); color:#fff;
  display:none; align-items:center; justify-content:center; font-size:18px; line-height:1;
}
@media (max-width: 1024px){ .sr-close{ display:inline-flex } }
.sr-close:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(255,226,122,.35) }

/* Scroll area + items */
.side-rail__nav{ overflow:auto; -webkit-overflow-scrolling:touch; padding:6px 0 }
.side-rail__menu{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.side-rail__menu > li > a{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; margin:0 8px;
  font-size:16px; color:#ddd; text-decoration:none; border-radius:10px; position:relative;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-rail__menu > li > a:hover{ color:#fff; background:rgba(255,255,255,.07) }
.side-rail__menu > li.current-menu-item > a{
  color:#fff; background:rgba(255,255,255,.12);
  box-shadow: inset 2px 0 0 0 var(--brand);
}
/* Icon via CSS mask */
.side-rail__menu > li > a::before{
  content:""; flex:0 0 22px; width:22px; height:22px; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  opacity:.95;
}

/* Overlay (mobile) */
.side-rail__scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:calc(var(--rail-z) - 1);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
body.sr-open .side-rail__scrim{ opacity:1; pointer-events:auto }

/* Mobile open button look */
@media (max-width: 720px){
  .sr-open{ padding:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:rgba(255,255,255,.06) }
}

/* Icon classes for menu items (add CSS class to menu links in WP) */
.side-rail__menu a.mi-home::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9 2 2 8v8h5v-4h4v4h5V8L9 2z" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9 2 2 8v8h5v-4h4v4h5V8L9 2z" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-games::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect x="2" y="3" width="14" height="10" rx="2" fill="%23000"/><circle cx="6" cy="8" r="1.3" fill="%23000"/><circle cx="9" cy="8" r="1.3" fill="%23000"/><circle cx="12" cy="8" r="1.3" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect x="2" y="3" width="14" height="10" rx="2" fill="%23000"/><circle cx="6" cy="8" r="1.3" fill="%23000"/><circle cx="9" cy="8" r="1.3" fill="%23000"/><circle cx="12" cy="8" r="1.3" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-bonus::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 7h12v8H3z" fill="%23000"/><path d="M3 6h12v2H3z" fill="%23000"/><path d="M9 6V3.5a1.5 1.5 0 1 1 0 3Z" fill="%23000"/><path d="M9 6V3.5a1.5 1.5 0 1 0 0 3Z" transform="translate(3 0)" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 7h12v8H3z" fill="%23000"/><path d="M3 6h12v2H3z" fill="%23000"/><path d="M9 6V3.5a1.5 1.5 0 1 1 0 3Z" fill="%23000"/><path d="M9 6V3.5a1.5 1.5 0 1 0 0 3Z" transform="translate(3 0)" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-jackpot::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M4 3h10v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V3Z" fill="%23000"/><path d="M6 11h6l-1 3H7l-1-3Z" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M4 3h10v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V3Z" fill="%23000"/><path d="M6 11h6l-1 3H7l-1-3Z" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-star::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="m9 2 2 4 5 .7-3.6 3.2L13.8 15 9 12.7 4.2 15l1.2-5.1L2 6.7 7 6l2-4Z" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="m9 2 2 4 5 .7-3.6 3.2L13.8 15 9 12.7 4.2 15l1.2-5.1L2 6.7 7 6l2-4Z" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-faq::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 3h12v9H9l-3 3v-3H3V3Z" fill="%23000"/><circle cx="9" cy="6" r="1" fill="%23000"/><path d="M8.5 8.5c0-1 1.5-1 1.5-2" stroke="%23000" stroke-width="1.4" fill="none"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 3h12v9H9l-3 3v-3H3V3Z" fill="%23000"/><circle cx="9" cy="6" r="1" fill="%23000"/><path d="M8.5 8.5c0-1 1.5-1 1.5-2" stroke="%23000" stroke-width="1.4" fill="none"/></svg>');
}
.side-rail__menu a.mi-support::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><circle cx="9" cy="9" r="7" fill="%23000"/><path d="M5 10v-2a4 4 0 0 1 8 0v2" stroke="%23000" stroke-width="2" fill="none"/><rect x="7" y="12" width="4" height="2" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><circle cx="9" cy="9" r="7" fill="%23000"/><path d="M5 10v-2a4 4 0 0 1 8 0v2" stroke="%23000" stroke-width="2" fill="none"/><rect x="7" y="12" width="4" height="2" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-wallet::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect x="2" y="4" width="14" height="10" rx="2" fill="%23000"/><circle cx="12.5" cy="9" r="1.3" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect x="2" y="4" width="14" height="10" rx="2" fill="%23000"/><circle cx="12.5" cy="9" r="1.3" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-guides::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 3h6v12H3zM9 3h6v12H9z" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M3 3h6v12H3zM9 3h6v12H9z" fill="%23000"/></svg>');
}
.side-rail__menu a.mi-zap::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M10 1 3 10h5l-1 7 8-10h-5l1-6z" fill="%23000"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M10 1 3 10h5l-1 7 8-10h-5l1-6z" fill="%23000"/></svg>');
}

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


/* ===== Fix: no duplicate subnav and clean side-rail behavior ===== */

/* 1) Полностью убираем дублирующий горизонтальный subnav */
.subnav{ display:none !important; }

/* 2) Кнопки, предназначенные только для мобилы, скрываем на десктопе */
.only-mobile{ display:none !important; }
@media (max-width:1024px){
  .only-mobile{ display:inline-flex !important; }
}

/* 3) Сайд-рейл:
   - на десктопе: «свернутый» = только иконки; «развернутый» = иконки + текст;
   - на мобиле: off-canvas как раньше.
*/

/* Отступ контента под узкий рейл на десктопе */
@media (min-width:1025px){
  body{ padding-left: calc(var(--rail-w) + 10px); }
  .side-rail{ width: var(--rail-w); transform:none; }
  .side-rail.expanded{ width: var(--rail-w-expanded); }
}

/* Свернутый рейл (десктоп): оставляем только иконки, текст скрываем аккуратно */
@media (min-width:1025px){
  .side-rail.collapsed .side-rail__menu > li > a{
    justify-content:center;
    padding:12px;
    font-size:0;                 /* прячем текст, иконки остаются */
  }
  .side-rail.collapsed .side-rail__menu > li > a::before{
    margin:0;                    /* центрируем иконку */
  }
  /* В развернутом режиме возвращаем нормальный текст */
  .side-rail.expanded .side-rail__menu > li > a{ font-size:16px; }
}

/* Мобильный off-canvas — без изменений, но фиксируем порядок слоёв */
@media (max-width:1024px){
  .side-rail{
    width: var(--rail-w-mobile);
    transform: translateX(-105%);
    border-top-right-radius:14px; border-bottom-right-radius:14px;
    z-index: var(--rail-z);
  }
  body.sr-open .side-rail{ transform:none; }
  body.sr-open{ overflow:hidden; touch-action:none; }
  .sr-pin{ display:none !important; }  /* пин в мобиле не нужен */
  .side-rail__scrim{
    opacity:0; pointer-events:none;
    transition:opacity .22s ease;
  }
  body.sr-open .side-rail__scrim{ opacity:1; pointer-events:auto; }
}

/* Чуть более явное состояние активного пункта в сайдбаре */
.side-rail__menu > li.current-menu-item > a{
  color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow: inset 2px 0 0 0 var(--brand);
}

/* 4) Логотипы: десктоп/мобайл переключение, чтобы не было дубля */
.site-logo--mob{ display:none; }
@media (max-width:720px){
  .site-logo--desk{ display:none; }
  .site-logo--mob{ display:inline-block; height:36px; width:auto; }
}

/* 5) Бургер основного меню — только на мобайле */
.nav-toggle{ display:none; }
@media (max-width:720px){
  .nav-toggle{ display:block; }
}

/* 6) Админ‑бар фиксы (чтобы рейл не уезжал под него) */
@media (max-width:782px){
  body.admin-bar .side-rail{ top:46px; }
  body.admin-bar .side-rail__scrim{ top:46px; }
}


/* ===== Header CTA logic (desktop/tablet/mobile) ===== */

/* Блок CTA прилипает вправо, устойчивые промежутки и перенос */
.header-cta{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; /* если мало места, аккуратно переносим */
}

/* Роли кнопок */
.header-cta .btn--login{
  background:transparent; color:var(--brand);
  border:1px solid rgba(255,213,77,.45);
  box-shadow:none;
}
.header-cta .btn--login:hover{ background:rgba(255,213,77,.08) }
.header-cta .btn--signup{
  background:linear-gradient(180deg, var(--brand), #ffb800);
  color:#1a1309;
}
.header-cta .btn--accent{
  background:linear-gradient(180deg, #ffe27a, #ffb800);
  color:#1a1309;
  box-shadow:0 12px 28px rgba(255,200,40,.22), inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Десктоп ≥ 1025px:
   - скрываем .btn--signup (чтобы не дублировать CTA),
   - оставляем .btn--login + .btn--accent */
@media (min-width:1025px){
  .header-cta .btn--signup{ display:none !important; }
  .header-cta .btn{ min-width:120px }
}

/* Планшет 721–1024px:
   - прячем .btn--accent,
   - показываем .btn--signup как primary рядом с .btn--login */
@media (max-width:1024px) and (min-width:721px){
  .header-cta .btn--accent{ display:none !important; }
  .header-cta .btn--signup{ display:inline-flex !important; }
  .header-cta .btn{ min-width:120px }
}

/* Мобилка ≤ 720px:
   - прячем .btn--accent (у тебя уже есть класс .hide-on-mobile, но дублируем на всякий случай),
   - делаем кнопки полноширинными, сначала primary (Sign Up), затем secondary (Log In) */
@media (max-width:720px){
  .header-cta{
    width:100%;
    gap:8px;
    justify-content:flex-end;
  }
  .header-cta .btn--accent{ display:none !important; }
  .header-cta .btn{
    flex:1 1 auto; /* растягиваем на всю доступную ширину */
    min-width:0;
  }
  /* Порядок: сначала Sign Up, потом Log In */
  .header-cta .btn--signup{ order:1 }
  .header-cta .btn--login{ order:2 }
}

/* Очень узкие экраны: стекаем вертикально, чтобы не ломало шапку */
@media (max-width:400px){
  .header-cta{ flex-direction:column; align-items:stretch }
  .header-cta .btn{ width:100% }
}

/* ===== Header: stable layout for tablet/mobile (fix drifting) ===== */
@media (max-width:1024px){
  /* Переключаем шапку на flex: слева — обе кнопки, центр — лого, справа — CTA */
  .site-header .header-row{
    display:flex !important;
    align-items:center;
    gap:10px;
  }

  /* Левая группа: обе кнопки — компактные, на одной линии */
  .site-header .nav-toggle,
  .site-header .sr-open{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    background:rgba(255,255,255,.06);
  }
  .site-header .nav-toggle .nav-toggle__bar,
  .site-header .sr-open .nav-toggle__bar{
    width:22px; height:2px; margin:4px 0; border-radius:2px; background:#fff;
  }
  /* Если хотите оставить sr-open только на мобилке — уберите next line */
  .site-header .sr-open{ display:inline-flex !important; }

  /* Центр: лого — всегда по центру и не «выталкивает» кнопки */
  .site-header .logo-wrap{
    flex:1 1 auto;
    display:flex;
    justify-content:center;
    min-width:0;              /* не даём лого ломать ряд */
  }
  .site-header .site-logo{    /* ограничим размеры лого */
    max-height:40px;
    width:auto;
    max-width:min(52vw, 220px);
  }

  /* Справа: CTA — фиксированная ширина, не ломает центрирование */
  .site-header .header-cta{
    flex:0 0 auto;
    display:flex; gap:8px; align-items:center;
  }
  .site-header .header-cta .btn--accent{ display:none !important; } /* без третьей кнопки на ≤1024px */
  .site-header .header-cta .btn{ min-width:120px }
}

/* Мобилка ≤720px: ещё плотнее, кнопки CTA тянутся на ширину, порядок — Sign Up затем Log In */
@media (max-width:720px){
  .site-header .header-cta{
    gap:8px; width:100%;
    justify-content:flex-end;
  }
  .site-header .header-cta .btn{
    flex:1 1 auto; min-width:0;
  }
  .site-header .header-cta .btn--signup{ order:1 }
  .site-header .header-cta .btn--login{ order:2 }
  .site-header .site-logo{ max-height:36px; max-width:min(56vw, 200px) }
}

/* Десктоп ≥1025px: возвращаем прежнюю логику — sr-open не нужен, лого по старым правилам */
@media (min-width:1025px){
  .site-header .sr-open{ display:none !important; }
  .site-header .nav-toggle{ display:none; } /* у вас бургер и так скрыт на десктопе */
}


/* ===== Header: stable layout for tablet/mobile (fix drifting) ===== */
@media (max-width:1024px){
  /* Переключаем шапку на flex: слева — обе кнопки, центр — лого, справа — CTA */
  .site-header .header-row{
    display:flex !important;
    align-items:center;
    gap:10px;
	flex-wrap: wrap;  
  }

  /* Левая группа: обе кнопки — компактные, на одной линии */
  .site-header .nav-toggle,
  .site-header .sr-open{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    background:rgba(255,255,255,.06);
  }
  .site-header .nav-toggle .nav-toggle__bar,
  .site-header .sr-open .nav-toggle__bar{
    width:22px; height:2px; margin:4px 0; border-radius:2px; background:#fff;
  }
  /* Если хотите оставить sr-open только на мобилке — уберите next line */
  .site-header .sr-open{ display:inline-flex !important; flex-direction: column;
        background: #ffcc3c;}

  /* Центр: лого — всегда по центру и не «выталкивает» кнопки */
  .site-header .logo-wrap{
    flex:1 1 auto;
    display:flex;
    justify-content:center;
    min-width:0;              /* не даём лого ломать ряд */
  }
  .site-header .site-logo{    /* ограничим размеры лого */
    max-height:40px;
    width:auto;
    max-width:min(52vw, 220px);
  }

  /* Справа: CTA — фиксированная ширина, не ломает центрирование */
  .site-header .header-cta{
    flex: auto;
    display:flex; gap:8px; align-items:center;
  }
  .site-header .header-cta .btn--accent{ display:none !important; } /* без третьей кнопки на ≤1024px */
  .site-header .header-cta .btn{ min-width:120px }
}

/* Мобилка ≤720px: ещё плотнее, кнопки CTA тянутся на ширину, порядок — Sign Up затем Log In */
@media (max-width:720px){
  .site-header .header-cta{
    gap:8px; width:100%;
    justify-content:flex-end;
  }
  .site-header .header-cta .btn{
    flex:1 1 auto; min-width:0;
  }
  .site-header .header-cta .btn--signup{ order:1 }
  .site-header .header-cta .btn--login{ order:2 }
  .site-header .site-logo{ max-height:36px; max-width:min(56vw, 200px) }
}

/* Десктоп ≥1025px: возвращаем прежнюю логику — sr-open не нужен, лого по старым правилам */
@media (min-width:1025px){
  .site-header .sr-open{ display:none !important; }
  .site-header .nav-toggle{ display:none; } /* у вас бургер и так скрыт на десктопе */
}

button.nav-toggle {
    flex-direction: column;
}

.ticker {
    margin-bottom: 15px;
}

main section{
    padding: 0 10px;
}

.seo-text.card a, .aioseo-breadcrumb a{
    color: var(--brand);
    text-decoration: underline;
}

.seo-text.card table {
    border-collapse: collapse;
}

.seo-text.card td {
    border: 1px solid;
    padding: 4px;
}