/* ==================================================================
   poker.css — the Hold'em table.

   The original sketch put a square in the middle with a seat on each
   edge. It worked on paper and not on a wide screen: three seats pinned
   to three edges left the middle small, the side seats sat at a
   different height from the board, and every seat was a large empty box
   with two small cards in one corner.

   What works is what the phone was already doing — opponents in a row,
   the board under them, you at the bottom. So that is now the layout at
   every width: the screen gets wider, not rearranged. You are still
   always the bottom seat whichever chair the server gave you, which was
   the part of the sketch that mattered.

   Cards reuse .card and its children from base.css, so a poker card and
   a blackjack card are the same object. Only the flip, the back and the
   chip rail live here, copied from table.css rather than importing it:
   the rest of that file is blackjack furniture this page has no use for.
================================================================== */

.felt{
  --card-w:52px;
  --seat-h:128px;
  max-width:900px;
  margin:0 auto;
}

/* ---------- the arrangement ---------- */

.ring{display:flex; flex-direction:column; gap:12px}

/* The padding is not decoration. A bet marker hangs off the bottom edge
   of an opponent's seat and off the top edge of yours, and it is about
   24px tall — more than the 12px gap in the ring. Without clearance it
   was drawn back over the seat's own footer, which is exactly where the
   RAISE / ALL IN badge sits: two boxes, one of them red, in the same
   twenty pixels. The row reserves the space instead. */
.opponents{display:flex; gap:12px; align-items:stretch; padding-bottom:18px}
.opponents .seat{flex:1 1 0; min-width:0}

/* Your seat is the one that matters, so it is wider than an opponent's
   and centred under the board rather than stretched across the table.
   The margin is the same clearance the opponents row has, for the
   marker that hangs above it. */
.seat-bottom{align-self:center; width:min(380px, 100%); margin-top:18px}

/* ---------- a seat ---------- */

.seat{
  border:1.5px solid var(--ink);
  background:var(--sheet);
  padding:10px 12px;
  display:flex; flex-direction:column; gap:8px;
  position:relative;
  min-width:0;
  min-height:var(--seat-h);
}
.seat-bottom{padding:12px 14px}

.seat.empty{
  background:transparent;
  border-style:dashed;
  border-color:rgba(0,0,0,.3);
  align-items:center; justify-content:center;
}
.seat.empty .seat-open{font-size:12.5px; color:var(--grey)}

/* Folded seats stay where they are and go quiet — removing them would
   make the table jump every time somebody passes. */
.seat.folded{opacity:.42}
.seat.acting{border-width:3px; margin:-1.5px}
/* The winner. Blue and one pixel thicker was the same signal the seat
   already used for whose turn it was, which is no signal at all at the
   moment it matters most. Gold, thicker, and it grows into place, so
   the seat that took the pot is the thing your eye lands on without
   reading a single word. */
.seat.winner{
  border-color:var(--gold); border-width:4px; margin:-2.5px;
  animation:seatWon .55s cubic-bezier(.2,1.5,.4,1) both;
  box-shadow:0 0 0 0 var(--gold-soft), 0 6px 22px -8px var(--gold-soft);
  z-index:3;
}
.seat.winner .seat-name, .seat.winner .seat-stack{color:var(--gold-ink)}

@keyframes seatWon{
  0%   { transform:scale(1);    box-shadow:0 0 0 0 var(--gold-soft) }
  45%  { transform:scale(1.055); box-shadow:0 0 0 12px transparent }
  100% { transform:scale(1.02); box-shadow:0 0 0 0 transparent }
}

.seat-head{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
.seat-name{
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.seat-stack{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.seat.you .seat-name{color:var(--blue)}

.seat-cards{display:flex; align-items:flex-start; min-height:calc(var(--card-w)*1.42)}
.seat-cards .card + .card{margin-left:calc(var(--card-w)*-0.34)}

.seat-foot{display:flex; align-items:center; gap:6px; margin-top:auto; min-height:20px}

/* What they just did, in the language of the table. */
.deed{
  border:1.5px solid var(--ink); background:var(--sheet-2);
  padding:1px 7px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.deed.fold{border-color:var(--grey); color:var(--grey)}
.deed.raise, .deed.bet{border-color:var(--red); color:var(--red)}
.deed.allin{background:var(--red); border-color:var(--red); color:#fff}
.deed-note{font-size:11.5px; color:var(--grey); font-variant-numeric:tabular-nums}

/* The dealer button rides on the seat that holds it, so it moves with
   the seat and needs no layout of its own. */
.button-chip{
  position:absolute; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--ink); background:#fff;
  display:grid; place-items:center;
  font-size:11px; font-weight:800; letter-spacing:-.02em;
  box-shadow:1.5px 1.5px 0 rgba(0,0,0,.7);
}
.opponents .button-chip{bottom:-13px; left:14px}
.seat-bottom .button-chip{top:-13px; right:14px}

/* ---------- the middle ---------- */

.middle{
  border:1.5px solid var(--ink);
  background:var(--sheet-2);
  display:flex; align-items:center; justify-content:center;
  gap:26px; flex-wrap:wrap;
  padding:16px 20px;
}
/* Street, board and pot read left to right on a wide screen and stack
   on a narrow one, which is what the wrap is for. */
.middle .street{order:1; min-width:70px; text-align:right}
.middle .board{order:2}
.middle .pot{order:3; min-width:100px}
.middle .result-banner{order:4}

.board{display:flex; gap:6px; min-height:calc(var(--card-w)*1.42)}
.board .slot{
  width:var(--card-w); height:calc(var(--card-w)*1.42);
  border:1.5px dashed rgba(0,0,0,.22);
}

.pot{display:flex; align-items:center; gap:9px}
.pot-label{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey);
}
.pot-amount{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}

/* The chips in the middle. They overlap into a pile rather than sitting
   in a row, so a pot that grows gets taller and wider instead of
   pushing the figure off the table. */
.pot-pile{
  display:flex; align-items:center;
  min-width:22px; min-height:19px;
  padding-right:6px;
}
.pot-pile .mini-chip{
  margin-left:-9px;
  transform:translateY(calc(var(--i, 0) * -0.6px));
}
.pot-pile .mini-chip:first-child{margin-left:0}

/* Who won, across the bottom of the middle. */
.result-banner{
  order:4; flex-basis:100%; margin:2px 0 0;
  text-align:center; font-size:14px; font-weight:700;
  border-top:1.5px solid var(--ink); padding-top:9px;
}

/* The pot on its way to the winner. Fixed, because it is measured
   against the viewport and has to cross the whole table. */
.pot-flight{
  position:fixed; z-index:40; display:flex; align-items:center;
  pointer-events:none;
  transition:transform .62s cubic-bezier(.35,.02,.2,1);
}
.pot-flight .mini-chip{margin-left:-9px}
.pot-flight .mini-chip:first-child{margin-left:0}

.street{
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey);
}

/* ---------- bets waiting to go in ----------
   The chips for the current round sit between a seat and the middle, as
   in the sketch: on the table, not yet in the pot. When the street
   closes they slide inward and join it. */

.bet{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--sheet); border:1.5px solid var(--ink);
  padding:2px 8px 2px 4px; white-space:nowrap;
  transition:transform .32s cubic-bezier(.4,.05,.2,1), opacity .32s;
  /* Higher than the winner's frame (z-index 3), which is the only other
     thing on the ring that raises itself. A marker that slides under a
     seat is a figure you cannot read. */
  z-index:6;
}
/* Anchored to the edge, not to a negative offset: 100% starts where the
   seat ends, so the marker is entirely outside it whatever the seat's
   padding does at this width. */
.opponents .bet{top:100%; margin-top:3px}      /* below an opponent, toward the board */
.seat-bottom .bet{bottom:100%; margin-bottom:3px}  /* above yours, toward the board */

.opponents .bet.collecting{transform:translate(-50%, 46px); opacity:0}
.seat-bottom .bet.collecting{transform:translate(-50%, -46px); opacity:0}

.mini-chip{
  width:17px; height:17px; border-radius:50%; border:1.5px solid var(--ink);
  flex:none;
  background:
    radial-gradient(circle at 50% 50%, var(--chip, #fff) 0 58%, transparent 58%),
    repeating-conic-gradient(from 15deg, var(--spot, #c9ccc6) 0 22deg, var(--chip, #fff) 22deg 60deg);
}
.mini-chip[data-v="5"]  {--chip:#f6c9c9; --spot:#c8102e}
.mini-chip[data-v="25"] {--chip:#bfe0c4; --spot:#1f7a45}
.mini-chip[data-v="100"]{--chip:#1d1d1d; --spot:#e8e8e8}
.mini-chip[data-v="500"]{--chip:#c9c2ea; --spot:#6b2b8f}

/* ---------- cards ---------- */

.seat-cards .card, .board .card{perspective:700px; box-shadow:none}
.card-in{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.4,.05,.2,1);
}
.card.down .card-in{transform:rotateY(180deg)}
.seat-cards .face, .board .face{backface-visibility:hidden}
.seat-cards .front, .board .front{background:#fff}
.seat-cards .front.red, .board .front.red{color:var(--red)}
.back{
  position:absolute; inset:0; backface-visibility:hidden;
  border:1.5px solid var(--ink); border-radius:2px;
  box-shadow:2px 2px 0 rgba(0,0,0,.85);
  transform:rotateY(180deg); background:var(--red);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 7px);
}

/* ---------- your controls ---------- */

.pokerbar{
  border:1.5px solid var(--ink); background:var(--sheet);
  margin-top:16px; padding:12px 14px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.pokerbar .act{flex:0 0 auto}
.pokerline{font-size:13px; color:var(--grey); margin:10px 0 0; min-height:19px}

/* ---------- the chip rail ----------
   The same clay chips as the blackjack table, copied from table.css so
   this page need not load the whole blackjack stylesheet. A chip should
   look like a chip on both tables. */

.chiprail{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-left:auto}
.chiprail .chips{display:flex; gap:8px}

.chiprail .chip{
  --chip:#fff; --spot:#c9ccc6;
  width:44px; height:44px; border-radius:50%; border:2px solid var(--ink);
  font-size:11px; font-weight:700; flex:none; position:relative;
  display:grid; place-items:center; cursor:pointer;
  transition:transform .1s; user-select:none;
  background:
    radial-gradient(circle at 50% 50%, var(--chip) 0 59%, transparent 59%),
    repeating-conic-gradient(from 15deg, var(--spot) 0 22deg, var(--chip) 22deg 60deg);
}
.chiprail .chip::after{     /* the pressed inner ring every clay chip has */
  content:""; position:absolute; inset:7px; border-radius:50%;
  border:1px solid rgba(0,0,0,.35);
}
.chiprail .chip[data-v="5"]{--chip:#f6c9c9; --spot:#c8102e}
.chiprail .chip[data-v="25"]{--chip:#bfe0c4; --spot:#1f7a45}
.chiprail .chip[data-v="100"]{--chip:#1d1d1d; --spot:#e8e8e8; color:#fff}
.chiprail .chip[data-v="500"]{--chip:#c9c2ea; --spot:#6b2b8f}
.chiprail .chip:hover:not(:disabled){transform:translateY(-2px)}
.chiprail .chip:disabled{opacity:.3; cursor:not-allowed}

.raise-controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.raise-controls .amount{
  font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
  border:1.5px solid var(--ink); background:#fff;
  padding:7px 10px; min-width:82px; text-align:right;
}
.act.solid{background:var(--ink); color:var(--sheet)}
.act.solid:hover:not(:disabled){background:var(--red); border-color:var(--red)}

/* ---------- the heading ---------- */

.pokertop{margin:26px 0 16px}
.pokertop-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.pokertop-row .btn{font-size:13px; padding:7px 12px}
.pokertop .board-title{font-size:clamp(21px,3.2vw,30px); letter-spacing:-.035em}
.ruleline{font-size:12.5px; color:var(--grey); margin-top:4px}
.demo-banner{
  border-left:3px solid var(--red); padding:2px 0 2px 10px;
  font-size:12.5px; color:var(--grey); margin-top:8px; max-width:64ch;
}

/* ---------- narrow screens ----------
   Nothing to rearrange: the layout is already a column. Only the sizes
   change, which is the whole benefit of having stopped fighting the
   grid on a phone. */

@media (max-width:720px){
  .felt{--card-w:44px; --seat-h:auto}
  .ring{gap:8px}
  .opponents{gap:6px}
  .seat{padding:8px 9px; gap:6px}
  .seat-bottom{width:100%; padding:10px 12px}
  .seat-name{font-size:12px}
  .middle{padding:12px 10px; gap:12px}
  .middle .street{order:1; min-width:0; width:100%; text-align:center}
  .board{gap:4px}
  .button-chip{width:22px; height:22px; font-size:10px}
  /* Three seats across a phone is about 110px each, and four chips plus
     a four-figure number is wider than that — the marker spilled onto
     the seat next door and the two figures sat on top of each other.
     The chips are texture, the number is the fact, so on a narrow
     screen only the number stays. */
  .opponents .bet{padding:2px 7px; gap:0}
  .opponents .bet .mini-chip{display:none}
  .chiprail{margin-left:0; width:100%; gap:12px}
  .raise-controls{width:100%}
  .raise-controls .amount{flex:1}
}

/* ---------- movement ----------
   Minimal on purpose: a card slides in from where the dealer would be
   and a chip lands. Nothing bounces, nothing spins. The point is that a
   hand should read as a sequence of events rather than appearing all at
   once, which is the same reason the blackjack table deals one card at
   a time instead of rendering the hand.
   
   Everything here is switched off under prefers-reduced-motion, at the
   bottom of this file. */

@keyframes pokerDealIn{
  from{ opacity:0; transform:translate(0, -26px) scale(.94) }
  to  { opacity:1; transform:none }
}
.seat-cards .card, .board .card{
  animation:pokerDealIn .26s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes chipLand{
  from{ opacity:0; transform:translateX(-50%) scale(.8) }
  to  { opacity:1; transform:translateX(-50%) scale(1) }
}
.bet{ animation:chipLand .2s cubic-bezier(.2,.7,.3,1) both }

/* The seat whose turn it is breathes very slightly, so you can find it
   without hunting for the thicker border. */
@keyframes acting{
  0%, 100%{ box-shadow:0 0 0 0 rgba(31,63,201,0) }
  50%     { box-shadow:0 0 0 3px rgba(31,63,201,.16) }
}
.seat.acting{ animation:acting 1.6s ease-in-out infinite }

/* The pot ticking up when a street closes. */
@keyframes potBump{
  0%  { transform:none }
  40% { transform:scale(1.12) }
  100%{ transform:none }
}
.pot-amount.bumped{ animation:potBump .3s ease-out }

@media (prefers-reduced-motion:reduce){
  .seat-cards .card, .board .card, .bet,
  .seat.acting, .pot-amount.bumped, .seat.winner{ animation:none }
  .pot-flight{ transition:none }
  .card-in{ transition:none }
}

/* ---------- the record of this sitting ----------
   The blackjack table's readout styles live in table.css, which this
   page does not load — one panel is not a reason to pull in a
   stylesheet written for a different layout, so the few rules it needs
   are here. Same look, deliberately: a table of figures should read the
   same on both games. */
.pokerstats{
  margin:22px auto 0; max-width:340px;
  border-top:1px solid var(--ink); padding-top:12px;
}
.pokerstats h3{font-size:12px; font-weight:700; margin:0 0 8px}
.pokerstats table.data{width:100%; border-collapse:collapse; font-size:13px}
.pokerstats table.data td{padding:3px 0; border-bottom:1px dotted rgba(0,0,0,.25)}
.pokerstats table.data td:last-child{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.pokerstats table.data tr:last-child td{border-bottom:none}


/* ---------- shuffling ----------
   Three card backs riffling into each other, where the board will be.
   Short on purpose: it is a beat that says the deck was mixed, not a
   loading screen. Reduced motion gets the deck without the movement. */

.shuffling{
  order:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:var(--card-h, 78px);
}
.shuffling span{
  width:var(--card-w, 54px);
  height:var(--card-h, 78px);
  border-radius:6px;
  background:
    repeating-linear-gradient(45deg, var(--ink) 0 4px, transparent 4px 8px),
    var(--paper);
  border:1px solid var(--rule);
  opacity:.85;
  animation:riffle .62s ease-in-out infinite;
}
.shuffling span:nth-child(2){ animation-delay:.1s }
.shuffling span:nth-child(3){ animation-delay:.2s }

@keyframes riffle{
  0%,100%{ transform:translateY(0) rotate(0) }
  35%    { transform:translateY(-9px) rotate(-5deg) }
  70%    { transform:translateY(4px) rotate(4deg) }
}

@media (prefers-reduced-motion: reduce){
  .shuffling span{ animation:none }
}

/* The deck's commitment, and the seed once the hand is over. Small and
   grey: it is a receipt, not a headline — but it has to be on the page,
   because a promise nobody can see is not a promise. */
.fairline{
  font-size:12px;
  color:var(--grey);
  margin:6px 0 0;
  min-height:17px;
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}
.fairline code{ font-size:11px; opacity:.9 }


/* ---------- out of chips ----------
   Sits where the action bar would be, so the eye finds it in the place
   it was already looking. */
.rebuybar{
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  border:1.5px solid var(--ink); background:var(--sheet);
  padding:12px 16px; margin-top:12px;
}
.rebuybar span{font-size:14px}