/* ragnabet.uk.com: warm charcoal ground, orange accent from the SUV in the VIP Market screen, lime buttons from the Log in screen.
   Top navigation, numbered section heads, On this page list on the right. Prefix ru-. Fonts: Rajdhani and Cabin. */
:root {
  --ru-bg: #151311; --ru-bg-2: #0f0d0b; --ru-card: #1f1b17; --ru-card-2: #28231d; --ru-line: #3a322a; --ru-line-2: #4d4236;
  --ru-ink: #f3eee4; --ru-mut: #d2c9bb; --ru-faint: #a89e8f;
  --ru-or: #f07a22; --ru-or-l: #ff9447; --ru-or-d: #c95f12; --ru-lime: #a5e34a; --ru-lime-l: #bdf06b; --ru-dark: #14120f;
  --ru-w: 1200px;
  --font-display: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Cabin', 'Segoe UI', Arial, sans-serif;
}
html { scroll-padding-top: 86px; }
body.ru-site { background: var(--ru-bg); color: var(--ru-ink); font-family: var(--font-body); font-size: 1.02rem; line-height: 1.7; }
.ru-site h1, .ru-site h2, .ru-site h3, .ru-site h5 { font-family: var(--font-display); color: var(--ru-ink); letter-spacing: 0.01em; text-transform: none; }
.ru-site a { color: var(--ru-or-l); }
.ru-site p, .ru-site li { max-width: none; }
.ru-in { max-width: var(--ru-w); margin: 0 auto; padding: 0 1.5rem; }

/* Buttons */
.ru-site .btn { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.02em; border-radius: 6px; padding: 0.6rem 1.25rem; text-decoration: none; }
.ru-site .btn--primary { background: var(--ru-lime); color: var(--ru-dark); box-shadow: 0 4px 16px rgba(165, 227, 74, 0.22); }
.ru-site .btn--primary:hover { background: var(--ru-lime-l); color: var(--ru-dark); }
.ru-site .btn--ghost { background: transparent; color: var(--ru-ink); border: 1.5px solid var(--ru-or); }
.ru-site .btn--ghost:hover { background: rgba(240, 122, 34, 0.12); color: #fff; }
.ru-site .btn--line { background: transparent; color: var(--ru-ink); border: 1.5px solid var(--ru-line-2); }
.ru-site .btn--line:hover { border-color: var(--ru-or); color: #fff; }

/* Header */
.ru-site .site-header.ru-bar { position: sticky; top: 0; z-index: 120; background: rgba(15, 13, 11, 0.96); border-bottom: 1px solid var(--ru-line); box-shadow: 0 2px 0 var(--ru-or); height: auto; }
.ru-bar__row { display: flex; align-items: center; gap: 1.4rem; height: 66px; }
.ru-bar__logo { margin-right: auto; }
.ru-bar__logo img { width: 178px; height: auto; display: block; }
.ru-nav { display: flex; gap: 0.15rem; }
.ru-nav a { color: var(--ru-mut); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; padding: 0.4rem 0.8rem; border-radius: 4px; }
.ru-nav a:hover { color: #fff; background: var(--ru-card-2); }
.ru-nav a.active { color: var(--ru-dark); background: var(--ru-or); }
.ru-bar__actions { display: flex; gap: 0.45rem; }
.ru-bar__actions .btn { padding: 0.42rem 0.95rem; font-size: 0.95rem; }
.ru-site .nav-toggle { display: none; background: transparent; border: 1px solid var(--ru-line-2); border-radius: 6px; width: 44px; height: 40px; padding: 0 10px; flex-direction: column; justify-content: center; gap: 5px; }
.ru-site .nav-toggle span { display: block; height: 2px; background: var(--ru-ink); border-radius: 2px; }
.ru-site .nav-mobile { display: none; }

/* Hero */
.ru-site .ru-hero { background: linear-gradient(115deg, #2a1d12 0%, var(--ru-bg) 58%), var(--ru-bg); padding: 2.8rem 0 2.4rem; border-bottom: 1px solid var(--ru-line); }
.ru-hero .ru-in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.6rem; align-items: center; }
.ru-hero__copy { min-width: 0; border-left: 4px solid var(--ru-or); padding-left: 1.4rem; }
.ru-site .ru-hero .ru-kicker { color: var(--ru-lime); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.5rem; }
.ru-site .ru-hero h1 { color: #fff; font-size: clamp(1.85rem, 1.3rem + 1.7vw, 2.75rem); line-height: 1.1; margin: 0 0 0.9rem; font-weight: 700; }
.ru-site .ru-hero .ru-hero__lead { color: #dcd3c5; font-size: 1.06rem; margin: 0 0 1.35rem; }
.ru-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ru-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--ru-line); border: 1px solid var(--ru-line); border-radius: 8px; overflow: hidden; }
.ru-hero__facts div { background: var(--ru-card); padding: 0.85rem 0.95rem; }
.ru-hero__facts dt { color: var(--ru-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ru-hero__facts dd { margin: 0.1rem 0 0; color: var(--ru-or-l); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
.ru-hero:not(:has(.ru-hero__facts)) .ru-in { grid-template-columns: minmax(0, 880px); }

/* Main column with the list on the right */
.ru-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 2.6rem; align-items: start; padding-top: 1.8rem; }
.ru-main { min-width: 0; }
.ru-toc { position: sticky; top: 88px; background: var(--ru-card); border: 1px solid var(--ru-line); border-radius: 8px; padding: 0.9rem 0.9rem 0.7rem; max-height: calc(100vh - 110px); overflow-y: auto; }
.ru-site .ru-toc .ru-toc__t { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.5rem; color: var(--ru-or-l); }
.ru-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.ru-toc li { counter-increment: t; }
.ru-toc a { display: flex; gap: 0.5rem; color: var(--ru-mut); text-decoration: none; font-size: 0.87rem; line-height: 1.35; padding: 0.32rem 0.2rem; border-top: 1px solid var(--ru-line); }
.ru-toc a::before { content: counter(t, decimal-leading-zero); color: var(--ru-faint); font-family: var(--font-display); font-weight: 700; }
.ru-toc a:hover { color: #fff; }
.ru-toc a:hover::before { color: var(--ru-lime); }

/* Sections */
.ru-sec { padding: 0.4rem 0 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--ru-line); }
.ru-sec__head { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1rem; }
.ru-num { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 6px; background: var(--ru-or); color: var(--ru-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.ru-sec h2 { font-size: clamp(1.45rem, 1.15rem + 0.8vw, 1.95rem); line-height: 1.15; margin: 0; font-weight: 700; }
.ru-split { display: grid; gap: 2rem; align-items: start; }
.ru-split--right { grid-template-columns: minmax(0, 1fr) 330px; }
.ru-split--right .ru-fig { order: 2; }
.ru-split--left { grid-template-columns: 330px minmax(0, 1fr); }
.ru-fig { margin: 0; position: sticky; top: 92px; background: radial-gradient(circle at 50% 30%, rgba(240, 122, 34, 0.18), transparent 70%), var(--ru-card); border: 1px solid var(--ru-line); border-radius: 10px; padding: 0.6rem; }
.ru-fig img { width: 100%; height: auto; display: block; }
.ru-text { display: flow-root; min-width: 0; }
.ru-site .ru-text p { color: var(--ru-mut); margin: 0 0 1rem; }
.ru-site .ru-box { background: rgba(240, 122, 34, 0.1); border: 1px solid rgba(240, 122, 34, 0.45); border-radius: 8px; padding: 0.75rem 1rem; color: var(--ru-ink); }

/* Tables */
.ru-tbl { margin: 1rem 0 1.2rem; border: 1px solid var(--ru-line); border-radius: 8px; overflow: hidden; background: var(--ru-card); }
.ru-site .ru-tbl .ru-tbl__cap { margin: 0; padding: 0.6rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ru-ink); background: var(--ru-card-2); border-bottom: 2px solid var(--ru-or); }
.ru-tbl__scroll { overflow-x: auto; }
.ru-tbl table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.ru-tbl th { text-align: left; color: var(--ru-lime); background: var(--ru-bg-2); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.55rem 1rem; }
.ru-tbl td { padding: 0.55rem 1rem; border-top: 1px solid var(--ru-line); color: var(--ru-ink); vertical-align: top; }
.ru-tbl tr:nth-child(even) td { background: #231f1a; }
.ru-site .ru-tbl .ru-tbl__note { margin: 0; padding: 0.55rem 1rem; font-size: 0.85rem; color: var(--ru-faint); border-top: 1px solid var(--ru-line); }

/* Lists, steps, tiles */
.ru-site .ru-list, .ru-site .ru-steps { margin-left: 0; padding-left: 0; }
.ru-list { list-style: none; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.ru-list li { position: relative; padding: 0.15rem 0 0.15rem 1.5rem; color: var(--ru-mut); }
.ru-list li::before { content: ''; position: absolute; left: 0.25rem; top: 0.72rem; width: 10px; height: 3px; background: var(--ru-or); }
.ru-steps { counter-reset: s; list-style: none; margin: 0.3rem 0 1.2rem; display: grid; gap: 0.45rem; }
.ru-steps li { counter-increment: s; position: relative; padding: 0.55rem 0.9rem 0.55rem 3.1rem; border-radius: 8px; background: var(--ru-card); border: 1px solid var(--ru-line); color: var(--ru-ink); }
.ru-steps li::before { content: counter(s); position: absolute; left: 0.7rem; top: 0.5rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--ru-lime); color: var(--ru-dark); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.ru-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; margin: 0.3rem 0 1.1rem; }
.ru-tile { background: var(--ru-card); border: 1px solid var(--ru-line); border-radius: 8px; padding: 0.7rem 0.9rem; border-left: 3px solid var(--ru-or); }
.ru-tile b { display: block; font-family: var(--font-display); font-size: 1.12rem; color: var(--ru-ink); }
.ru-tile span { color: var(--ru-faint); font-size: 0.88rem; }

/* FAQ */
.ru-qa__list { display: grid; gap: 0.5rem; padding-bottom: 0.4rem; }
.ru-qa { background: var(--ru-card); border: 1px solid var(--ru-line); border-radius: 8px; }
.ru-qa summary { cursor: pointer; padding: 0.8rem 2.6rem 0.8rem 1rem; font-weight: 600; color: var(--ru-ink); list-style: none; position: relative; }
.ru-qa summary::-webkit-details-marker { display: none; }
.ru-qa summary::after { content: '+'; position: absolute; right: 1rem; top: 0.55rem; color: var(--ru-lime); font-size: 1.35rem; font-weight: 700; }
.ru-qa[open] summary::after { content: '\2212'; }
.ru-qa[open] { border-color: var(--ru-or); }
.ru-qa__a { padding: 0 1rem 0.9rem; }
.ru-site .ru-qa__a p { color: var(--ru-mut); margin: 0; }

/* Cards and strip */
.ru-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding-bottom: 0.6rem; }
.ru-site .ru-card { display: flex; flex-direction: column; gap: 0.3rem; background: var(--ru-card); border: 1px solid var(--ru-line); border-top: 3px solid var(--ru-lime); border-radius: 8px; padding: 1rem 1.1rem; text-decoration: none; }
.ru-site .ru-card b { font-family: var(--font-display); color: #fff; font-size: 1.2rem; }
.ru-site .ru-card span { color: var(--ru-mut); font-size: 0.9rem; }
.ru-site .ru-card:hover { border-top-color: var(--ru-or); background: var(--ru-card-2); }
.ru-strip { padding: 0.6rem 0 2.8rem; }
.ru-strip__box { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: linear-gradient(100deg, var(--ru-or-d), #8a3f0b); border-radius: 10px; padding: 1.3rem 1.7rem; }
.ru-site .ru-strip .ru-strip__t { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.5rem; margin: 0; }
.ru-site .ru-strip .ru-strip__d { color: #fde6d2; margin: 0.15rem 0 0; }
.ru-404 { padding: 4rem 0; }
.ru-site .ru-404 p { color: var(--ru-mut); }

/* Footer */
.ru-site .site-footer.ru-foot { background: var(--ru-bg-2); border-top: 1px solid var(--ru-line); padding: 2.4rem 0 6rem; color: var(--ru-mut); margin-top: 0; }
.ru-foot__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; }
.ru-foot__brand img { width: 168px; height: auto; }
.ru-site .ru-foot__brand p { font-size: 0.9rem; margin: 0.7rem 0; color: var(--ru-mut); }
.ru-site .ru-foot h5 { font-family: var(--font-display); font-size: 0.95rem; color: var(--ru-or-l); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.6rem; }
.ru-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.ru-site .ru-foot ul a { color: var(--ru-mut); text-decoration: none; font-size: 0.92rem; }
.ru-site .ru-foot ul a:hover { color: var(--ru-lime); }
.ru-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ru-site .ru-badges span, .ru-site .ru-badges a { font-size: 0.78rem; font-weight: 600; border: 1px solid var(--ru-line-2); border-radius: 4px; padding: 0.15rem 0.55rem; color: var(--ru-ink); text-decoration: none; }
.ru-site .ru-badges .ru-b-age { border-color: var(--ru-or); color: var(--ru-or-l); }
.ru-foot__pay { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.8rem 0 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--ru-line); }
.ru-foot__pay span { background: var(--ru-card); border: 1px solid var(--ru-line); border-radius: 4px; padding: 0.2rem 0.65rem; font-size: 0.82rem; color: var(--ru-ink); }
.ru-foot__bottom { font-size: 0.84rem; color: var(--ru-faint); display: flex; justify-content: space-between; gap: 1.5rem; }
.ru-foot__bottom p { margin: 0; }
.ru-foot__bottom p:last-child { white-space: nowrap; }

/* Sticky CTA */
.ru-site .sticky-cta { background: rgba(15, 13, 11, 0.97); border-top: 2px solid var(--ru-or); }
.ru-site .sticky-cta__text span { color: #fff; font-family: var(--font-display); font-weight: 700; }
.ru-site .sticky-cta__bonus { color: var(--ru-lime) !important; text-transform: none; }

@media (max-width: 1120px) {
  .ru-layout { grid-template-columns: minmax(0, 1fr); }
  .ru-toc { display: none; }
  .ru-bar__actions .btn--line { display: none; }
}
@media (max-width: 920px) {
  .ru-nav, .ru-bar__actions { display: none; }
  .ru-site .nav-toggle { display: flex; }
  .ru-bar__row { height: 60px; }
  .ru-bar__logo img { width: 142px; }
  .ru-site .nav-mobile { display: none; position: fixed; top: 61px; left: auto; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--ru-bg-2); border-left: 2px solid var(--ru-or); padding: 1rem 1.25rem 1.4rem; z-index: 119; flex-direction: column; gap: 0.25rem; box-shadow: -12px 0 30px rgba(0, 0, 0, 0.5); overflow-y: auto; }
  .ru-site .nav-mobile.open { display: flex; }
  .ru-site .nav-mobile > a { color: var(--ru-ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; padding: 0.65rem 0.4rem; border-bottom: 1px solid var(--ru-line); }
  .ru-site .nav-mobile > a.active { color: var(--ru-or-l); }
  .ru-site .nav-mobile .mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.9rem; }
  .ru-hero .ru-in { grid-template-columns: 1fr; gap: 1.4rem; }
  .ru-split, .ru-split--left, .ru-split--right { grid-template-columns: 1fr; gap: 1rem; }
  .ru-split .ru-fig, .ru-split--left .ru-fig, .ru-split--right .ru-fig { order: 2; position: static; max-width: 320px; margin: 0 auto 1rem; }
  .ru-cards { grid-template-columns: 1fr; }
  .ru-foot__grid { grid-template-columns: 1fr 1fr; }
  .ru-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ru-in { padding: 0 1rem; }
  .ru-hero { padding: 1.7rem 0 1.7rem; }
  .ru-hero__copy { padding-left: 0.9rem; }
  .ru-num { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
  .ru-hero__facts dd { font-size: 1.2rem; }
  .ru-strip__box { flex-direction: column; align-items: flex-start; padding: 1.2rem; }
  .ru-foot__bottom { flex-direction: column; gap: 0.5rem; }
  .ru-tbl th, .ru-tbl td { padding: 0.5rem 0.7rem; }
}

/* Popular games grid (gg) */
.gg-block{clear:both;width:100%;flex-basis:100%;grid-column:1/-1;margin:28px 0 8px;box-sizing:border-box}
.gg-block__title{margin:0 0 6px}
.gg-block__lead{margin:0 0 14px;opacity:.85}
.gg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0}
.gg-tile{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#111;text-decoration:none!important;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease}
.gg-tile img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;border:0!important;border-radius:0!important;float:none!important;box-shadow:none!important;transition:transform .3s ease}
.gg-tile::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0));pointer-events:none}
.gg-tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:10px 12px;display:flex;flex-direction:column;gap:2px;color:#fff;text-align:start}
.gg-tile__name{font-weight:700;font-size:.95rem;line-height:1.2;color:#fff}
.gg-tile__prov{font-size:.75rem;line-height:1.2;color:rgba(255,255,255,.78)}
.gg-tile:hover,.gg-tile:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.32)}
.gg-tile:hover img,.gg-tile:focus-visible img{transform:scale(1.05)}
@media (max-width:900px){.gg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.gg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gg-tile__name{font-size:.85rem}}