/* ===================================================================
   CrashKazino KZ — хаб-обзорник (тёмный редакционный + золото)
   Один CSS на весь сайт: главная, категории, страницы игр
   =================================================================== */
:root{
  --bg:#0e1320; --bg2:#141b2c; --card:#1b2438; --card2:#243049;
  --line:#2e3b56; --text:#e9eefb; --muted:#a3b0cc; --white:#fff;
  --gold:#ff7a2f; --gold2:#e0530f; --goldlite:#ffa668; --ink:#2a1000;
  --teal:#2fd3c0; --teal2:#1a9e91;
  --green:#4fc98a; --red:#f0576b; --radius:16px;
  --disp:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1000px 500px at 82% -10%, rgba(240,180,41,.10), transparent 55%),
    radial-gradient(900px 480px at 8% -6%, rgba(47,211,192,.09), transparent 55%),
    var(--bg);
  color:var(--text);font-family:var(--sans);line-height:1.65;font-size:16px
}
a{color:var(--goldlite);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;color:var(--white);font-family:var(--disp);font-weight:800;letter-spacing:-.01em}
h1{font-size:2.3rem;margin-bottom:14px}
h2{font-size:1.65rem;margin:0 0 16px}
h3{font-size:1.15rem;margin:0 0 8px}
p{margin:0 0 14px}
ul{margin:0 0 14px 20px}
li{margin-bottom:8px}
strong,b{color:#fff}
section{padding:44px 0;border-bottom:1px solid var(--line)}
.section-alt{background:linear-gradient(180deg,var(--bg2),rgba(20,27,44,.4))}

/* Header */
.topbar{background:linear-gradient(90deg,#182134,#0e1320);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(6px)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-logo{height:36px;width:auto;display:block}
.topnav{display:flex;gap:20px;font-size:.95rem}
.topnav a{color:var(--muted);font-weight:600}
.topnav a:hover,.topnav a.active{color:var(--gold);text-decoration:none}
.langsw{display:flex;gap:4px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:3px;flex:0 0 auto}
.langsw .lang{color:var(--muted);font-size:.85rem;font-weight:700;padding:5px 12px;border-radius:24px;display:inline-flex;align-items:center;gap:7px;border:none;transition:.2s}
.langsw .lang:hover{color:#fff;text-decoration:none}
.langsw .lang.active{color:var(--ink);background:linear-gradient(135deg,var(--goldlite),var(--gold))}
.langsw .fl{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18);display:inline-block;flex:0 0 auto}

/* Buttons */
.btn{display:inline-block;text-align:center;white-space:nowrap;background:linear-gradient(135deg,var(--goldlite),var(--gold) 55%,var(--gold2));color:var(--ink);font-weight:800;padding:14px 26px;border-radius:12px;font-size:1.02rem;transition:.2s;box-shadow:0 10px 26px -8px rgba(240,180,41,.5)}
.btn:hover{transform:translateY(-2px);text-decoration:none;filter:brightness(1.05)}
.btn-outline{display:inline-block;text-align:center;white-space:nowrap;background:transparent;border:1px solid var(--teal);color:#fff;font-weight:700;padding:14px 26px;border-radius:12px;transition:.2s}
.btn-outline:hover{background:rgba(47,211,192,.14);border-color:var(--gold);text-decoration:none;color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* Breadcrumbs */
.crumbs{font-size:.86rem;color:var(--muted);padding:16px 0 0}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs span{margin:0 7px;opacity:.6}

/* ===== HUB: hero ===== */
.hub-hero{position:relative;padding:64px 0 48px;background-image:linear-gradient(90deg,rgba(10,14,25,.94),rgba(10,14,25,.66) 55%,rgba(10,14,25,.4)),url('/imgs/hero-home.jpg');background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,.06)}
.hub-hero h1{font-size:2.6rem;max-width:820px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.hub-hero .lead{color:#e7ebf3;font-size:1.12rem;max-width:760px;margin-bottom:8px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hub-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hub-stats span{background:var(--card);border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-size:.9rem;color:var(--muted)}
.hub-stats b{color:var(--gold)}

/* ===== HUB: game grid ===== */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sec-head a{font-size:.92rem;font-weight:700}
.gamegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;flex-direction:column;gap:10px;transition:.2s}
.gcard:hover{border-color:var(--gold);transform:translateY(-3px)}
.gcard a.gc-title{color:#fff;font-weight:800;font-size:1.08rem;text-decoration:none;font-family:var(--disp)}
.gcard a.gc-title:hover{color:var(--gold)}
.gcard .gc-prov{color:var(--muted);font-size:.85rem}
.gcard .gc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.gcard .gc-meta span{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.8rem;color:var(--muted)}
.gcard .gc-meta b{color:var(--gold)}
.gcard .gc-tag{align-self:flex-start;background:rgba(47,211,192,.14);border:1px solid rgba(47,211,192,.4);color:var(--teal);border-radius:8px;padding:3px 9px;font-size:.74rem;font-weight:700;letter-spacing:.4px}
.gcard .gc-tag.slot{background:rgba(240,180,41,.12);border-color:rgba(240,180,41,.4);color:var(--gold)}
@media(max-width:900px){.gamegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gamegrid{grid-template-columns:1fr}}

/* ===== HUB: categories ===== */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{background:linear-gradient(135deg,var(--card2),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.2s}
.cat:hover{border-color:var(--gold)}
.cat .ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--teal));display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:12px}
.cat h3{margin-bottom:6px}
.cat p{color:var(--muted);font-size:.92rem;margin:0 0 10px}
@media(max-width:860px){.cats{grid-template-columns:1fr}}

/* ===== HUB: trust/editorial ===== */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trust-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.trust-card h3{font-size:1.03rem}
.trust-card p{color:var(--muted);font-size:.9rem;margin:0}
@media(max-width:860px){.trust{grid-template-columns:1fr}}

/* ===== REVIEW PAGE components ===== */
.play-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.play-head .tile{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.play-head .ph-txt h1{margin:0 0 4px;font-size:1.95rem}
.play-head .ph-txt .prov{color:var(--muted);font-size:.95rem}
.play-head .ph-txt .prov b{color:var(--gold)}

.game-frame{position:relative;width:100%;aspect-ratio:16/10;background:#0b0f19;border:1px solid var(--gold);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(0,0,0,.75),inset 0 0 0 1px rgba(240,180,41,.22)}
.game-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.game-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;cursor:pointer;background:radial-gradient(120% 130% at 85% 0%, rgba(240,180,41,.2), transparent 46%),linear-gradient(135deg,#25314c,#141b2c 55%,#0b0f19);z-index:2}
.game-cover .gc-tile{width:180px;max-width:60%;border-radius:14px}
.game-cover .gc-play{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--goldlite),var(--gold2));display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -6px rgba(240,180,41,.55);transition:.2s}
.game-cover:hover .gc-play{transform:scale(1.08)}
.game-cover .gc-play svg{width:30px;height:30px;fill:var(--ink);margin-left:4px}
.game-cover .gc-txt{color:#fff;font-weight:800;font-size:1.14rem}
.game-cover .gc-sub{color:rgba(255,255,255,.85);font-size:.85rem;margin-top:-6px}
.game-note{color:var(--muted);font-size:.8rem;margin-top:10px;text-align:center}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.expect{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.expect li{position:relative;padding:16px 18px 16px 54px;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:.98rem}
.expect li:before{content:"🎰";position:absolute;left:16px;top:14px;font-size:1.3rem}

.ginfo{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ginfo .row{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ginfo .row span{color:var(--muted)}
.ginfo .row b{color:#fff}
.ginfo .row.hl b{color:var(--gold)}
@media(max-width:640px){.ginfo{grid-template-columns:1fr}}

.note{background:var(--card2);border-left:3px solid var(--teal);padding:14px 18px;border-radius:0 12px 12px 0;color:var(--muted);font-size:.95rem;margin:18px 0}

.symgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:8px}
.sym{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center}
.sym .gem{width:40px;height:40px;margin:0 auto 8px;border-radius:12px;box-shadow:inset 0 0 12px rgba(255,255,255,.4)}
.sym .nm{font-size:.78rem;color:var(--muted)}
.sym .pay{font-size:.95rem;font-weight:800;color:var(--gold)}
@media(max-width:760px){.symgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.symgrid{grid-template-columns:repeat(2,1fr)}}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.feat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:.2s}
.feat-card:hover{border-color:var(--gold)}
.feat-card .ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--teal));display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:12px}
.feat-card h3{font-size:1.06rem}
.feat-card p{color:var(--muted);font-size:.92rem;margin:0}
@media(max-width:760px){.feat{grid-template-columns:1fr}}

.mults{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mults span{background:linear-gradient(135deg,var(--card2),var(--bg2));border:1px solid var(--gold);color:var(--goldlite);font-weight:800;border-radius:10px;padding:9px 15px;font-size:.92rem}

.pickbox{background:linear-gradient(135deg,var(--card2),var(--bg2));border:1px solid var(--gold);border-radius:var(--radius);padding:28px 26px;box-shadow:inset 0 0 0 1px rgba(240,180,41,.2)}
.pickbox h3{font-size:1.28rem;margin-bottom:14px}
.checklist{list-style:none;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.checklist li{position:relative;padding-left:28px;font-size:.95rem}
.checklist li:before{content:"✔";position:absolute;left:0;color:var(--gold);font-weight:800}
@media(max-width:700px){.checklist{grid-template-columns:1fr}}

.faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.faq-item h3{margin-bottom:6px}
.faq-item p{color:var(--muted);margin:0}

.rg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.rg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.rg-card h3{font-size:1.03rem}
.rg-card p{color:var(--muted);font-size:.9rem;margin:0}
@media(max-width:760px){.rg-grid{grid-template-columns:1fr}}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.pc.pros{border-color:rgba(79,201,138,.45)}
.pc.cons{border-color:rgba(240,87,107,.45)}
.pc-h{font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-weight:800}
.pc.pros .pc-h{color:var(--green)}
.pc.cons .pc-h{color:var(--red)}
.pc ul{list-style:none;margin:0}
.pc li{position:relative;padding-left:26px;font-size:.93rem;margin-bottom:8px}
.pc.pros li:before{content:"\2714";position:absolute;left:0;color:var(--green);font-weight:800}
.pc.cons li:before{content:"\2715";position:absolute;left:0;color:var(--red);font-weight:800}
@media(max-width:700px){.proscons{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.step .num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--goldlite),var(--gold2));color:var(--ink);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:1rem}
.step p{color:var(--muted);font-size:.9rem;margin:0}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

.author-card{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:22px}
.author-card .ava{width:64px;height:64px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,var(--gold),var(--teal));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink);font-size:1.22rem}
.author-card .who b{color:#fff;font-size:1.04rem}
.author-card .who .role{color:var(--teal);font-weight:700;font-size:.85rem}
.author-card .who p{margin:5px 0 0;color:var(--muted);font-size:.9rem}
.eeat-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:start;margin-top:6px}
.scorecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.sc-row{display:grid;grid-template-columns:150px 1fr 46px;align-items:center;gap:14px;margin-bottom:12px}
.sc-row span:first-child{color:var(--muted);font-size:.9rem}
.sc-track{height:10px;background:var(--card2);border-radius:6px;overflow:hidden}
.sc-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--teal));border-radius:6px}
.sc-val{font-weight:800;color:#fff;text-align:right}
.sc-total{display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.sc-total .big{font-size:2rem;font-weight:800;color:var(--gold)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.badges span{background:var(--card2);border:1px solid var(--line);border-radius:30px;padding:7px 15px;font-size:.83rem;color:var(--muted)}
.badges b{color:var(--gold);font-weight:700}
@media(max-width:860px){.eeat-grid{grid-template-columns:1fr}.sc-row{grid-template-columns:120px 1fr 40px}}

/* Related games (internal linking) */
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.rel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.2s}
.rel:hover{border-color:var(--gold)}
.rel a{color:#fff;font-weight:700;text-decoration:none;font-size:.96rem}
.rel a:hover{color:var(--gold)}
.rel small{display:block;color:var(--muted);font-size:.8rem;margin-top:3px}
@media(max-width:860px){.related{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.related{grid-template-columns:1fr}}

/* Sticky CTA + to-top */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(11,15,25,.97);backdrop-filter:blur(8px);border-top:1px solid var(--gold);display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 48px 12px 20px;transform:translateY(120%);transition:transform .35s ease}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .bolt{font-size:1.5rem}
.sticky-cta .txt{color:#fff;font-weight:700}
.sticky-cta .txt small{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.sticky-cta .btn{padding:12px 26px;margin:0}
.sticky-cta .close{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);cursor:pointer;font-size:1.4rem;background:none;border:none}
@media(max-width:600px){.sticky-cta{gap:12px;padding:10px 40px 10px 16px}.sticky-cta .txt small{display:none}}
.to-top{position:fixed;right:20px;bottom:20px;z-index:55;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);border:none;cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
body.cta-open .to-top{bottom:88px}

/* Footer */
footer{background:#0b0f19;padding:40px 0;text-align:center;color:var(--muted);font-size:.88rem}
.rg{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);padding:8px 16px;border-radius:30px;margin-bottom:16px;color:#fff}
.rg b{background:var(--red);color:#fff;padding:2px 8px;border-radius:6px;font-size:.8rem}
.foot-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.foot-links a{color:var(--muted);font-weight:600}

@media(max-width:900px){h1{font-size:1.85rem}.hub-hero h1{font-size:2rem}h2{font-size:1.4rem}.topnav{display:none}}

/* Category hero with photo */
.cat-hero{position:relative;padding:56px 0;margin-bottom:10px;background-image:linear-gradient(90deg,rgba(10,14,25,.93),rgba(10,14,25,.6) 55%,rgba(10,14,25,.35)),var(--cat-img);background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,.06)}
.cat-hero-in{position:relative}
.cat-hero h1{margin:0 0 8px;font-size:2.1rem;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.cat-hero .lead{max-width:760px;color:#e7ebf3;margin:0;text-shadow:0 1px 10px rgba(0,0,0,.5)}
@media(max-width:640px){.cat-hero{padding:38px 0}.cat-hero h1{font-size:1.6rem}}
/* Game card thumbnail (official provider tile) — clickable */
.gc-thumb-link{display:block;width:calc(100% + 40px);margin:-18px -20px 2px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;border-bottom:1px solid var(--line)}
.gc-thumb{display:block;width:100%;height:168px;object-fit:contain;background:radial-gradient(circle at 50% 40%,#131a2b,#0a0e19);transition:transform .25s}
.gc-thumb-link:hover .gc-thumb{transform:scale(1.05)}
/* Card actions row (review + play) */
.gc-actions{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.gc-actions a{font-size:.9rem;font-weight:700}
.gc-actions .gc-review{color:var(--muted)}
.gc-actions .gc-review:hover{color:#fff;text-decoration:none}
.gc-actions .gc-play{color:var(--gold);margin-left:auto;border:1px solid var(--gold);border-radius:8px;padding:6px 14px;line-height:1;transition:.2s}
.gc-actions .gc-play:hover{background:var(--gold);color:var(--ink);text-decoration:none}
/* Demo -> real bridge */
.bridge{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(255,122,47,.16),rgba(47,211,192,.10));border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px}
.bridge .b-txt{max-width:640px}
.bridge h3{margin:0 0 4px;font-size:1.2rem}
.bridge p{margin:0;color:var(--muted)}
/* Welcome bonus mini-block */
.bonus-card{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,var(--card2),var(--bg2));border:1px solid var(--gold);border-radius:var(--radius);padding:22px 26px;margin-bottom:20px;box-shadow:0 14px 40px -22px rgba(240,180,41,.5)}
.bonus-card .bonus-badge{font-size:1.4rem;background:linear-gradient(135deg,var(--goldlite),var(--gold));color:var(--ink);font-weight:800;border-radius:12px;padding:10px 14px;white-space:nowrap}
.bonus-card .b-body{flex:1;min-width:220px}
.bonus-card h3{margin:0 0 4px;font-size:1.15rem}
.bonus-card p{margin:0;color:var(--muted);font-size:.92rem}