/* The felt: opponents fanned along the far edge, deck and last card in the middle. */

/* The table itself: a green surface inside a wooden rail, opponents fanned
   along the far edge, deck and the last card turned over in the middle. */
.felt{position:relative;margin-bottom:.9rem;padding:1rem .7rem 1.05rem;
  border:5px solid transparent;border-radius:28px;
  background:
    radial-gradient(120% 85% at 50% 4%,#32705A 0%,#1B3D2E 62%,#12251D 100%) padding-box,
    linear-gradient(155deg,#E2B760,#725025 42%,#AA7738 72%,#3B2817) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,248,232,.1),inset 0 12px 34px rgba(0,0,0,.46),
    0 14px 30px rgba(0,0,0,.38)}
.turnstrip{display:flex;align-items:center;gap:.45rem;justify-content:center;
  margin:0 0 .6rem;padding:.4rem .7rem;border-radius:999px;
  background:rgba(0,0,0,.28);font-size:.82rem;
  font-variant-numeric:tabular-nums}
.turnstrip .av{width:22px;height:22px;font-size:.62rem}
.turnstrip b{color:var(--ink);font-weight:700}
.turnstrip span{margin-left:.1rem;color:var(--gold);font-weight:700}
.turnstrip.mine{background:rgba(242,195,91,.16);
  box-shadow:inset 0 0 0 1px rgba(242,195,91,.4)}
.turnstrip.mine b{color:var(--gold)}

.opps{display:flex;justify-content:center;align-items:flex-start;
  gap:.35rem;flex-wrap:wrap;min-height:4.2rem}
.opp{flex:1 1 auto;min-width:56px;max-width:104px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  transition:transform .3s var(--ease),opacity .25s}
.opp.out{opacity:.5}
.opp.up .onm{color:var(--gold)}
.onm{font-size:.72rem;font-weight:650;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ohand{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;min-height:24px}
.oscore{font-size:.92rem;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1}
.ost{font-size:.58rem;font-weight:700;letter-spacing:.03em;color:var(--dim);
  text-transform:uppercase}
.ost.b{color:var(--red)} .ost.f{color:var(--good)} .ost.z{color:var(--blue)}
.ost.g{color:var(--gold)}

/* During play the felt stretches to fill whatever height is going, so the
   space between the opponents and your hand reads as table rather than as
   a gap, and your own hand stays pinned at the bottom within thumb reach.
   flex-shrink is 0 so a short screen never squeezes the cards. */
main.play{display:flex;flex-direction:column}
main.play .felt{flex:1 0 auto;display:flex;flex-direction:column}
main.play .felt .centre{margin-top:auto;margin-bottom:auto}
main.play .me{flex:0 0 auto;margin-bottom:0}

.centre{display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:1rem 0 .6rem}
.centre .deck{transform:scale(1.15)}
.cinfo{text-align:center;font-size:.74rem;color:var(--dim);
  letter-spacing:.03em;text-transform:uppercase}

/* the drop zone the dealt card visually comes from */
.centre .lastc{position:relative}
.centre .lastc::after{content:"";position:absolute;inset:-7px;border-radius:8px;
  border:1px dashed rgba(242,195,91,.3)}