:root{
  --felt-far:#0d3527; --felt-near:#1c5b42; --ink:#f2f7f3; --ink-mute:#a8c4b4; --ink-faint:#86a493;
  --gold:#f0d79a; --paper:#e9ecea;
  /* four sizes, nothing in between. The phone lies flat on the table, so the
     whole scale sits a step above a held-phone design. */
  --t-s:12px; --t-m:15px; --t-l:22px; --t-xl:40px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;
  font-synthesis:none;font-size:var(--t-m);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:#1c2822}
button{font:inherit;cursor:pointer;touch-action:manipulation;border:0;background:none;color:inherit}
button:disabled{cursor:default}
button:focus-visible{outline:3px solid #6fd3a5;outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.stage{display:flex;flex-direction:column;align-items:center;padding:28px 12px 34px;gap:14px}
.deck{width:844px;max-width:100%;aspect-ratio:844/390;border-radius:30px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--felt-far) 0%,#14472f 46%,var(--felt-near) 100%);
  color:var(--ink);box-shadow:0 18px 44px #0b251a3d,0 2px 0 #ffffff14 inset;
  display:flex;flex-direction:column}

/* ---------- far edge : the people across the table ---------- */
.far{display:flex;justify-content:flex-start;align-items:center;gap:14px;
  padding:8px 14px 8px 20px;background:#00000026;border-bottom:1px solid #ffffff17;min-height:50px}
.seat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2;
  flex:0 1 auto;min-width:0;max-width:132px;padding:3px 8px;border-radius:10px;border:1px solid transparent}
.seat .mark{font-size:var(--t-s);color:var(--ink-faint)}
.seat .mark:empty{display:none}
.far-lead{flex:0 0 134px;display:flex;align-items:center;justify-content:flex-start;gap:9px;
  font-size:var(--t-s);color:var(--ink-faint)}
/* the five community cards : shapes, not pictures. Solid is face up on the table. */
.board{flex:0 0 auto;display:flex;align-items:center;gap:3px}
.board i{width:11px;height:15px;border-radius:2px;border:1px solid var(--ink-faint);
  transition:background .25s ease,border-color .25s ease}
.board i.up{background:var(--ink);border-color:var(--ink)}
/* the rail's centre slot, empty once the deal starts, is where the pot goes */
.rail-pot{flex:0 1 auto;margin:0;display:flex;align-items:baseline;gap:9px}
.rail-pot b{font-size:var(--t-m);font-weight:600}
.seat.covered .mark{color:var(--gold)}
.seat>*{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .who{font-size:var(--t-m);color:var(--ink-mute)}
.seat.covered .who{color:var(--gold)}

.seat.out{opacity:.45}
.seat.out{opacity:.42}
.seat.out .who{color:#5c7a68;text-decoration:line-through;text-decoration-thickness:1px}
.seat.allin .mark{color:#e8c06a}
.seat.covered{border-color:#e8c06a5e;background:#e8c06a14}

/* how tall this pile is next to the biggest one on the table */
.bar{display:block;width:100%;height:4px;border-radius:2px;background:#ffffff1f;margin:2px 0 1px}
.bar i{display:block;height:100%;border-radius:2px;background:var(--ink-faint)}
.seat.covered .bar i,.tseat.covered .bar i{background:var(--gold)}
.seat.out .bar i,.tseat.out .bar i{background:#4d6a58}
.tseat.you .bar i{background:var(--ink)}

/* ---------- the felt : two places for chips, the middle and in front of you ---------- */
.felt{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:14px 22px 8px;min-height:0}
.pot-label{margin:0;font-size:var(--t-s);color:var(--ink-faint);letter-spacing:.1em}
.pot-hero{margin:0;font-size:var(--t-xl);font-weight:600;line-height:1.16}
/* with the felt clear : the pot is the middle, a pile with the exact number beside it */
.pot-row{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}
.pot-block{display:flex;flex-direction:column;align-items:center;gap:2px}
.ticker{margin:0;font-size:var(--t-m);color:var(--ink-mute);text-align:center;min-height:21px}

/* ---------- the bets : a card for everyone with chips in front of them ---------- */
.bets{display:flex;align-items:flex-start;justify-content:center;gap:7px;width:100%;min-width:0}
/* A name and a number, nothing else: the pile is gone because at ten cards a pile is
   four chips wide and says less than the number under it. Cards share the row but never
   grow past 120px, so two bets sit as a compact group and not one bar across the felt. */
.bet-card{flex:1 1 0;min-width:0;max-width:120px;overflow:hidden;display:flex;
  flex-direction:column;align-items:center;gap:1px;padding:4px 4px 3px;border-radius:10px;
  background:#0a2b1fcc;border:1px solid #ffffff1c;
  animation:pullback .22s cubic-bezier(.22,.9,.28,1)}
.bet-who{display:flex;align-items:baseline;gap:5px;max-width:100%;min-width:0;
  font-size:var(--t-s);line-height:1.2}
.bet-who i{font-style:normal;color:var(--ink-mute);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bet-who em{font-style:normal;flex:0 0 auto;color:var(--ink-faint)}
.bet-who em:empty{display:none}
/* the amount, or 过牌 where there is no amount : the same slot either way, so a row of
   cards keeps one shape whatever is written in it */
.bet-num,.bet-check{display:flex;align-items:center;min-height:26px;line-height:1.16}
.bet-num{font-size:var(--t-l);font-weight:600}
.bet-check{font-size:var(--t-m);color:var(--ink-mute)}
/* past eight cards the row is thin enough that the amount steps down a size */
.bets.dense .bet-num{font-size:var(--t-m)}
.bets.dense .bet-num,.bets.dense .bet-check{min-height:18px}
.bet-card.out{opacity:.45}
.bet-card.covered{border-color:#e8c06a85;background:#3b2f17ef}
.bet-card.covered .bet-who em{color:var(--gold)}
.reading{margin:0;font-size:var(--t-m);color:var(--gold);min-height:21px}
.warn{margin:0;font-size:var(--t-m);color:#f3a99b;min-height:21px}

/* ---------- near edge : your rack ---------- */
.rack{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:6px 26px;border-top:1px solid #ffffff17;background:#ffffff0a}
.mine{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}
.mine i{font-style:normal;font-size:var(--t-s);color:var(--ink-faint);letter-spacing:.1em}
.mine b{font-size:var(--t-l);font-weight:600;line-height:1.3}
/* Chips you are pushing, in your own band beside the piles they came from. The auto
   margin eats the free space, so the zone hugs the runs and neither the label nor the
   runs move when it appears. A faint panel, so it reads as chips pushed forward and not
   as a fifth run. */
.pushed{flex:0 1 auto;min-width:0;margin-left:auto;display:flex;align-items:center;gap:10px;
  padding:5px 6px;border-radius:12px;background:#ffffff0f}
.pushed-chips{display:flex;align-items:center;flex-shrink:0}
.pushed-chips .chip{margin-left:var(--lap,-32px);box-shadow:0 2px 0 var(--edge),0 6px 9px #06180f5c}
.pushed-chips .chip:first-child{margin-left:0}
.pushed-read{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pushed-total{font-size:var(--t-l);font-weight:600;line-height:1.16}
.pushed .reading,.pushed .warn{font-size:var(--t-s);min-height:0;white-space:nowrap}
.runs{display:flex;gap:14px;align-items:center;flex-shrink:0}
.run{display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:12px}
.run:disabled{opacity:.28}
/* before the deal the chips just sit there in full colour: not tappable, not dimmed */
.rack.resting .run:disabled{opacity:1}
.run.empty:not(:disabled) .chip{opacity:.42}
.run:not(:disabled):active .fan{transform:translateY(-3px)}
.fan{display:flex;align-items:center;transition:transform .12s ease}
.fan .chip{margin-left:-33px}
.fan .chip:first-child{margin-left:0}
.run small{font-size:var(--t-s);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.rack-empty{flex:1;text-align:center;color:var(--ink-faint);font-size:var(--t-m)}

.chip{position:relative;width:44px;height:44px;flex-shrink:0;border-radius:50%;
  background:var(--chip);border:3px dashed var(--stripe);color:var(--letter);
  box-shadow:0 2px 0 var(--edge),0 4px 5px #06180f47;
  display:flex;align-items:center;justify-content:center;font-size:var(--t-s);font-weight:700}
.chip:after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--stripe);opacity:.55}
.chip>span{position:relative;z-index:1;transform:scaleY(.88)}
.denomination-100{--chip:#292c30;--stripe:#e3ded3;--edge:#141819;--letter:#fff}
.denomination-25{--chip:#346d9e;--stripe:#edf0e9;--edge:#194563;--letter:#fff}
.denomination-5{--chip:#be5046;--stripe:#ffede1;--edge:#81362f;--letter:#fff}
.denomination-1{--chip:#eeeadb;--stripe:#748477;--edge:#b0b6a5;--letter:#314739}

/* Pot chips are the same chips, further away: smaller, no faces, everything about them
   scaled off the 44px original so the ring and the rim keep their proportions. */
.pot-pile{display:inline-flex;align-items:center;flex-shrink:0}
.pot-pile .chip{box-shadow:0 2px 0 var(--edge),0 5px 8px #06180f5c}
.chip.mid{width:34px;height:34px;border-width:2.3px}
.chip.mid:after{inset:3.1px}
.pot-pile.mid .chip{margin-left:-18.5px}
.chip.small{width:26px;height:26px;border-width:1.8px}
.chip.small:after{inset:2.4px}
.pot-pile.small .chip{margin-left:-14px}
/* across the table, in the zoomed-out view : still round, still overlapping like chips */
.chip.tiny{width:20px;height:20px;border-width:1.4px}
.chip.tiny:after{inset:1.9px}
.pot-pile.tiny .chip{margin-left:-8px}
.pot-pile .chip:first-child{margin-left:0}

/* chips travelling : a ghost, never in the layout and never in the way */
.flyer{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  transition:left .45s cubic-bezier(.22,.9,.28,1),top .45s cubic-bezier(.22,.9,.28,1),
    opacity .45s ease-out}
@media (prefers-reduced-motion:reduce){.flyer{display:none}.bet-card{animation:none}
  .board i{transition:none}}

/* ---------- your hands ---------- */
.hands{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:11px 26px 15px;
  border-top:1px solid #ffffff17;background:#00000024}
.act{min-height:52px;border-radius:12px;font-size:var(--t-m);font-weight:600;
  display:flex;align-items:center;justify-content:center;padding:0 12px}
.act.ghost{border:1px solid #ffffff33;color:var(--ink-mute)}
.act.ghost:not(:disabled):active{background:#ffffff12}
.act.soft{background:#ffffff1c;color:var(--ink);border:1px solid #ffffff1f}
.act.soft:not(:disabled):active{background:#ffffff2b}
.act.go{background:#f2f7f3;color:#123c2b}
.act.go:not(:disabled):active{background:#dbe7de}
.act.go:disabled{background:#ffffff12;color:#ffffff47}
.act.soft:disabled,.act.ghost:disabled{opacity:.3}
/* not a button : it only holds the row while the host deals */
.act.wait{margin:0;font-weight:400;color:var(--ink-mute);pointer-events:none}

/* ---------- host sheet ---------- */
.sheet{position:absolute;inset:0;background:#06180fcc;backdrop-filter:blur(3px);
  display:flex;flex-direction:column;justify-content:center;gap:13px;padding:20px 30px;z-index:4}
.sheet h3{margin:0;font-size:var(--t-m);font-weight:600;color:var(--ink-mute);text-align:center}
.sheet-row{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.sheet .act{min-width:152px}
.pick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pick button{min-height:46px;padding:0 20px;border-radius:11px;border:1px solid #ffffff38;
  color:var(--ink);font-size:var(--t-m);font-weight:600}
.pick button.on{background:#f2f7f3;color:#123c2b;border-color:#f2f7f3}
.pot-line{margin:0;text-align:center;font-size:var(--t-m);color:var(--ink-mute)}
.pot-line b{color:var(--ink)}
.sheet .warn{text-align:center}

/* ---------- prototype tools, outside the table ---------- */
.tools{width:844px;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:var(--t-s);color:#68766d}
.tools select,.tools button{font:inherit;font-size:var(--t-s);min-height:34px;padding:7px 11px;
  border-radius:8px;border:1px solid #c2ccc5;background:#fff;color:#2c3b33}
.tools button{font-weight:600}
.tools button:disabled{opacity:.4}

@media (max-width:880px){
  .stage{padding:12px 8px 20px}
  .deck{border-radius:22px}
  .far,.felt,.rack,.hands{padding-left:15px;padding-right:15px}
  .runs{gap:9px}
  .fan .chip{margin-left:-34px}
}
@media (prefers-reduced-motion:reduce){.fan{transition:none}}

/* ---------- corner controls ---------- */
.far-seats{flex:1 1 0;min-width:0;display:flex;justify-content:center;align-items:center;gap:14px}
.far-controls{flex:0 0 134px;display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-left:auto}
.zoom-btn,.more{height:34px;border-radius:17px;color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center}
.zoom-btn{gap:7px;padding:0 13px;font-size:var(--t-s);
  border:1px solid #ffffff2b;white-space:nowrap}
.zoom-btn:active{background:#ffffff14}
.table-glyph{font-size:14px;line-height:1;flex-shrink:0}
.more{width:34px;flex:0 0 auto;font-size:20px;line-height:1}
.more:active{background:#ffffff14}
/* the way in to the host guide : same weight as the host menu opposite it */
.guide-btn{width:34px;height:34px;flex:0 0 auto;border-radius:17px;color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center}
.guide-btn:active{background:#ffffff14}
.guide-btn .icon{width:24px;height:24px}

/* ---------- host guide : a whole hand, in order, only when asked for ---------- */
.sheet.guide-sheet{justify-content:flex-start;padding:46px 30px 16px;gap:8px}
.guide{flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;margin:0;padding:0;
  list-style:none;counter-reset:step}
.guide-step{counter-increment:step;display:grid;grid-template-columns:1.5em auto 1fr;
  gap:0 9px;align-items:baseline;padding:5px 9px;border-radius:9px;
  font-size:var(--t-m);line-height:1.45;color:var(--ink-faint)}
.guide-step:before{content:counter(step);font-variant-numeric:tabular-nums;color:#ffffff3d}
.guide-step b{font-weight:600;color:inherit;white-space:nowrap}
.guide-step.on{color:var(--ink);background:#ffffff14}
.guide-step.on:before{color:var(--ink-mute)}
.guide-foot{flex:0 0 auto;margin:0;padding:0 9px;font-size:var(--t-s);color:var(--ink-faint)}

/* ---------- zoomed out : the whole table ---------- */
@keyframes pullback{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:scale(1)}}
.tableview{position:absolute;inset:0;z-index:6;background:#071d15f2;
  animation:pullback .28s cubic-bezier(.22,.9,.28,1)}
/* smaller than it was, because the middle is no longer the only place chips sit:
   the band it gave up is where everyone's bets now stand */
.oval{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:28%;height:30%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 38%,#1d6147,#113b2b);
  border:2px solid #ffffff1c;box-shadow:0 12px 34px #04120b73,inset 0 2px 0 #ffffff12;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.oval-label{font-size:var(--t-s);color:var(--ink-faint);letter-spacing:.1em}
.oval-pot{font-size:var(--t-xl);font-weight:600;line-height:1.16}
/* a player's bet, sitting between their card and the middle */
.tbet{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;
  gap:5px;white-space:nowrap;font-size:var(--t-s);color:var(--ink-mute);pointer-events:none}
.tseat{position:absolute;transform:translate(-50%,-50%);width:106px;
  display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.18;
  padding:6px 9px;border-radius:12px;background:#0a2b1fe8;border:1px solid #ffffff1c}
.tseat>*{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tseat .who{font-size:var(--t-s);color:var(--ink-faint)}
.tseat .stack{font-size:var(--t-l);font-weight:500;color:var(--ink)}
.tseat .tnote:not(:empty){font-size:var(--t-s);color:var(--ink-faint);margin-top:1px}
.tseat.you{border-color:#6f9fc9;background:#2a5d8af0}
.tseat.you .bar{background:#3f76a4}
.tseat.you .who{color:var(--ink-mute)}
.tseat.allin .stack{color:#e8c06a}
.tseat.out{opacity:.4}
.tseat.covered{border-color:#e8c06a85;background:#3b2f17ef}
.oval-hint{font-size:var(--t-s);color:#6d8d7b;margin-top:5px}

@media (max-width:880px){
    .tseat{width:98px}
}

/* ---------- setup ---------- */
.deck.setup{display:flex;flex-direction:column;padding:26px 30px 20px;gap:12px;
  background:linear-gradient(180deg,var(--felt-far) 0%,#14472f 60%,var(--felt-near) 100%)}
.setup-body{flex:1;display:flex;min-height:0}
.setup-col{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.setup-col.narrow{flex:0 0 226px}
.field-label{font-size:var(--t-s);color:var(--ink-faint);letter-spacing:.08em}
.setup input[type=number],.setup input[type=text],.setup input:not([type]){width:100%;min-height:42px;
  padding:9px 12px;border-radius:10px;border:1px solid #ffffff2b;background:#ffffff14;
  color:var(--ink);font:inherit;font-size:var(--t-m);font-variant-numeric:tabular-nums}
.setup input::placeholder{color:#7c9a89}
.setup input:focus-visible{outline:2px solid #6fd3a5;outline-offset:1px}
.seat-fields{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;overflow-y:auto}
.seat-field{position:relative;width:148px}
.seat-field input{padding-right:30px}
.drop{position:absolute;right:4px;top:5px;width:32px;height:32px;border-radius:50%;
  color:var(--ink-faint);font-size:17px;line-height:1}
.drop:active{background:#ffffff1a}
.add-seat{width:148px;min-height:42px;border-radius:10px;border:1px dashed #ffffff33;
  color:var(--ink-faint);font-size:var(--t-s)}
.add-seat:active{background:#ffffff10}
.blind-pair{display:flex;gap:8px}
.setup-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
.setup-foot .act{min-width:168px}

/* ---------- rebuy ---------- */
.act.span-all{grid-column:1 / -1}
/* nothing to raise with until chips are out, so the call takes the room */
.act.span-2{grid-column:span 2}

/* ---------- cash out ---------- */
.sheet.scroll{justify-content:flex-start;overflow-y:auto;gap:10px}
.ledger{width:100%;max-height:232px;overflow-y:auto;display:flex;flex-direction:column}
.ledger-row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:14px;
  padding:7px 2px;border-bottom:1px solid #ffffff14}
.ledger-row .who{font-size:var(--t-m);color:var(--ink)}
.ledger-row .trace{font-size:var(--t-s);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.ledger-row .net{font-size:var(--t-l);font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink-mute);min-width:78px;text-align:right}
.ledger-row .net.up{color:#7fd6a2}
.ledger-row .net.down{color:#f0a396}
.inline-add{align-items:center}
.inline-add input{width:172px;min-height:46px;padding:9px 12px;border-radius:11px;
  border:1px solid #ffffff2b;background:#ffffff14;color:var(--ink);font:inherit;font-size:var(--t-m)}
.inline-add input::placeholder{color:#7c9a89}
.inline-add select{min-height:46px;padding:9px 11px;border-radius:11px;border:1px solid #ffffff2b;
  background:#ffffff14;color:var(--ink);font:inherit;font-size:var(--t-m)}
.inline-add select option{color:#123c2b}

@media (max-width:880px){
  .deck.setup{padding:14px 16px}
  .setup-body{gap:14px}
  .setup-col.narrow{flex:0 0 188px}
  .seat-field,.add-seat{width:124px}
}

/* ---------- landing ---------- */
.setup-body{flex-direction:column;align-items:flex-start;justify-content:center;gap:18px}
.setup-row{display:flex;gap:16px;align-items:flex-end}
.setup-field{display:flex;flex-direction:column;gap:7px;flex:0 0 226px}
.setup-field.wide{flex:0 0 280px}
.setup-field.half{flex:0 0 109px}
.room-input{text-align:center;letter-spacing:.34em;font-size:var(--t-l);text-transform:uppercase}
.setup-foot{gap:18px}
.pot-hero.room{letter-spacing:.14em}

/* ---------- prototype role toggle ---------- */
.role-toggle{display:inline-flex;border:1px solid #c2ccc5;border-radius:8px;overflow:hidden}
.role-toggle button{min-height:34px;padding:7px 14px;border:0;border-radius:0;background:#fff;
  font-size:var(--t-s);font-weight:600;color:#68766d}
.role-toggle button + button{border-left:1px solid #d7ded9}
.role-toggle button.on{background:#174d38;color:#fff}
.role-toggle button:disabled{opacity:.4}

/* ---------- landing: two ways in, nothing else ---------- */
.deck.landing{display:flex;align-items:stretch;gap:20px;padding:30px}
.path{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  border:1px solid #ffffff2b;border-radius:20px;background:#ffffff0d;padding:24px}
.path:active{background:#ffffff1a}
.path strong{font-size:var(--t-l);font-weight:600;color:var(--ink)}
.back{position:absolute;top:14px;left:16px;width:40px;height:40px;border-radius:50%;
  font-size:28px;line-height:1;color:var(--ink-faint);display:grid;place-items:center;z-index:2}
.back:active{background:#ffffff14}
.deck.setup{position:relative}
.deck.setup .setup-body{padding-left:34px}

/* ---------- several phones stacked on one page ---------- */
.add-screen{display:flex;justify-content:center;padding:2px 12px 36px}
.add-screen button{font:inherit;font-size:var(--t-s);font-weight:600;min-height:36px;padding:8px 16px;
  border-radius:8px;border:1px dashed #b3c0b7;background:#fff;color:#2c3b33}
.add-screen button:active{background:#f1f4f2}

/* ---------- icons (Heroicons) ---------- */
.icon{width:22px;height:22px;display:block}
.more .icon{width:24px;height:24px}
.back .icon{width:24px;height:24px}
.sheet-close{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-mute);z-index:1}
.sheet-close:active{background:#ffffff14}

.headcount{margin:0;display:flex;align-items:center;gap:6px;color:var(--ink-mute);font-size:var(--t-m)}
.headcount .icon{width:18px;height:18px}
.headcount b{font-weight:500}


/* ---------- action log ---------- */
.log-line{margin:0;padding:7px 2px;border-bottom:1px solid #ffffff14;
  font-size:var(--t-m);color:var(--ink-mute)}

/* ---------- a real phone, lying flat : the table is the whole screen ---------- */
/* too narrow for both the pile and the runs : the number is the fact, the pile was the
   picture of it, so the picture goes */
@media (max-width:720px) and (orientation:landscape){.pushed-chips{display:none}}

@media (max-width:950px) and (orientation:landscape){
  /* bleed the felt under Safari's bars instead of showing paper strips */
  html,body{background:var(--felt-far)}
  .stage{padding:0;gap:0}
  .bets{gap:5px}
  .bet-card{padding:4px 3px 3px}
  .deck{width:100vw;height:100svh;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .deck{height:100dvh}
  .tools{display:none}
  /* the second stacked screen is a desktop testing aid */
  .stage ~ .stage{display:none}
}

/* ---------- a real phone, held upright : turn the table, not the phone ---------- */
@media (max-width:600px) and (orientation:portrait){
  html,body{background:var(--felt-far)}
  .stage{padding:0;gap:0;min-height:100svh;justify-content:center}
  .stage{min-height:100dvh}
  .tools{display:none}
  .stage ~ .stage{display:none}

  .deck.landing,.deck.setup{width:100vw;height:100svh;max-width:none;aspect-ratio:auto;
    border-radius:0;box-shadow:none}
  .deck.landing,.deck.setup{height:100dvh}
  .deck.landing{flex-direction:column;justify-content:center;padding:20px;gap:16px}
  .deck.setup{padding:60px 20px 24px}
  .deck.setup .setup-body{padding-left:0}
  .setup-row{flex-direction:column;align-items:stretch;gap:14px}
  .setup-field,.setup-field.wide,.setup-field.half{flex:0 0 auto;width:100%}
  .setup-foot{flex-direction:column;align-items:stretch;gap:12px}
  .setup-foot .act{width:100%;min-width:0}

  /* Sideways, so the rack still lies along the long edge. The sheet and the
     table view are children of this box, so they turn with it. */
  .deck.table{position:fixed;top:0;left:0;width:100svh;height:100vw;max-width:none;
    aspect-ratio:auto;border-radius:0;box-shadow:none;
    transform-origin:0 0;transform:rotate(90deg) translateY(-100vw)}
  /* rotated: the box's width runs down the screen, so it is the one to track */
  .deck.table{width:100dvh}
}