*{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)}

/* 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}
.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 .card.off{filter:brightness(.5) saturate(.6)}
#cards .card.shake{animation:shake .26s ease-out}
@keyframes shake{25%{margin-left:-5px}50%{margin-left:5px}75%{margin-left:-3px}}

#seats{position:absolute;z-index:2;left:0;right:0;display:flex;justify-content:center;gap:22px}
.seat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;width:78px;transition:opacity .2s}
.seat.out{opacity:.42}
.avatar{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.11);display:grid;place-items:center;font-size:16px;font-weight:500}
.avatar svg{position:absolute;inset:-4px;width:52px;height:52px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:0;transform:rotate(-90deg)}
.seat.on .avatar svg{opacity:1;animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(270deg)}}
.seat.away .avatar{opacity:.45}
.seat .nm{display:flex;gap:4px;justify-content:center;font-size:13px;color:#b9b9c0;max-width:100%;white-space:nowrap}
.seat .nm span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.seat .nm b{flex:none;font:500 13px 'Geist Mono',monospace;color:#fff}

#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:18px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:calc(env(safe-area-inset-top,0px) + 68px) 24px calc(env(safe-area-inset-bottom,0px) + 24px)}
#home button,#home input{touch-action:manipulation}
#home h1{font-size:clamp(64px,22vw,104px);font-weight:500;letter-spacing:-.055em;line-height:.98}
.brand{margin:auto 0}
.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;margin-top:auto}
.form .field{margin-top:0}
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}
.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}
.field{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}
.rank-list{list-style:none;padding:0;display:grid;gap:6px;font-size:16px}
.rank-list li{display:flex;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:18px;background:rgba(255,255,255,.07)}
.rank-list li.lost{background:rgba(255,85,96,.2)}
.rank-list span:last-child{color:#b9b9c0}

@media (prefers-reduced-motion:reduce){
  #cards .card{transition-duration:.01s}
  .seat.on .avatar svg{animation:none}
  .sheet{animation:none}
}