:root{color-scheme:dark}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#000;color:#f4f4f5;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
button{all:unset;box-sizing:border-box;cursor:pointer;touch-action:none;transition:transform .12s ease-out,background .12s,opacity .2s}
button:active{transform:scale(.95)}
[hidden]{display:none!important}

#bg{position:fixed;inset:0;width:100vw!important;height:100dvh!important;z-index:0;opacity:.55;pointer-events:none}
body.no-shader #bg{display:none}
body.no-shader::before{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 36% at 22% 16%,rgba(52,76,120,.3),transparent),radial-gradient(46% 32% at 82% 44%,rgba(96,42,56,.24),transparent)}
/* úvod: žádné přechody, jen tečky z rubu karty přes celou plochu */
body:has(#home:not([hidden])) #bg{display:none}
body:has(#home:not([hidden]))::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.17) 1.100px,transparent 1.500px) 0 0/13px 13px}

/* horní lišta */
#top{position:fixed;z-index:6;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
#top .round{pointer-events:auto}
#status{position:absolute;left:68px;right:68px;text-align:center;font-size:17px;font-weight:500;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.round{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.11);display:grid;place-items:center;margin-left:auto}
#fs{margin-left:0}
#rulesBtn b{font-size:20px;font-weight:500;color:#fff;line-height:1}
#status svg{width:18px;height:18px;fill:var(--c,#fff);vertical-align:-3px}
#status.ev{animation:statusEv .22s ease-out}
@keyframes statusEv{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.round svg{width:22px;height:22px;fill:#fff}
.round svg.line{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hra */
#stage{position:fixed;inset:0;z-index:1}
#shelf{position:absolute;left:6px;right:6px;bottom:6px;border-radius:72px 72px 34px 34px;background:#26272b;z-index:1}
#cards{position:absolute;inset:0;z-index:3;pointer-events:none}
#cards .card{position:absolute;left:0;top:0;--w:var(--card-w);pointer-events:none;will-change:transform;
  transition:transform .36s cubic-bezier(.2,.9,.25,1),filter .18s,opacity .24s;transform-origin:50% 50%}
#cards .card.hand,#cards .card.deck{pointer-events:auto}
#cards.fast .card.hand{transition-duration:.12s}
#cards.fast .card.held{transition-duration:.05s}
#cards .card.shake{animation:shake .26s ease-out}
@keyframes shake{25%{margin-left:-5px}50%{margin-left:5px}75%{margin-left:-3px}}

/* vějíř velké ruky: stůl ustoupí, odhazovací balíček zůstane nahoře vidět */
#fanScrim{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .25s}
.fanning #fanScrim{opacity:1;pointer-events:auto}
.fanning #cards .card.deck{opacity:0;pointer-events:none}

/* soupeři kolem stolu: jméno drží vějíř rubů, na přední kartě je počet */
#seats{position:absolute;inset:0;z-index:2;pointer-events:none}
.seat{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:opacity .2s}
.seat.out{opacity:.42}
.seat.away .sfan{opacity:.4}
.sfan{position:relative;width:76px;height:54px;transition:opacity .2s}
.sb{position:absolute;left:50%;bottom:0;width:36px;height:50px;margin-left:-18px;border-radius:7px;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(255,255,255,.2) .6px,transparent 1px) 0 0/5px 5px,linear-gradient(155deg,#3f4047,#1e1f23);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.45);
  transform-origin:50% 135%;transform:rotate(calc(var(--t)*var(--st,0deg)))}
.sb b{font:600 19px/1 'Geist',system-ui,sans-serif;letter-spacing:-.03em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.seat.one .sb b{color:#ff8a92}
.seat .nm{position:relative;z-index:30;margin-top:-11px;max-width:100%;padding:3px 10px;border-radius:999px;background:#26272b;color:#d4d4da;font-size:13px;line-height:17px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:background .2s,color .2s}
.seat.on .nm{background:#f4f4f5;color:#0a0a0b;font-weight:500}
/* koruny za výhry v tabulce na konci hry: za sebou ve vějíři jako karty */
.namerow{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;vertical-align:bottom}
.namerow .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crowns{--cs:16px;position:relative;flex:none;display:inline-block;height:var(--cs);width:calc(var(--cs) + (var(--n) - 1)*var(--cs)*.42)}
.crowns span{position:absolute;left:50%;bottom:0;width:var(--cs);height:var(--cs);margin-left:calc(var(--cs)/-2);
  transform:translateX(calc(var(--t)*var(--cs)*.42)) rotate(calc(var(--t)*11deg))}
.crowns svg{display:block;width:100%;height:100%;fill:var(--kule);stroke:#17181b;stroke-width:1.800;stroke-linejoin:round;paint-order:stroke;
  filter:drop-shadow(0 1px 1.500px rgba(0,0,0,.55))}
/* podklad jako karta: skleněná kapsle se stínem */
.crowns{isolation:isolate;margin:4px 8px}
.crowns::before{content:"";position:absolute;z-index:-1;inset:-4px -8px;border-radius:999px;
  background:radial-gradient(90% 120% at 50% 70%,color-mix(in srgb,var(--kule) 26%,transparent),transparent 75%),linear-gradient(155deg,#3b3c43,#222327 58%,#2a2b30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 3px 10px rgba(0,0,0,.45)}
.who .pn,.lastline .pn{overflow:visible}
.crown svg{filter:drop-shadow(0 2px 7px rgba(255,174,43,.55)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}

/* pohled toho, kdo už dohrál: stejný jako hra, karty toho, kdo hraje, jsou dole v ruce */
.watching #seats,.watching #fanScrim{display:none}
#spect{position:absolute;z-index:2;inset:0;pointer-events:none}
#spect .card.held{position:absolute;left:0;top:0;--w:var(--card-w);transform-origin:50% 50%}
.trow{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.tname{display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 24px);height:19px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.11);color:#d4d4da;font-size:12px;line-height:19px}
.tname .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:500}
.tcards{display:flex;justify-content:center}
.tcards .card{flex:none;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.45)}

/* animace koruny pro prvního */
#winFx{position:fixed;inset:0;z-index:9;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(60% 40% at 50% 50%,rgba(0,0,0,.6),transparent);animation:winfade 1.7s both}
.bigcrown{display:block;width:112px;height:112px;animation:crownin .65s cubic-bezier(.2,1.5,.4,1) both}
.bigcrown svg{display:block;width:100%;height:100%;fill:var(--kule);stroke:#17181b;stroke-width:.800;stroke-linejoin:round;
  filter:drop-shadow(0 6px 26px rgba(255,174,43,.6)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
#winFx p{font-size:26px;font-weight:500;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.8);animation:winup .5s .2s cubic-bezier(.2,.9,.25,1) both}
@keyframes crownin{from{opacity:0;transform:translateY(-34px) scale(.4) rotate(-14deg)}}
@keyframes winup{from{opacity:0;transform:translateY(10px)}}
@keyframes winfade{0%,80%{opacity:1}100%{opacity:0}}
.who .namerow{display:flex;width:100%;flex-direction:column;gap:4px}
.who .tx{max-width:100%}
.who .crowns{--cs:18px}

/* cedulka s tím, co hráč právě udělal */
.pop{position:absolute;z-index:40;left:50%;top:-6px;padding:3px 9px;border-radius:999px;background:#f4f4f5;color:#0a0a0b;font-size:13px;font-weight:600;line-height:17px;white-space:nowrap;
  animation:popup 1.9s cubic-bezier(.2,.9,.25,1) both}
@keyframes popup{0%{opacity:0;transform:translate(-50%,10px) scale(.85)}12%{opacity:1;transform:translate(-50%,0) scale(1)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}

#chip{position:absolute;z-index:4;height:40px;min-width:40px;padding:0 12px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:#f4f4f5;color:#0a0a0b;font:500 15px 'Geist Mono',monospace;transform:translate(-50%,-50%);transition:opacity .2s;--cut:#f4f4f5}
#chip svg{width:22px;height:22px;fill:var(--c,#0a0a0b)}
#chip svg.line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

#hint{position:absolute;z-index:4;left:16px;right:16px;text-align:center;font-size:14px;color:#c4c4cb;height:20px;line-height:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#actions{position:absolute;z-index:4;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;justify-content:center;gap:14px;padding:0 14px}
.act{width:84px;height:84px;flex:0 1 84px;min-width:0;border-radius:50%;background:rgba(255,255,255,.13);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;--cut:#3c3d42}
.act svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act .big{font:500 22px/26px 'Geist Mono',monospace}
.act.idle{opacity:.38}
.act.suit{background:rgba(255,255,255,.13);height:auto;aspect-ratio:1;flex:1 1 0;max-width:76px}
.act.suit svg{width:34px;height:34px;stroke:none;fill:var(--c)}

/* úvod a lobby */
#home{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;gap:14px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:calc(env(safe-area-inset-top,0px) + 60px) 6px 6px}
#home button,#home input{touch-action:manipulation}
#home h1{font-size:clamp(56px,19vw,92px);font-weight:500;letter-spacing:.005em;line-height:.98}
.brand{position:relative;z-index:1;flex:none;margin:auto 0;padding:0 18px;text-align:center}
.brand h1,.brand .sub{text-shadow:0 2px 22px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6)}
.brand .sub{color:#d4d4da}
.logo{display:block;height:.876em;width:auto;margin:0 auto .1em}
.brand .logo{filter:drop-shadow(0 2px 14px rgba(0,0,0,.9))}
/* karty plují pozadím zdola nahoru, panel a nadpis jsou nad nimi */
.drift{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.drift .card{position:absolute;top:0;opacity:.62;will-change:transform;
  animation:drift 30s linear infinite}
@keyframes drift{from{transform:translateY(105dvh) rotate(var(--r0))}to{transform:translateY(-55vw) rotate(var(--r1))}}
.panel{position:relative;z-index:1}
/* s otevřenou klávesnicí je vidět jen panel, usazený těsně nad ní */
#home.kb{padding-top:6px}
#home.kb .brand{display:none}
#home.kb .panel{margin-top:auto;padding-bottom:16px}
.sub{color:#a6a6ad;font-size:15px;line-height:1.4}
.sub.center{text-align:center}
.mono{font-family:'Geist Mono',monospace;font-weight:500}
.form{display:flex;flex-direction:column;gap:10px;flex:none}
.form .field{margin-top:0}
.panel{background:#26272b;border-radius:44px 44px 34px 34px;padding:22px 20px calc(env(safe-area-inset-bottom,0px) + 20px)}
.panel input{background:rgba(255,255,255,.08)}
input{all:unset;box-sizing:border-box;display:block;width:100%;min-width:0;height:54px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.1);
  color:#fff;font:400 17px 'Geist',system-ui,sans-serif;-webkit-user-select:text;user-select:text;transition:box-shadow .15s}
input::placeholder{color:#7d7d84}
input:focus{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
input.bad{box-shadow:inset 0 0 0 1.5px var(--srdce)}
#code{font-family:'Geist Mono',monospace;letter-spacing:.14em;text-align:center}
.joinrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.joinrow>*{min-width:0}
.or{text-align:center;color:#85858c;font-size:13px;margin-top:4px}
.err{color:#ff9aa1;font-size:14px;text-align:center}
.botbox{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.primary.wait{background:rgba(255,255,255,.14);color:#b9b9c0}
.lobby{display:flex;flex-direction:column;align-items:center;gap:8px;margin:auto 0;padding:0 18px}
.qr{width:min(56vw,30dvh,240px);aspect-ratio:1;background:#fff;border-radius:24px;padding:8px}
.qr svg{display:block;width:100%;height:100%}
.code{font-size:34px;letter-spacing:.16em;margin:6px 0 0 .16em;line-height:1.1;-webkit-user-select:text;user-select:text}
.plist{list-style:none;padding:0;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.plist li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.09);font-size:15px;min-width:0;max-width:100%}
.plist li.away{opacity:.5}
.plist .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--listy)}
.plist li.away .dot{background:#85858c}
.plist .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist em{font-style:normal;color:#9a9aa1;font-size:13px;margin-left:2px}
.plist li.ready{background:#f4f4f5;color:#0a0a0b}
.plist li.ready em{color:#5c5c63}
.plist .rd{flex:none;font-size:13px;font-weight:500}
.plist [data-kick]{cursor:pointer}
.lobby.many .qr{width:min(38vw,17dvh,170px);border-radius:16px}
.lobby.many .sub{display:none}
.lobby.many .rd{font-size:0}
.lobby.many .rd::before{content:'✓';font-size:13px}
.lobby.many .code{font-size:26px}
.lobby.many .plist{gap:4px;margin-top:4px}
.lobby.many .plist li{padding:5px 10px;font-size:13px;gap:6px}
.field{display:block;text-align:center;font-size:14px;color:#a6a6ad;margin-top:12px}
.seg{display:flex;gap:3px;padding:4px;border-radius:999px;background:rgba(255,255,255,.1)}
.seg button{flex:1;text-align:center;padding:11px 0;border-radius:999px;font-size:15px;color:#c9c9cf}
.seg button[aria-pressed="true"]{background:#f4f4f5;color:#0a0a0b}
.primary{display:block;text-align:center;padding:17px;border-radius:999px;background:#f4f4f5;color:#0a0a0b;font-size:17px;font-weight:500;margin-top:8px}
.ghost{display:block;text-align:center;padding:15px;border-radius:999px;background:rgba(255,255,255,.1);font-size:16px}

/* spodní panel */
#scrim{position:fixed;inset:0;z-index:7;background:rgba(0,0,0,.55)}
.sheet{position:fixed;z-index:8;left:6px;right:6px;bottom:6px;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  border-radius:34px;background:#26272b;padding:24px 20px calc(env(safe-area-inset-bottom,0px) + 18px);animation:up .3s cubic-bezier(.2,.9,.25,1)}
.sheet button{touch-action:manipulation}
@keyframes up{from{transform:translateY(100%)}}
.sheet h2{font-size:24px;font-weight:500;letter-spacing:-.02em;margin-bottom:14px}
.sheet .btns{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.sheet .field:first-of-type{margin-top:0}
.rules{list-style:none;padding:0;display:grid;gap:9px;font-size:15px;line-height:1.35;color:#d4d4da;margin-top:16px}
.rules b{color:#fff;font-weight:500}
/* konec hry: stupně vítězů */
.sheet.end h2{text-align:center;font-size:28px;margin-bottom:6px}
.sheet.end{display:flex;flex-direction:column;overflow:hidden}
.endbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.sheet.end .btns{flex:none;flex-direction:row;align-items:stretch}
.sheet.end .primary{flex:2 1 0;min-width:0;margin-top:0;padding-inline:8px;white-space:nowrap}
.sheet.end .ghost{flex:1 1 0;min-width:0;display:grid;place-items:center;padding:0}
#endLeave svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-p][data-kick],[data-new][data-kick]{cursor:pointer}
.isready .avatar{position:relative}
.isready .avatar::after{content:'✓';position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:#f4f4f5;color:#0a0a0b;font-size:11px;font-weight:600;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 2px #26272b}
.podium{list-style:none;padding:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;margin-top:8px}
.step{flex:1 1 0;min-width:0;max-width:116px;display:flex;flex-direction:column;align-items:center;gap:10px}
.who{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;min-width:0;width:100%;
  animation:pop .4s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--d) + 200ms)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:500}
.step .avatar,.lastline .avatar{flex:none;background:rgba(255,255,255,.14)}
.p1 .avatar{width:56px;height:56px;font-size:21px;background:#f4f4f5;color:#0a0a0b}
.crown{display:block;height:20px;margin-bottom:-2px}
.crown svg{display:block;width:26px;height:22px;fill:var(--kule)}
.pn{font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn em{font-style:normal;color:#9a9aa1;font-size:13px}
.block{display:grid;place-items:center;width:100%;border-radius:18px 18px 8px 8px;font:500 26px 'Geist Mono',monospace;transform-origin:50% 100%;
  animation:grow .5s cubic-bezier(.2,.9,.25,1) both;animation-delay:var(--d)}
.p1 .block{height:108px;background:linear-gradient(170deg,#ffc65a,#e8921a);color:#2b1a00}
.p2 .block{height:76px;background:linear-gradient(170deg,#6a6b73,#44454c)}
.p3 .block{height:52px;background:linear-gradient(170deg,#4a4b52,#35363c)}
@media (max-height:640px){
  .sheet.end{max-height:96dvh;padding-top:16px}
  .sheet.end h2{font-size:24px}
  .sheet.end .btns{margin-top:12px}
  .p1 .avatar{width:48px;height:48px}
  .p1 .block{height:76px}.p2 .block{height:54px}.p3 .block{height:38px}
}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.85)}}
.lastline{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 16px 10px 10px;border-radius:999px;background:rgba(255,85,96,.16)}
.lastline .pn{flex:1;min-width:0}
.lastline .tag{flex:none;font-size:13px;color:#ffb0b5}
.lastline.dim{background:rgba(255,255,255,.06);margin-top:6px}
.lastline.dim .tag{color:#a6a6ad}

.pileFx{position:absolute;z-index:95;--fg:#fff;--cut:#1b1c20;display:grid;place-items:center;width:46px;height:46px;pointer-events:none;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.65));animation:pileFx 1.5s .25s cubic-bezier(.2,.7,.3,1) both}
.pileFx svg{width:100%;height:100%;fill:var(--c)}
.pileFx b{padding:3px 11px;border-radius:999px;background:var(--c);color:#0a0a0b;font-size:19px;font-weight:600;line-height:24px;white-space:nowrap}
@keyframes pileFx{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,calc(-50% - var(--rise))) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .pileFx{display:none}
  #cards .card{transition-duration:.01s}
  .drift .card{animation:none;transform:translateY(calc((100 - var(--p))*1dvh)) rotate(var(--r0))}
  .who,.block{animation:none}
  .pop{animation-duration:1.9s;animation-timing-function:steps(1)}
  .sheet{animation:none}
}