/* SpinBetter UZ — тема «Чернила и киноварь» */
:root{
  --ink:#15171f;--ink2:#20232e;--ink3:#2c3040;
  --paper:#f6efe2;--paper2:#efe4d0;--card:#fffaf1;--line:#e2d4bb;
  --red:#e2432a;--red-d:#b9301b;--ochre:#d69a2d;--teal:#1f6f78;--teal-l:#d7ebe9;
  --text:#1d1b18;--muted:#6b6255;
  --r:18px;--hd:'Wix Madefor Display',system-ui,sans-serif;--bd:'Mulish',system-ui,sans-serif;
  --hh:64px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h,106px) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.62 var(--bd);color:var(--text);background:var(--paper);
  background-image:radial-gradient(rgba(21,23,31,.07) 1px,transparent 1.2px);background-size:22px 22px;overflow-x:hidden;padding-top:var(--hdr-h,106px)}
img,svg{max-width:100%}
a{color:var(--red-d);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--red)}
h1,h2,h3{font-family:var(--hd);line-height:1.15;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.6vw,52px);font-weight:800}
h2{font-size:clamp(25px,3.2vw,36px);font-weight:800;position:relative;padding-left:20px}
h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:7px;border-radius:4px;background:linear-gradient(var(--red),var(--ochre))}
h3{font-size:19px;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.ico{width:26px;height:26px;flex:none}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--ink);color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.22)}
.hdr-in{display:flex;align-items:center;gap:22px;height:var(--hh)}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo img{width:128px;height:28px;object-fit:contain;display:block}
.flag{width:26px;height:17px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.nav{display:flex;gap:4px;flex:1;justify-content:center}
.nav a{color:#d9d4cb;text-decoration:none;font:600 15px var(--bd);padding:8px 11px;border-radius:10px;white-space:nowrap}
.nav a:hover{color:#fff;background:var(--ink3)}
.nav a.on{color:#fff;background:var(--red)}
.hdr-act{display:flex;gap:8px}
.burger{display:none;width:44px;height:44px;border:0;background:var(--ink3);border-radius:12px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{max-height:calc(100vh - var(--hdr-h,106px));overflow-y:auto;background:var(--ink2);padding:12px 20px 18px;border-top:1px solid var(--ink3)}
.mnav nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.mnav nav a{color:#eee;text-decoration:none;padding:11px 12px;border-radius:10px;background:var(--ink3);font-weight:600}
.mnav nav a.on{background:var(--red)}
.mnav-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ribbon{background:var(--ink2);border-top:1px solid rgba(255,255,255,.06)}
.ribbon-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.ribbon-in::-webkit-scrollbar{display:none}
.ribbon a{color:#bdb6aa;text-decoration:none;font:600 14px var(--bd);padding:6px 12px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.ribbon a:hover{color:#fff;border-color:var(--ink3)}
.ribbon a.on{color:var(--ink);background:var(--ochre)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 16px var(--bd);text-decoration:none;border-radius:14px;padding:14px 22px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;line-height:1.2;text-align:center}
.btn .bi{width:20px;height:20px}
.btn:active{transform:translateY(1px)}
.btn-main{background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-d),0 10px 22px rgba(226,67,42,.3)}
.btn-main:hover{background:#ec5236;color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:#4a4f63}
.btn-ghost:hover{border-color:#fff;color:#fff}
.btn-soft{background:var(--ink);color:#fff}
.btn-soft:hover{background:var(--ink3);color:#fff}
.btn-soft:disabled{opacity:.45;cursor:not-allowed}
.btn-sm{padding:9px 15px;font-size:14px;border-radius:11px;box-shadow:none}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 6px}

/* hero */
.hero{padding:48px 0 34px;background:linear-gradient(180deg,var(--paper2),transparent)}
.hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.lead{font-size:19px;color:#3b362f;max-width:640px}
.hero .btn-line{border-color:var(--ink)}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.hero-card{position:relative;height:300px}
.tk{position:absolute;inset:10px 24px 24px 10px;background:var(--ink);color:#fff;border-radius:22px;padding:28px 26px;display:flex;flex-direction:column;justify-content:center;gap:4px;z-index:2;
  -webkit-mask:radial-gradient(circle 14px at 0 62%,transparent 98%,#000) ,radial-gradient(circle 14px at 100% 62%,transparent 98%,#000);
  -webkit-mask-composite:source-in;mask:radial-gradient(circle 14px at 0 62%,transparent 98%,#000) ,radial-gradient(circle 14px at 100% 62%,transparent 98%,#000);mask-composite:intersect;
  background-image:linear-gradient(135deg,var(--ink) 55%,#2a1a17)}
.tk::after{content:"";position:absolute;left:22px;right:22px;top:62%;border-top:2px dashed rgba(255,255,255,.22)}
.tk-back{inset:34px 0 0 34px;background:var(--red);z-index:1;transform:rotate(4deg);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px)}
.tk-back::after{display:none}
.tk-h{font-size:15px;color:#cfc7b8}
.tk-big{font:800 clamp(34px,4vw,48px)/1.05 var(--hd);color:var(--ochre)}
.tk-sub{font-size:18px;font-weight:600}
.tk-foot{font-size:14px;color:#cfc7b8;margin-top:34px}
.tk-stamp{position:absolute;right:20px;top:18px;font:800 13px var(--hd);color:var(--red);border:2px solid var(--red);border-radius:8px;padding:4px 8px;transform:rotate(9deg);font-style:normal}

/* sections */
.sec{padding:46px 0}
.sec:nth-of-type(even){background:rgba(255,250,241,.65);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec .wrap>p{max-width:860px}
.tbl-wrap{overflow-x:auto;margin:18px 0 22px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.tbl{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
.tbl th{background:var(--ink);color:#fff;text-align:left;font:700 15px var(--hd);padding:13px 16px}
.tbl td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:#fbf3e4}
.tbl td:first-child{font-weight:600}
.tiles{display:grid;gap:16px;margin:20px 0}
.t3{grid-template-columns:repeat(3,1fr)}.t4{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;position:relative;overflow:hidden}
.tile .ico{color:var(--red);width:30px;height:30px;margin-bottom:8px}
.tile h3{margin-bottom:.3em}
.tile p{margin:0;color:var(--muted);font-size:15.5px}
.tile::after{content:"";position:absolute;right:-26px;top:-26px;width:70px;height:70px;border-radius:50%;background:var(--paper2)}
.steps{counter-reset:s;list-style:none;padding:0;margin:18px 0;display:grid;gap:10px;max-width:860px}
.steps li{counter-increment:s;position:relative;padding:12px 16px 12px 62px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.steps li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--ochre);font:800 17px/34px var(--hd);text-align:center}
.ticks{list-style:none;padding:0;margin:16px 0;display:grid;gap:9px;max-width:860px}
.ticks li{position:relative;padding-left:34px}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:6px;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center/16px no-repeat}
.note{display:flex;gap:14px;align-items:flex-start;background:var(--teal-l);border-left:5px solid var(--teal);border-radius:12px;padding:14px 18px;margin:18px 0;max-width:860px}
.note .ico{color:var(--teal)}
.note p{margin:0}

/* game cards */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.gcard{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .18s,box-shadow .18s}
.gcard:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(21,23,31,.15);color:var(--text)}
.gart{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:130px;padding:16px;color:#fff;background:linear-gradient(140deg,var(--ga),var(--gb));position:relative}
.gart::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 8px,transparent 8px 16px)}
.gi{width:40px;height:40px;position:absolute;right:16px;top:16px;opacity:.9}
.gart b{font:800 20px/1.15 var(--hd);position:relative}
.gmeta{display:flex;flex-direction:column;padding:12px 16px 4px}
.gmeta small{color:var(--muted);font-size:13px}
.gmeta em{font-style:normal;font-weight:600}
.gplay{margin:10px 16px 16px;align-self:flex-start;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:7px 16px;border-radius:9px}
.gcard:hover .gplay{background:var(--red)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.cat{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--ink);color:#fff;text-decoration:none;border-radius:var(--r);transition:transform .15s,background .15s}
.cat:hover{background:var(--ink3);color:#fff;transform:translateY(-3px)}
.cat .ico{color:var(--ochre);width:32px;height:32px}
.cat b{font:700 18px var(--hd)}
.cat span{color:#c6bfb2;font-size:14.5px;line-height:1.4}

/* faq */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px}
.faq summary{cursor:pointer;padding:16px 50px 16px 18px;font:700 17px var(--hd);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;text-align:center;line-height:26px;font-weight:700}
.faq details[open] summary::after{content:"−";background:var(--red)}
.faq details div{padding:0 18px 14px}
.faq details p{margin:0}

/* misc blocks */
.mails{list-style:none;padding:0;display:grid;gap:10px;max-width:760px}
.mails li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.mails span{flex:1 1 160px;color:var(--muted);font-size:15px}
.mails code{font:600 15px var(--bd);color:var(--ink)}
.copy{background:var(--ink);color:#fff;border:0;border-radius:9px;padding:7px 13px;font:600 14px var(--bd);cursor:pointer}
.copy.done{background:var(--teal)}
.promo{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:18px 0}
.promo-code{background:var(--ink);color:#fff;border-radius:16px;padding:14px 28px;border:2px dashed var(--ochre)}
.promo-code small{display:block;color:#c6bfb2;font-size:13px}
.promo-code b{font:800 34px var(--hd);letter-spacing:.08em;color:var(--ochre)}
.promo .copy{padding:14px 22px;font-size:16px;border-radius:14px}
.mirrors{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}
.mir{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;border-radius:14px;padding:16px;transition:background .15s,transform .15s}
.mir:hover{background:var(--red);color:#fff;transform:translateY(-2px)}
.mir b{font:700 17px var(--hd);flex:1}
.mir small{color:#c6bfb2;font-size:13px}
.mir .dot{width:10px;height:10px;border-radius:50%;background:#3ed17a;box-shadow:0 0 0 4px rgba(62,209,122,.2)}
.tabs{max-width:860px;margin:16px 0}
.tab-btns{display:flex;gap:6px;flex-wrap:wrap}
.tab-btns button{font:700 15px var(--bd);border:2px solid var(--ink);background:transparent;border-radius:11px;padding:9px 16px;cursor:pointer;color:var(--ink)}
.tab-btns button.on{background:var(--ink);color:#fff}
.pw{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.pw input{width:100%;font:500 17px var(--bd);padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:#fff}
.pw input:focus{outline:none;border-color:var(--teal)}
.pw-bar{height:10px;border-radius:6px;background:var(--paper2);margin:12px 0 8px;overflow:hidden}
.pw-bar i{display:block;height:100%;width:0;background:var(--red);transition:.25s}
.pw-msg{margin:0;font-size:15px;color:var(--muted)}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--ink);color:#fff;border-radius:22px;padding:24px;margin:18px 0}
.calc .btns{grid-column:1/-1;margin:0}
.seg{display:flex;gap:6px;margin-bottom:18px}
.seg button{flex:1;border:0;border-radius:10px;padding:10px;font:700 15px var(--bd);background:var(--ink3);color:#fff;cursor:pointer}
.seg button.on{background:var(--ochre);color:var(--ink)}
.rng span{display:block;margin-bottom:8px}
.rng input{width:100%;accent-color:var(--red)}
.calc-out{display:grid;gap:10px}
.calc-out div{background:var(--ink3);border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.calc-out small{color:#c6bfb2}
.calc-out b{font:800 18px var(--hd);color:var(--ochre);text-align:right}

/* games: common */
.game{background:var(--ink);color:#fff;border-radius:22px;padding:24px;margin:18px 0;max-width:760px;text-align:center;position:relative}
.game-msg{min-height:1.6em;margin:14px 0;color:#e6dfd2}
.game .btn-soft{background:var(--red)}
.game .btn-soft:hover{background:#ec5236}
.game .btn-line{color:#fff;border-color:#fff}
.game .btns{justify-content:center}
/* penalty */
.pen-score{display:flex;justify-content:center;align-items:center;gap:12px;font-weight:600;margin-bottom:14px}
.pen-score b{font:800 30px var(--hd);color:var(--ochre)}
.pen-goal{position:relative;width:100%;max-width:520px;aspect-ratio:2.3;margin:0 auto;border:8px solid #fff;border-bottom:0;border-radius:6px 6px 0 0;background:#1d4b2c}
.pen-net{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:16px 16px}
.pen-zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);z-index:3}
.pz{border:1px dashed rgba(255,255,255,.25);background:transparent;cursor:pointer}
.pz:hover{background:rgba(214,154,45,.25)}
.pen-keeper{position:absolute;bottom:0;left:50%;width:22%;height:70%;transform:translateX(-50%);transition:left .35s,bottom .35s,transform .35s;z-index:2}
.pen-keeper span{position:absolute;inset:0;background:var(--ochre);border-radius:40% 40% 8px 8px;box-shadow:inset 0 -18px 0 rgba(0,0,0,.2)}
.pen-ball{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#bbb);left:50%;bottom:-40px;transform:translateX(-50%);transition:left .35s,bottom .35s;z-index:4;opacity:0}
.pen-shots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.pen-shots i{width:16px;height:16px;border-radius:50%;background:var(--ink3)}
.pen-shots i.g{background:#3ed17a}.pen-shots i.m{background:var(--red)}
/* thimbles */
.th-table{position:relative;height:235px;max-width:480px;margin:0 auto;background:radial-gradient(ellipse at center 80%,#2b5e3e,#173321);border-radius:18px}
.th-slot{position:absolute;bottom:22px;width:30%;height:150px;left:calc(var(--x) * 33.33% + 1.66%);transition:left .32s ease-in-out}
.th-cup{position:absolute;left:50%;bottom:0;width:96px;max-width:100%;height:110px;transform:translateX(-50%);border:0;cursor:pointer;z-index:2;background:linear-gradient(90deg,#9d2a17,var(--red) 40%,#f0735d 55%,#9d2a17);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:6px;transition:transform .3s}
.th-cup::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:rgba(0,0,0,.25)}
.th-slot.up .th-cup{transform:translateX(-50%) translateY(-62px)}
.th-ball{position:absolute;left:50%;bottom:4px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#d8d2c4);z-index:1;display:none}
.th-slot.has.reveal .th-ball{display:block}
.th-table.busy .th-cup{cursor:default}
/* memory */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:440px;margin:0 auto}
.mem{aspect-ratio:1;border:0;border-radius:14px;cursor:pointer;font-size:32px;background:var(--ink3);color:transparent;transition:background .2s,transform .2s;position:relative}
.mem::before{content:"S";position:absolute;inset:0;display:grid;place-items:center;font:800 26px var(--hd);color:var(--red)}
.mem.open,.mem.done{background:var(--paper);color:inherit;transform:rotateY(0)}
.mem.open::before,.mem.done::before{display:none}
.mem.done{background:var(--teal-l)}
/* lock */
.safe{display:flex;justify-content:center}
.safe-door{background:linear-gradient(145deg,#4a4f63,#2c3040);border-radius:20px;padding:22px;border:6px solid #5d6378;transition:transform .5s}
.safe-door.open{transform:perspective(600px) rotateY(-28deg)}
.dials{display:flex;gap:14px}
.dial{display:flex;flex-direction:column;align-items:center;gap:6px}
.dial button{width:44px;height:36px;border:0;border-radius:9px;background:var(--ink);color:#fff;font:700 20px var(--bd);cursor:pointer}
.dial b{width:56px;height:62px;display:grid;place-items:center;background:#0d0f14;color:var(--ochre);font:800 34px var(--hd);border-radius:12px}
.dial small{font-weight:700;color:#e6dfd2;min-height:1.4em}
/* keno */
.kn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:420px;margin:0 auto}
.kn{aspect-ratio:1.3;border:0;border-radius:10px;background:var(--ink3);color:#fff;font:700 17px var(--bd);cursor:pointer}
.kn.on{background:var(--ochre);color:var(--ink)}
.kn.hit{background:#3ed17a;color:var(--ink)}
.kn.drawn{box-shadow:inset 0 0 0 3px var(--red)}
.kn-drawn{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:44px;margin-top:14px}
.kn-drawn span{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#d6cdbd);color:var(--ink);font:800 16px/40px var(--hd);animation:pop .3s}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
/* roulette */
.rl-wrap{position:relative;width:220px;height:220px;margin:0 auto}
.rl-wheel{width:100%;height:100%;border-radius:50%;border:8px solid var(--ochre);transition:transform 3.2s cubic-bezier(.17,.67,.2,1);display:grid;place-items:center}
.rl-hub{width:84px;height:84px;border-radius:50%;background:var(--ink);display:grid;place-items:center;font:800 28px var(--hd);color:#fff;border:4px solid var(--ochre)}
.rl-pin{position:absolute;top:-10px;left:50%;transform:translateX(-50%);border:12px solid transparent;border-top:20px solid #fff;border-bottom:0}
.rl-bets,.dc-bets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.rl-bets button,.dc-bets button{border:2px solid #4a4f63;background:var(--ink3);color:#fff;border-radius:10px;padding:9px 14px;font:700 15px var(--bd);cursor:pointer}
.rl-bets button:hover,.dc-bets button:hover{border-color:#fff}
.rl-bets .rb-red{background:#c0301d}.rl-bets .rb-black{background:#0d0f14}.rl-bets .rb-zero{background:#1d7a44}
.rl-bets button:disabled,.dc-bets button:disabled{opacity:.5;cursor:default}
/* dice */
.dc-row{display:flex;justify-content:center;gap:18px}
.die{width:84px;height:84px;background:var(--paper);border-radius:16px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:10px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15)}
.die i{width:14px;height:14px;border-radius:50%;background:var(--ink);place-self:center}
.die.roll{animation:roll .5s}
@keyframes roll{0%{transform:rotate(0)}50%{transform:rotate(200deg) scale(.85)}100%{transform:rotate(360deg)}}
/* darts */
.dt-board{position:relative;width:240px;height:240px;margin:0 auto}
.dt-board svg{width:100%;height:100%}
.dt-cross{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid #fff;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.dt-cross::before,.dt-cross::after{content:"";position:absolute;background:#fff;left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px}
.dt-cross::after{top:50%;left:-6px;right:-6px;height:2px;width:auto;margin:-1px 0 0}
.dt-hit{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.dt-score{display:flex;justify-content:center;gap:24px;margin-top:12px;font-weight:600}
.dt-score b{color:var(--ochre)}
/* mines */
.mn-head{display:flex;justify-content:center;gap:24px;margin-bottom:12px;font-weight:600}
.mn-head b{color:var(--ochre)}
.mn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-width:340px;margin:0 auto}
.mn{aspect-ratio:1;border:0;border-radius:10px;background:var(--ink3);cursor:pointer;font-size:22px;color:#fff}
.mn:hover:not(:disabled){background:#3a3f53}
.mn.safe{background:var(--teal)}
.mn.boom{background:var(--red)}
.mn:disabled{cursor:default}

/* modal, sticky, totop */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,11,15,.66);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mbox{position:relative;max-width:440px;width:100%;background:var(--card);border-radius:24px;padding:34px 26px 26px;text-align:center;border-top:8px solid var(--red);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.mbox-promo{background:var(--ink);color:#fff;border-top-color:var(--ochre)}
.mbox h2{padding:0;font-size:26px}
.mbox h2::before{display:none}
.mbox p{color:inherit;opacity:.9}
.mres{font-weight:700;color:var(--teal)!important;opacity:1!important}
.mbox-promo .mres{color:var(--ochre)!important}
.mico{width:54px;height:54px;color:var(--red);margin-bottom:8px}
.mbox-promo .mico{color:var(--ochre)}
.mbox .btn{width:100%}
.x{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:10px;background:rgba(0,0,0,.08);font-size:24px;line-height:1;cursor:pointer;color:inherit}
.mbox-promo .x{background:rgba(255,255,255,.12)}
.sticky{display:none}
.totop{position:fixed;right:18px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:14px;border:0;background:var(--ink);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.totop:hover{background:var(--red)}

/* footer */
.ftr{background:var(--ink);color:#c6bfb2;padding:34px 0 40px;margin-top:20px}
.ftr-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-bottom:14px}
.ftr nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.ftr nav a{color:#e6dfd2;text-decoration:none;font-weight:600}
.ftr nav a:hover{color:var(--ochre)}
.ftr-lic{font-size:14px;margin:0}
.ftr-lic b{color:var(--red);margin-right:6px}

@media (max-width:1100px){
  .nav,.hdr-act{display:none}
  .burger{display:flex;margin-left:auto}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-card{height:240px;max-width:420px;width:100%}
  .t4,.cats{grid-template-columns:repeat(2,1fr)}
  .gcards{grid-template-columns:repeat(2,1fr)}
  .mirrors{grid-template-columns:repeat(2,1fr)}
  .calc{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .hero{padding:28px 0 20px}
  .lead{font-size:17px}
  .btns .btn{flex:1 1 100%}
  .t3{grid-template-columns:1fr}
  .gcards{grid-template-columns:1fr 1fr;gap:10px}
  .gart{height:110px;padding:12px}
  .gart b{font-size:16px}
  .gi{width:30px;height:30px;right:10px;top:10px}
  .gmeta{padding:10px 12px 2px}
  .gmeta em{font-size:14px}
  .gplay{margin:8px 12px 12px}
  .sec{padding:34px 0}
  .game{padding:18px 12px}
  .tk{padding:22px 20px}
  .sticky{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:55;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-weight:600;font-size:14.5px}
  .sticky span{flex:1}
  .sticky .x{position:static;background:rgba(255,255,255,.12);color:#fff;width:34px;height:34px;flex:none}
  .sticky.gone{display:none}
  .totop{bottom:84px;right:12px;width:44px;height:44px}
  body.no-sticky .totop{bottom:20px}
  .dial b{width:48px;height:56px;font-size:30px}
  .rl-wrap{width:190px;height:190px}
}
.mir b,.mir small{white-space:nowrap}
@media (max-width:640px){.mir{padding:14px 12px;gap:8px}.mir b{font-size:15.5px}.mir small{font-size:12px}.hero-card{height:220px}.tk-foot{margin-top:24px}}

/* race */
.rc-field{display:grid;gap:8px;max-width:620px;margin:0 auto}
.rc-lane{display:flex;align-items:center;gap:10px}
.rc-pick{flex:none;width:112px;border:2px solid #4a4f63;background:var(--ink3);color:#fff;border-radius:10px;padding:8px 6px;font:700 14px var(--bd);cursor:pointer}
.rc-pick.on{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
.rc-track{position:relative;flex:1;height:42px;border-radius:10px;background:repeating-linear-gradient(90deg,#2b5e3e 0 28px,#245236 28px 56px);border-right:6px solid #fff}
.rc-horse{position:absolute;left:0;top:50%;transform:translateY(-50%) scaleX(-1);font-size:28px;line-height:1;transition:left .16s linear}
/* baccarat */
.bc-table{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;margin:0 auto;background:radial-gradient(ellipse at center,#2b5e3e,#173321);border-radius:18px;padding:16px}
.bc-hand small{display:block;color:#e6dfd2;font-weight:700;margin-bottom:8px}
.bc-cards{display:flex;justify-content:center;gap:8px;min-height:82px}
.bc-card{width:56px;height:80px;border-radius:9px;background:#fff;color:var(--ink);display:grid;place-items:center;font:800 19px var(--hd);box-shadow:0 4px 0 rgba(0,0,0,.25);animation:pop .3s both}
.bc-card.red{color:#c0301d}
.bc-hand b{display:block;margin-top:8px;font:800 26px var(--hd);color:var(--ochre)}
@media (max-width:640px){.rc-pick{width:92px;font-size:13px}.bc-card{width:46px;height:68px;font-size:16px}}
.bc-card.back{background:repeating-linear-gradient(45deg,var(--red) 0 6px,var(--red-d) 6px 12px);border:3px solid #fff}
.ribbon-in{scroll-behavior:auto;overscroll-behavior-x:contain}