/* Общий стиль соцказино. Цвета приходят из бренда через переменные в . */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--body); font-weight:300;line-height:1.65;font-size:16px;overflow-x:hidden; -webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;margin:0; letter-spacing:-.01em} h1{font-size:clamp(2.2rem,6vw,4rem)} h2{font-size:clamp(1.6rem,3.6vw,2.6rem)} h3{font-size:clamp(1.1rem,2vw,1.4rem)} p{margin:0 0 1em} .wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto} .narrow{width:min(760px,100% - 2.5rem);margin-inline:auto} .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold); font-weight:500;margin:0 0 1rem} .muted{color:var(--muted)} .center{text-align:center} /* ── фон ─────────────────────────────────────────────── */ .bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5} .bgfx::before{content:"";position:absolute;inset:0; background:radial-gradient(80% 55% at 50% -10%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%)} .bgfx.deco::after{content:"";position:absolute;inset:0;opacity:.05; background-image:repeating-linear-gradient(45deg,var(--gold) 0 1px,transparent 1px 22px), repeating-linear-gradient(-45deg,var(--gold) 0 1px,transparent 1px 22px)} .bgfx.grid::after{content:"";position:absolute;inset:0;opacity:.07; background-image:linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent); mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent)} /* ── шапка ───────────────────────────────────────────── */ header.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid var(--line)} .top .wrap{display:flex;align-items:center;gap:1.4rem;height:68px} .logo{display:flex;align-items:center;gap:.6rem;font-family:var(--display); font-size:1.32rem;font-weight:700;letter-spacing:.02em;color:var(--cream)} .logo .mark{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center; background:linear-gradient(140deg,var(--gold),var(--gold-deep));color:var(--bg); font-weight:700;font-size:.95rem;font-family:var(--body)} nav.main{margin-inline-start:auto;display:flex;gap:1.5rem;align-items:center} nav.main a{font-size:.87rem;color:var(--muted);transition:color .2s} nav.main a:hover,nav.main a[aria-current]{color:var(--gold)} .langs{display:flex;gap:.4rem;align-items:center;font-size:.75rem} .langs a{padding:.25rem .45rem;border-radius:6px;color:var(--muted);text-transform:uppercase; letter-spacing:.06em} .langs a[aria-current]{background:var(--surface);color:var(--gold)} .burger{display:none;margin-inline-start:auto;background:none;border:0;color:var(--cream); font-size:1.5rem;cursor:pointer;padding:.2rem .4rem} /* На телефоне шапка в две строки. Выпадающее меню — absolute, а не fixed: у шапки размытие фона, а оно делает её точкой отсчёта для fixed-потомков. */ @media(max-width:860px){ .top .wrap{flex-wrap:wrap;height:auto;min-height:58px;padding:.5rem 0;row-gap:.35rem} .burger{display:block;order:2} .langs{order:3;width:100%;justify-content:center;position:static} nav.main{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0; background:var(--bg-soft);border-bottom:1px solid var(--line);padding:.5rem 0;display:none} nav.main.open{display:flex} nav.main a{padding:.85rem 1.25rem;width:100%} } /* ── кнопки ──────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.85rem 1.7rem;border-radius:999px;border:1px solid transparent;cursor:pointer; background:transparent;color:var(--cream); font-family:var(--body);font-size:.92rem;font-weight:500;letter-spacing:.02em; transition:transform .15s,box-shadow .25s,background .2s;text-align:center} .btn:active{transform:translateY(1px)} .btn-gold{background:linear-gradient(140deg,var(--gold),var(--gold-deep));color:var(--bg); font-weight:600;box-shadow:0 8px 30px -10px color-mix(in srgb,var(--gold) 70%,transparent)} .btn-gold:hover{box-shadow:0 12px 38px -8px color-mix(in srgb,var(--gold) 80%,transparent)} .btn-ghost{border-color:var(--line);color:var(--cream)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} /* ── возрастной фильтр ───────────────────────────────── */ .gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.25rem; background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px)} .gate[hidden]{display:none} .gate-card{width:min(480px,100%);background:var(--surface);border:1px solid var(--line); border-radius:20px;padding:2.4rem 1.9rem;text-align:center; box-shadow:0 40px 90px -30px #000} .gate-card .mark{width:56px;height:56px;margin:0 auto 1.3rem;border-radius:16px; display:grid;place-items:center;font-size:1.5rem;font-weight:700;font-family:var(--body); background:linear-gradient(140deg,var(--gold),var(--gold-deep));color:var(--bg)} .gate-card h2{margin-bottom:.8rem} .gate-card p{font-size:.93rem;color:var(--muted);margin-bottom:1.7rem} .gate-actions{display:grid;gap:.6rem} /* ── общие блоки ─────────────────────────────────────── */ section{padding:clamp(3.2rem,7vw,5.6rem) 0} .hero{padding-top:clamp(3rem,8vw,6rem);text-align:center} .hero p.lead{font-size:clamp(1rem,1.6vw,1.16rem);color:var(--muted); max-width:640px;margin:1.2rem auto 2rem} .hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap} .badges{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.6rem} .badge{border:1px solid var(--line);border-radius:999px;padding:.42rem 1rem;font-size:.78rem; color:var(--muted);background:color-mix(in srgb,var(--surface) 60%,transparent)} .badge::before{content:"✓";color:var(--gold);margin-inline-end:.45rem;font-weight:600} .sec-head{max-width:640px;margin-bottom:2.6rem} .sec-head.center{margin-inline:auto;text-align:center} .sec-head p{color:var(--muted);margin-top:.8rem} .grid{display:grid;gap:1.1rem} .g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem; transition:border-color .25s,transform .25s} .card:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))} .card h3{margin-bottom:.6rem} .card p{color:var(--muted);font-size:.92rem;margin:0} .step-n{font-family:var(--display);font-size:2.2rem;color:var(--gold);opacity:.55; line-height:1;margin-bottom:.7rem} /* ── карточки игр ────────────────────────────────────── */ .game-card{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line); background:var(--surface);display:flex;flex-direction:column; transition:transform .3s,border-color .3s,box-shadow .3s} .game-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--hue) 55%,var(--line)); box-shadow:0 24px 50px -26px color-mix(in srgb,var(--hue) 60%,transparent)} .game-art{aspect-ratio:16/10;display:grid;place-items:center;gap:.2rem;position:relative; background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--hue) 32%,var(--surface)),var(--surface))} .game-art .row{display:flex;gap:.55rem;font-size:clamp(1.6rem,4.5vw,2.1rem);filter:saturate(1.05)} .game-body{padding:1.15rem 1.25rem 1.35rem} .game-body h3{font-size:1.16rem;margin-bottom:.3rem} .game-meta{display:flex;align-items:center;gap:.55rem;font-size:.76rem;color:var(--muted)} .dot{width:5px;height:5px;border-radius:50%;background:var(--hue);flex:none} /* ── список ссылок помощи ────────────────────────────── */ .orgs{display:grid;gap:.7rem;margin:1.6rem 0} .org{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;padding:.95rem 1.15rem; border:1px solid var(--line);border-radius:12px;background:var(--surface)} .org a{color:var(--gold);font-weight:500;border-bottom:1px solid transparent} .org a:hover{border-color:var(--gold)} .org span{font-size:.85rem;color:var(--muted)} /* ── подвал ──────────────────────────────────────────── */ footer{border-top:1px solid var(--line);background:var(--bg-soft); padding:3.2rem 0 2.4rem;margin-top:2rem} .foot-grid{display:grid;gap:2rem;grid-template-columns:1.6fr repeat(3,1fr);margin-bottom:2.4rem} @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} .foot-grid h4{font-family:var(--body);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);margin:0 0 .9rem;font-weight:500} .foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .foot-grid a{font-size:.87rem;color:var(--muted)} .foot-grid a:hover{color:var(--cream)} .disclaimer{border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.3rem; font-size:.8rem;line-height:1.7;color:var(--muted);background:var(--surface)} .disclaimer strong{color:var(--cream);font-weight:500} .copy{margin-top:1.5rem;font-size:.78rem;color:var(--muted);display:flex; justify-content:space-between;gap:1rem;flex-wrap:wrap} .age-chip{border:1px solid var(--gold);color:var(--gold);border-radius:999px; padding:.1rem .55rem;font-size:.72rem;font-weight:600} /* ── текстовые страницы ──────────────────────────────── */ .prose h2{margin:2.4rem 0 .8rem} .prose h2:first-of-type{margin-top:0} .prose p{color:var(--muted)} .page-head{padding:clamp(2.6rem,6vw,4rem) 0 1rem} /* ── FAQ ─────────────────────────────────────────────── */ details.faq{border:1px solid var(--line);border-radius:12px;background:var(--surface); padding:1.05rem 1.25rem;margin-bottom:.7rem} details.faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex; justify-content:space-between;gap:1rem;align-items:center} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1} details.faq[open] summary::after{content:"−"} details.faq p{margin:.9rem 0 0;color:var(--muted);font-size:.92rem} /* ── игровой автомат ─────────────────────────────────── */ .machine{max-width:760px;margin-inline:auto} .hud{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.2rem} .hud .pill{border:1px solid var(--line);background:var(--surface);border-radius:12px; padding:.6rem 1.1rem;text-align:center;min-width:104px} .hud .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .hud .v{font-family:var(--display);font-size:1.32rem;color:var(--gold);font-weight:600} .reels{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;padding:.85rem; border-radius:18px;border:1px solid var(--line); background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 12%,var(--surface)),var(--surface))} .reel{overflow:hidden;height:min(31vw,190px);border-radius:12px; background:color-mix(in srgb,var(--bg) 70%,var(--surface));position:relative} .reel .strip{display:flex;flex-direction:column;will-change:transform} .reel .cell{height:calc(min(31vw,190px)/3);display:grid;place-items:center; font-size:clamp(1.5rem,5.6vw,2.3rem);user-select:none} .reel .cell.hit{background:color-mix(in srgb,var(--hue) 26%,transparent);border-radius:8px; animation:pop .5s ease} @keyframes pop{0%{transform:scale(.86)}60%{transform:scale(1.1)}100%{transform:scale(1)}} .controls{display:flex;gap:.7rem;align-items:center;justify-content:center; margin-top:1.2rem;flex-wrap:wrap} .bet{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line); border-radius:999px;background:var(--surface);padding:.3rem} .bet button{width:34px;height:34px;border-radius:50%;border:0;background:none; color:var(--gold);font-size:1.15rem;cursor:pointer;line-height:1} .bet .val{min-width:74px;text-align:center;font-weight:500;font-size:.95rem} .msg{min-height:1.6em;text-align:center;margin-top:1rem;font-size:1rem;color:var(--gold)} .msg.win{font-family:var(--display);font-size:1.5rem;font-weight:600} .paytable{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem} .paytable th,.paytable td{padding:.6rem .5rem;border-bottom:1px solid var(--line);text-align:center} .paytable th{color:var(--muted);font-weight:500;font-size:.74rem;letter-spacing:.1em; text-transform:uppercase} .paytable td:first-child{font-size:1.35rem} .toast{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,120%);z-index:60; background:var(--surface);border:1px solid var(--gold);border-radius:999px; padding:.7rem 1.4rem;font-size:.9rem;transition:transform .35s;box-shadow:0 18px 40px -18px #000} .toast.show{transform:translate(-50%,0)} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}