/* Fortuna Yoli v2 — mobile-first, system fonts, no framework */
:root{--bg:#f7f5fa;--card:#fff;--ink:#1d1726;--muted:#5f566b;--line:#e6e0ee;--brand:#2b0d48;--brand2:#3d1663;--gold:#f2b822;--gold-d:#c48d00;--ok:#127a3b;--no:#b42318;--unk:#8a6d00;--radius:14px;--shadow:0 1px 2px rgba(30,10,50,.06),0 6px 20px rgba(30,10,50,.06)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand2)}
a:hover{color:var(--gold-d)}
h1,h2,h3{line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.6rem,5vw,2.4rem)}
h2{font-size:clamp(1.3rem,3.6vw,1.75rem);margin-top:1.6em}
h3{font-size:1.1rem;margin-top:1.2em}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--brand);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.hdr .wrap{display:flex;align-items:center;gap:12px;min-height:58px}
.logo{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.02em}
.logo img{width:34px;height:34px}
.logo b{color:var(--gold)}
.nav{display:none;gap:4px;margin-left:12px}
.nav a{color:#e9defa;text-decoration:none;padding:8px 10px;border-radius:8px;font-size:.92rem}
.nav a:hover,.nav a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.lang a,.lang span{display:inline-block;padding:4px 8px;border-radius:6px;font-size:.8rem;font-weight:700;text-decoration:none;color:#cdbbe6}
.lang span{background:var(--gold);color:var(--brand)}
.age{border:2px solid var(--gold);color:var(--gold);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.burger{background:none;border:0;color:#fff;font-size:1.5rem;padding:4px 8px;cursor:pointer}
.mnav{display:none;background:var(--brand2);padding:8px 16px 14px}
.mnav.open{display:block}
.mnav a{display:block;color:#fff;text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
@media(min-width:900px){.nav{display:flex}.burger,.mnav{display:none!important}}
/* hero */
.hero{background:linear-gradient(160deg,var(--brand) 0%,#4a1a78 100%);color:#fff;padding:28px 0 34px}
.hero p{color:#e6dcf5}
.hero a{color:var(--gold)}
.crumbs{font-size:.82rem;color:#cdbbe6;margin-bottom:10px}
.crumbs a{color:#cdbbe6}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.85rem;color:#d6c8ea;margin-top:12px}
.stamp{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:99px;font-size:.82rem}
.stamp.pending::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.stamp.fresh::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ddc84}
.hero-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:16px;margin-top:18px;box-shadow:var(--shadow);display:grid;gap:12px}
.hero-card .logo-box{background:#1b1424;border-radius:10px;display:grid;place-items:center;height:76px}
@media(min-width:900px){.hero .wrap.split{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}.hero-card{margin-top:0}}
/* buttons */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:10px 18px;border-radius:10px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem}
.btn-gold{background:var(--gold);color:#2b0d48}.btn-gold:hover{background:#ffcb3d;color:#2b0d48}
.btn-ghost{background:transparent;border:2px solid var(--line);color:var(--brand2)}
.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.ad{font-size:.72rem;color:var(--muted)}
/* layout */
main{padding:8px 0 40px}
.grid-main{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}.grid-main>*{min-width:0}
@media(min-width:1000px){.grid-main{grid-template-columns:240px minmax(0,1fr)}.toc{position:sticky;top:76px;align-self:start}}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-size:.92rem}
.toc summary{font-weight:700;cursor:pointer}
.toc ol{margin:8px 0 0;padding-left:18px}.toc li{margin:4px 0}
.toc a{text-decoration:none}
section.box,.box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:18px 0;box-shadow:var(--shadow)}
.box>h2:first-child,.box>h3:first-child{margin-top:0}
.note{background:#fff8e1;border:1px solid #f3dc8f;border-radius:10px;padding:12px 14px;font-size:.94rem}
.warn{background:#fdecec;border:1px solid #f5c2c0;border-radius:10px;padding:12px 14px;font-size:.94rem}
.ph{outline:2px dashed #d08a00;outline-offset:2px;background:repeating-linear-gradient(45deg,#fffaf0,#fffaf0 10px,#fff3d6 10px,#fff3d6 20px)}
.ph-tag{display:inline-block;background:#d08a00;color:#fff;font-size:.7rem;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.03em;text-transform:uppercase}
/* tables */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:#fff}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
th{background:#f1ecf7;font-weight:700;position:sticky;top:0}
td:first-child,th:first-child{position:sticky;left:0;background:inherit;z-index:1}
tbody tr:nth-child(even){background:#fbfafd}
.v-ok{color:var(--ok);font-weight:700}.v-no{color:var(--no);font-weight:700}.v-unk{color:var(--unk);font-style:italic}
/* casino cards / picker */
.picker{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-top:-22px;position:relative}
.picker fieldset{border:0;margin:0 0 10px;padding:0}
.picker legend{font-weight:700;font-size:.9rem;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px;font-size:.88rem;cursor:pointer;min-height:38px}
.chip[aria-pressed=true]{background:var(--brand2);border-color:var(--brand2);color:#fff}
.picker select{min-height:40px;border:1.5px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.92rem;background:#fff}
.picker .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.picker label.sw{display:flex;gap:8px;align-items:center;font-size:.88rem}
.picker .res{font-size:.88rem;color:var(--muted);margin-top:6px}
.cards{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.cc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:grid;grid-template-columns:96px 1fr;gap:12px;box-shadow:var(--shadow)}
.cc[hidden]{display:none}
.cc .lg{background:#1b1424;border-radius:10px;display:grid;place-items:center;height:72px;padding:6px}
.cc .lg img{max-height:60px;width:auto}
.cc h3{margin:0;font-size:1.1rem}
.cc .rk{font-size:.75rem;color:var(--muted);font-weight:700}
.cc .bn{font-weight:700;color:var(--brand2);margin:4px 0}
.cc .bn.unk{color:var(--unk);font-weight:600;font-style:italic}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.tag{font-size:.72rem;border-radius:6px;padding:2px 6px;background:#eee8f5;color:#4a3a5c}
.tag.ok{background:#e3f5ea;color:var(--ok)}.tag.unk{background:#fff4d1;color:var(--unk)}
.cc .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.cc .acts .btn{flex:1;min-width:130px}
.empty{border:2px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;color:var(--muted);background:#fff}
/* calculator */
.calc{display:grid;gap:12px}
@media(min-width:760px){.calc{grid-template-columns:1fr 1fr}}
.calc label{display:grid;gap:4px;font-size:.88rem;font-weight:600}
.calc input,.calc select{min-height:44px;border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;font-size:1rem;width:100%;background:#fff}
.calc-out{background:#1b1424;color:#fff;border-radius:12px;padding:16px;display:grid;gap:8px}
.calc-out div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:6px}
.calc-out b{color:var(--gold);font-variant-numeric:tabular-nums}
.calc-out .big b{font-size:1.25rem}
/* steps */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.tabs button{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;font-weight:600;cursor:pointer;min-height:40px}
.tabs button[aria-selected=true]{background:var(--brand2);color:#fff;border-color:var(--brand2)}
.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.steps>li{counter-increment:s;display:grid;gap:10px;grid-template-columns:36px 1fr}
.steps>li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--brand);font-weight:800;display:grid;place-items:center}
.shot{margin:6px 0 0;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.shot.ph{display:grid;place-items:center;min-height:150px;text-align:center;padding:14px;color:#7a5a00;font-size:.85rem}
.shot figcaption{font-size:.78rem;color:var(--muted);padding:6px 8px;background:#faf8fc}
/* faq */
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--brand2)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.6em 0 0}
/* author */
.author{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start}
.author .av{width:72px;height:72px;border-radius:50%;background:#e9e2f2;display:grid;place-items:center;font-size:1.6rem;color:#8c7ba3;overflow:hidden}
/* demo */
.demo{aspect-ratio:16/10;border-radius:12px;background:#1b1424;color:#cdbbe6;display:grid;place-items:center;text-align:center;padding:16px}
.demo iframe{width:100%;height:100%;border:0;border-radius:12px}
/* reviews */
.rv-form{display:grid;gap:10px;margin-top:12px}
.rv-form input,.rv-form textarea,.rv-form select{border:1.5px solid var(--line);border-radius:8px;padding:10px;font:inherit;width:100%}
.rv-form textarea{min-height:110px}
/* rg */
.rg{background:#1b1424;color:#e9e2f2;border-radius:var(--radius);padding:18px;margin:18px 0;display:grid;grid-template-columns:48px 1fr;gap:14px}
.rg a{color:var(--gold)}
.rg .age{width:44px;height:44px;font-size:.9rem}
/* footer */
.ftr{background:#140a20;color:#b9a9cf;padding:28px 0 90px;font-size:.88rem}
.ftr a{color:#e2d6f2}
.ftr .cols{display:grid;gap:18px}
@media(min-width:760px){.ftr .cols{grid-template-columns:2fr 1fr 1fr}}
.ftr h4{color:#fff;margin:0 0 8px}
.ftr ul{list-style:none;padding:0;margin:0}.ftr li{margin:4px 0}
/* sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:8px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.sticky-cta img{height:28px;width:auto;background:#1b1424;border-radius:6px;padding:3px}
.sticky-cta .btn{margin-left:auto;min-height:42px}
@media(min-width:900px){.sticky-cta{display:none}.ftr{padding-bottom:28px}}
.prose ul,.prose ol{padding-left:20px}.prose li{margin:4px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.92rem;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.hero-card p,.hero-card .bn{color:var(--ink)}.hero-card .ad{color:var(--muted)}.hero-card a.btn{color:#1b1424}
/* v2.1 additions */
.author .av img{width:100%;height:100%;object-fit:cover}
.author-lg{grid-template-columns:1fr}
@media(min-width:620px){.author-lg{grid-template-columns:200px 1fr}}
.author-lg .av{width:200px;height:200px;border-radius:16px;font-size:3rem}
.presets{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1}
.presets button{min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer}
.presets button[aria-pressed=true]{background:#2b0d48;color:#fff;border-color:#2b0d48}
.demo-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.demo-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.demo-card .demo{border-radius:0;aspect-ratio:16/10}
.demo-card .dm{padding:8px 12px;font-size:.85rem}
.demo-card .dm strong{display:block;font-size:.95rem}
.steps-tbl td:first-child{white-space:nowrap}
.warn-inline{background:#fff6e0;border-left:4px solid #e0a800;padding:10px 12px;border-radius:6px;margin:10px 0}
.tbl.kv table{min-width:0;width:100%}.tbl.kv td,.tbl.kv th{white-space:normal}.tbl.kv th{width:42%}
.tbl.pay td.nt{white-space:normal;min-width:220px;font-size:.85rem;color:#555}.tbl.pay small{font-size:.8rem}
@media(max-width:640px){.tbl.pay{border:0}.tbl.pay table,.tbl.pay tbody,.tbl.pay tr,.tbl.pay td{display:block;width:100%;min-width:0}.tbl.pay thead{display:none}.tbl.pay tr{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:8px 10px}.tbl.pay td{border:0;padding:3px 0;white-space:normal}.tbl.pay td:first-child{font-size:1.05rem}.tbl.pay td:not(:first-child)::before{content:attr(data-l) ": ";font-weight:600;color:#333;font-size:.82rem}.tbl.pay td.nt{min-width:0}}