/* Poradniki, pomysły i narzędzia. Te same tokeny co strona główna: jasno, płasko, czytelnie. */
:root{
  color-scheme:light;
  --tlo:#FBF9F4;--piasek:#F1ECE1;--kreska:#D8D2C4;--ink:#1A2140;--szary:#535C7A;--bialy:#fff;
  --sun:#FFC94D;--koral:#F2674A;
  --j-koral:#FFE3DB;--j-nieb:#DCE6FB;--j-mint:#D5F1E5;--j-lila:#E8E1FA;--j-sun:#FFF0C8;
  --h:"Baloo 2",system-ui,sans-serif;--t:"Atkinson Hyperlegible Next",system-ui,sans-serif;
  --bok:18px;--akc:var(--j-nieb);
}
.d-pomysly{--akc:var(--j-mint)}.d-narzedzia{--akc:var(--j-sun)}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--tlo);color:var(--ink);font:400 18px/1.5 var(--t);overflow-wrap:break-word}
a{color:inherit;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.belka{--b-max:796px}
.znak{display:inline-flex;align-items:center;min-height:44px;font:800 25px/1 var(--h);letter-spacing:-.02em;text-decoration:none}

.art{max-width:720px;margin:auto;padding:6px var(--bok) 40px}
.okr a{display:inline-flex;align-items:center;min-height:36px;font-size:16px;color:var(--szary)}
h1{font:800 min(40px,10vw)/1.06 var(--h);letter-spacing:-.02em;text-wrap:balance}
.lead{margin-top:10px;font-size:20px;line-height:1.38;color:var(--szary)}

.proza{margin-top:18px}
.proza h2,.faq h2,.pow h2{font:800 28px/1.12 var(--h);letter-spacing:-.012em;margin:34px 0 8px;text-wrap:balance}
.proza h3{font:700 22px/1.2 var(--h);margin:22px 0 4px}
.proza p{margin-top:10px}
.proza ul,.proza ol{margin-top:10px;padding-left:24px}
.proza li{margin-top:7px}
.proza ul.lista,.proza ul.lista-kol{list-style:none;padding:0}
.proza ul.lista li{padding:10px 0;margin:0;border-bottom:1px solid var(--kreska)}
.proza ul.lista-kol{columns:2;column-gap:18px}
.proza ul.lista-kol li{break-inside:avoid;margin:0;padding:6px 0}

.skrot{background:var(--akc);border-radius:18px;padding:16px 18px;margin-top:18px}
.skrot h2{font:800 23px/1.15 var(--h);margin:0 0 4px}
.skrot ul,.skrot ol{padding-left:22px}
.tab{overflow-x:auto;margin-top:12px}
table{border-collapse:collapse;width:100%;font-size:17px}
th,td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--kreska);vertical-align:top}
th{font-weight:700}
td.l,th.l{text-align:right;padding-right:0;white-space:nowrap}

.k{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:66px;margin:2px 3px 2px 0;border-radius:8px;background:#fff;border:2px solid var(--ink);vertical-align:middle;font:800 20px/1 var(--h)}
.k u{text-decoration:none;font-size:20px;line-height:1}
.k-czerw{color:#C8321A}
.k-uno{border-color:var(--ink);font-size:18px;text-align:center}
.k-uno.dl{font-size:12px;width:54px;padding:0 2px;letter-spacing:-.01em}
.karty{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px}

.gra-pas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:15px 16px;border-radius:18px;text-decoration:none}
.gra-pas>span{display:flex;flex-direction:column;min-width:0}
.gra-pas b{font:800 23px/1.15 var(--h)}
.gra-pas span span{font-size:16px;line-height:1.3;margin-top:3px}
.gra-pas i{font:800 19px/1 var(--h);font-style:normal;flex:none;display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:13px;background:var(--ink);color:#fff}
.t-nieb{background:var(--j-nieb)}.t-koral{background:var(--j-koral)}.t-lila{background:var(--j-lila)}.t-mint{background:var(--j-mint)}.t-sun{background:var(--j-sun)}

.faq details{border-bottom:1px solid var(--kreska)}
.faq summary{cursor:pointer;font-weight:700;padding:13px 0;min-height:48px}
.faq details p{padding-bottom:14px}
.zastrz{margin-top:26px;font-size:15px;color:var(--szary)}
.pow ul,.spis{list-style:none;padding:0;margin-top:8px}
.pow a,.spis a{display:block;padding:13px 0;border-bottom:1px solid var(--kreska);text-decoration:none}
.pow b,.spis b{display:block;font:700 21px/1.2 var(--h)}
.pow span,.spis span{display:block;margin-top:2px;font-size:16px;line-height:1.35;color:var(--szary)}
.hub h1{margin-top:12px}.hub .spis{margin-top:18px}

.stopka{background:var(--piasek);padding:22px var(--bok) calc(26px + env(safe-area-inset-bottom))}
.stopka>*{max-width:720px;margin-inline:auto}
.stopka .znak{display:flex}
.stopka p{font-size:16px;color:var(--szary)}
.stopka nav{display:flex;flex-wrap:wrap;margin-top:6px;margin-left:auto}
.stopka nav a{display:flex;align-items:center;min-height:44px;margin-right:18px;font-size:16px;font-weight:700}

/* Narzędzia */
.widget{margin-top:18px}
.narz{margin-top:14px}
.scena-n{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:min(300px,40svh);padding:18px;border-radius:22px;background:var(--akc);text-align:center;overflow:hidden}
.wynik{font:800 clamp(56px,20vw,104px)/1 var(--h);letter-spacing:-.02em}
.wynik.sr{font-size:clamp(38px,12vw,64px)}
.pod{font-size:17px;color:var(--szary);min-height:26px;margin-top:8px}
.btn-n{display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;margin-top:12px;padding:0 18px;border-radius:17px;background:var(--sun);font:800 24px/1 var(--h);transition:transform .1s}
.btn-n:active{transform:scale(.98)}
.btn-n:disabled{opacity:.55}
.btn-p{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 15px;border-radius:13px;background:var(--piasek);font-weight:700;font-size:17px}
.btn-p[aria-pressed=true],.btn-p.on{background:var(--ink);color:#fff}
.rzad-n{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rzad-n.rowne>*{flex:1 1 0;min-width:0;padding:0 6px}
.pole{display:block;margin-top:12px;font-weight:700;font-size:17px}
.pole input,.pole textarea,.pole select{display:block;width:100%;margin-top:4px;padding:11px 12px;border:2px solid var(--ink);border-radius:12px;background:#fff;font-weight:400;font-size:18px}
.pole textarea{min-height:128px;line-height:1.35}
.dwa{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trzy{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.hist{margin-top:10px;font-size:17px;color:var(--szary);min-height:26px}


.kostki{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.kolo-w svg{display:block;width:100%;height:auto}

.czas{position:relative;font:800 clamp(50px,15vw,84px)/1 var(--h);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.okra{margin-top:10px;width:100%;font-size:17px;list-style:none;padding:0}
.okra li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--kreska)}
.zespol{margin-top:10px;padding:13px 15px;border-radius:15px;background:var(--piasek)}
.zespol h3{font:800 20px/1.2 var(--h)}

.gr{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--kreska)}
.gr b{font:800 22px/1.15 var(--h)}
.gr .pkt{font:800 30px/1 var(--h);font-variant-numeric:tabular-nums}
.gr .rzad-n{grid-column:1/-1;margin-top:0}
.gr input.im{border:0;border-bottom:2px solid var(--kreska);background:none;padding:4px 0;width:100%;font:700 20px var(--h);border-radius:0}
.lid{background:var(--j-sun)}
.male{font-size:16px;color:var(--szary);margin-top:8px}
.kalk{background:var(--akc);border-radius:20px;padding:16px}
.kalk h3{font:800 22px/1.15 var(--h);margin:0}
.kalk .suma{font:800 54px/1 var(--h);margin-top:8px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(26,33,64,.18);font-size:17px;line-height:1.35}
.opt input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--ink)}
.kopia{white-space:pre-wrap;background:#fff;border-radius:12px;padding:12px;margin-top:12px;font-size:16px;line-height:1.4}

@media (prefers-reduced-motion:reduce){.obrot,.rzut{animation:none}.btn-n{transition:none}}
@media (min-width:760px){.proza ul.lista-kol{columns:3}}
@media (max-width:520px){
  .gra-pas{flex-direction:column;align-items:stretch}
  .gra-pas i{justify-content:center}
  table.stos thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.stos,.stos tbody,.stos tr,.stos td{display:block;width:100%}
  .stos tr{padding:11px 0;border-bottom:1px solid var(--kreska)}
  .stos td,.stos td.l{padding:2px 0;border:0;text-align:left;white-space:normal}
  .stos td:first-child{font-weight:700}
  .stos td+td::before{content:attr(data-k) ": ";font-weight:700}
}

/* Strony zasad: nagłówek z kartami, karta gry, spis treści, przykład krok po kroku */
.nag{display:flex;flex-direction:column;gap:16px}
.wachlarz{display:flex;align-items:flex-end;padding:6px 0 4px 6px;order:-1}
.wachlarz>*{flex:none;margin:0 -10px 0 0!important;box-shadow:2px 3px 0 rgba(26,33,64,.14);transform:rotate(calc((var(--i,0) - 1.5) * 7deg)) translateY(calc(var(--y,0) * 1px))}
.wachlarz>:nth-child(1){--i:0;--y:4}.wachlarz>:nth-child(2){--i:1;--y:0}.wachlarz>:nth-child(3){--i:2;--y:0}.wachlarz>:nth-child(4){--i:3;--y:4}.wachlarz>:nth-child(5){--i:4;--y:10}
.wachlarz .k{width:52px;height:74px;font-size:22px}
.wachlarz .k u{font-size:22px}
.wachlarz .k-uno.dl{width:58px;font-size:13px}
.wachlarz .kosc-m{width:46px;height:46px;border-width:3px;border-radius:11px;margin-right:4px!important}
.wachlarz .klocek{width:40px;height:54px;font-size:26px}
@media (min-width:640px){
  .nag{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .nag>div:first-child{flex:1;min-width:0}
  .wachlarz{order:0;padding:10px 14px 0 0}
  .wachlarz .k{width:62px;height:88px;font-size:26px}
  .wachlarz .k u{font-size:26px}
  .wachlarz .k-uno.dl{width:66px;font-size:14px}
  .wachlarz .kosc-m{width:56px;height:56px}
  .wachlarz .klocek{width:48px;height:64px;font-size:30px}
}

.karta-gry{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 18px;margin-top:18px;padding:6px 16px;border:2px solid var(--kreska);border-radius:18px;background:var(--bialy)}
.karta-gry div{padding:10px 0;border-bottom:1px solid var(--kreska)}
.karta-gry dt{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--szary)}
.karta-gry dt svg{width:18px;height:18px;flex:none;fill:currentColor}
.karta-gry dd{margin:2px 0 0;font-weight:700;font-size:18px;line-height:1.3}
@supports selector(:has(a)){.karta-gry div:last-child{border-bottom:0}}

.spis-t{margin-top:14px;border-bottom:1px solid var(--kreska)}
.spis-t summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font:800 21px/1.2 var(--h);list-style:none}
.spis-t summary::-webkit-details-marker{display:none}
.spis-t summary::after{content:"";width:10px;height:10px;margin:-4px 4px 0 auto;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform .15s}
.spis-t[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.spis-t summary span{font:400 16px var(--t);color:var(--szary)}
.spis-t ol{padding:0 0 12px 24px;columns:2 260px;column-gap:24px}
.spis-t li{break-inside:avoid;padding:3px 0}
.spis-t a{display:inline-block;padding:4px 0;font-size:17px;line-height:1.3}
.proza h2[id]{scroll-margin-top:84px}

.kosc-m{display:inline-grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:34px;height:34px;padding:4px;margin:2px 3px 2px 0;border:2px solid var(--ink);border-radius:8px;background:#fff;vertical-align:middle}
.kosc-m i{width:70%;aspect-ratio:1;margin:auto;border-radius:50%;background:var(--ink)}
.kosc-m s{display:block}
.klocek{display:inline-flex;align-items:center;justify-content:center;width:34px;height:46px;margin:2px 3px 2px 0;border-radius:6px;background:#FFFCF2;border:2px solid var(--ink);vertical-align:middle;font:800 22px/1 var(--h);box-shadow:inset 0 -5px 0 #EFE6CF}

.proza ol.kroki-p{list-style:none;padding:0;counter-reset:krok}
.kroki-p>li{counter-increment:krok;position:relative;padding:12px 0 12px 46px;margin:0;border-bottom:1px solid var(--kreska)}
.kroki-p>li::before{content:counter(krok);position:absolute;left:0;top:12px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--sun);font:800 18px/1 var(--h)}
.kroki-p .karty{margin-top:8px}

.zrodla{margin-top:26px;padding-top:14px;border-top:1px solid var(--kreska);font-size:15px;line-height:1.45;color:var(--szary)}
.zrodla b{color:var(--ink)}
.zrodla+.zastrz{margin-top:8px}

/* Tabele zapisu: kości i kierki */
.zapis-k{font-size:16px;background:#fff;border-radius:12px;margin-top:10px}
.zapis-k th,.zapis-k td{padding:4px 6px;text-align:center;border-bottom:1px solid var(--kreska);vertical-align:middle}
.zapis-k tbody th{text-align:left;font-weight:700;white-space:nowrap;padding-left:10px}
.zapis-k th span{font-weight:400;color:var(--szary)}
.zapis-k thead input.im{width:100%;min-width:62px;border:0;border-bottom:2px solid var(--kreska);background:none;padding:6px 0;font:700 16px var(--h);text-align:center}
.zapis-k .kp{width:100%;min-width:52px;height:40px;border:2px solid var(--kreska);border-radius:9px;background:var(--tlo);font:700 18px var(--t);text-align:center;padding:0;-moz-appearance:textfield}
.zapis-k .kp::-webkit-outer-spin-button,.zapis-k .kp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zapis-k button.kp:not(:empty){border-color:var(--ink);background:var(--j-mint)}
.zapis-k button.kp.zero{background:var(--piasek);border-color:var(--kreska)}
.zapis-k .sm th,.zapis-k .sm td{background:var(--piasek);font-size:15px}
.zapis-k .razem th,.zapis-k .razem td{font:800 20px/1.2 var(--h);border-bottom:0;padding:10px 6px}
.zapis-k td.lid{background:var(--sun)}
.kalk h4{font:800 20px/1.2 var(--h);margin-top:16px}
.skl{margin-top:10px;padding:10px 12px;border-radius:14px;background:#fff}
.skl p{font-size:17px}.skl p span{color:var(--szary)}
.krok-n{display:grid;grid-template-columns:1fr 48px 40px 48px;align-items:center;gap:6px;margin-top:6px}
.krok-n span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.krok-n b{text-align:center;font:800 22px/1 var(--h);font-variant-numeric:tabular-nums}
.krok-n .btn-p{padding:0;font-size:24px}
@media (max-width:639px){
  .karta-gry{grid-template-columns:1fr 1fr;gap:0 12px;padding:4px 14px}
  .karta-gry div{padding:8px 0}
  .karta-gry dt{font-size:14px}
  .karta-gry dd{font-size:16px}
  .karta-gry div:nth-last-child(2):nth-child(odd){border-bottom:0}
}
.spis-t ol{padding-left:34px}
.zapis-k tbody th{white-space:normal;min-width:84px;max-width:120px;font-size:15px;line-height:1.2;padding-left:8px}
.zapis-k .kp{min-width:44px}
.zapis-k thead input.im{min-width:48px}
.krok-n{grid-template-columns:1fr 44px 34px 44px;gap:4px}
.zapis-k tr>th:first-child{position:sticky;left:0;z-index:1;background:#fff}.zapis-k .sm>th:first-child{background:var(--piasek)}
.spis-t ol{padding-left:40px}.spis-t a{display:inline;padding:0}.spis-t li{padding:6px 0;font-size:17px;line-height:1.3}.zapis-k thead input.im{font-size:15px;min-width:56px}

/* Warcaby, domino, chińczyk */
.pion{display:inline-block;width:30px;height:30px;margin:2px 3px 2px 0;border-radius:50%;vertical-align:middle;border:2px solid var(--ink);box-shadow:inset 0 -4px 0 rgba(26,33,64,.18)}
.pion-b{background:#FFFCF2}
.pion-c{background:#3A2F2A;border-color:#1A1410}
.pion.dama{position:relative}
.pion.dama::after{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid var(--sun)}
.pionek{display:inline-block;width:24px;height:30px;margin:2px 3px 2px 0;vertical-align:middle;color:var(--k)}
.pionek svg{width:100%;height:100%;fill:currentColor;stroke:var(--ink);stroke-width:1.6}
.domino{display:inline-flex;flex-direction:column;width:34px;height:64px;margin:2px 4px 2px 0;padding:2px;border:2px solid var(--ink);border-radius:7px;background:#fff;vertical-align:middle}
.domino>span{flex:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:2px}
.domino>span+span{border-top:2px solid var(--ink)}
.domino i{width:72%;aspect-ratio:1;margin:auto;border-radius:50%;background:var(--ink)}
.domino s{display:block}
.plansza{display:inline-grid;grid-template-columns:repeat(var(--n),34px);border:3px solid var(--ink);border-radius:6px;overflow:hidden;vertical-align:middle;margin:4px 0}
.plansza>span{display:flex;align-items:center;justify-content:center;width:34px;height:34px}
.plansza .j{background:#F4E7CC}.plansza .c{background:#B98455}
.plansza .cel{box-shadow:inset 0 0 0 3px var(--sun)}
.plansza .zb{opacity:.45}
.plansza .pion{width:26px;height:26px;margin:0;border-width:2px}
.wachlarz .pion{width:44px;height:44px;margin-right:2px!important}
.wachlarz .pionek{width:36px;height:46px}
.wachlarz .domino{width:42px;height:80px}
@media (min-width:640px){.wachlarz .pion{width:52px;height:52px}.wachlarz .domino{width:48px;height:92px}.wachlarz .pionek{width:42px;height:54px}}
.los-z{min-height:132px;margin-top:12px;padding:14px 16px;border-radius:16px;background:#fff}
.los-z h3{font:800 24px/1.15 var(--h)}
.los-z p{margin-top:6px}
.los-z .btn-p{margin-top:10px;background:var(--ink);color:#fff;text-decoration:none}
.wjazd{animation:wjazd .35s cubic-bezier(.3,1.2,.5,1)}
@keyframes wjazd{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.wjazd{animation:none}}
.ile-b{font-size:16px;white-space:nowrap}

/* Narzędzia: animowane sceny */
@keyframes laduj{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.laduj{animation:laduj .42s cubic-bezier(.3,1.4,.5,1)}
.hist-l{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:0;list-style:none;min-height:34px}
.hist-l li{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 9px;border-radius:10px;background:var(--piasek);font:800 17px/1 var(--h);font-variant-numeric:tabular-nums}
.hist-l li:nth-child(n+2){opacity:.75}
.hist-l li.nowy{background:var(--ink);color:#fff;animation:laduj .35s cubic-bezier(.3,1.4,.5,1)}
.hist-l .h-o,.hist-l .h-r{display:contents}
.hist-l.szer li{font:700 16px/1 var(--t)}

.scena-m{min-height:min(330px,46svh);justify-content:flex-end;padding-bottom:16px}
.m-lot{perspective:800px;width:min(176px,46vw);aspect-ratio:1;position:relative;z-index:1}
.m3{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0deg)}
.m-s{position:absolute;inset:0;border-radius:50%;border:4px solid var(--ink);background:var(--sun);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 9px var(--sun),inset 0 0 0 11px var(--ink)}
.m-s b{font:800 clamp(20px,6vw,26px)/1 var(--h)}
.m-r{transform:rotateX(180deg);background:#FFE08A;box-shadow:inset 0 0 0 9px #FFE08A,inset 0 0 0 11px var(--ink)}
.m-orz{width:46%;fill:var(--ink)}
.m-nom{font:800 clamp(64px,19vw,84px)/.8 var(--h)}
.m-cien{width:min(130px,34vw);height:14px;margin-top:10px;border-radius:50%;background:var(--ink);opacity:.55;filter:blur(3px)}
.proc{margin-top:12px}
.proc-p{height:12px;border-radius:6px;background:#FFE08A;overflow:hidden;border:2px solid var(--ink)}
.proc-p span{display:block;height:100%;width:50%;background:var(--ink);transition:width .4s ease}

.kostki{display:flex;flex-wrap:wrap;gap:16px 18px;justify-content:center;padding-top:30px}
.ko{--s:min(76px,21vw);--pol:calc(var(--s) / 2);width:var(--s);height:var(--s);perspective:600px;position:relative;border-radius:14px}
.ko:disabled{opacity:1}
.k3{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d}
.k3 .f{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;background:#fff;border:3px solid var(--ink);border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 -5px 0 0 #EFE9DC}
.k3 i{width:72%;aspect-ratio:1;margin:auto;border-radius:50%;background:var(--ink)}
.kp{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff;border:3px solid var(--ink);border-radius:14px;font:800 clamp(26px,8vw,36px)/1 var(--h);font-variant-numeric:tabular-nums}
.kp.k4{clip-path:polygon(50% 2%,98% 96%,2% 96%);border:0;background:var(--ink);padding-top:28%}
.kp.k4 b{color:#fff}
.ko.trz::after{content:"trzymam";position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);padding:1px 7px;border-radius:7px;background:var(--ink);color:#fff;font:700 13px/1.4 var(--t);white-space:nowrap}
.ko.trz .f,.ko.trz .kp{background:#FFE08A}
.ko.trz{outline:3px solid var(--ink);outline-offset:4px}
.kostki:has(.trz){padding-bottom:18px}

.kolo-w #o path{transition:opacity .4s}
.kolo-w #o.stop path:not(.wyg){opacity:.35}

.liczby-l{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0;list-style:none}
.liczby-l li{min-width:52px;padding:8px 10px;border-radius:12px;background:#fff;border:2px solid var(--ink);font:800 24px/1 var(--h);font-variant-numeric:tabular-nums}
.liczby-l.wsyp li{animation:laduj .38s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}

.zespoly{display:grid;gap:10px;margin-top:4px}
@media (min-width:640px){.zespoly{grid-template-columns:1fr 1fr}}
.zespol{border-top:8px solid var(--kol,var(--sun))}
.zespol ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:0;list-style:none}
.zespol li{padding:6px 11px;border-radius:10px;background:#fff;font-weight:700;font-size:17px}
.rozdaj li{animation:wlot .4s cubic-bezier(.3,1.3,.5,1) both;animation-delay:var(--d)}
@keyframes wlot{from{opacity:0;transform:translateY(-14px) scale(.8)}}

.wynik.lit{font-size:clamp(110px,36vw,180px);min-width:1.2em}
.alf{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:5px;margin-top:12px}
.alf span{display:flex;align-items:center;justify-content:center;height:36px;border-radius:9px;background:var(--piasek);font:800 18px/1 var(--h)}
.alf .uz{background:none;color:var(--szary);text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.alf .akt{background:var(--ink);color:#fff;opacity:1;text-decoration:none}

.pyt-tn{min-height:24px;font-weight:700;font-size:18px;margin-bottom:12px}
.karta-tn{display:flex;align-items:center;justify-content:center;width:min(220px,60vw);aspect-ratio:4/3;border-radius:20px;border:4px solid var(--ink);background:#fff;font:800 clamp(56px,18vw,88px)/1 var(--h)}
.karta-tn.tak{background:var(--j-mint)}
.karta-tn.nie{background:var(--j-koral)}

.zeg{position:relative;display:grid;place-items:center;width:min(270px,70vw);aspect-ratio:1}
.zeg svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.zt{fill:none;stroke:rgba(26,33,64,.12);stroke-width:7}
.zp{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:0}
.ost .zp{stroke:var(--koral)}
.ost .czas{color:var(--koral)}

.gr{position:relative}
.lot-d{position:absolute;right:0;top:4px;font:800 22px/1 var(--h);color:#1F7A4F;pointer-events:none;animation:lot-d .8s ease-out forwards}
.lot-d.minus{color:var(--koral)}
@keyframes lot-d{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-34px)}}
@media (prefers-reduced-motion:reduce){.laduj,.hist-l li.nowy,.liczby-l.wsyp li,.rozdaj li{animation:none}.proc-p span,.kolo-w #o path{transition:none}}
[hidden]{display:none!important}

/* Koło losujące */
.scena-k{padding:22px 14px 14px;border-radius:22px;background:var(--akc)}
.kolo-w{position:relative;width:min(100%,440px,calc(100svh - 300px));min-width:min(100%,260px);margin:0 auto}
.kolo-w svg{display:block;width:100%;height:auto}
.kolo-w #k{cursor:pointer;-webkit-tap-highlight-color:transparent}
.kolo-w .wsk{position:absolute;left:50%;top:-16px;width:40px;height:48px;margin-left:-20px;z-index:1;transform-origin:50% 14%;filter:drop-shadow(0 2px 0 rgba(26,33,64,.25))}
.kolo-t{font-family:var(--h);font-weight:800;fill:#1A2140;dominant-baseline:central}
.kolo-pusto{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:4px dashed var(--ink);font-weight:700;padding:20px;text-align:center}
.kolo-wyn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:76px;margin-top:12px;padding:8px 14px;border-radius:16px;background:#fff;text-align:center}
.kolo-wyn b{font:800 clamp(28px,8.5vw,40px)/1.1 var(--h);overflow-wrap:anywhere}
.kw-pod{font-size:16px;color:var(--szary)}
/* Wnętrze kostki: trzy płaszczyzny przez środek zakrywają szczeliny między ściankami, więc kostka wygląda jak pełna bryła. */
.k3 .rdzen{display:none;position:absolute;inset:3px;border-radius:6px;background:#E2D9C8}
.k3 .r2{transform:rotateY(90deg)}
.k3 .r3{transform:rotateX(90deg)}
.kolo-w #o.stop path:not(.wyg){opacity:.3}
.kolo-w #o.stop text{transition:opacity .4s}
.ko{padding:0;border:0;background:none;margin:0}
.ko.leci .rdzen{display:block}