/* Prší: the other players on top, stock and pile in the middle, the bar with
   the status and the one button, the viewer's hand at the bottom. */
.prsi{
  position:absolute;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;
}

/* ── the other players ───────────────────────────────────────────────── */
.prsi-others{
  display:flex;justify-content:space-evenly;align-items:flex-start;gap:4px;
  width:100%;max-width:34rem;margin:0 auto;padding:8px 8px 0;
}
.prsi-seat{
  flex:0 1 112px;min-width:0;
  display:grid;justify-items:center;gap:2px;text-align:center;
}
/* three opponents sit in an arc: the one opposite a little further away */
.prsi-others[data-n="3"] .prsi-seat:nth-child(odd){margin-top:16px}
.prsi-seat .ava{width:44px;height:44px;font-size:1.25rem;margin-bottom:3px}
.prsi-seat .nm{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.82rem;font-weight:600;line-height:1.3;
}
.prsi-seat .sub{font-size:.72rem;line-height:1.2;color:var(--mist)}
.prsi-seat.off .ava,.prsi-seat.off .nm{opacity:.45}
.prsi-seat.off .sub{color:var(--gold)}
.prsi-seat.turn .ava,.prsi-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;
}
.prsi-fan{display:inline-flex;align-items:center;height:24px}
.prsi-fan .card{--w:15px;margin-left:-9px}
.prsi-fan .card:first-child{margin-left:0}
.prsi-fan b{margin-left:6px;font:400 1.2rem/1 var(--display)}
.prsi-place{
  display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 .5em;border-radius:999px;
  background:var(--gold);color:var(--ink);font:400 1.05rem/1 var(--display);
}
.prsi-seat.out .ava,.prsi-seat.out .nm{opacity:.6}

/* ── stock and pile ──────────────────────────────────────────────────── */
.prsi-mid{
  display:grid;align-content:center;justify-items:center;gap:6px;
  min-height:0;padding:10px 12px 4px;
  container-type:size;
}
/* --pw is the width of the card on the pile. A long hand takes room from the
   middle, so the piles shrink to what is left above the two lines of text. */
.prsi-piles{
  --pw:calc(var(--cw)*1.45);
  display:flex;align-items:center;justify-content:center;gap:calc(var(--cw)*.62);
}
@supports (width:1cqh){
  .prsi-piles{--pw:clamp(calc(var(--cw)*.8),calc((100cqh - 96px)*.66),calc(var(--cw)*1.75))}
}
.prsi-stock{
  --sw:calc(var(--pw)/1.45);
  position:relative;flex:none;
  width:var(--sw);height:calc(var(--sw)*1.42);
  padding:0;border:0;background:none;border-radius:calc(var(--sw)*.095);
  -webkit-tap-highlight-color:transparent;
}
.prsi-stock:disabled{cursor:default}
.prsi-deck{position:absolute;inset:0;border-radius:inherit}
.prsi-deck .card{--w:var(--sw);position:absolute;left:0;top:0}
.prsi-deck .card:nth-child(2){translate:2px -2px}
.prsi-deck .card:nth-child(3){translate:4px -4px}
.prsi-stock.empty .prsi-deck{border:1.5px dashed var(--line)}
.prsi-stock.can .card:last-child{
  box-shadow:inset 0 0 0 .04em var(--ivory),0 0 0 2.5px var(--gold),0 .14em .26em -.1em rgba(0,0,0,.6);
}
/* nothing fits: the stock is where the hand has to go */
.prsi-stock.need .prsi-deck{animation:prsi-nudge 1.5s ease-in-out infinite}
@keyframes prsi-nudge{50%{translate:0 -5px}}
.prsi-left{
  position:absolute;left:50%;bottom:-9px;z-index:2;transform:translateX(-50%);
  min-width:30px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--ivory);color:var(--ink);font:700 .82rem/22px var(--ui);text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.prsi-pilebox{position:relative;flex:none;width:var(--pw);height:calc(var(--pw)*1.42)}
.prsi-pile{position:absolute;inset:0}
.prsi-pile .card{--w:var(--pw);position:absolute;left:0;top:0;transform:rotate(var(--r,0deg))}
.prsi-pile .card:not(:last-child){filter:brightness(.8)}
/* the suit a queen asked for, pinned to the corner of the pile */
.prsi-ask{
  position:absolute;right:-20px;top:-14px;z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ivory);color:var(--ink);
  box-shadow:0 0 0 2.5px var(--gold),0 6px 14px -4px rgba(0,0,0,.7);
  animation:prsi-pop .3s var(--ease);
}
.prsi-ask.red{color:var(--cherry)}
.prsi-ask svg{width:28px;height:28px}
@keyframes prsi-pop{from{transform:scale(.3);opacity:0}}

.prsi-call{
  display:inline-flex;align-items:center;gap:.4em;
  margin:10px 0 0;min-height:32px;padding:.2em 1em;border-radius:999px;
  font-size:1rem;font-weight:700;line-height:1.2;text-align:center;
}
.prsi-call:empty{visibility:hidden}
.prsi-call.hot{background:var(--cherry);color:var(--ivory);animation:prsi-pop .3s var(--ease)}
.prsi-call.suit{background:var(--ivory);color:var(--ink)}
.prsi-call.suit svg{width:1.05em;height:1.05em}
.prsi-call.suit.red svg{color:var(--cherry)}
.prsi-call.any{border:1.5px solid var(--line);color:var(--ivory);font-weight:600}
.prsi-say{
  margin:0;min-height:1.35em;max-width:22rem;
  font-size:.9rem;line-height:1.35;text-align:center;color:var(--mist);
}

/* ── the bar ─────────────────────────────────────────────────────────── */
.prsi-bar{
  position:relative;z-index:4;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;
  width:100%;max-width:34rem;margin:0 auto;padding:0 10px 0 14px;min-height:54px;
}
.prsi-me{position:relative;flex:none}
.prsi-me .ava{width:42px;height:42px;font-size:1.2rem}
.prsi-me .prsi-place{position:absolute;right:-8px;bottom:-6px;min-width:26px;height:22px;font-size:.95rem;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.prsi-status{padding:.45em .9em;font-size:.93rem}
.prsi-act{min-height:46px;padding:.4em 1.1em;font-size:.98rem;white-space:nowrap}

/* ── the hand ────────────────────────────────────────────────────────── */
.prsi-hand{position:relative;z-index:3}
.prsi-hand .card{
  position:absolute;left:50%;top:calc(var(--cw)*.36);margin-left:calc(var(--cw)/-2);
  transition:transform .3s var(--ease),filter .2s,box-shadow .2s;
  will-change:transform;
}
/* the shell frames the queen of spades in gold for Hearts; here she is a queen like the others */
.prsi .card.queen{box-shadow:0 0 0 1px rgba(36,26,45,.16),0 1px 1px rgba(0,0,0,.3),0 .14em .26em -.1em rgba(0,0,0,.6)}
.prsi-hand .card.dim{filter:brightness(.56) saturate(.75)}
.prsi-hand .card.sel{box-shadow:0 0 0 2.5px var(--gold),0 .2em .36em -.08em rgba(0,0,0,.7)}
.prsi-hand .card.new::after{
  content:"";position:absolute;left:50%;top:.07em;width:.11em;height:.11em;margin-left:-.055em;
  border-radius:50%;background:var(--gold);
}
.prsi-hand .card.shake{animation:shake .3s}
.prsi-ghost{position:fixed;z-index:6;pointer-events:none}
.prsi-probe{position:absolute;visibility:hidden;pointer-events:none;width:var(--cw);height:0}

/* ── the suit chooser ────────────────────────────────────────────────── */
.prsi-suits{
  position:absolute;inset:0;z-index:12;
  display:grid;align-items:end;justify-items:center;
  padding:12px;background:rgba(20,5,14,.62);
  animation:fade .2s both;
}
.prsi-box{
  width:100%;max-width:24rem;padding:1.1rem 1rem .5rem;border-radius:24px;
  background:var(--ivory);color:var(--ink);text-align:center;
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  animation:rise .28s var(--ease) both;
}
.prsi-box h3{margin:0 0 .8rem;font:400 1.3rem/1.2 var(--display)}
.prsi-suitrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.prsi-suit{
  display:grid;justify-items:center;align-content:center;gap:4px;
  min-height:86px;padding:8px 2px;border-radius:16px;
  background:#fff;border:1.5px solid rgba(36,26,45,.2);color:var(--ink);
  transition:transform .12s var(--ease);
}
.prsi-suit:active{transform:scale(.95)}
.prsi-suit.red{color:var(--cherry)}
.prsi-suit svg{width:38px;height:38px}
.prsi-suit small{font-size:.82rem;font-weight:600;color:var(--ink)}
.prsi-box .link{color:rgba(36,26,45,.7);text-decoration-color:rgba(36,26,45,.25);min-height:44px}
.prsi-box :focus-visible{outline-color:var(--ink)}

/* a short screen: everything a little tighter */
@media (max-height:600px){
  .prsi-others{padding-top:2px}
  .prsi-seat .ava{width:38px;height:38px;font-size:1.1rem;margin-bottom:1px}
  .prsi-others[data-n="3"] .prsi-seat:nth-child(odd){margin-top:8px}
  .prsi-mid{gap:3px;padding-top:6px}
  .prsi-call{margin-top:6px;min-height:28px;font-size:.93rem}
  .prsi-bar{min-height:50px}
}
@media (min-width:700px){
  .prsi-piles{gap:var(--cw)}
}
/* phone held sideways: the players in one line, what is asked for beside the piles */
@media (max-height:480px) and (orientation:landscape){
  .prsi-others{padding-top:8px}
  .prsi-others[data-n="3"] .prsi-seat:nth-child(odd){margin-top:0}
  .prsi-seat{flex:0 1 auto;display:flex;align-items:center;gap:6px}
  .prsi-seat .ava{width:34px;height:34px;font-size:1rem;margin:0 2px 0 0}
  .prsi-seat .nm{max-width:90px}
  .prsi-mid{
    grid-template-columns:auto minmax(0,auto);grid-template-areas:"piles call" "piles say";
    justify-content:center;align-items:center;column-gap:26px;row-gap:4px;padding:4px 12px;
  }
  .prsi-piles{grid-area:piles;gap:calc(var(--cw)*.5)}
  .prsi-call{grid-area:call;align-self:end;justify-self:start;margin:0}
  .prsi-say{grid-area:say;align-self:start;text-align:left}
  .prsi-suits{align-items:center}
}
@supports (width:1cqh){
  @media (max-height:480px) and (orientation:landscape){
    .prsi-piles{--pw:clamp(calc(var(--cw)*.8),calc((100cqh - 26px)*.66),calc(var(--cw)*1.75))}
  }
}