/* ===================================================================
   Sugar Rush — «неоновые леденцы»: маджента/фиолет + бирюзовый акцент
   v2: макет в стиле игровой страницы (живой демо) + review-блоки
   =================================================================== */
:root{
  --bg:#240a3a; --bg2:#2c1148; --card:#381955; --card2:#452069;
  --line:#5a2c85; --text:#fdeff9; --muted:#cdb0e6; --white:#fff;
  --pink:#ff2d95; --purple:#a021d6; --purple2:#c56bef;
  --cyan:#22e0c8; --cyan2:#12a58e; --cyanlite:#8ff5e8; --ink:#0e2f34;
  --green:#22c55e; --red:#f0576b; --radius:16px;
  --disp:"Trebuchet MS","Segoe UI",system-ui,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(1100px 520px at 84% -12%, rgba(34,224,200,.16), transparent 55%),
    radial-gradient(900px 500px at 10% -8%, rgba(255,45,149,.20), transparent 55%),
    var(--bg);
  color:var(--text);font-family:var(--sans);line-height:1.65;font-size:16px
}
a{color:var(--cyanlite);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.18;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.7rem;margin:0 0 16px}
h3{font-size:1.2rem;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:46px 0;border-bottom:1px solid var(--line)}
.section-alt{background:linear-gradient(180deg,var(--bg2),rgba(44,17,72,.4))}

/* Header */
.topbar{background:linear-gradient(90deg,#38175a,#240a3a);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}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:36px;width:auto;display:block}
.topnav{display:flex;gap:22px;font-size:.95rem}
.topnav a{color:var(--muted);font-weight:600}
.topnav a:hover{color:var(--cyan);text-decoration:none}
.langsw{display:flex;gap:4px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:3px}
.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(--cyanlite),var(--cyan))}
.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:block;text-align:center;background:linear-gradient(135deg,var(--cyanlite),var(--cyan) 55%,var(--cyan2));color:var(--ink);font-weight:800;padding:14px 26px;border-radius:12px;font-size:1.05rem;letter-spacing:.02em;transition:.2s;box-shadow:0 10px 26px -8px rgba(34,224,200,.55)}
.btn:hover{transform:translateY(-2px);text-decoration:none;filter:brightness(1.05)}
.btn-outline{display:inline-block;text-align:center;background:transparent;border:1px solid var(--pink);color:#fff;font-weight:700;padding:14px 26px;border-radius:12px;transition:.2s}
.btn-outline:hover{background:rgba(255,45,149,.18);border-color:var(--cyan);text-decoration:none;color:#fff}

/* Hero / play-hero */
.hero{padding:44px 0 30px}
.play-hero{padding-top:34px}
.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;box-shadow:0 8px 22px -8px rgba(0,0,0,.6);border:1px solid var(--line)}
.play-head .ph-txt h1{margin:0 0 4px;font-size:1.9rem}
.play-head .ph-txt .prov{color:var(--muted);font-size:.95rem}
.play-head .ph-txt .prov b{color:var(--cyan)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* Game frame (live demo) */
.game-frame{position:relative;width:100%;aspect-ratio:16/10;background:#1a0730;border:1px solid var(--pink);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,45,149,.25)}
.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(34,224,200,.22), transparent 46%),linear-gradient(135deg,#ff2d95,#a021d6 55%,#5b1fb0);z-index:2}
.game-cover .gc-tile{width:180px;max-width:60%;border-radius:14px;box-shadow:0 14px 34px -10px rgba(0,0,0,.6)}
.game-cover .gc-play{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--cyanlite),var(--cyan2));display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -6px rgba(34,224,200,.6);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-family:var(--disp);font-size:1.15rem}
.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}

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

/* What to expect */
.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;color:var(--text);font-size:.98rem}
.expect li:before{content:"🍭";position:absolute;left:16px;top:14px;font-size:1.3rem}
.expect li b{color:#fff}

/* Basic game info */
.ginfo{display:grid;grid-template-columns:1fr 1fr;gap:0;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;font-family:var(--disp)}
.ginfo .row.hl b{color:var(--cyan)}
@media(max-width:640px){.ginfo{grid-template-columns:1fr}}

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

/* Symbols */
.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,.45)}
.sym .nm{font-size:.78rem;color:var(--muted)}
.sym .pay{font-size:.95rem;font-weight:800;color:var(--cyan);font-family:var(--disp)}
@media(max-width:760px){.symgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.symgrid{grid-template-columns:repeat(2,1fr)}}

/* Feature cards */
.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(--pink)}
.feat-card .ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--pink),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:12px}
.feat-card h3{font-size:1.08rem}
.feat-card p{color:var(--muted);font-size:.92rem;margin:0}
@media(max-width:760px){.feat{grid-template-columns:1fr}}

/* Multiplier chips */
.mults{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mults span{background:linear-gradient(135deg,#452069,#2c1148);border:1px solid var(--cyan);color:var(--cyan);font-weight:800;border-radius:10px;padding:9px 15px;font-size:.92rem;font-family:var(--disp)}

/* Where-to-play box */
.pickbox{background:linear-gradient(135deg,#452069,#2c1148);border:1px solid var(--cyan);border-radius:var(--radius);padding:28px 26px;box-shadow:inset 0 0 0 1px rgba(34,224,200,.22)}
.pickbox h3{font-size:1.3rem;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:30px;color:var(--text);font-size:.95rem}
.checklist li:before{content:"🍬";position:absolute;left:0;top:0}
.checklist li b{color:#fff}
@media(max-width:700px){.checklist{grid-template-columns:1fr}}

/* FAQ */
.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}

/* Responsible gambling */
.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.05rem}
.rg-card p{color:var(--muted);font-size:.9rem;margin:0}
@media(max-width:760px){.rg-grid{grid-template-columns:1fr}}

/* Pros & Cons */
.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(34,197,94,.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;color:var(--text);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 (How to play) */
.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;position:relative}
.step .num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--cyanlite),var(--cyan2));color:var(--ink);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-family:var(--disp)}
.step h3{font-size:1.02rem}
.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 + scorecard (E-E-A-T) */
.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(--pink),var(--cyan));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1.25rem;font-family:var(--disp)}
.author-card .who b{color:#fff;font-size:1.05rem}
.author-card .who .role{color:var(--purple2);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}
.scorecard h3{margin-bottom:12px}
.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(--pink),var(--cyan));border-radius:6px}
.sc-val{font-weight:800;color:#fff;text-align:right;font-family:var(--disp)}
.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(--cyan);font-family:var(--disp)}
.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(--cyan);font-weight:700}
@media(max-width:860px){.eeat-grid{grid-template-columns:1fr}.sc-row{grid-template-columns:120px 1fr 40px}}

/* Sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(26,7,48,.97);backdrop-filter:blur(8px);border-top:1px solid var(--cyan);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;line-height:1;background:none;border:none}
@media(max-width:600px){.sticky-cta{gap:12px;padding:10px 40px 10px 16px}.sticky-cta .txt small{display:none}}

/* Scroll to top */
.to-top{position:fixed;right:20px;bottom:20px;z-index:55;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:var(--ink);border:none;cursor:pointer;font-size:1.4rem;line-height:1;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)}
.to-top:hover{filter:brightness(1.1)}
body.cta-open .to-top{bottom:88px}

/* Footer */
footer{background:#1a0730;padding:38px 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}

@media(max-width:860px){h1{font-size:1.8rem}h2{font-size:1.45rem}.topnav{display:none}}