/* Poker: the other players on top with their stacks and bets, pot and board
   in the middle, my cards with my stack and hand, and the action bar. */
.poker{
  position:absolute;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);
  overflow:hidden;
  --bw:clamp(38px,min(var(--cw)*1.02,(100vw - 64px)/5),84px); /* a card on the board */
}

/* ── the other players ───────────────────────────────────────────────── */
.poker-others{
  display:flex;justify-content:space-evenly;align-items:flex-start;gap:4px;
  width:100%;max-width:36rem;margin:0 auto;padding:6px 6px 0;
}
.poker-seat{
  position:relative;flex:0 1 118px;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 */
.poker-others[data-n="3"] .poker-seat:nth-child(odd){margin-top:14px}
.poker-cards{display:flex;height:calc(var(--cw)*.46 + 4px);align-items:flex-end}
.poker-cards .card{--w:calc(var(--cw)*.34);transition:filter .3s}
.poker-cards .card + .card{margin-left:calc(var(--cw)*-.12)}
/* turned over at the showdown: large enough to read */
.poker-cards.shown{height:auto;margin-bottom:2px}
.poker-cards.shown .card{--w:calc(var(--cw)*.56)}
.poker-cards.shown .card + .card{margin-left:calc(var(--cw)*-.1)}
.poker-cards.poker-dealt .card{animation:poker-dealt .4s var(--ease) both}
.poker-cards.poker-dealt .card:nth-child(2){animation-delay:.1s}
@keyframes poker-dealt{from{transform:translateY(60px) scale(.4);opacity:0}}
.poker-who{display:grid;justify-items:center;gap:1px;min-width:0;max-width:100%}
.poker-who .ava{width:42px;height:42px;font-size:1.2rem;margin-bottom:2px}
.poker-seat .nm,.poker-me .nm{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.8rem;font-weight:600;line-height:1.25;
}
.poker-stack{font:400 1.15rem/1.1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.poker-seat .sub{font-size:.7rem;line-height:1.2;color:var(--mist)}
.poker-tag{
  display:inline-block;max-width:100%;padding:1px 8px;border-radius:999px;
  font-size:.72rem;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(0,0,0,.3);color:var(--ivory);
}
/* (not ".hand": that is the shell's own class for the cards in hand, and it brought its height along) */
.poker-tag.poker-handtag{display:block;background:none;color:var(--mist);font-size:.7rem;font-weight:500;line-height:1.25;padding:0;white-space:normal;overflow:visible;border-radius:0}
.poker-won{
  display:inline-block;padding:1px 8px;border-radius:999px;
  background:var(--gold);color:var(--ink);font:700 .78rem/1.4 var(--ui);
  animation:poker-pop .35s var(--ease);
}
@keyframes poker-pop{from{transform:scale(.4);opacity:0}}
/* dealer button and blind marks, pinned to the avatar */
.poker-btn,.poker-blind{
  position:absolute;z-index:2;
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:999px;
  font:700 .66rem/1 var(--ui);font-style:normal;
}
.poker-who{position:relative}
/* on the left: the robot mark sits on the right of the avatar */
.poker-who .poker-btn,.poker-who .poker-blind{top:26px;right:calc(50% + 12px)}
.poker-btn{background:var(--ivory);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.poker-blind{background:rgba(0,0,0,.45);color:var(--mist);box-shadow:inset 0 0 0 1px var(--line)}
/* the bet in front of the player */
.poker-bet{
  display:inline-flex;align-items:center;gap:4px;
  min-height:22px;padding:0 9px 0 7px;border-radius:999px;
  background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--gold);font:600 .82rem/1 var(--ui);font-variant-numeric:tabular-nums;
}
.poker-bet::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.poker-seat.turn .ava,.poker-me.turn .ava{
  box-shadow:0 0 0 2.5px var(--gold),0 0 0 8px rgba(118,176,67,.2);
  animation:pulse 1.7s ease-in-out infinite;
}
.poker-seat.folded .poker-cards,.poker-seat.folded .ava,.poker-seat.folded .nm,.poker-seat.folded .poker-stack{opacity:.45}
.poker-seat.out .ava,.poker-seat.out .nm,.poker-seat.out .poker-stack{opacity:.35}
.poker-seat.off .ava,.poker-seat.off .nm{opacity:.45}
.poker-seat.off .sub{color:var(--gold)}
.poker-seat.winner .poker-stack{text-shadow:0 0 12px rgba(118,176,67,.8)}

/* ── the middle ──────────────────────────────────────────────────────── */
.poker-mid{
  display:grid;align-content:center;justify-items:center;gap:8px;
  min-height:0;padding:6px 12px 4px;
}
.poker-pot{display:flex;align-items:baseline;gap:.6em;min-height:28px}
.poker-potmain{
  padding:.15em .9em;border-radius:999px;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line);
  font:400 1.05rem/1.5 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;
}
.poker-potside{font-size:.8rem;color:var(--mist)}
.poker-board{display:flex;gap:calc(var(--bw)*.09);justify-content:center}
.poker-slot{
  position:relative;width:var(--bw);height:calc(var(--bw)*1.42);
  border-radius:calc(var(--bw)*.095);box-shadow:inset 0 0 0 1.5px rgba(244,240,232,.12);
}
.poker-slot .card{--w:var(--bw);position:absolute;inset:0;transition:filter .3s,box-shadow .3s}
.card.poker-flip{animation:poker-flip .5s var(--ease) both}
.poker-cards.poker-flip .card{animation:poker-flip .5s var(--ease) both}
.poker-cards.poker-flip .card:nth-child(2){animation-delay:.12s}
@keyframes poker-flip{from{transform:rotateY(90deg) scale(.8);opacity:0}}
/* the five that won, and everything that did not */
.poker .card.win{box-shadow:0 0 0 2.5px var(--gold),0 0 18px rgba(118,176,67,.45),0 .14em .26em -.1em rgba(0,0,0,.6);z-index:1}
.poker .card.dim{filter:brightness(.56) saturate(.7)}
.poker .card.queen{box-shadow:0 0 0 1px rgba(23,23,15,.16),0 1px 1px rgba(0,0,0,.3),0 .14em .26em -.1em rgba(0,0,0,.6)}
.poker .card.queen.win{box-shadow:0 0 0 2.5px var(--gold),0 0 18px rgba(118,176,67,.45),0 .14em .26em -.1em rgba(0,0,0,.6)}
.poker-say{
  display:grid;gap:2px;margin:0;min-height:1.4em;max-width:24rem;
  font-size:.92rem;line-height:1.35;text-align:center;color:var(--mist);
}
.poker-say.result{
  padding:.45em 1em;border-radius:14px;
  background:var(--ivory);color:var(--ink);font-weight:500;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
  animation:poker-rise .3s var(--ease) both;
}
@keyframes poker-rise{from{transform:translateY(10px);opacity:0}}

/* ── me ──────────────────────────────────────────────────────────────── */
.poker-me{
  position:relative;z-index:3;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;max-width:36rem;margin:0 auto;padding:4px 12px 0;
}
.poker-mycards{
  display:flex;height:calc(var(--cw)*1.2*1.42 + 6px);align-items:flex-end;padding-left:4px;
}
.poker-mycards .card{--w:calc(var(--cw)*1.2);transition:filter .3s,box-shadow .3s}
.poker-mycards .card:first-child{transform:rotate(-5deg) translateY(2px);transform-origin:50% 100%}
.poker-mycards .card:last-child{margin-left:calc(var(--cw)*-.3);transform:rotate(5deg);transform-origin:50% 100%}
.poker-mycards .card.win:last-child{z-index:1}
.poker-mewho{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;min-width:0;position:relative}
.poker-mewho .ava{width:40px;height:40px;font-size:1.15rem;grid-row:1}
.poker-mewho .poker-btn,.poker-mewho .poker-blind{top:26px;left:-8px}
.poker-meline{display:flex;align-items:baseline;gap:.5rem;min-width:0;grid-row:1}
.poker-meline .poker-stack{font-size:1.4rem}
.poker-hand{grid-column:1 / -1;font-size:.9rem;line-height:1.3;color:var(--ivory);min-height:1.3em}
.poker-hand:empty{display:none}
.poker-mybet{align-self:start;margin-top:6px}

/* ── the action bar ──────────────────────────────────────────────────── */
.poker-acts{
  position:relative;z-index:4;
  display:grid;gap:8px;justify-items:center;
  width:100%;max-width:36rem;margin:0 auto;padding:6px 10px calc(10px + var(--sab));
}
.poker-status{padding:.4em .9em;font-size:.9rem}
.poker-row{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;width:100%}
.poker-row .btn{min-height:50px;padding:.4em .5em;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poker-row .btn.ask{background:var(--cherry);border-color:transparent;color:var(--ivory)}
.poker-next{min-height:48px;padding-left:1.6em;padding-right:1.6em;animation:poker-pop .3s var(--ease) both}

/* ── the amount chooser ──────────────────────────────────────────────── */
.poker-chooser{
  position:absolute;inset:0;z-index:12;
  display:grid;align-items:end;justify-items:center;
  padding:10px;background:rgba(13,18,10,.6);
  animation:fade .2s both;
}
.poker-box{
  width:100%;max-width:26rem;padding:1rem 1rem calc(.8rem + var(--sab));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;
}
/* my two cards again, in small: the box lies over the real ones */
.poker-chmine{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:.5rem;font-size:.9rem;font-weight:600}
.poker-chmine .card{--w:34px}
.poker-chmine span{margin-left:6px}
.poker-box h3{margin:0;font:500 .9rem/1.3 var(--ui);color:rgba(23,23,15,.66)}
.poker-amount{margin:.3rem 0 .4rem;font:400 1.7rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.poker-slider{
  display:block;width:100%;height:44px;margin:0;
  accent-color:var(--cherry);cursor:pointer;touch-action:pan-y;
}
.poker-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:.4rem}
.poker-quick button{
  min-height:44px;padding:0 4px;border-radius:14px;
  background:#fff;border:1.5px solid rgba(23,23,15,.2);color:var(--ink);
  font-size:.86rem;font-weight:600;white-space:nowrap;
}
.poker-quick button[aria-pressed="true"]{background:var(--ink);color:var(--ivory);border-color:transparent}
.poker-chrow{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:.7rem}
.poker-chrow .btn{min-height:50px;color:var(--ink);background:none;border-color:rgba(23,23,15,.22)}
.poker-chrow .btn.primary{background:var(--ink);color:var(--ivory);border-color:transparent}
.poker-box :focus-visible{outline-color:var(--ink)}

/* a short screen: everything a little tighter */
@media (max-height:600px){
  .poker{--bw:clamp(34px,min(var(--cw)*.9,(100vw - 64px)/5),70px)}
  .poker-others{padding-top:2px}
  .poker-others[data-n="3"] .poker-seat:nth-child(odd){margin-top:6px}
  .poker-who .ava{width:36px;height:36px;font-size:1.05rem}
  .poker-who .poker-btn,.poker-who .poker-blind{top:22px;right:calc(50% + 9px)}
  .poker-cards{height:calc(var(--cw)*.4 + 2px)}
  .poker-cards .card{--w:calc(var(--cw)*.3)}
  .poker-cards.shown .card{--w:calc(var(--cw)*.44)}
  .poker-tag.poker-handtag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .poker-hand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .poker-say.result{padding:.3em .8em}
  .poker-stack{font-size:1.02rem}
  .poker-mid{gap:5px;padding-top:2px}
  .poker-pot{min-height:24px}
  .poker-say{font-size:.85rem}
  .poker-mycards{height:calc(var(--cw)*1.05*1.42 + 4px)}
  .poker-mycards .card{--w:calc(var(--cw)*1.05)}
  .poker-acts{gap:5px;padding-top:3px}
  .poker-status{padding:.3em .8em;font-size:.84rem}
  .poker-row .btn{min-height:46px;font-size:.92rem}
}
/* a narrow phone: the three buttons keep their words inside */
@media (max-width:359px){
  .poker-row{gap:6px;grid-template-columns:1fr 1.4fr 1fr}
  .poker-row .btn{padding:.3em .3em;font-size:.9rem;line-height:1.1;white-space:normal}
  .poker-seat .nm{max-width:calc(100% - 6px)}
  .poker-quick{gap:4px}
  .poker-quick button{font-size:.8rem;padding:0 2px}
}
@media (min-width:700px){
  .poker-others{max-width:44rem}
  .poker-seat{flex-basis:140px}
}
/* phone held sideways: players in one line, the chooser in the middle */
@media (max-height:480px) and (orientation:landscape){
  .poker-others[data-n="3"] .poker-seat:nth-child(odd){margin-top:0}
  .poker-seat{display:flex;align-items:center;gap:6px;flex:0 1 auto}
  /* the plate lies down: avatar, then the name over the stack and what the player did */
  .poker-seat .poker-who{
    display:grid;grid-template-columns:auto minmax(0,auto) minmax(0,auto);grid-template-rows:auto auto;
    column-gap:6px;row-gap:0;align-items:center;justify-items:start;min-width:0;text-align:left;
  }
  .poker-who .ava{grid-row:1 / 3;flex:none;width:32px;height:32px;font-size:.95rem;margin:0}
  .poker-seat .poker-who .nm{grid-column:2 / 4;grid-row:1}
  .poker-seat .poker-who .nm:has(~ .sub){grid-column:2}
  .poker-seat .poker-who .sub{grid-column:3;grid-row:1}
  .poker-seat .poker-who .poker-stack{grid-column:2;grid-row:2}
  .poker-seat .poker-who .poker-tag,.poker-seat .poker-who .poker-won{grid-column:3;grid-row:2}
  .poker-mycards{height:calc(var(--cw)*.92*1.42 + 4px)}
  .poker-mycards .card{--w:calc(var(--cw)*.92)}
  .poker-acts{padding-bottom:calc(6px + var(--sab))}
  /* in one line nothing may squeeze the avatar or the stack; the name and the tag give way */
  .poker-seat .poker-cards,.poker-seat .poker-stack,.poker-seat .poker-bet,.poker-seat .poker-won{flex:none}
  .poker-seat .nm,.poker-seat .poker-tag,.poker-seat .sub{flex:0 1 auto;min-width:0}
  .poker-seat .poker-tag.poker-handtag,.poker-seat .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .poker-cards.shown{margin-bottom:0}
  .poker-who .poker-btn,.poker-who .poker-blind{top:-4px;right:auto;left:-8px}
  .poker-mid{gap:2px}
  .poker-chooser{align-items:center}
}