/* Žolíky: the other players on top, the melds on the table (scrolling), the
   stock and the pile beside the status, the buttons, and the hand in one or
   two rows at the bottom. */
.zoliky{
  --zw:clamp(34px,min(9.8vw,7.2vh),50px);   /* a card on the table */
  --zp:calc(var(--cw)*.8);                  /* stock and discard pile */
  position:absolute;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}

.zoliky-others{grid-row:1}
.zoliky-table,.zoliky-note{grid-row:2;grid-column:1}
.zoliky-mid{grid-row:3}
.zoliky-help{grid-row:4}
.zoliky-acts{grid-row:5}
.zoliky-hand{grid-row:6}

/* ── the joker ───────────────────────────────────────────────────────── */
.card.zoliky-joker{color:#5e1d48;background:linear-gradient(158deg,#fff4d0,#ffd57a)}
.zoliky-star{fill:currentColor}
.card.zoliky-joker .idx .zoliky-star{width:.2em;height:.2em;margin-top:.015em}
.card.zoliky-joker .idx.red{color:var(--cherry)}
.card.zoliky-joker .idx.red .zoliky-star,.card.zoliky-joker .idx:not(.red) .zoliky-star{color:#5e1d48}
.card.zoliky-joker .mid .zoliky-star{width:.46em;height:.46em}
.card.zoliky-joker .mid em{
  margin-top:.35em;font:700 .15em/1 var(--ui);font-style:normal;letter-spacing:.1em;text-transform:uppercase;
}

/* ── the other players ───────────────────────────────────────────────── */
.zoliky-others{
  display:flex;justify-content:space-evenly;align-items:flex-start;gap:6px;
  width:100%;max-width:34rem;margin:0 auto;padding:6px 8px 4px;min-height:50px;
}
.zoliky-seat{
  flex:0 1 auto;min-width:0;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;
}
.zoliky-seat .ava{width:38px;height:38px;font-size:1.1rem}
.zoliky-seat .who{display:grid;min-width:0;line-height:1.25}
.zoliky-seat .pic{position:relative}
.zoliky-seat .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;font-weight:600}
.zoliky-seat .inf{font-size:.76rem;color:var(--mist);white-space:nowrap}
/* running penalty total (a game to a limit): a pill on the corner of every avatar */
.zoliky-total{
  position:absolute;right:-9px;top:-5px;z-index:1;
  min-width:22px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--ivory);color:var(--ink);font:700 .74rem/18px var(--ui);text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.zoliky-seat .open{font-size:.74rem;font-weight:700;color:var(--gold);white-space:nowrap}
.zoliky-seat .sub{font-size:.72rem;color:var(--mist)}
.zoliky-seat.off .ava,.zoliky-seat.off .nm,.zoliky-seat.off .inf{opacity:.45}
.zoliky-seat.off .sub{color:var(--gold)}
.zoliky-seat .zoliky-total{right:auto;left:-7px}
.zoliky-seat.turn .ava,.zoliky-me.turn .ava{
  box-shadow:0 0 0 2.5px var(--gold),0 0 0 8px rgba(255,198,92,.2);
  animation:pulse 1.7s ease-in-out infinite;
}

/* ── the table ───────────────────────────────────────────────────────── */
.zoliky-table{
  min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:2px 8px 8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.12);
}
.zoliky-melds{width:100%;max-width:34rem;margin:0 auto}
.zoliky-empty{margin:1.6rem auto 0;max-width:16rem;text-align:center;font-size:.92rem;color:var(--mist)}
.zoliky-sec h4{
  margin:8px 2px 6px;
  font:500 .82rem/1 var(--ui);color:var(--mist);
}
.zoliky-wrap{display:flex;flex-wrap:wrap;gap:9px 8px}
.zoliky-meld{
  position:relative;display:flex;align-items:center;
  min-height:44px;margin:0;padding:4px 5px;
  border:1.5px solid transparent;border-radius:11px;
  background:rgba(251,245,234,.07);
  -webkit-tap-highlight-color:transparent;
}
.zoliky-meld .card{--w:var(--zw);margin-left:calc(var(--zw)*-.57);pointer-events:none}
.zoliky-meld .card:first-child{margin-left:0}
.zoliky-meld .card.zoliky-joker .mid em{display:none}
/* only the corner of a covered card shows; its middle would just peek out as clutter */
.zoliky-meld .card:not(:nth-last-child(2)) .mid{display:none}
/* not final yet: the player may still take it back */
.zoliky-meld.prov{border:1.5px dashed var(--gold);background:rgba(255,198,92,.1)}
/* the picked card may go here */
.zoliky-meld.can{
  border:1.5px solid var(--gold);background:rgba(255,198,92,.2);
  box-shadow:0 0 0 3px rgba(255,198,92,.28);
  animation:zoliky-glow 1.5s ease-in-out infinite;
}
@keyframes zoliky-glow{50%{box-shadow:0 0 0 6px rgba(255,198,92,.08)}}
.zoliky-hint{
  position:absolute;left:50%;bottom:-8px;z-index:2;transform:translateX(-50%);
  padding:0 7px;border-radius:999px;white-space:nowrap;
  background:var(--gold);color:var(--ink);font:700 .68rem/1.55 var(--ui);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.zoliky-hint:empty{display:none}
.zoliky-meld.born{animation:zoliky-pop .4s var(--ease) both}
.zoliky-meld .card.born{animation:zoliky-land .5s var(--ease) both}
@keyframes zoliky-pop{from{transform:scale(.55);opacity:0}}
@keyframes zoliky-land{
  from{transform:translateY(-14px) scale(1.15);opacity:0;box-shadow:0 0 0 3px var(--gold)}
  60%{box-shadow:0 0 0 3px var(--gold)}
}
.zoliky-shake{animation:shake .3s}
/* a notice over the lower edge of the table */
.zoliky-note{
  align-self:end;justify-self:center;z-index:8;
  max-width:min(92%,24rem);margin:0 0 8px;padding:.6em 1.05em;border-radius:16px;
  background:var(--ivory);color:var(--ink);font-size:.95rem;font-weight:500;line-height:1.35;text-align:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  transform:translateY(10px);opacity:0;pointer-events:none;
  transition:transform .25s var(--ease),opacity .25s;
}
.zoliky-note.on{transform:none;opacity:1}

/* ── stock, pile, status ─────────────────────────────────────────────── */
.zoliky-mid{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;
  width:100%;max-width:34rem;margin:0 auto;padding:8px 12px 2px;
}
.zoliky-piles{display:flex;gap:10px;padding-bottom:9px}
.zoliky-stock,.zoliky-pile{
  position:relative;flex:none;
  width:var(--zp);height:calc(var(--zp)*1.42);
  margin:0;padding:0;border:0;background:none;border-radius:calc(var(--zp)*.095);
  -webkit-tap-highlight-color:transparent;
}
.zoliky-deck,.zoliky-top{position:absolute;inset:0;border-radius:inherit}
.zoliky-deck .card,.zoliky-top .card{--w:var(--zp);position:absolute;left:0;top:0}
.zoliky-deck .card:nth-child(2){translate:2px -2px}
.zoliky-deck .card:nth-child(3){translate:4px -4px}
.zoliky-stock.empty .zoliky-deck,.zoliky-pile.empty .zoliky-top{border:1.5px dashed var(--line)}
.zoliky-left{
  position:absolute;left:50%;bottom:-9px;z-index:2;transform:translateX(-50%);
  min-width:30px;height:20px;padding:0 7px;border-radius:999px;
  background:var(--ivory);color:var(--ink);font:700 .78rem/20px var(--ui);text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
/* may be drawn from */
.zoliky-stock.can .card:last-child{
  box-shadow:inset 0 0 0 .04em var(--ivory),0 0 0 3px var(--gold),0 .14em .26em -.1em rgba(0,0,0,.6);
}
.zoliky-stock.can .zoliky-deck{animation:zoliky-nudge 1.5s ease-in-out infinite}
@keyframes zoliky-nudge{50%{translate:0 -4px}}
.zoliky-pile.can .card{box-shadow:0 0 0 3px var(--gold),0 .14em .26em -.1em rgba(0,0,0,.6)}
/* a picked card may be thrown here */
.zoliky-pile.drop .zoliky-top{outline:2.5px dashed var(--gold);outline-offset:3px}
.zoliky-talk{display:grid;justify-items:center;align-content:center;gap:3px;min-width:0}
.zoliky-status{padding:.42em .9em;font-size:.93rem}
.zoliky-say{
  margin:0;min-height:1.3em;max-width:100%;
  font-size:.84rem;line-height:1.3;text-align:center;color:var(--mist);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.zoliky-help{
  margin:0 auto;padding:3px 12px 1px;max-width:34rem;
  text-align:center;font-size:.88rem;font-weight:600;line-height:1.3;color:var(--ivory);
}
.zoliky-help:empty{display:none}
.zoliky-help.ok{color:var(--gold)}

/* ── the buttons ─────────────────────────────────────────────────────── */
.zoliky-acts{
  position:relative;z-index:4;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;
  width:100%;max-width:34rem;margin:0 auto;padding:4px 10px 0;min-height:54px;
}
.zoliky-me{position:relative}
.zoliky-me .ava{width:42px;height:42px;font-size:1.2rem}
.zoliky-btns{display:flex;gap:6px;min-width:0}
.zoliky-btns .btn{
  flex:1 1 0;min-width:0;min-height:46px;padding:.3em .5em;
  font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zoliky-btns.ask .btn{flex:1 1 auto}
.zoliky-btns .btn.off{opacity:.42}
.zoliky-btns .btn.off:active{transform:none}

/* ── the hand ────────────────────────────────────────────────────────── */
.zoliky-hand{position:relative;z-index:3;transition:height .25s var(--ease)}
.zoliky-hand .card{
  position:absolute;left:50%;top:calc(var(--cw)*.26);margin-left:calc(var(--cw)/-2);
  transition:transform .28s var(--ease),box-shadow .2s;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.zoliky-hand .card.sel{box-shadow:0 0 0 3px var(--gold),0 .2em .36em -.08em rgba(0,0,0,.7)}
.zoliky-hand .card.new::after{
  content:"";position:absolute;left:50%;top:.05em;width:.12em;height:.12em;margin-left:-.06em;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 .02em rgba(36,26,45,.35);
}
.zoliky-ghost{position:fixed;z-index:6;pointer-events:none}
.zoliky-probe{position:absolute;visibility:hidden;pointer-events:none;width:var(--cw);height:0}

/* ── the end of a deal ───────────────────────────────────────────────── */
.zoliky-result{
  position:absolute;inset:0;z-index:12;
  display:grid;align-items:center;justify-items:center;
  padding:10px;background:rgba(20,5,14,.66);
  animation:fade .25s both;
}
.zoliky-box{
  width:100%;max-width:26rem;max-height:100%;overflow:auto;overscroll-behavior:contain;
  padding:1.1rem 1rem .4rem;border-radius:22px;
  background:var(--ivory);color:var(--ink);text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  animation:rise .3s var(--ease) both;
}
.zoliky-box h3{margin:0;font:400 1.6rem/1.15 var(--display)}
.zoliky-sub{margin:.2rem 0 0;font-size:.88rem;color:rgba(36,26,45,.66)}
.zoliky-rows{margin-top:.6rem;text-align:left}
.zoliky-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 10px;
  padding:.5rem .15rem;border-top:1px solid var(--rule);
}
.zoliky-row .ava{grid-row:span 2;align-self:start;width:36px;height:36px;font-size:1.05rem;color:var(--ivory);background-color:var(--ink);box-shadow:none}
.zoliky-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.zoliky-row.me .nm{font-weight:700}
.zoliky-row .pen{font:400 1.45rem/1 var(--display)}
.zoliky-row.out .pen{color:var(--cherry)}
.zoliky-row .tot{grid-column:3;grid-row:2;align-self:start;justify-self:end;font-size:.78rem;color:rgba(36,26,45,.66);white-space:nowrap}
.zoliky-row .left{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:3px;min-width:0}
/* too small for a picture in the middle: the two corners say it all */
.zoliky-row .left .card{--w:27px;box-shadow:0 0 0 1px rgba(36,26,45,.22)}
.zoliky-row .left .card:not(.zoliky-joker) .mid,.zoliky-row .left .card.zoliky-joker .mid em{display:none}
.zoliky-row .left i{font-style:normal;font-size:.86rem;color:rgba(36,26,45,.6)}
/* the button stays in sight however long the list is */
.zoliky-foot{position:sticky;bottom:-.4rem;margin:0 -1rem -.4rem;padding:0 1rem .2rem;background:linear-gradient(transparent,var(--ivory) 14px)}
.zoliky-box .btn{width:100%;margin-top:.9rem}
.zoliky-box .btn.primary{background:var(--ink);color:var(--ivory)}
.zoliky-wait{margin:.9rem 0 0;padding-top:.2rem;min-height:1.4em;font-size:.92rem;font-weight:600}
.zoliky-box .link{color:rgba(36,26,45,.7);text-decoration-color:rgba(36,26,45,.25);min-height:44px}
.zoliky-box :focus-visible{outline-color:var(--ink)}
/* the same rows on the shell's result sheet (no avatars there) */
.zoliky-sum{margin-top:.6rem}
.zoliky-sum .zoliky-sub{margin:0;font-weight:600;color:var(--ink)}
.zoliky-sum .zoliky-row{grid-template-columns:minmax(0,1fr) auto}
.zoliky-sum .zoliky-row .left{grid-column:1}
.zoliky-sum .zoliky-row .tot{grid-column:2}

/* a narrow phone with three opponents: the plates stack their lines tighter */
@media (max-width:359px){
  .zoliky-status{font-size:.88rem}
  .zoliky-seat{column-gap:6px}
  .zoliky-seat .ava{width:34px;height:34px;font-size:1rem}
  .zoliky-btns .btn{font-size:.9rem}
}
/* a short screen: everything a little tighter */
@media (max-height:600px){
  .zoliky-others{padding-top:2px;min-height:44px}
  .zoliky-mid{padding-top:5px}
  .zoliky-box{padding-top:.8rem}
  .zoliky-box h3{font-size:1.35rem}
  .zoliky-row{padding:.36rem .15rem}
  .zoliky-acts{min-height:50px;padding-top:2px}
  .zoliky-sec h4{margin-top:6px}
}
@media (min-width:700px){
  .zoliky-wrap{gap:12px}
}