/* ============================================================
   slotoking.pro — Betking review · design system "CROWN SHARD"
   prefix: bk-  · mobile-first · royal-noir + diagonal red shards
   palette: brand-derived (red/gold on near-black). hex уточнюються з лого.
   ============================================================ */

/* ---------- 1. TOKENS (фірмова палітра тільки змінними) ---------- */
:root{
  --c-bg:#10141D;            /* фірмовий фон (з банерів) */
  --c-bg-2:#0E121B;
  --c-surface:#1C2431;       /* навігаційні панелі бренду */
  --c-surface-2:#232B3A;
  --c-accent:#FE0041;        /* фірмовий червоний (точний) */
  --c-accent-strong:#D60038;
  --c-accent-2:#FFE433;      /* фірмове золото (з логотипа) */
  --c-cta:#FFE433;           /* жовтий CTA = бренд */
  --c-cta-ink:#15140A;
  --c-text:#FFFFFF;
  --c-text-2:#D7DAE3;
  --c-muted:#9AA0AE;
  --c-success:#33C26B;
  --c-warning:#FFE433;
  --c-danger:#FE0041;
  --c-border:#232B3A;
  --c-border-2:#2F3950;

  --grad-shard:linear-gradient(115deg,var(--c-accent) 0%,var(--c-accent-strong) 100%);
  --grad-gold:linear-gradient(100deg,var(--c-accent-2) 0%,#E6C200 100%);

  --fs-4xl:clamp(2.1rem,5.4vw,3.5rem);
  --fs-3xl:clamp(1.7rem,4vw,2.5rem);
  --fs-2xl:clamp(1.4rem,3vw,1.9rem);
  --fs-xl:clamp(1.2rem,2.2vw,1.45rem);
  --fs-lg:1.125rem;
  --fs-base:1rem;
  --fs-sm:.9rem;
  --fs-xs:.8rem;

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:88px;
  --radius:14px; --radius-sm:9px; --radius-lg:22px;
  --container:1180px; --content:760px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --shadow-sm:0 4px 16px rgba(0,0,0,.35);
  --ring:0 0 0 3px rgba(244,197,52,.55);
  --t:.22s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:"Onest","Segoe UI",system-ui,sans-serif;
  font-size:var(--fs-base);line-height:1.65;font-feature-settings:"liga" 1;
  overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--c-accent-2);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--c-cta)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{font-family:"Geologica","Onest",system-ui,sans-serif;line-height:1.15;
  margin:0;font-weight:700;letter-spacing:-.01em}
table{border-collapse:collapse;width:100%}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- 3. LAYOUT ---------- */
.bk-skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--c-cta);color:var(--c-cta-ink);
  padding:10px 18px;border-radius:0 0 var(--radius-sm) 0;font-weight:700}
.bk-skip:focus{left:0}
.bk-wrap{width:min(100% - 2*var(--sp-2),var(--container));margin-inline:auto}
.bk-prose{max-width:var(--content)}
main{display:block}
section{padding-block:var(--sp-5)}
section:nth-of-type(even){background:var(--c-bg-2)}
.bk-eyebrow{display:inline-block;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-accent-2);font-weight:700;margin-bottom:var(--sp-1)}
h2{font-size:var(--fs-3xl);margin-bottom:var(--sp-2)}
h3{font-size:var(--fs-xl);margin-block:var(--sp-3) var(--sp-1);color:var(--c-text)}
p{margin:0 0 var(--sp-2)}
.bk-lead{font-size:var(--fs-lg);color:var(--c-text-2)}

/* shard accent на заголовках секцій */
.bk-h2{position:relative;padding-left:18px}
.bk-h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:6px;
  background:var(--grad-shard);clip-path:polygon(0 0,100% 12%,100% 88%,0 100%)}

/* ---------- 4. HEADER ---------- */
.bk-header{position:sticky;top:0;z-index:100;background:rgba(10,11,15,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--c-border)}
.bk-header__in{display:flex;align-items:center;gap:var(--sp-2);min-height:64px}
.bk-logo{display:flex;align-items:center;gap:10px;font-family:"Geologica";font-weight:800;
  font-size:1.15rem;color:var(--c-text);letter-spacing:.02em}
.bk-logo img{height:30px;width:auto}
.bk-logo b{color:var(--c-accent-2)}
.bk-nav{display:none;margin-left:auto;gap:var(--sp-1)}
.bk-nav a{color:var(--c-text-2);font-size:var(--fs-sm);font-weight:600;padding:8px 12px;border-radius:var(--radius-sm)}
.bk-nav a:hover,.bk-nav a[aria-current="page"]{color:var(--c-text);background:var(--c-surface)}
.bk-lang{display:flex;gap:4px;margin-left:auto;align-items:center}
.bk-lang a{font-size:var(--fs-xs);font-weight:700;padding:6px 9px;border-radius:7px;color:var(--c-muted);border:1px solid var(--c-border)}
.bk-lang a[aria-current="true"]{color:var(--c-cta-ink);background:var(--c-cta);border-color:var(--c-cta)}
.bk-burger{margin-left:6px;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);cursor:pointer}
.bk-burger span{display:block;width:20px;height:2px;background:var(--c-text);margin-inline:auto;transition:var(--t)}
.bk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.bk-drawer{position:fixed;inset:64px 0 auto 0;background:var(--c-bg-2);border-bottom:1px solid var(--c-border);
  transform:translateY(-130%);transition:transform var(--t);z-index:99;padding:var(--sp-2) 0}
.bk-drawer[data-open="true"]{transform:translateY(0)}
.bk-drawer a{display:block;padding:14px 4px;color:var(--c-text-2);font-weight:600;border-bottom:1px solid var(--c-border)}
.bk-drawer a:hover{color:var(--c-cta)}
@media(min-width:880px){.bk-nav{display:flex}.bk-burger,.bk-drawer{display:none}.bk-lang{margin-left:0}}

/* ---------- 5. HERO + shard ---------- */
.bk-hero{position:relative;background:var(--c-bg-2);overflow:hidden;padding-block:var(--sp-5) var(--sp-6)}
.bk-hero::after{content:"";position:absolute;inset:0 -10% 0 auto;width:60%;background:var(--grad-shard);
  clip-path:polygon(28% 0,100% 0,100% 100%,8% 100%);opacity:.16;z-index:0}
.bk-hero__in{position:relative;z-index:1;display:grid;gap:var(--sp-3)}
.bk-hero h1{font-size:var(--fs-4xl);margin-bottom:var(--sp-2)}
.bk-hero h1 em{font-style:normal;color:var(--c-accent-2)}
.bk-hero__media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--c-border-2);box-shadow:var(--shadow)}
.bk-badges{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.bk-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;
  padding:7px 12px;border-radius:999px;background:var(--c-surface);border:1px solid var(--c-border-2);color:var(--c-text-2)}
.bk-pill--warn{border-color:var(--c-danger);color:#ffd0d6}
@media(min-width:860px){.bk-hero__in{grid-template-columns:1.1fr .9fr;align-items:center}}

/* ---------- 6. CTA / BUTTONS ---------- */
.bk-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  padding:14px 26px;border-radius:999px;cursor:pointer;border:none;font-size:var(--fs-base);
  transition:transform var(--t),filter var(--t);min-height:48px}
.bk-cta--primary{background:var(--c-cta);color:var(--c-cta-ink)}
.bk-cta--ghost{background:transparent;color:var(--c-text);border:1.5px solid var(--c-border-2)}
.bk-cta--red{background:var(--grad-shard);color:#fff}
.bk-cta:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* ---------- 7. CARDS / GRID ---------- */
.bk-grid{display:grid;gap:var(--sp-2)}
.bk-g2{grid-template-columns:1fr}
.bk-g3{grid-template-columns:1fr}
.bk-g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){.bk-g2{grid-template-columns:repeat(2,1fr)}.bk-g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.bk-g3{grid-template-columns:repeat(3,1fr)}.bk-g4{grid-template-columns:repeat(4,1fr)}}
.bk-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3);position:relative}
.bk-card h3{margin-top:0}
.bk-card--shard{overflow:hidden}
.bk-card--shard::before{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;
  background:var(--grad-shard);opacity:.12;clip-path:polygon(0 0,100% 0,100% 100%);border-radius:0 0 0 60px}

/* списки */
.bk-list{list-style:none;display:grid;gap:10px}
.bk-list li{position:relative;padding-left:26px;color:var(--c-text-2)}
.bk-list li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;
  background:var(--c-accent-2);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.bk-list--check li::before{background:var(--c-success);clip-path:none;border-radius:3px}
.bk-list--x li::before{background:var(--c-danger);clip-path:none;border-radius:3px}

dl.bk-facts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--c-border);
  border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}
dl.bk-facts>div{display:grid;grid-template-columns:42% 58%;background:var(--c-surface)}
dl.bk-facts dt{padding:12px 16px;color:var(--c-muted);font-size:var(--fs-sm);font-weight:600}
dl.bk-facts dd{padding:12px 16px;margin:0;font-weight:600;color:var(--c-text)}
@media(min-width:720px){dl.bk-facts{grid-template-columns:1fr 1fr}}

/* ---------- 8. TABLE ---------- */
.bk-table-wrap{overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
table.bk-table{min-width:520px;font-size:var(--fs-sm)}
.bk-table th,.bk-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--c-border)}
.bk-table thead th{background:var(--c-surface-2);color:var(--c-accent-2);font-weight:700;white-space:nowrap}
.bk-table tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.bk-table td:first-child{font-weight:600;color:var(--c-text)}

/* ---------- 9. RATING ---------- */
.bk-rating{display:grid;gap:var(--sp-3);align-items:center}
.bk-score{text-align:center;background:var(--c-surface);border:1px solid var(--c-border-2);border-radius:var(--radius-lg);padding:var(--sp-3)}
.bk-score b{display:block;font-family:"Geologica";font-size:3.4rem;line-height:1;color:var(--c-accent-2)}
.bk-score span{color:var(--c-muted);font-size:var(--fs-sm)}
.bk-meters{display:grid;gap:14px}
.bk-meter{display:grid;grid-template-columns:1fr;gap:4px}
.bk-meter span{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--c-text-2)}
.bk-meter meter{width:100%;height:9px;appearance:none}
.bk-meter meter::-webkit-meter-bar{background:var(--c-surface-2);border-radius:99px;border:none}
.bk-meter meter::-webkit-meter-optimum-value{background:var(--grad-gold);border-radius:99px}
.bk-meter meter::-moz-meter-bar{background:var(--grad-gold)}
@media(min-width:760px){.bk-rating{grid-template-columns:240px 1fr}}

/* ---------- 10. PROS/CONS ---------- */
.bk-procons{display:grid;gap:var(--sp-2)}
@media(min-width:720px){.bk-procons{grid-template-columns:1fr 1fr}}
.bk-procons__col{border-radius:var(--radius);padding:var(--sp-3);border:1px solid var(--c-border)}
.bk-procons__col--pro{background:rgba(51,194,107,.06);border-color:rgba(51,194,107,.3)}
.bk-procons__col--con{background:rgba(255,84,104,.06);border-color:rgba(255,84,104,.3)}

/* ---------- 11. TAG-CLOUD (§25) ---------- */
.bk-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.bk-tags li{font-size:var(--fs-sm);padding:7px 13px;border-radius:999px;border:1px solid var(--c-border-2);color:var(--c-text-2);background:var(--c-surface)}
.bk-tags li[data-cat="cyr"]{border-color:var(--c-accent-2);color:#ffe9a8}
.bk-tags li[data-cat="lat"]{border-color:var(--c-accent);color:#ffc6cd}
.bk-tags li[data-cat="mod"]{border-color:var(--c-border-2)}
.bk-tags li[data-cat="space"]{border-color:var(--c-success);color:#bff0d0}
.bk-tags li[data-cat="err"]{border-color:var(--c-danger);color:#ffd0d6}
.bk-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:var(--sp-2);font-size:var(--fs-xs);color:var(--c-muted)}
.bk-legend span{display:inline-flex;align-items:center;gap:6px}
.bk-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.bk-legend i.c-cyr{background:var(--c-accent-2)}
.bk-legend i.c-lat{background:var(--c-accent)}
.bk-legend i.c-mod{background:var(--c-muted)}
.bk-legend i.c-space{background:var(--c-success)}
.bk-legend i.c-err{background:var(--c-danger)}

/* ---------- 12. STEPS / TIMELINE ---------- */
ol.bk-steps{list-style:none;counter-reset:s;display:grid;gap:14px}
ol.bk-steps li{counter-increment:s;position:relative;padding:14px 16px 14px 58px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius)}
ol.bk-steps li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;background:var(--grad-shard);color:#fff;font-weight:800;border-radius:8px}
.bk-timeline{list-style:none;display:grid;gap:0;border-left:2px solid var(--c-border-2);margin-left:8px}
.bk-timeline li{position:relative;padding:0 0 var(--sp-3) var(--sp-3)}
.bk-timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--c-accent-2);border:2px solid var(--c-bg)}
.bk-timeline time{display:block;font-size:var(--fs-xs);color:var(--c-accent-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* ---------- 13. VERDICT / NOTE ---------- */
.bk-verdict{background:linear-gradient(160deg,var(--c-surface),var(--c-surface-2));border:1px solid var(--c-border-2);
  border-radius:var(--radius-lg);padding:var(--sp-4);position:relative;overflow:hidden}
.bk-verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--grad-gold)}
.bk-note{border-radius:var(--radius);padding:var(--sp-3);border:1px solid var(--c-border-2);background:var(--c-surface)}
.bk-note--warn{border-color:var(--c-danger);background:rgba(255,84,104,.07)}
.bk-note--warn strong{color:#ffd0d6}

/* ---------- 14. FAQ ---------- */
.bk-faq details{border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:10px;background:var(--c-surface);overflow:hidden}
.bk-faq summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;font-weight:600;position:relative;color:var(--c-text)}
.bk-faq summary::-webkit-details-marker{display:none}
.bk-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--c-accent-2);font-size:1.4rem;font-weight:400}
.bk-faq details[open] summary::after{content:"\2212"}
.bk-faq details>div{padding:0 18px 16px;color:var(--c-text-2)}

/* ---------- 15. AUTHOR / DISCLOSURE ---------- */
.bk-author{display:grid;gap:var(--sp-2);align-items:center;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3)}
.bk-author img{width:72px;height:72px;border-radius:50%;border:2px solid var(--c-accent-2)}
@media(min-width:560px){.bk-author{grid-template-columns:72px 1fr}}
.bk-disclosure{font-size:var(--fs-sm);color:var(--c-muted);border:1px dashed var(--c-border-2);border-radius:var(--radius);padding:14px 16px}

/* ---------- 16. STICKY MOBILE CTA ---------- */
.bk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,11,15,.96);backdrop-filter:blur(8px);border-top:1px solid var(--c-border);
  transform:translateY(120%);transition:transform var(--t)}
.bk-sticky[data-show="true"]{transform:translateY(0)}
.bk-sticky .bk-cta{width:100%}
@media(min-width:880px){.bk-sticky{display:none}}

/* ---------- 17. FOOTER + compliance ---------- */
.bk-footer{background:var(--c-bg-2);border-top:1px solid var(--c-border);padding-block:var(--sp-4);font-size:var(--fs-sm);color:var(--c-muted)}
.bk-footer a{color:var(--c-text-2)}
.bk-footer__grid{display:grid;gap:var(--sp-3)}
@media(min-width:720px){.bk-footer__grid{grid-template-columns:2fr 1fr 1fr}}
.bk-compliance{margin-top:var(--sp-3);padding:var(--sp-3);border:1px solid var(--c-border-2);border-radius:var(--radius);background:var(--c-surface);color:var(--c-text-2)}
.bk-rg{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-2);align-items:center}
.bk-rg img{height:34px;width:auto;opacity:.85}
.bk-age{display:inline-grid;place-items:center;width:38px;height:38px;border:2px solid var(--c-danger);
  border-radius:50%;color:#ffd0d6;font-weight:800;font-size:.85rem;flex:none}

/* ---------- 18. COOKIE ---------- */
.bk-cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;background:var(--c-surface-2);
  border:1px solid var(--c-border-2);border-radius:var(--radius);padding:16px;display:none;gap:12px;
  box-shadow:var(--shadow);align-items:center;flex-wrap:wrap}
.bk-cookie[data-show="true"]{display:flex}
.bk-cookie p{margin:0;flex:1 1 240px;font-size:var(--fs-sm);color:var(--c-text-2)}
.bk-cookie .bk-cta{padding:10px 18px;min-height:40px;font-size:var(--fs-sm)}

/* ---------- 19. TABS (games) ---------- */
.bk-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-2)}
.bk-tab{padding:9px 16px;border-radius:999px;border:1px solid var(--c-border-2);background:var(--c-surface);
  color:var(--c-text-2);font-weight:600;font-size:var(--fs-sm);cursor:pointer}
.bk-tab[aria-selected="true"]{background:var(--c-accent-2);color:var(--c-cta-ink);border-color:var(--c-accent-2)}
.bk-providers{display:flex;flex-wrap:wrap;gap:10px}
.bk-providers span{padding:8px 14px;border-radius:var(--radius-sm);background:var(--c-surface);border:1px solid var(--c-border);font-size:var(--fs-sm);color:var(--c-text-2)}

/* ---------- 20. TOC ---------- */
.bk-toc{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3)}
.bk-toc ol{list-style:none;counter-reset:t;columns:2;column-gap:var(--sp-3)}
.bk-toc li{counter-increment:t;break-inside:avoid;margin-bottom:8px}
.bk-toc a{color:var(--c-text-2);font-size:var(--fs-sm)}
.bk-toc a::before{content:counter(t) ". ";color:var(--c-accent-2);font-weight:700}
@media(max-width:560px){.bk-toc ol{columns:1}}

/* utility */
.bk-mt{margin-top:var(--sp-3)}
.bk-figcap{font-size:var(--fs-xs);color:var(--c-muted);margin-top:8px;text-align:center}
@media print{.bk-header,.bk-sticky,.bk-cookie,.bk-drawer{display:none!important}body{background:#fff;color:#000}}