/* Kasyno Mapa: transit-map diagram. White paper, bold line colours. Familjen Grotesk (headings) + Be Vietnam Pro (body). Mobile-first. */
@font-face{font-family:"Familjen Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/f/familjen-700-pl.woff2) format("woff2");unicode-range:U+0000-024F,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122,U+2212}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/f/bevietnam-400-pl.woff2) format("woff2");unicode-range:U+0000-024F,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122,U+2212}
@font-face{font-family:"Be Vietnam Pro";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/f/bevietnam-700-pl.woff2) format("woff2");unicode-range:U+0000-024F,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122,U+2212}
:root{
 --ink:#0B1220;--mu:#3E4B63;--ln:#D5DBE7;--paper:#F3F5FA;--white:#fff;
 --red:#D1232A;--blue:#0B5BD3;--green:#0A7A41;--yel:#FFC20E;
 --fh:"Familjen Grotesk","Arial Narrow",Arial,sans-serif;--fs:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --r:20px;--rs:12px;--c:var(--ink);--t:var(--paper);
}
.s-r{--c:var(--red);--t:#FDECEC}.s-b{--c:var(--blue);--t:#E8F0FD}.s-g{--c:var(--green);--t:#E4F5EB}.s-y{--c:var(--yel);--t:#FFF4C7}.s-k,.s-x{--c:var(--ink);--t:#EDF0F6}
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.7 var(--fs);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:8px;top:-90px;background:var(--yel);color:var(--ink);padding:12px 18px;z-index:100;border-radius:var(--rs);font-weight:700;border:3px solid var(--ink)}
.skip:focus{top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 40px,1320px);margin-inline:auto}
@media(min-width:760px){.wrap{width:min(100% - 80px,1320px)}}
h1,h2,h3{font-family:var(--fh);font-weight:700;line-height:1.08;letter-spacing:-.015em;margin:0;color:var(--ink)}
h1{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.04;letter-spacing:-.022em}
h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:0 0 .55em;scroll-margin-top:96px}
h3{font-size:1.5rem;margin:1.5em 0 .4em}
p{margin:0 0 1.1em}
.stripe{display:block;height:8px;background:linear-gradient(90deg,var(--red) 0 25%,var(--blue) 25% 50%,var(--green) 50% 75%,var(--yel) 75% 100%)}
/* ---------- buttons: ink-edged yellow signage */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.8rem 2rem;background:var(--yel);color:var(--ink);font:700 1.125rem/1.2 var(--fs);border:3px solid var(--ink);border-radius:14px;text-decoration:none;text-align:center;cursor:pointer;box-shadow:0 5px 0 var(--ink)}
.btn:hover{background:#FFD451;text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn:focus-visible{outline-color:var(--ink);outline-offset:5px}
.btn-xl{min-height:64px;font-size:1.25rem;padding:.9rem 2.4rem}
/* ---------- header: white bar, nav drawn as a line with stations */
.site{position:sticky;top:0;z-index:30;background:var(--white);border-bottom:3px solid var(--ink)}
.bar{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.brand img{display:block;height:42px;width:auto}
.nav ul{list-style:none;margin:0;padding:0}
.nav li{position:relative;padding-left:56px}
.nav a{display:block;color:var(--ink);text-decoration:none;font:700 1.4rem/1.2 var(--fh);padding:.85rem 0;text-underline-offset:.28em}
.nav a::before{content:"";position:absolute;left:7px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--white);border:8px solid var(--c);box-shadow:0 0 0 2px var(--ink);z-index:1}
.nav li::after{content:"";position:absolute;left:21px;top:50%;width:8px;height:100%;background:var(--c);z-index:0}
.nav li:last-child::after{display:none}
.nav a:not(.hcta):hover{text-decoration:underline;text-decoration-thickness:4px;text-decoration-color:var(--c)}
.nav a:hover::before,.nav a[aria-current]::before{background:var(--c)}
.nav a.hcta:hover{background:#FFD451}
.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:5px;text-decoration-color:var(--c)}
.nav a.hcta{margin-top:28px;width:100%;display:inline-flex;font:700 1.125rem/1.2 var(--fs);padding:.8rem 1.4rem;text-decoration:none}
.nav a.hcta::before{display:none}
.nav .lang{margin-top:22px}
.nav .lang ul{display:flex;gap:6px;flex-wrap:wrap}
.nav .lang a{font:700 1rem/1 var(--fs);padding:.5rem .8rem;border:2px solid var(--ink);border-radius:10px}
.nav .lang a::before{display:none}.nav .lang li{padding:0}.nav .lang li::after{display:none}
.burger{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:12px;font:700 1rem/1 var(--fs);cursor:pointer}
.burger i{display:block;width:20px;height:3px;background:currentColor;box-shadow:0 7px 0 currentColor,0 -7px 0 currentColor}
.nclose{position:absolute;top:14px;right:14px;min-height:48px;padding:0 18px;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:12px;font:700 1rem/1 var(--fs);cursor:pointer}
.scrim{position:fixed;inset:0;background:rgb(11 18 32/.72);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;z-index:1}
.nav{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:var(--white);color:var(--ink);padding:84px 20px 28px 12px;overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;z-index:2;border-left:8px solid var(--ink)}
.nav-open .nav{transform:none;visibility:visible;transition:transform .22s ease}
.nav-open .scrim{opacity:1;visibility:visible;transition:opacity .2s}
.nav-open{overflow:hidden}
@media(scripting:none){.burger,.scrim,.nclose{display:none}.nav{position:static;width:auto;transform:none;visibility:visible;padding:0;border:0;overflow:visible;flex-basis:100%}.bar{flex-wrap:wrap}.nav ul{display:flex;flex-wrap:wrap;gap:0 20px}.nav li::after{display:none}}
@media(prefers-reduced-motion:reduce){.nav,.scrim{transition:none}html{scroll-behavior:auto}}
@media(min-width:1060px){
 .site{position:relative}
 .bar{min-height:100px;gap:32px}
 .brand img{height:50px}
 .burger,.scrim,.nclose{display:none}
 .nav{position:static;inset:auto;width:auto;transform:none;visibility:visible;padding:0;border:0;overflow:visible;transition:none;background:none;z-index:auto;display:flex;align-items:center;gap:28px;margin-left:auto}
 .nav ul{display:flex}
 .nav li{padding:0;width:122px}
 .nav a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px 16px;font-size:1.0625rem;text-align:center;text-decoration:none}
 .nav a::before{position:relative;left:auto;top:auto;margin:0;flex:none;width:36px;height:36px;border-width:8px}
 .nav li::after{left:50%;top:36px;width:100%;height:8px;margin-top:-4px}
 .nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:.3em}
 .nav a.hcta{display:none;margin:0;width:auto}
 .nav .lang{margin:0}
}
@media(min-width:1280px){.nav a.hcta{display:inline-flex;min-height:52px;padding:.6rem 1.4rem;font-size:1rem}}
/* ---------- crumbs */
.crumbs{margin:0 0 26px;font-size:.98rem;color:var(--mu)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
.crumbs li+li::before{content:"";display:inline-block;width:24px;height:6px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px var(--ink);margin:0 12px;vertical-align:middle}
.crumbs a{color:var(--ink);font-weight:700}
.crumbs li[aria-current]{color:var(--ink)}
/* ---------- home hero */
.hh{position:relative;background:var(--white);overflow:hidden;isolation:isolate;padding:0 0 92px}
.rails{position:absolute;left:0;right:0;bottom:0;width:100%;height:76px;z-index:-1}
.hhg{display:grid;gap:26px}
.hfig{order:-1;margin:0 -20px;position:relative;background:var(--ink)}
.hfig picture{display:block}
.hfig img{display:block;width:100%;height:280px;object-fit:cover;object-position:56% 30%}
.fl{display:block;height:10px;background:linear-gradient(90deg,var(--red) 0 25%,var(--blue) 25% 50%,var(--green) 50% 75%,var(--yel) 75% 100%)}
.hh .hm{padding-top:4px}
.hh .lead{font-size:1.2rem;line-height:1.55;color:var(--ink);max-width:30em;margin:.9em 0 0}
.hh .btn{margin-top:1.5em;width:100%}
@media(min-width:760px){.hfig{margin:0;border:4px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 26px 40px -22px rgb(11 18 32/.5)}.hfig img{height:auto;aspect-ratio:5/4;object-position:62% 50%}.hh .btn{width:auto}}
@media(min-width:900px){
 .hh{padding:76px 0 124px;min-height:640px;display:flex;align-items:center}
 .hhg{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:72px;align-items:center;width:min(100% - 80px,1320px)}
 .hfig{order:0}
 .hh .lead{font-size:1.35rem}
 .rails{height:190px}
}
.strip{background:var(--paper);border-block:3px solid var(--ink)}
.strip .wrap{display:flex;gap:18px;align-items:center;padding:16px 0}
.strip p{margin:0;font-size:.98rem;line-height:1.55;color:var(--mu)}
.strip .up{display:inline-block;margin-right:10px;color:var(--ink);font-weight:700}
.b18{display:inline-grid;place-items:center;width:48px;height:48px;border:4px solid currentColor;border-radius:50%;font:700 1.05rem/1 var(--fh);flex:none;color:var(--ink);background:var(--white)}
/* ---------- bands / sections */
.sec{padding:72px 0}
@media(min-width:900px){.sec{padding:104px 0}}
.sec-law{padding:56px 0 8px}
.sec-map{background:var(--ink);color:var(--white)}
.sec-map h2{color:var(--white)}
.sec-map .prose{margin:0}
.sec-games{padding-top:88px}
.sec-pick{background:var(--paper);border-block:3px solid var(--ink);padding:64px 0}
.sec-tp{background:var(--white)}
.sec-cta{padding:40px 0 104px}
.sec-faq{background:var(--paper);border-top:3px solid var(--ink)}
.band{padding:64px 0}
.band .blk{margin:0}
.band.b1{background:var(--paper);border-block:3px solid var(--ink)}
@media(min-width:900px){.band{padding:96px 0}}
.wide .blk{margin:0}
/* ---------- prose */
.blk{margin:3.5rem 0}
.prose p,.prose ul,.prose ol{max-width:72ch}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.2em}.prose li{margin:.4em 0}.prose li::marker{color:var(--c);font-weight:700}
.prose p{font-size:1.125rem}
.prose h3{margin-top:1.6em}
.prose strong{font-weight:700}
@media(min-width:1000px){
 .wide .prose{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 64px}
 .wide .prose>h2{grid-column:1;margin:0}
 .wide .prose>*:not(h2){grid-column:2}
 .wide .prose.nh{display:block}
}
.sec-map .prose a{color:#9CC2FF}
.sec-map .prose{margin-bottom:72px}
/* ---------- law notice: callouts */
.callout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;padding:22px 20px;border:3px solid var(--ink);border-radius:var(--r);background:#E8F0FD;box-shadow:0 6px 0 var(--ink)}
.callout.warn{background:#FFF4C7}
.callout .ci{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);font:700 1.4rem/1 var(--fh)}
.callout.info .ci{background:var(--blue)}
.callout .cb{min-width:0}
.callout .cb>:last-child{margin-bottom:0}
.callout p{font-size:1.1875rem;line-height:1.65;max-width:78ch}
@media(min-width:760px){.callout{grid-template-columns:auto minmax(0,1fr);padding:30px 34px;gap:24px}.callout .ci{width:52px;height:52px;font-size:1.7rem}}
@media(min-width:900px){.callout{padding:36px 44px;gap:32px}.callout .ci{width:68px;height:68px;font-size:2.2rem}.sec-law .callout p{font-size:1.3rem}}
.main .callout{margin:2.4rem 0}
/* ---------- route diagram (home "Wybierz sekcje") */
.route{list-style:none;margin:0;padding:0}
.route li{position:relative;padding:0 0 22px 74px}
.route li::before{content:"";position:absolute;left:0;top:18px;width:46px;height:46px;border-radius:50%;background:var(--white);border:10px solid var(--c);z-index:1}
.route li::after{content:"";position:absolute;left:19px;top:41px;width:8px;height:100%;background:var(--c)}
.route li:last-child::after{display:none}
.route .sd{display:none}
.route .card{height:100%}
.routeblk h2{margin-bottom:.6em}
@media(min-width:1000px){
 .route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
 .route li{padding:74px 0 0}
 .route li::before{top:0;left:0}
 .route li::after{left:23px;top:19px;width:calc(100% + 24px);height:8px}
}
/* ---------- cards */
.cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));list-style:none;padding:0;margin:0}
.card{display:flex;flex-direction:column;gap:8px;padding:26px 26px 28px;border:3px solid var(--ink);border-radius:var(--r);background:var(--white);color:var(--ink);text-decoration:none;min-width:0;box-shadow:0 6px 0 var(--ink)}
.card .sd{display:block;width:64px;height:14px;border-radius:7px;background:var(--c);box-shadow:0 0 0 2px var(--ink);margin-bottom:14px}
.card .ct{margin:0;font:700 1.55rem/1.15 var(--fh);letter-spacing:-.01em;color:var(--ink)}
.card .cm{color:var(--mu);font-size:1.0625rem;line-height:1.55}
a.card.sc:hover{background:var(--t);box-shadow:0 9px 0 var(--c),0 0 0 0 var(--ink);transform:translateY(-3px)}
a.card.sc:hover .ct{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c);text-underline-offset:.2em}
.sec-map .card{border-color:var(--white);box-shadow:none}
.sec-map a.card:hover{transform:none;box-shadow:inset 0 0 0 5px var(--c)}
.rel{margin:4rem 0 0}
/* ---------- game cards: whole 2:3 posters */
.gcards{list-style:none;margin:0;padding:0;display:grid;gap:34px 22px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:860px){.gcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}}
@media(min-width:1100px){.gcards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card.gc{display:flex;flex-direction:column;gap:14px;color:var(--ink);text-decoration:none;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.gpost{display:block;position:relative;aspect-ratio:2/3;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--ink);box-shadow:0 6px 0 var(--ink)}
.gpost img{display:block;width:100%;height:100%;object-fit:cover}
.gpost.fit img{object-fit:contain}
.gpost .ga{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:16px;color:#fff;background:var(--ink)}
.gpost .ga b{font:700 2.2rem/1 var(--fh)}.gpost .ga i{font-style:normal;font-size:.9rem}
.gb{display:flex;flex-direction:column;gap:2px}
.gc .ct{margin:0;font:700 1.3rem/1.2 var(--fh);letter-spacing:-.01em}
.gm{font-size:1rem;color:var(--mu)}
a.card.gc:hover .gpost{transform:translateY(-3px);box-shadow:0 10px 0 var(--red)}
a.card.gc:hover .ct{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--red);text-underline-offset:.2em}
.gblk h2{margin-bottom:.7em}
@media(min-width:1000px){
 .ghome{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 64px;align-items:start}
 .ghome .gh2{position:sticky;top:32px}
 .ghome h2{margin:0 0 28px}
 .ghome .gcards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.gart{display:none}
@media(min-width:1000px){.gart{display:block}.gart .rt{max-width:300px;margin:0}}
/* ---------- tables, steps, pros/cons */
.tw{overflow-x:auto;margin:1.2em 0;border:3px solid var(--ink);border-radius:16px;background:var(--white);-webkit-overflow-scrolling:touch}
.tw:focus-visible{outline-offset:2px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:1.0625rem;line-height:1.5}
caption{caption-side:top;text-align:left;font:700 1.1rem var(--fh);padding:16px 18px;border-bottom:3px solid var(--ink)}
th,td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:2px solid var(--ln)}
thead th{background:var(--ink);color:var(--white);font:700 1.0625rem/1.3 var(--fh);white-space:nowrap;border-bottom:0}
tbody th{font-weight:700;background:var(--paper)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
.steps{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:s;max-width:72ch}
.steps li{counter-increment:s;position:relative;padding:0 0 32px 82px;min-height:56px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;background:var(--white);border:9px solid var(--c);box-shadow:0 0 0 2px var(--ink);display:grid;place-items:center;font:700 1.1rem/1 var(--fh);z-index:1}
.steps li::after{content:"";position:absolute;left:25px;top:29px;bottom:-29px;width:8px;background:var(--c)}
.steps li:last-child::after{display:none}
.steps li:last-child{padding-bottom:0}
.steps b{display:block;font:700 1.35rem/1.2 var(--fh);margin:.1em 0 .3em}
.s-y .steps li::before,.s-x .steps li::before{border-color:var(--blue)}
.s-y .steps li::after,.s-x .steps li::after{background:var(--blue)}
.pc{display:grid;gap:22px;margin-top:1.4rem}
@media(min-width:760px){.pc{grid-template-columns:1fr 1fr}}
.pc>div{border:3px solid var(--ink);border-top:14px solid var(--green);border-radius:var(--r);padding:22px 26px 26px;background:var(--white)}
.pc>.con{border-top-color:var(--red)}
.pc h3{margin:0 0 .6em;font-size:1.4rem}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:38px;margin:.7em 0}
.pc li::before{content:"";position:absolute;left:0;top:.28em;width:24px;height:24px;border-radius:50%;border:6px solid var(--green);box-shadow:0 0 0 2px var(--ink)}
.pc .con li::before{border-color:var(--red)}
/* ---------- FAQ: centred, two columns */
.faq h2{text-align:center}
.fq{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){.fq{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}}
details{background:var(--white);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink)}
summary{cursor:pointer;font:700 1.25rem/1.3 var(--fh);padding:20px 76px 20px 24px;list-style:none;position:relative;letter-spacing:-.005em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:18px;top:16px;width:38px;height:38px;border-radius:50%;background:var(--yel);border:3px solid var(--ink);display:grid;place-items:center;font:700 1.4rem/1 var(--fs);padding-bottom:3px}
details[open] summary::after{content:"\2212"}
details[open] summary{border-bottom:3px solid var(--ink)}
details>div{padding:18px 24px 22px}
details>div>:last-child{margin-bottom:0}
.faqcta{text-align:center;margin:44px 0 0}
/* ---------- CTA block: signage panel */
.cta{position:relative;display:grid;gap:18px 40px;align-items:center;padding:48px 28px 36px;background:var(--ink);color:var(--white);border-radius:24px;overflow:hidden;margin:3rem 0}
.cta .stripe{position:absolute;left:0;right:0;top:0;height:12px}
.cta .ad{font:700 .9rem/1 var(--fs);letter-spacing:.1em;text-transform:uppercase;color:#B7C3DC}
.cta .btn{justify-self:start;max-width:100%}
.cta .note{margin:0;font-size:1.15rem;line-height:1.6;color:var(--white);max-width:60ch}
@media(min-width:900px){.cta{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ad ad" "note btn";padding:64px 56px 52px}.cta .ad{grid-area:ad}.cta .note{grid-area:note;font-size:1.3rem}.cta .btn{grid-area:btn;justify-self:end;min-height:64px;font-size:1.2rem}}
.sec-cta .cta{margin:0}
/* ---------- partner ticket */
.pick{display:grid;gap:22px 36px;background:var(--white);border:3px solid var(--ink);border-left:16px solid var(--yel);border-radius:var(--r);padding:30px 30px 28px;box-shadow:0 7px 0 var(--ink);color:var(--ink)}
.pick .pk{margin:0 0 6px;font:700 .9rem/1 var(--fs);letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.pick .pn{margin:0 0 14px;font:700 2.3rem/1 var(--fh);letter-spacing:-.02em}
.pick ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pick li{position:relative;padding-left:34px;font-weight:700;line-height:1.4}
.pick li::before{content:"";position:absolute;left:0;top:.12em;width:24px;height:24px;border-radius:50%;border:6px solid var(--red);box-shadow:0 0 0 2px var(--ink)}
.pick li:nth-child(2)::before{border-color:var(--blue)}.pick li:nth-child(3)::before{border-color:var(--green)}
.pick .pa{padding-top:22px;border-top:3px dashed var(--ink);display:flex;align-items:center}
.pick .pa .btn{width:100%}
.pick .dc{margin:0;font-size:.95rem;line-height:1.55;color:var(--mu)}
@media(min-width:760px){.wide .pick,.pickw .pick{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:34px 44px}.wide .pick .pa,.pickw .pick .pa{padding:0 0 0 44px;border-top:0;border-left:3px dashed var(--ink);align-self:stretch}.wide .pick .pa .btn,.pickw .pick .pa .btn{width:auto}.pick .dc{grid-column:1/-1}}
.pickw{padding-top:56px}
/* ---------- inner heroes */
.hero{position:relative}
.ih,.gh{background:var(--t);border-bottom:12px solid var(--c);padding:36px 0 56px}
.ih h1{font-size:clamp(2.4rem,4.4vw,3.9rem)}
.hero .lead{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.55;color:var(--ink);max-width:36em;margin:.9em 0 0}
.hero .meta{font-size:1rem;color:var(--mu);margin:1.3em 0 0}
.hbtn{margin-top:1.6rem}
.ha{display:none}
@media(min-width:900px){
 .ih{padding:52px 0 72px}
 .ih .hg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center}
 .ih.has-s .hg{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
 .ha{display:block}
}
.rt{display:block;width:100%;height:auto;max-width:520px;margin-left:auto}
.rt-l{stroke:var(--c)}
.rt-s circle{fill:var(--white);stroke:var(--ink);stroke-width:6}
.rt-e{fill:var(--c);stroke:var(--ink);stroke-width:6}
.rt-l{filter:none}
.hs{margin-top:28px}
@media(min-width:900px){.ih .hs{margin-top:0}}
/* ---------- game hero */
.gg{display:grid;gap:20px 20px;grid-template-columns:116px minmax(0,1fr);grid-template-areas:"p t" "l l" "s s";align-items:start}
.gposter{grid-area:p;display:block;aspect-ratio:2/3;width:100%;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--ink);box-shadow:0 6px 0 var(--c)}
.gt{grid-area:t;min-width:0}
.gl{grid-area:l;min-width:0}
.gg .hs{grid-area:s;margin:0}
.gposter img{display:block;width:100%;height:100%;object-fit:cover}
.gposter.fit img{object-fit:contain}
.gposter .ga{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:12px;color:#fff}
.gh h1{font-size:clamp(1.85rem,7vw,3.8rem)}
.gl .lead{margin-top:0}
.prov{display:flex;align-items:center;gap:12px;margin:.9em 0 0;font-weight:700}
.prov img{display:block;height:30px;width:auto}
@media(min-width:760px){.gg{grid-template-columns:280px minmax(0,1fr);gap:20px 48px;grid-template-areas:"p t" "p l" "s s"}.gposter{border-width:4px;border-radius:20px;box-shadow:0 10px 0 var(--c)}.gh h1{font-size:clamp(2.4rem,4.4vw,3.8rem)}.gl .lead{margin-top:.2em}}
@media(min-width:1180px){.gg{grid-template-columns:300px minmax(0,1fr) 390px;grid-template-areas:"p t s" "p l s";align-items:center}}
.gh{padding-bottom:72px}
/* ---------- panel (facts) */
.panel{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);padding:26px 28px 28px;box-shadow:0 7px 0 var(--ink);color:var(--ink)}
.panel .ph{margin:0 0 .5em;font:700 1.35rem/1.2 var(--fh)}
.facts{margin:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);font-size:1.0625rem}
.facts dt,.facts dd{margin:0;padding:11px 0;border-bottom:2px solid var(--ln)}
.facts dt{color:var(--mu);padding-right:20px}
.facts dd{font-weight:700}
.facts dd small{display:block;font-weight:400;color:var(--mu)}
.facts dd small a{color:var(--mu)}
.panel .meta{margin:12px 0 0;font-size:.95rem;color:var(--mu)}
.panel .meta a{color:var(--mu)}
.verdict{margin:0 0 .6em;font-weight:700;font-size:1.15rem}
.gcta{margin:20px 0 0;display:grid;gap:10px}
.gcta .btn{width:100%}
.gcta .mc{margin:0;font-size:.9rem;line-height:1.45;color:var(--mu)}
/* ---------- inner page grid + rail (toc drawn as a route) */
.pg{display:grid;gap:40px;padding:56px 0 8px}
.main{min-width:0}
.main>.blk:first-child{margin-top:0}
.rail{min-width:0}
.rail .pick{margin-top:0}
.toc{display:none}
@media(min-width:1100px){
 .pg{grid-template-columns:320px minmax(0,1fr);gap:72px;padding-top:72px;align-items:start}
 .rail{order:-1;position:sticky;top:24px;display:grid;gap:28px;align-self:start}
 .toc{display:block}
}
.toc{font-size:1rem;border:3px solid var(--ink);border-radius:var(--r);padding:22px 22px 14px;background:var(--white)}
.toc .th{font:700 1.25rem/1.2 var(--fh);margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{position:relative;padding:7px 0 7px 40px;line-height:1.35}
.toc li::before{content:"";position:absolute;left:0;top:7px;width:26px;height:26px;border-radius:50%;background:var(--white);border:7px solid var(--c);box-shadow:0 0 0 2px var(--ink);z-index:1}
.toc li::after{content:"";position:absolute;left:10px;top:20px;width:6px;height:100%;background:var(--c)}
.toc li:last-child::after{display:none}
.toc a{color:var(--ink);text-decoration:none;font-weight:700}
.toc a:hover,.toc a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c)}
.toc a[aria-current]{text-decoration-thickness:4px}
.main .prose h2{margin-top:0}
.main .blk:not(.cta){margin:3.4rem 0}
.lst{padding:0}
/* ---------- footer */
.foot{background:var(--ink);color:var(--white);margin-top:104px;padding:0 0 40px;font-size:1.0625rem}
.foot .stripe{height:14px}
.foot .wrap{padding-top:60px}
.foot a{color:var(--white);text-underline-offset:.2em}
.foot :focus-visible{outline-color:var(--yel)}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:.6em 0}
.foot .fh{font:700 1.1rem/1 var(--fh);color:#B7C3DC;margin:0 0 14px;letter-spacing:.02em}
.fgrid{display:grid;gap:40px}
.fbrand{margin:0 0 20px}.fbrand img{display:block;height:54px;width:auto}
.fnote{color:#D3DCEE;max-width:56ch;margin:0 0 22px}
.rgbox{display:flex;gap:16px;align-items:flex-start;padding:20px;border:3px solid var(--white);border-radius:16px;max-width:56ch}
.rgbox p{margin:0;color:var(--white);font-size:1rem;line-height:1.55}
.foot .b18{border-color:var(--white);background:none;color:var(--white)}
.fine{margin:44px 0 0;padding-top:24px;border-top:2px solid #33415E;color:#B7C3DC;font-size:.95rem}
.fine p{margin:.4em 0;max-width:90ch}
@media(min-width:760px){.fgrid{grid-template-columns:1.5fr 1fr 1fr}}
/* ---------- sticky bar, 404 */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;gap:5px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--white);border-top:3px solid var(--ink);visibility:hidden;transform:translateY(110%)}
.sbar .sr{display:flex;align-items:center;gap:10px}
.sbar .btn{flex:1;min-height:52px;padding:.5rem 1rem;min-width:0;font-size:1.05rem}
.sbar .sx{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--white);border:3px solid var(--ink);border-radius:14px;color:var(--ink);font:700 1.5rem/1 var(--fs);cursor:pointer}
.sbar .sm{margin:0;font-size:.82rem;line-height:1.2;color:var(--mu)}
.sb-on .sbar{visibility:visible;transform:none}
@media(prefers-reduced-motion:no-preference){.sbar{transition:transform .22s ease-out,visibility 0s linear .22s}.sb-on .sbar{transition:transform .22s ease-out}}
@media(max-width:899px){.SB .foot{padding-bottom:112px}}
@media(min-width:900px){.sbar{display:none}}
.nf{padding:90px 0 40px;text-align:center}
.nf p{margin-left:auto;margin-right:auto;max-width:48ch}
/* ---------- home: trust panels */
.tpgrid{display:grid;gap:28px}
@media(min-width:900px){.tpgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}}
.tp{background:var(--paper);border:3px solid var(--ink);border-top:16px solid var(--blue);border-radius:var(--r);padding:34px 32px 30px;box-shadow:0 7px 0 var(--ink)}
.tp:nth-child(2){border-top-color:var(--red)}
.tp:nth-child(3){border-top-color:var(--yel)}
.tp.rg{background:#E4F5EB;border-top-color:var(--green)}
.tp .prose{display:block}
.tp .prose h2{font-size:clamp(1.7rem,2.4vw,2.1rem);margin:0 0 .5em}
.tp .prose p{font-size:1.125rem}
.tp .prose>:last-child{margin-bottom:0}
@media(min-width:900px){.tp:last-child:nth-child(odd){grid-column:1/-1}}
@media(min-width:1000px){.tp:last-child:nth-child(odd) .prose{columns:2;column-gap:64px}.tp:last-child:nth-child(odd) .prose>h2{column-span:all}.tp:last-child:nth-child(odd) .prose p{max-width:none;break-inside:avoid-column}}
.gart .rt-l{stroke:var(--red)}
@media(max-width:380px){.btn{padding-inline:1.2rem}.hh .btn{font-size:1.1rem}}