:root{
  --stol:#3b3c39; --panel:#464744; --ink:#efede8; --muted:#bdbab2;
  --karta:#fbfaf6; --tusz:#3a3a38; --tusz-jasny:#6b6a66;
  --akcent:#e8823a; --akcent-ink:#2b2a28;
  --hand:"Kalam","Comic Sans MS",cursive; --sans:"Poppins",system-ui,sans-serif;
  --obrys:color-mix(in srgb,var(--ink) 30%,transparent);
  --folia:0 0 0 3px rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--stol);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.4;min-height:100vh;min-height:100dvh;
}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible,.btn:focus-visible,.deckbtn:focus-visible,.mini:focus-visible{outline:3px solid var(--akcent);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px))}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:24px}
header.top h1{font-family:var(--hand);font-weight:700;font-size:28px;line-height:1.15;margin:0}
.status{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}
.dot.on{background:var(--akcent)}.dot.wait{background:var(--muted)}
.panel{background:var(--panel);border-radius:16px;padding:16px;margin-bottom:24px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.center{justify-content:center}
.row.between{justify-content:space-between}
.btn{border:1px solid var(--obrys);background:var(--panel);color:var(--ink);border-radius:999px;padding:8px 16px;min-height:44px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.primary{background:var(--akcent);color:var(--akcent-ink);border-color:var(--akcent);font-weight:600}
.btn.warn{border-color:var(--akcent);box-shadow:0 0 0 2px var(--akcent);font-weight:600}
.btn.big{font-size:16px;padding:12px 24px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* kolory rewersów talii (zgodne z decks.json i docs/DESIGN.md) */
.deckbtn.kontekst,.card.kontekst .face.back,.fan .kontekst,.deck-pill.kontekst{background-color:#5d6e7c}
.deckbtn.zdarzenie,.card.zdarzenie .face.back,.fan .zdarzenie,.deck-pill.zdarzenie{background-color:#8a5a5c}
.deckbtn.karma,.card.karma .face.back,.fan .karma,.deck-pill.karma{background-color:#6c5c7a}
.deckbtn.przekonanie,.card.przekonanie .face.back,.fan .przekonanie,.deck-pill.przekonanie{background-color:#e8823a}
.deckbtn.opowiesc,.card.opowiesc .face.back,.fan .opowiesc,.deck-pill.opowiesc{background-color:#5c7563}

.deckbtn{border:0;color:var(--karta);border-radius:12px;padding:12px 16px;min-height:44px;font-size:16px;font-weight:600;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:136px;text-align:left}
.deckbtn.przekonanie{color:var(--akcent-ink)}
.deckbtn small{font-weight:400;font-size:12px}
.deckbtn.active{box-shadow:0 0 0 3px var(--panel),0 0 0 6px var(--akcent)}
.deckbtn:disabled,.deckbtn.exhausted{opacity:.5}
.link{font-family:ui-monospace,monospace;font-size:14px;background:var(--stol);border:1px solid var(--obrys);border-radius:8px;padding:8px 12px;flex:1;min-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.label{font-size:14px;color:var(--muted);margin:0 0 8px}
.hint{color:var(--muted);text-align:center;padding:32px 8px;font-family:var(--hand);font-size:20px;line-height:1.4}
.subhint{color:var(--muted);text-align:center;margin:0 0 12px;font-size:14px}
.meta{margin:8px 0 0;font-size:14px;color:var(--muted)}
.empty{color:var(--muted);margin:0;font-size:14px}
.code-btn{font-family:var(--hand);font-weight:700;font-size:40px;line-height:1.15;letter-spacing:.12em;text-transform:uppercase;margin:0;padding:4px 12px;border-radius:12px;border:1px dashed var(--obrys);background:var(--stol);color:var(--ink);display:inline-flex;align-items:center;gap:12px}
.code-btn small{font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.invite-head{gap:12px}
.invite-summary{gap:12px}
.invite-lbl{margin:0}
.invite-peers{margin:0}
.invite-body{margin-top:16px}
.compact-only{display:none}
.panel.invite.collapsed{padding:10px 16px}
.panel.invite.collapsed .invite-body{display:none}
.panel.invite.collapsed .code-btn{font-size:24px;padding:2px 10px}
.panel.invite.collapsed .code-btn small{display:none}
.panel.invite.collapsed .compact-only{display:inline-flex}
.opts{margin-top:16px}
.opts .check{font-size:14px;display:flex;gap:8px;align-items:center;min-height:44px;cursor:pointer}
.opts .check input{accent-color:var(--akcent);width:20px;height:20px;margin:0}
.opts .grow{flex:1}
.sr-copy,.sr-only{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* stół: odkryta karta, duża */
.table{margin-bottom:24px}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0 24px;min-height:0;gap:8px}
.stage:empty{display:none;padding:0}
.stage .card{width:min(520px,100%);cursor:default;aspect-ratio:auto;min-height:200px}
.stage .card.rect{width:min(360px,100%);min-height:240px}
.stage .card .inner{position:relative;min-height:inherit}
.stage .card .face.front{position:relative;min-height:inherit;padding:20px 24px}
.stage .card.pill .face{border-radius:48px}
.stage .card.rect .face{border-radius:28px}
.stage .card .cnum{display:none}
.stage .face.front .txt{font-size:20px}
.stage .face.front .hd{font-size:16px}
.stage .card.kontekst .face.front .txt{font-size:28px}
.stage .face.back{font-size:28px}

/* wachlarz kart zakrytych (prawdziwy łuk ze wspólnym środkiem obrotu) */
.hand-wrap{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
.grid{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1060px;margin:0 auto;padding:8px 16px 0}
.fan-row{
  --cw:96px;--ch:154px;--fan-r:620px;--fan-x:36px;--fan-deg:36deg;
  position:relative;width:100%;height:278px;user-select:none
}
.fan-row.row-top{--fan-r:660px;--fan-x:48px;--fan-deg:36deg;height:252px}
.fan-row.row-bot{--fan-r:580px;--fan-x:28px;--fan-deg:34deg;height:262px;margin-top:-106px}
.card{perspective:900px;position:relative;border:0;padding:0;background:none}
.fan-row .card{
  position:absolute;left:50%;top:22px;width:var(--cw);height:var(--ch);
  margin:0 0 0 calc(var(--cw)/-2);
  transform-origin:50% var(--fan-r);
  transform:translateX(calc(var(--t,0)*var(--fan-x))) rotate(calc(var(--t,0)*var(--fan-deg)));
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .35s
}
.fan-row .card.s0{--t:-1}.fan-row .card.s1{--t:-.98}.fan-row .card.s2{--t:-.96}.fan-row .card.s3{--t:-.94}.fan-row .card.s4{--t:-.92}
.fan-row .card.s5{--t:-.9}.fan-row .card.s6{--t:-.88}.fan-row .card.s7{--t:-.86}.fan-row .card.s8{--t:-.84}.fan-row .card.s9{--t:-.82}
.fan-row .card.s10{--t:-.8}.fan-row .card.s11{--t:-.78}.fan-row .card.s12{--t:-.76}.fan-row .card.s13{--t:-.74}.fan-row .card.s14{--t:-.72}
.fan-row .card.s15{--t:-.7}.fan-row .card.s16{--t:-.68}.fan-row .card.s17{--t:-.66}.fan-row .card.s18{--t:-.64}.fan-row .card.s19{--t:-.62}
.fan-row .card.s20{--t:-.6}.fan-row .card.s21{--t:-.58}.fan-row .card.s22{--t:-.56}.fan-row .card.s23{--t:-.54}.fan-row .card.s24{--t:-.52}
.fan-row .card.s25{--t:-.5}.fan-row .card.s26{--t:-.48}.fan-row .card.s27{--t:-.46}.fan-row .card.s28{--t:-.44}.fan-row .card.s29{--t:-.42}
.fan-row .card.s30{--t:-.4}.fan-row .card.s31{--t:-.38}.fan-row .card.s32{--t:-.36}.fan-row .card.s33{--t:-.34}.fan-row .card.s34{--t:-.32}
.fan-row .card.s35{--t:-.3}.fan-row .card.s36{--t:-.28}.fan-row .card.s37{--t:-.26}.fan-row .card.s38{--t:-.24}.fan-row .card.s39{--t:-.22}
.fan-row .card.s40{--t:-.2}.fan-row .card.s41{--t:-.18}.fan-row .card.s42{--t:-.16}.fan-row .card.s43{--t:-.14}.fan-row .card.s44{--t:-.12}
.fan-row .card.s45{--t:-.1}.fan-row .card.s46{--t:-.08}.fan-row .card.s47{--t:-.06}.fan-row .card.s48{--t:-.04}.fan-row .card.s49{--t:-.02}
.fan-row .card.s50{--t:0}
.fan-row .card.s51{--t:.02}.fan-row .card.s52{--t:.04}.fan-row .card.s53{--t:.06}.fan-row .card.s54{--t:.08}.fan-row .card.s55{--t:.1}
.fan-row .card.s56{--t:.12}.fan-row .card.s57{--t:.14}.fan-row .card.s58{--t:.16}.fan-row .card.s59{--t:.18}.fan-row .card.s60{--t:.2}
.fan-row .card.s61{--t:.22}.fan-row .card.s62{--t:.24}.fan-row .card.s63{--t:.26}.fan-row .card.s64{--t:.28}.fan-row .card.s65{--t:.3}
.fan-row .card.s66{--t:.32}.fan-row .card.s67{--t:.34}.fan-row .card.s68{--t:.36}.fan-row .card.s69{--t:.38}.fan-row .card.s70{--t:.4}
.fan-row .card.s71{--t:.42}.fan-row .card.s72{--t:.44}.fan-row .card.s73{--t:.46}.fan-row .card.s74{--t:.48}.fan-row .card.s75{--t:.5}
.fan-row .card.s76{--t:.52}.fan-row .card.s77{--t:.54}.fan-row .card.s78{--t:.56}.fan-row .card.s79{--t:.58}.fan-row .card.s80{--t:.6}
.fan-row .card.s81{--t:.62}.fan-row .card.s82{--t:.64}.fan-row .card.s83{--t:.66}.fan-row .card.s84{--t:.68}.fan-row .card.s85{--t:.7}
.fan-row .card.s86{--t:.72}.fan-row .card.s87{--t:.74}.fan-row .card.s88{--t:.76}.fan-row .card.s89{--t:.78}.fan-row .card.s90{--t:.8}
.fan-row .card.s91{--t:.82}.fan-row .card.s92{--t:.84}.fan-row .card.s93{--t:.86}.fan-row .card.s94{--t:.88}.fan-row .card.s95{--t:.9}
.fan-row .card.s96{--t:.92}.fan-row .card.s97{--t:.94}.fan-row .card.s98{--t:.96}.fan-row .card.s99{--t:.98}.fan-row .card.s100{--t:1}

.deck-banner{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:-32px;position:relative;z-index:5;text-align:center;pointer-events:none}
.deck-pill{font-family:var(--hand);font-weight:700;font-size:22px;line-height:1.15;color:var(--karta);padding:6px 22px;border-radius:999px;box-shadow:var(--folia)}
.deck-pill.przekonanie{color:var(--akcent-ink)}
.card .inner{position:absolute;inset:0;transition:transform .32s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.card.up .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 12px;box-shadow:var(--folia)}
.fan-row .card.pill .face{border-radius:26px}
.fan-row .face{box-shadow:0 0 0 2.5px rgba(255,255,255,.26),-5px 6px 14px rgba(0,0,0,.42)}
.fan-row .face.back::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.22);border-radius:11px;pointer-events:none}
.fan-row .card.pill .face.back::before{border-radius:20px}
.fan-row .card.przekonanie .face.back::before{border-color:rgba(43,42,40,.22)}
.face.back{color:var(--karta);font-family:var(--hand);font-weight:700;font-size:16px;line-height:1.15}
.card.przekonanie .face.back{color:var(--akcent-ink)}
.fan-row .cnum{position:absolute;top:11px;left:13px;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;opacity:.85}
.fan-row .bname{writing-mode:vertical-rl;transform:rotate(180deg);font-size:15px;letter-spacing:.03em;opacity:0;transition:opacity .2s;max-height:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fan-row .card:last-child .bname,.fan-row .card.peer-hover .bname,.fan-row .card.pending .bname,.fan-row .card:focus-visible .bname{opacity:.92}
.face.front{background:var(--karta);color:var(--tusz);transform:rotateY(180deg)}
.fan-row .face.front::before{content:"";position:absolute;inset:6px;border:1px solid rgba(58,58,56,.16);border-radius:11px;pointer-events:none}
.fan-row .card.pill .face.front::before{border-radius:20px}
.face.front .hd{font-family:var(--hand);font-size:14px;line-height:1.15;text-transform:uppercase;color:var(--tusz-jasny);margin-bottom:4px}
.face.front .pr{font-size:12px;color:var(--tusz-jasny);margin-bottom:4px}
.face.front .txt{font-size:14px;line-height:1.4;font-weight:400}
.card.karma .face.front .txt,.card.przekonanie .face.front .txt{font-weight:600}
.card.kontekst .face.front .txt{font-family:var(--hand);font-weight:400;font-size:20px;line-height:1.15;text-transform:uppercase}
.grid .face.front .hd,.grid .face.front .pr{display:none}
.grid .face.front .txt{font-size:12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.grid .card.kontekst .face.front .txt{font-size:14px}
.grid .card.pickable{cursor:pointer}
@media (hover:hover){
  .btn:not(.primary):not(:disabled):hover,.code-btn:hover{border-color:var(--ink)}
  .grid .card.pickable:hover{z-index:30}
  .grid .card.pickable:hover .inner{transform:translateY(-26px) scale(1.07)}
  .grid .card.pickable:hover .face.back{box-shadow:0 0 0 3px var(--akcent),0 14px 28px rgba(0,0,0,.5)}
  .grid .card.pickable:hover .bname{opacity:.95}
  .mini:hover{transform:translateY(-2px)}
}
.grid .card.peer-hover,.grid .card.pending,.grid .card.up{z-index:30}
.grid .card.peer-hover .inner,.grid .card.pending .inner{transform:translateY(-26px) scale(1.07)}
.grid .card.up .inner{transform:translateY(-24px) scale(1.06) rotateY(180deg)}
.grid .card.up .face.front{box-shadow:0 0 0 3px var(--akcent),0 14px 28px rgba(0,0,0,.5)}
.grid .card.peer-hover .face.back,.grid .card.pending .face.back{outline:3px solid var(--akcent);outline-offset:4px}
.grid .card.dim{opacity:.45;transition:opacity .5s}
.grid .card.up.dim{opacity:1}
.grid .card:focus-visible{z-index:20;outline:none}
.grid .card:focus-visible .inner{transform:translateY(-24px) scale(1.06)}
.grid .card:focus-visible .face.back{outline:3px solid var(--akcent);outline-offset:4px}

/* rozkład: rząd małych laminowanych kart */
.spreadwrap{margin-bottom:24px}
.spread{display:flex;gap:16px;flex-wrap:wrap;padding:4px}
.mini{background:var(--karta);color:var(--tusz);border-radius:16px;padding:8px 16px;min-width:120px;max-width:220px;text-align:center;box-shadow:var(--folia);display:flex;flex-direction:column;align-items:center;gap:4px;border:0;transition:transform .15s}
.mini.active{outline:3px solid var(--akcent);outline-offset:4px}
.mini b{font-family:var(--hand);font-weight:400;font-size:12px;line-height:1.15;text-transform:uppercase;color:var(--tusz-jasny)}
.mini span{font-size:14px;line-height:1.4;font-weight:400}
.mini.karma span,.mini.przekonanie span{font-weight:600}
.mini.kontekst span{font-family:var(--hand);font-size:16px;line-height:1.15;text-transform:uppercase}

/* landing */
.landing{max-width:520px;margin:48px auto 0;text-align:center}
.landing h1{font-family:var(--hand);font-weight:700;font-size:40px;line-height:1.15;margin:0 0 8px}
.landing p{color:var(--muted);margin:0 0 16px}
.landing .sep{margin-top:32px}
.fan{display:flex;justify-content:center;align-items:center;height:136px;margin:24px 0}
.fan span{display:block;width:80px;height:112px;border-radius:16px;box-shadow:var(--folia);margin:0 -12px}
.fan span:nth-child(1){transform:rotate(-12deg) translateY(4px)}
.fan span:nth-child(2){position:relative;z-index:1}
.fan span:nth-child(3){transform:rotate(12deg) translateY(4px)}
.landing input{font-family:var(--hand);font-size:20px;line-height:1.15;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--obrys);width:136px;text-transform:uppercase;text-align:center;background:var(--panel);color:var(--ink)}
.landing input#pin{font-family:var(--sans);font-size:16px;width:200px;text-transform:none}
.landing input::placeholder{color:var(--muted);opacity:1}
.landing .err{color:var(--ink);font-size:14px;margin:8px 0 0;min-height:1.4em}
.host-gate{margin-top:32px;padding-top:16px;border-top:1px solid var(--obrys)}
.host-gate .sep{margin-top:0}
.link-btn{background:none;border:0;color:var(--muted);font-size:14px;text-decoration:underline;padding:8px 12px;min-height:44px}
.hidden{display:none!important}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel);color:var(--ink);border:1px solid var(--obrys);box-shadow:0 6px 16px rgba(0,0,0,.35);padding:8px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}
.toast.show{opacity:1}
@media (max-width:920px){
  .fan-row{--cw:76px;--ch:124px;--fan-r:430px;--fan-x:24px;--fan-deg:32deg;height:224px}
  .fan-row.row-top{--fan-r:460px;--fan-x:30px;--fan-deg:32deg;height:212px}
  .fan-row.row-bot{--fan-r:400px;--fan-x:18px;--fan-deg:30deg;height:212px;margin-top:-84px}
  .deck-banner{margin-top:-24px}
  .fan-row .bname{font-size:13px;max-height:84px}
  .fan-row .cnum{top:9px;left:9px;font-size:10px}
}
@media (max-width:560px){
  .grid{padding:4px 8px 0;overflow:hidden}
  .fan-row{--cw:52px;--ch:88px;--fan-r:255px;--fan-x:22px;--fan-deg:32deg;height:164px}
  .fan-row.row-top{--fan-r:270px;--fan-x:24px;--fan-deg:32deg;height:156px}
  .fan-row.row-bot{--fan-r:240px;--fan-x:18px;--fan-deg:30deg;height:156px;margin-top:-62px}
  .deck-banner{margin-top:-14px}
  .fan-row .card{top:16px}
  .fan-row .card .face{border-radius:11px}
  .fan-row .card.pill .face{border-radius:16px}
  .fan-row .face.back::before,.fan-row .face.front::before{inset:4px;border-radius:8px}
  .fan-row .card.pill .face.back::before,.fan-row .card.pill .face.front::before{border-radius:12px}
  .fan-row .bname{font-size:10px;max-height:58px}
  .fan-row .cnum{top:6px;left:5px;font-size:8px;letter-spacing:-.04em}
  .deck-pill{font-size:20px;padding:6px 20px}
  .stage .face.back{font-size:20px}
  .stage .face.front .txt{font-size:16px}
  .stage .card.kontekst .face.front .txt{font-size:20px}
  .deckbtn{min-width:0;flex:1 1 140px}
  .mini{max-width:none;flex:1 1 140px}
  .grid .card.kontekst .face.front .txt{font-size:11px;line-height:1.1}
}
@media (prefers-reduced-motion:reduce){.card,.card .inner,.mini{transition:none}}