/* =====================================================================
   SKIN «ROYAL REELS» — шапка в одну строку, жёлтый hero с барабанами,
   рельсы карточек игр, футер как у оригинала.
   Цвета — только переменные темы (static/css/themes/royalreels.css).
   ===================================================================== */
body{font-size:16px}
.btn{font-weight:700}
.btn--main:hover{filter:brightness(1.06)}
.btn--dark{background:#27283b;color:var(--accent);box-shadow:0 6px 16px rgba(39,40,59,.25)}

/* ---------- Шапка: логотип · иконки-меню · Sign in / Sign up ---------- */
.top{position:sticky;top:0;z-index:80;background:var(--hdr-bg);box-shadow:0 1px 0 var(--hdr-line)}
.top__in{position:relative;max-width:none;height:72px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:18px}
.top .logo{display:block;flex:0 0 auto}
.top .logo img{height:42px;width:auto}
.mnav{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:none;border:0}
.mnav__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:78px;padding:6px 10px;border-radius:14px;color:#d3d5e0;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .15s ease,background .15s ease}
.mnav__ico{display:grid;place-items:center;width:38px;height:30px;border-radius:50%}
.mnav__a .icon{width:23px;height:23px}
.mnav__a:hover{color:#fff;background:rgba(255,255,255,.05)}
.mnav__a.is-active{color:var(--accent)}
.mnav__a.is-active .mnav__ico{background:var(--accent);color:#27283b;width:40px;height:40px;margin-bottom:-6px}
.mnav__a.is-active .mnav__t{display:none}
.top__right{display:flex;align-items:center;gap:18px;margin-left:auto}
.top__login{color:#fff;font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap}
.top__login:hover{color:var(--accent)}
.top__cta{min-height:42px;padding:0 20px;font-size:16px;border-radius:10px}
.burger{display:none}
html{scroll-padding-top:90px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:20px;min-height:460px;padding:44px 56px;border-radius:var(--radius-lg);background:var(--hero-bg);color:var(--hero-ink)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.35) 1.2px,transparent 1.6px) 0 0/26px 26px;-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 90%);mask-image:linear-gradient(90deg,transparent 20%,#000 90%);opacity:.5;pointer-events:none}
.hero__text{position:relative;z-index:1;min-width:0}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(39,40,59,.9);color:var(--accent);font-size:13.5px;font-weight:600}
.hero__badge .icon{width:17px;height:17px}
.hero__title{margin:14px 0 12px;font:800 clamp(22px,2.3vw,32px)/1.18 var(--display);letter-spacing:-.01em;color:#27283b}
.hero__offer{margin:0;font:800 clamp(30px,3.9vw,56px)/1.06 var(--display);letter-spacing:-.02em;color:#fff;text-shadow:0 3px 0 rgba(39,40,59,.28),0 8px 24px rgba(120,70,0,.25)}
.hero__sub{margin:8px 0 0;font:500 clamp(18px,1.9vw,26px)/1.2 var(--font);color:#27283b}
.hero__intro{margin:16px 0 0;max-width:600px;color:#3b3d52;font-size:16px;line-height:1.65}
.hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.hero__chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.55);font-size:14px;font-weight:600;color:#27283b}
.hero__chips .icon{width:17px;height:17px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .btn--main{background:#27283b;color:var(--accent)}
.hero .btn--dark{background:var(--accent);color:#27283b;box-shadow:0 6px 16px rgba(120,70,0,.25)}

/* ---------- Арт hero: барабаны + корона + монеты ---------- */
.reels{position:relative;display:grid;place-items:center;min-height:380px}
.reels svg{width:100%;max-width:440px;overflow:visible;filter:drop-shadow(0 26px 30px rgba(80,45,0,.35))}
.reels__rays{transform-box:view-box;transform-origin:210px 230px;animation:spin 40s linear infinite}
.reels__glow{animation:blink 3s ease-in-out infinite}
.reels__crown{animation:crown 3.2s ease-in-out infinite}
@keyframes crown{50%{transform:translate(120px,28px) rotate(-2deg)}}
.reels__body{animation:rbody 4.4s ease-in-out infinite;transform-box:view-box;transform-origin:210px 354px}
@keyframes rbody{0%,60%,100%{transform:none}64%{transform:scale(1.02,.98)}70%{transform:scale(.99,1.01)}}
/* 7 символов по 86px; после двух кругов (−516px) видно снова «7»: прыжок в 0 незаметен */
.reel{animation:reel 4.4s cubic-bezier(.22,.7,.25,1) infinite}
.reel--1{animation-delay:.22s}.reel--2{animation-delay:.44s}
@keyframes reel{0%{transform:translateY(0)}62%,100%{transform:translateY(-516px)}}
.rc{opacity:0;animation:rc 4.4s ease-out infinite}
.rc__t{font:800 18px/1 var(--display);fill:#6b4700;text-anchor:middle}.rc__t--s{font-size:14px}
.rc--1{--x0:210px;--x1:78px;--y1:96px;animation-delay:2.7s}
.rc--2{--x0:200px;--x1:352px;--y1:84px;animation-delay:2.85s}
.rc--3{--x0:215px;--x1:36px;--y1:210px;animation-delay:3s}
.rc--4{--x0:220px;--x1:388px;--y1:196px;animation-delay:3.1s}
.rc--5{--x0:208px;--x1:210px;--y1:20px;animation-delay:2.95s}
@keyframes rc{0%{transform:translate(var(--x0),250px) scale(.4);opacity:0}6%{opacity:1}30%{transform:translate(var(--x1),var(--y1)) scale(1) rotate(200deg);opacity:1}42%,100%{transform:translate(var(--x1),calc(var(--y1) + 34px)) scale(.9) rotate(260deg);opacity:0}}

/* ---------- Плашка «Games» и рельсы ---------- */
.gbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 0 12px;padding:12px 16px;border-radius:14px;background:var(--surface)}
.gbar__title{margin:0;font:500 24px/1.2 var(--font)}
.gbar__btns{display:flex;gap:10px;flex-wrap:wrap}
.gbtn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--ghost-line);color:var(--accent);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.gbtn:hover{background:var(--accent-soft)}
.gbtn .icon{width:19px;height:19px}
.gbtn--sm{min-height:38px;padding:0 14px}
.rail{margin:0 0 12px;padding:14px 16px 16px;border-radius:14px;background:var(--surface)}
.rail__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rail__title{margin:0;font-weight:700;font-size:19px}
.rail__ctl{display:flex;align-items:center;gap:8px}
.rail__arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--accent);color:#27283b}
.rail__arrow .icon{width:20px;height:20px}
.rail__arrow:hover{filter:brightness(1.08)}
.rail__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px}
.rail__track::-webkit-scrollbar{display:none}
.gcard{flex:0 0 172px;scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:var(--surface-2);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.gcard:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--accent)}
.gcard__art{aspect-ratio:200/116;width:100%;background:linear-gradient(160deg,var(--b),var(--a))}
.gcard__body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.gcard__body b{font-size:14.5px;font-weight:700}
.gcard__body small{color:var(--muted);font-size:12.5px;line-height:1.35}

/* ---------- Заголовки-полосы в статье ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 12px;padding:12px 16px;border-radius:12px;background:var(--surface)}
.bar__title{margin:0;color:var(--accent);font-weight:700;font-size:19px}
.article h2{padding:10px 14px;border-radius:12px;background:var(--surface-2);color:var(--accent);font-weight:700;font-size:clamp(19px,1.8vw,24px)}
.article h2::before{display:none}
.article .faq h2{margin-top:1.6em}

/* ---------- Коротко о главном ---------- */
.qf__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.qf__grid>div{padding:14px 16px;border-radius:12px;background:var(--surface)}
.qf__grid dt{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}
.qf__grid dt .icon{width:16px;height:16px;color:var(--accent)}
.qf__grid dd{margin:4px 0 0;font-weight:700;font-size:15.5px}

/* ---------- Правая колонка ---------- */
.age-badge{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:2px solid var(--text);font:800 13px/1 var(--font)}
.age-badge--lg{width:48px;height:48px;font-size:15px;border-color:var(--accent);color:var(--accent)}
.aside-gift{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px;border-radius:var(--radius-lg);background:radial-gradient(200px 140px at 50% 0,rgba(251,193,41,.3),transparent 70%),var(--surface);border:1px solid var(--line);text-align:center;text-decoration:none}
.aside-gift svg{width:110px;margin-bottom:4px;animation:float 4s ease-in-out infinite}
.aside-gift__t{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.aside-gift b{font:800 48px/1 var(--display);letter-spacing:-.04em}
.aside-gift__s{margin-bottom:12px;color:var(--text-2);font-size:14px}
.aside-rg{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);text-align:center}
.aside-rg b{font-size:16px}
.aside-rg p{margin:0 0 6px;color:var(--text-2);font-size:14px}

/* ---------- Футер как у оригинала ---------- */
.ftr--rr{margin-top:36px;padding:34px 28px 36px;border-top:0;background:var(--ftr-bg)}
.rrf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.rrf__col{display:flex;flex-direction:column;gap:2px}
.rrf__col--mid{align-items:center;text-align:center}
.rrf__col--end{align-items:flex-end;text-align:right}
.rrf__h{margin:0 0 8px;font:600 17px/1.2 var(--font);color:#fff}
.rrf__col a{padding:5px 0;color:var(--ftr-muted);font-size:15px;text-decoration:none}
.rrf__col a:hover{color:#fff}
.rrf__copy{margin:26px auto 0;max-width:760px;text-align:center;color:var(--ftr-muted);font-size:13.5px;line-height:1.6}
.rrf__age{display:flex;justify-content:center;margin-top:16px}
.rrf__age span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ftr-muted);font:700 14px/1 var(--font)}
.ftr--rr .icon-btn--top{position:absolute;right:28px;bottom:30px;width:42px;height:42px;color:#27283b}
.ftr--rr{position:relative}
.age{color:var(--accent)}

/* ---------- Адаптив ---------- */
@media (max-width:1180px){
  .mnav__a{min-width:64px;padding:6px 6px}
  .hero{padding:36px 36px}
}
@media (max-width:980px){
  /* меню-иконки уходят в нижнюю панель и бургер */
  .mnav{display:none}
  .burger{display:flex;flex:0 0 42px;height:42px;background:var(--surface-2)}
  .top__in{padding:0 16px;gap:12px}
  .top .logo img{height:36px}
  .top__login{font-size:15px}
  .top__cta{min-height:38px;padding:0 16px;font-size:15px}
  .top__right{gap:14px}
}
@media (max-width:860px){
  html{scroll-padding-top:80px}
  .hero{grid-template-columns:1fr;gap:6px;min-height:0;padding:26px 22px 20px;text-align:left}
  .reels{order:2;min-height:0;margin:4px -6px -8px}
  .reels svg{width:min(330px,86%)}
  .qf__grid{grid-template-columns:1fr 1fr}
  .rrf{grid-template-columns:1fr 1fr}
  .rrf__col--end{align-items:flex-start;text-align:left}
}
@media (max-width:640px){
  .top__in{height:60px;padding:0 10px;gap:8px}
  .top .logo img{height:30px}
  .burger{flex-basis:38px;height:38px}
  .top__right{gap:10px}
  .top__login{font-size:14px}
  .top__cta{min-height:36px;padding:0 14px;font-size:14px}
  .hero{padding:22px 16px 14px;border-radius:14px}
  .hero__cta .btn{flex:1 1 calc(50% - 6px);padding:0 12px;font-size:14px}
  .hero__offer{font-size:clamp(27px,8.4vw,36px)}
  .gbar{padding:10px 12px}
  .gbar__title{font-size:20px}
  .gbar__btns{width:100%}
  .gbar__btns .gbtn{flex:1 1 0;justify-content:center;padding:0 8px;font-size:13px}
  .rail{padding:12px}
  .gcard{flex-basis:142px}
  .qf__grid{grid-template-columns:1fr}
  .bar{padding:10px 12px}
  .bar__title{font-size:17px}
  .ftr--rr{padding:26px 16px 100px}
  .rrf{grid-template-columns:1fr 1fr;gap:18px 14px}
  .rrf__col--mid{grid-column:1 / -1;order:3;align-items:flex-start;text-align:left}
  .ftr--rr .icon-btn--top{right:14px;bottom:84px;width:40px;height:40px}
}
@media (max-width:360px){ .top__login{display:none} .top .logo img{height:26px} }
@media (max-width:640px){ .hero__badge{border-radius:14px;font-size:12.5px;padding:7px 12px} }