/* ------------------------------------------------ narrow, short portrait screens (iPhone Duo's outer
   display and its split view; js/hold.js COMPACT). In first person (body.hold-on) my hand lies face
   down on the felt just above the dock, the dock reads stack · fuse · actions, and anything that stands
   on the dock's top edge in the middle steps up over the hand (--hold-h, set by hold.js). */
#hold { position: fixed; left: 50%; bottom: calc(var(--dock-h, 190px) + 4px); z-index: 5; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 1px; padding: 6px 14px 0; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; cursor: grab; --lift: 0; }
#hold.held { cursor: grabbing; }
#hold.open { cursor: default; }
#hold:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 12px; }
.hold-cards { display: flex; perspective: 380px; perspective-origin: 50% 0; }
/* each card lies on the felt (tilted away) cut across into strips, far edge first, each hanging off the
   one before it; hold.js curl() bends them one after another, so the near end rolls up and back like a
   squeezed card while the far end stays down. Each strip shows a slice of the back on top and a slice
   of the face underneath (turned over, so the curl reads the right way up). The felt under the curl
   darkens. Face up, the whole card turns over on its far edge. */
.hc { position: relative; width: 48px; height: 68px; flex: none; transform-origin: 50% 100%; transform: rotateX(30deg) rotate(-7deg); transform-style: preserve-3d; }
.hc + .hc { margin-left: -12px; transform: rotateX(30deg) rotate(6deg) translateY(-2px); }
.hc::before { content: ""; position: absolute; inset: 2px; border-radius: 7px; background: linear-gradient(transparent 25%, rgba(var(--ink-rgb), .3));
  opacity: min(1, calc(var(--lift) * 2)); transform: translateZ(-1px); }
.hc-card { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; }
#hold.open .hc-card { transform: translateY(100%) rotateX(180deg); transition: transform .3s ease-out; }
.hc .st { position: absolute; left: 0; width: 100%; transform-origin: 50% 0; transform-style: preserve-3d; }
#hold.open .st { transition: transform .3s ease-out; }
.st > i { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; font-style: normal; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.st > i.sb { transform: rotateX(180deg); }
.st > i::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--sh, 0); pointer-events: none; }
.st > i.sb::after { opacity: calc(var(--sh, 0) * .5); }
.st > i.end { border-radius: 0 0 7px 7px; box-shadow: 0 3px 0 var(--ink); }
.hc-face, .hc-back { position: absolute; left: 0; width: 48px; height: 68px; box-sizing: border-box; border-radius: 7px; border: 2.5px solid var(--ink); }
.hc-face { background: #fffdf7; font-weight: 900; line-height: 1; }
/* rank and suit side by side, so the first bit of curl shows both */
.hc-face b { position: absolute; left: 3px; top: 4px; display: flex; align-items: center; gap: 1px; font: 900 17px/.95 "Arial Black", var(--font); }
.hc-face b i { font-style: normal; font-size: 13px; }
.hc-face b.flip { left: auto; top: auto; right: 3px; bottom: 4px; transform: rotate(180deg); }
.hc-face .pip { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-style: normal; font-size: 24px; }
/* the back: the 3D deck's red-and-cream lattice */
.hc-back { background: repeating-linear-gradient(45deg, rgba(217, 65, 43, .92) 0 3px, transparent 3px 8px),
  repeating-linear-gradient(-45deg, rgba(217, 65, 43, .92) 0 3px, #fff3de 3px 8px);
  box-shadow: inset 0 0 0 3px #fff3de; }
.hc { transition: transform .35s ease-out; }
/* seen (squeezed all the way): face up, standing on my row's bottom edge at the dock's right end for
   the rest of the hand (--seen-b, set by hold.js; it slides there from the felt). Dragged, it follows
   the finger; let go without a throw, it eases back. */
#hold.seen { left: auto; right: calc(12px + var(--safe-r)); bottom: var(--seen-b, var(--dock-h, 190px)); transform: none; padding: 0; gap: 3px;
  transition: translate .45s cubic-bezier(.3, 1.25, .5, 1), rotate .45s cubic-bezier(.3, 1.25, .5, 1); }
#hold.seen.held { transition: none; }
#hold.seen .hc { transform: rotate(-6deg); }
#hold.seen .hc + .hc { transform: rotate(5deg) translateY(-2px); }
#hold.seen .hc-card { transform: translateY(100%) rotateX(180deg); transition: transform .3s ease-out; }
#hold.seen .st { transition: transform .3s ease-out; }
#hold.seen .hc::before { opacity: 0; }
#hold.seen .hold-name { display: none; }
#hold.seen .hold-hint { order: -1; padding: 2px 7px; border-radius: 8px; background: rgba(var(--ink-rgb), .6); }
/* face down: on the felt right of the pot, just under the board (--hold-t, hold.js), whether the raise
   panel is open or not; the words step out while it is */
#hold.felt { left: 68%; top: var(--hold-t, auto); bottom: auto; scale: 1.08; transform-origin: 50% 0; }
/* (it is drawn as big as the seen hand will be: a touch up, as the tilt on the felt makes it look smaller) */
body.raise-open #hold.felt :is(.hold-hint, .hold-name) { visibility: hidden; }
/* seen and the raise panel open (tucked): smaller, at the right end on the panel's top edge (--tuck-b),
   below the board; no words */
#hold.tuck { left: auto; right: calc(12px + var(--safe-r)); bottom: var(--tuck-b, var(--dock-h, 190px)); transform: none; padding: 0; translate: none; rotate: none; transition: none; }
#hold.tuck .hold-cards { scale: .72; transform-origin: 100% 100%; }
#hold.tuck .hold-hint, #hold.tuck .hold-name { display: none; }
#hold.seen.toss .hc-card { transform: none; transition: transform .1s ease-in; } /* thrown: back up, it flies face down */
/* and the two close up into a near-stack about their middle, the second just off the first (moved, not
   laid out again, so the throw's sums in hold.js hold) */
#hold.seen.toss .hc { transform: translateX(14px) rotate(-3deg); transition: transform .14s ease-out; }
#hold.seen.toss .hc + .hc { transform: translateX(-14px) rotate(7deg) translate(3px, -3px); }
/* the thrown hand's shadow on the felt (hold.js toss), closing in under it as it comes down */
.hold-shade { position: fixed; z-index: 5; pointer-events: none; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), 0)); }
#hold.toss .hold-hint { visibility: hidden; }
#hold.gone { visibility: hidden; }
.hold-name { margin: 2px 0 0; min-height: 1.2em; font: 900 13px/1.2 var(--font); color: var(--yellow); text-shadow: 0 2px 0 var(--ink); opacity: 0; transition: opacity .12s; white-space: nowrap; }
#hold.peek .hold-name, #hold.open .hold-name { opacity: 1; }
.hold-hint { margin: 0; font: 800 11px/1.2 var(--font); color: #fff; text-shadow: 0 1px 0 var(--ink); white-space: nowrap; }
#hold.peek .hold-hint, #hold.open .hold-hint { display: none; }

/* the dock under it: no cards in my row, the hand name waits for a peek, my stack on one line */
body.hold-on .myrow .mycards, body.hold-on .myinfo .hand { display: none; }
body.hold-on .myrow { align-items: center; }
body.hold-on .myinfo { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
body.hold-on .myinfo .stk { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 25px; line-height: 1; text-shadow: 0 2px 0 var(--ink), 0 0 6px rgba(var(--ink-rgb), .55); }
body.hold-on .myinfo .stk .ic { width: 28px; height: 28px; vertical-align: -6px; }
body.hold-on #dockMain > #timerbar { margin: 0 0 -2px; max-width: none; }
/* seen: the hand name is back in my row, clear of the cards at its right end */
body.hold-seen .myinfo .hand { display: inline; }
body.hold-seen .myrow { padding-right: 104px; }
/* folding is a throw of the seen cards (hold.js); the button stays, out of sight, for the F key and
   screen readers, and check / bet share the row */
/* (and third person on the Duo, body.flick-on: the dock's cards are thrown in the same way, flick.js) */
body:is(.hold-on, .flick-on) .acts > [data-k="fold"] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body:is(.hold-on, .flick-on) .acts:has(> [data-k="fold"]) { grid-template-columns: 1fr 1fr; }
/* the sticker button stands on the left over my stack (the seen cards take the right end), the GTO
   panel next to it, and the 掀桌 offer in the middle */
body.hold-on #fxbar { left: calc(10px + var(--safe-l)); right: auto; bottom: calc(var(--dock-h, 190px) + 8px); }
body.hold-on #fxbar .fan { left: 2px; right: auto; }
body.hold-on .gto-panel { left: calc(76px + var(--safe-l)); max-width: calc(100vw - 86px - var(--safe-l) - var(--safe-r)); }
body.hold-on .flipbtn { left: 0; right: 0; margin: 0 auto; max-width: calc(100vw - 150px); }
/* the Duo opened like a book (body.hold-wide): the punch and the props are one box at the bottom left
   (main.js #atk): the pick big and yellow in the middle, the ones either side smaller, peeking in at the
   edges, dots under them for where it is, a chevron over the box saying throw it up and away. The three
   stickers that are not thrown (无敌, 表情, 雪茄) stand beside it, as tall as the box together. The
   dock is a compact column at the bottom right, in from the edge, my stack beside the seen hand, which is
   bigger here and stands over the column's right end */
#atk { display: none; }
body.hold-wide #atk:not([hidden]) { display: block; position: fixed; z-index: 6; left: calc(12px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); width: 152px; height: 116px; }
#atk .atk-box { position: absolute; inset: 0; overflow: hidden; border-radius: 26px; border: 3px solid var(--ink); background: rgba(255, 250, 240, .92); box-shadow: 0 4px 0 var(--ink), inset 0 -6px 0 rgba(var(--ink-rgb), .07);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline-offset: 3px; }
#atk .atk-strip { position: absolute; left: calc(50% - 36px); top: 11px; display: flex; gap: 8px; }
#atk .atk-i { flex: 0 0 72px; width: 72px; min-height: 72px; border-radius: 20px; border-width: 2.5px; box-shadow: 0 3px 0 var(--ink); padding: 2px; gap: 1px; font-size: 11px; white-space: nowrap;
  scale: calc(1.08 - min(var(--d, 2), 1) * .3); opacity: calc(1 - min(var(--d, 2), 1.5) * .4); }
#atk .atk-i .ic { width: 36px; height: 36px; }
#atk .atk-i.on { background: var(--yellow); box-shadow: 0 3px 0 var(--ink), 0 0 0 3px #fff, 0 0 14px rgba(255, 196, 40, .9); }
#atk .atk-i.nudge { animation: atk-nudge .45s ease-out; }
@keyframes atk-nudge { 30% { translate: 0 -9px; } 60% { translate: 0 2px; } }
#atk .atk-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
#atk .atk-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb), .22); transition: width .15s, background .15s; }
#atk .atk-dots i.on { width: 14px; background: var(--ink); }
#atk .atk-up { position: absolute; left: 50%; bottom: calc(100% + 5px); width: 20px; height: 20px; margin-left: -10px; pointer-events: none; filter: drop-shadow(0 2px 0 var(--ink)); }
#atk .atk-up::before, #atk .atk-up::after { content: ''; position: absolute; left: 3px; width: 10px; height: 10px; border: solid #fff; border-width: 4px 0 0 4px; border-radius: 2px; rotate: 45deg; }
#atk .atk-up::before { top: 2px; } #atk .atk-up::after { top: 10px; opacity: .55; }
@media (prefers-reduced-motion: no-preference) { html:not(.rm) #atk .atk-up { animation: atk-up 1.1s ease-in-out infinite; } }
@keyframes atk-up { 50% { translate: 0 -5px; } }
body.fx-dragging #atk .atk-up { visibility: hidden; }
/* beside it: 雪茄 (its seconds when lit) as tall as the box, 无敌 (filling up) over 表情 beside that */
body.hold-wide #fxbar { left: calc(174px + var(--safe-l)); right: auto; bottom: calc(10px + var(--safe-b)); display: grid; grid-template-columns: 74px 74px; grid-template-rows: 54px 54px; gap: 8px; max-height: none; }
body.hold-wide #fxbar .fxb { width: 100%; height: 100%; min-height: 0; gap: 2px; padding: 2px; border-radius: 18px; border-width: 2.5px; box-shadow: 0 3px 0 var(--ink); font-size: 12px; }
body.hold-wide #fxbar .fxb .ic { width: 28px; height: 28px; }
body.hold-wide #fxbar .fxb span { display: block; } /* the short-landscape rule (style.css) drops the words; here they fit */
body.hold-wide #fxbar .fxb:is(.punch, .box) { display: none; }
body.hold-wide #fxbar .fxb.cigar { grid-row: 1 / span 2; grid-column: 1; font-size: 14px; gap: 4px; }
body.hold-wide #fxbar .fxb.cigar .ic { width: 38px; height: 38px; }
body.hold-wide #fxbar .fxb.rage { grid-row: 1; grid-column: 2; }
body.hold-wide #fxbar .fxb.talk { grid-row: 2; grid-column: 2; }
body.hold-wide #dockMain { max-width: none; width: 330px; margin: 0 calc(80px + var(--safe-r)) 0 auto; gap: 6px; }
/* my stack and my hand are one group, the number's right end against the cards: my stack pinned in one
   place just left of where a seen hand stands, whatever the dock under it holds (my actions, the pre-action
   ones, nothing) and the hand face down or not, my hand's name over it on a line of its own; the seen hand
   stands on its bottom edge (hold.js --seen-b). The raise panel open, the two move up over it together as
   they stand (--tuck-b: its top edge, hold.js), my hand face down too (it would lie on the panel's corner).
   The outer display held sideways has its own numbers (further down). */
body.hold-wide #dockMain .myrow { position: fixed; right: calc(230px + var(--safe-r)); bottom: calc(96px + var(--safe-b)); padding: 0; max-width: 360px; }
body.hold-wide #dockMain .myinfo { flex-wrap: wrap-reverse; justify-content: flex-end; }
body.hold-wide #dockMain .myinfo > :not(.stk) { flex-basis: 100%; text-align: right; }
body.hold-wide.raise-open #dockMain .myrow { bottom: calc(var(--tuck-b, 180px) + 12px); }
body.hold-wide.raise-open #hold:is(.tuck, .felt) { left: auto; top: auto; right: calc(90px + var(--safe-r)); bottom: calc(var(--tuck-b, 180px) + 12px); transform: none; scale: 1.55; transform-origin: 100% 100%; }
body.hold-wide.raise-open #hold.felt { padding: 0; justify-items: end; } /* its cards right where a seen hand's stand */
body.hold-wide.raise-open #hold.felt :is(.hold-hint, .hold-name) { display: none; }
body.hold-wide #hold.tuck .hold-cards { scale: 1; }
body.hold-wide .acts .btn { min-height: 48px; font-size: 17px; border-radius: 14px; }
body.hold-wide .acts .btn small { font-size: 12px; }
body.hold-wide #hold.felt { left: calc(50% + 150px); scale: 1.65; } /* nearer the middle, clear of the right-hand seats' chips */
body.hold-wide #hold.seen { right: calc(90px + var(--safe-r)); scale: 1.55; transform-origin: 100% 100%;
  transition: translate .45s cubic-bezier(.3, 1.25, .5, 1), rotate .45s cubic-bezier(.3, 1.25, .5, 1), scale .45s cubic-bezier(.3, 1.25, .5, 1); }
body.hold-wide #hold.seen.held { transition: none; }
body.hold-wide #hold.tuck { transition: none; }
/* the outer display upright (html.duo-outer, js/hold.js): the iOS app draws down the camera strip on
   the right, and the camera is at its top, so the dock and the seen hand over it keep the same margin
   on both sides (in Safari the strip is outside the page and nothing moves) */
html.duo-outer #dock { padding-right: calc(8px + var(--safe-l)); }
html.duo-outer #hold.seen, html.duo-outer #hold.tuck { right: calc(12px + var(--safe-l)); }
/* and my hand a size up there, face down on the felt (growing down, clear of the board) and seen
   (growing from its corner); tucked over the raise panel it keeps its own size */
html.duo-outer #hold.felt { scale: 1.3; }
html.duo-outer #hold.seen { scale: 1.2; transform-origin: 100% 100%;
  transition: translate .45s cubic-bezier(.3, 1.25, .5, 1), rotate .45s cubic-bezier(.3, 1.25, .5, 1), scale .45s cubic-bezier(.3, 1.25, .5, 1); }
html.duo-outer #hold.seen.held { transition: none; }
html.duo-outer #hold.tuck { scale: 1; }
html.duo-outer body.hold-seen .myrow { padding-right: 122px; }
/* third person there (no hand on the felt): the sides as in first person, the stickers' round button on the left
   over the dock (its fan opening up from there) and my cards and stack on the right, the cards at the edge where
   my hand lies in first person (docs/app-vs-web.md). The inner display stood up (html.duo-up: fully open, upright)
   likewise, its stickers folded into the round button too (main.js measureHud .fx-fold), and the inner display
   held wide (html.duo-wide). The outer display held sideways further down. */
html:is(.duo-outer, .duo-up, .duo-wide) body:not(.hold-on) #fxbar { left: calc(10px + var(--safe-l)); right: auto; }
/* (seated, it sits a little lower and further in: down beside my stack, in my row's empty left end) */
html:is(.duo-outer, .duo-up, .duo-wide) body:not(.hold-on):has(#dockMain > .myrow > .mycards) #fxbar { left: calc(22px + var(--safe-l)); bottom: calc(var(--dock-h, 190px) - 10px); }
html:is(.duo-outer, .duo-up, .duo-wide, .duo-side) body:not(.hold-on) #fxbar .fan { left: 2px; right: auto; }
html:is(.duo-outer, .duo-up, .duo-wide, .duo-side) body:not(.hold-on) #dockMain .myrow:has(> .mycards) { flex-direction: row-reverse; }
html:is(.duo-outer, .duo-up, .duo-wide, .duo-side) body:not(.hold-on) #dockMain .myrow:has(> .mycards) .myinfo { align-items: flex-end; text-align: right; }
html:is(.duo-outer, .duo-up, .duo-wide, .duo-side) body:not(.hold-on) #dockMain .myrow .eqme { align-self: flex-end; }
/* the outer display held sideways (html.duo-side, not the inner one stood up), third person: as in first person
   there, the stickers' button in the bottom left corner, the buttons beside it and my cards and stack at the right
   end (the dock's two columns the other way round) */
html.duo-side:not(.duo-up) body:not(.hold-on) #fxbar { left: calc(8px + var(--safe-l)); right: auto; bottom: calc(8px + var(--safe-b)); }
html.duo-side:not(.duo-up) body:not(.hold-on) #dockMain { grid-template-columns: minmax(0, 540px) auto; justify-content: stretch; padding-left: 66px; }
html.duo-side:not(.duo-up) body:not(.hold-on) #dockMain > * { grid-column: 1; }
html.duo-side:not(.duo-up) body:not(.hold-on) #dockMain > .myrow { grid-column: 2; }
/* and the table keeps its size as the buttons under my cards come and go (the camera fits it over the dock, main.js
   measureHud: a row of buttons more or less, or a shorter one, zoomed it): the dock keeps room for my row and a
   row of buttons, my cards and stack at its top and whatever buttons there are at its foot */
html.duo-outer body:not(.fp-narrow) #dockMain:has(> .myrow > .mycards) { min-height: 132px; } /* my row 66 + 6 + the buttons (51 here, a few px more on the phone) */
html.duo-outer body:not(.fp-narrow) #dockMain:has(> .myrow > .mycards) > .myrow + * { margin-top: auto; }
/* (my stack stays where it stood beside my cards when they go: folded, between hands) */
html.duo-outer body:not(.fp-narrow) #dockMain > .myrow:has(> .mycards) { min-height: 66px; }
/* (the inner display stood up or held wide, third person: bigger cards, my row 74 + 8 + the buttons) */
html:is(.duo-up, .duo-wide) body:not(.hold-on) #dockMain:has(> .myrow > .mycards) { min-height: 142px; }
html:is(.duo-up, .duo-wide) body:not(.hold-on) #dockMain:has(> .myrow > .mycards) > .myrow + * { margin-top: auto; }
html:is(.duo-up, .duo-wide) body:not(.hold-on) #dockMain > .myrow:has(> .mycards) { min-height: 74px; }
/* and the chip pills on the felt a size down again: the whole table is in view, small */
html.duo-outer body:not(.fp-narrow) .betlbl { gap: 2px; padding: 0 5px 0 1px; font-size: 11px; border-width: 1.5px; box-shadow: 0 1.5px 0 var(--ink); }
html.duo-outer body:not(.fp-narrow) .betlbl i { width: 11px; height: 11px; border-width: 1.5px; }
html.duo-outer body:not(.fp-narrow) .betlbl:is(.k-b3, .k-b4, .k-allin) { font-size: 12px; -webkit-text-stroke-width: 2px; }
/* third person on the Duo (body.flick-on, js/flick.js): my cards in the dock picked up and thrown into the middle
   to fold. The dock's own hide while a copy of them is in the air; until I have thrown them once, on my turn a
   line over them says how (with a little arrow bobbing up) */
body.flick-on #dockMain .mycards { touch-action: none; cursor: grab; }
body.flicking #dockMain .mycards { visibility: hidden; }
.flick { position: fixed; z-index: 30; display: flex; gap: 4px; pointer-events: none; transform-origin: 50% 50%; transition: scale .12s, filter .12s; }
.flick .pcard { flex: none; }
.flick.held { scale: 1.08; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); }
/* thrown: the two close up into a near-stack about their middle, the second just off the first (moved, not laid out
   again, so the throw's sums hold; as the hand's, #hold.seen.toss .hc) */
.flick.toss .pcard { transform: translateX(19px) rotate(-3deg); transition: transform .14s ease-out; }
.flick.toss .pcard + .pcard { transform: translateX(-19px) rotate(7deg) translate(3px, -3px); }
/* (face down in the air: the 3D deck's red-and-cream lattice, as the hand thrown in first person) */
.flick .pcard.back { background: repeating-linear-gradient(45deg, rgba(217, 65, 43, .92) 0 3px, transparent 3px 8px),
  repeating-linear-gradient(-45deg, rgba(217, 65, 43, .92) 0 3px, #fff3de 3px 8px); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 3px #fff3de; }
body.flick-on .myrow { position: relative; }
.flick-hint { position: absolute; right: 0; bottom: calc(100% + 6px); display: flex; align-items: center; gap: 4px; white-space: nowrap; pointer-events: none;
  font: 900 12px/1.2 var(--font); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.flick-hint .fh-up { position: relative; width: 12px; height: 12px; }
.flick-hint .fh-up::before { content: ''; position: absolute; left: 2px; top: 4px; width: 7px; height: 7px; border: solid #fff; border-width: 3px 0 0 3px; border-radius: 2px; rotate: 45deg;
  filter: drop-shadow(0 1px 0 var(--ink)); }
@media (prefers-reduced-motion: no-preference) { html:not(.rm) .flick-hint .fh-up { animation: fh-bob 1.1s ease-in-out infinite; } }
@keyframes fh-bob { 50% { translate: 0 -3px; } }
/* middle-of-the-dock things step up over the hand */
body.hold-on #toasts, body.hold-on .flipbtn, body.hold-on #gtoPanel { translate: 0 calc(-1 * var(--hold-h, 0px)); }
/* the result, pause and vote banners stand on the board's far edge (--board-top, main.js measureHud),
   clear of the cards, the hand plaques under them and my hand; the all-in versus bars keep their place */
body.fp-narrow #banner:not(:has(> .sdeq)) { top: auto; bottom: calc(100% - var(--board-top, 45%) + 8px); }
/* a showdown's result under the board's hand plaque when there is room (main.js boardEdge): the
   winner's tabled cards stand on the board's far edge, in sight */
body.fp-narrow.banner-low #banner:has(> .win.sd):not(:has(> .sdeq)) { top: var(--board-low); bottom: auto; }
/* plates of seats the first-person camera cannot see (main.js frame) */
.plate.offscr, .betlbl.offscr { visibility: hidden; }

/* the Duo opened like a book: the attack box's pick thrown at someone (main.js fxDrag): it follows the
   finger, grows over a target, whose plate lights up */
.fx-ghost { position: fixed; left: 0; top: 0; z-index: 70; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; pointer-events: none;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 4px 0 var(--ink), 0 8px 18px rgba(0, 0, 0, .35); transition: scale .12s; }
.fx-ghost .ic { width: 32px; height: 32px; }
.fx-ghost.on { scale: 1.3; background: var(--yellow); }
.fx-ghost.thrown { scale: .2; opacity: 0; transition: scale .22s ease-in, opacity .22s ease-in; }
.fx-ghost.back { opacity: 0; transition: opacity .2s; }
/* lit in place even when folded: the plate itself never moves off its head, its name tag swells from
   its bottom edge */
.plate[data-aim] { opacity: 1; z-index: 2; filter: drop-shadow(0 0 3px var(--yellow)) drop-shadow(0 0 10px var(--yellow)) drop-shadow(0 0 18px #ffb020); }
.plate[data-aim] .tag { background: var(--yellow); outline: 3px solid #fff; outline-offset: 1px; transform-origin: 50% 100%; animation: fx-aimed .45s ease-in-out infinite alternate; }
@keyframes fx-aimed { from { scale: 1.08; } to { scale: 1.2; } }
/* the throw (main.js fxDrag): the thrown one dims in the box while it flies */
#atk .atk-i.pulled { filter: brightness(.85) saturate(.7); }
.fx-ghost.flying { transition: none; }
/* ------------------------------------------------ the outer display held sideways (html.duo-side, about
   594 × 445 inside the safe area, js/hold.js): the inner display's play (body.hold-wide) a size down. The
   attack box and the three stickers at the bottom left, the dock a short column at the bottom right, my
   hand over its right end; the short-landscape phone rules (style.css) that fold the stickers into a fan
   undone */
/* the camera is a dot up at the top of its strip: the bottom corner by it is free, the group snug in it */
html.duo-side body.hold-wide #atk:not([hidden]) { left: calc(6px + var(--safe-l) / 4); bottom: calc(6px + var(--safe-b) / 2); width: 132px; height: 100px; }
html.duo-side #atk .atk-box { border-radius: 22px; }
html.duo-side #atk .atk-strip { left: calc(50% - 30px); top: 9px; gap: 6px; }
html.duo-side #atk .atk-i { flex-basis: 60px; width: 60px; min-height: 60px; border-radius: 17px; font-size: 10px; }
html.duo-side #atk .atk-i .ic { width: 30px; height: 30px; }
html.duo-side #atk .atk-dots { bottom: 6px; gap: 4px; }
html.duo-side body.hold-wide #fxbar { left: calc(146px + var(--safe-l) / 4); bottom: calc(6px + var(--safe-b) / 2); grid-template-columns: 60px 60px; grid-template-rows: 46px 46px; gap: 8px; }
html.duo-side #fxbar .fan > .fxb { transform: none; opacity: 1; }
html.duo-side body.hold-wide #fxbar .fxb { font-size: 11px; border-radius: 15px; }
html.duo-side body.hold-wide #fxbar .fxb .ic { width: 22px; height: 22px; }
html.duo-side body.hold-wide #fxbar .fxb.cigar .ic { width: 32px; height: 32px; }
html.duo-side body.hold-wide #fxbar .fxb.cigar { font-size: 12px; }
html.duo-side body.hold-wide #dockMain { width: 220px; margin-right: calc(8px + var(--safe-r)); }
/* my stack and hand pinned as on the inner display (body.hold-wide, above), with this screen's numbers */
html.duo-side body.hold-wide #dockMain .myrow { right: calc(134px + var(--safe-r)); bottom: calc(85px + var(--safe-b)); max-width: 300px; }
html.duo-side body.hold-wide .acts .btn { min-height: 46px; font-size: 16px; }
html.duo-side body.hold-wide #hold.felt { left: calc(50% + 110px); scale: 1.1; }
html.duo-side body.hold-wide #hold.seen { right: calc(36px + var(--safe-r)); scale: 1.05; }
/* the dock stacks like the inner display's (my row over the actions), not side by side as on a phone held sideways */
html.duo-side body.hold-wide #dockMain { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; }
html.duo-side body.hold-wide #dockMain > * { margin-top: 0; }
/* the raise panel: wider than the two action buttons and in three rows (✕ · amount · ✓, the roller, the
   presets), not the landscape phones' two columns, which this narrow dock squeezes the amount out of;
   open, my stack and hand move up over it (body.hold-wide, above) */
html.duo-side body.hold-wide.raise-open #dockMain { width: 300px; }
html.duo-side body.hold-wide #dockMain .raise { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
html.duo-side body.hold-wide.raise-open #dockMain .myrow { bottom: calc(var(--tuck-b, 180px) + 12px); }
html.duo-side body.hold-wide.raise-open #hold:is(.tuck, .felt) { right: calc(36px + var(--safe-r)); scale: 1.05; }
/* a little shorter here, so my stack moved up over it stays under the board's river card; my hand's name
   (which would reach over it) away while it is open */
html.duo-side body.hold-wide #dockMain .raise { gap: 5px; padding: 6px 8px; }
html.duo-side body.hold-wide #dockMain .raise :is(.rx, .rok) { min-height: 44px; }
html.duo-side body.hold-wide #dockMain .raise .ramt b { font-size: 20px; }
html.duo-side body.hold-wide #dockMain .raise .wheel { height: 36px; }
html.duo-side body.hold-wide #dockMain .raise .presets button { min-height: 28px; }
html.duo-side body.hold-wide.raise-open #dockMain .myinfo .hand { display: none; }
/* the top bar a little further out to the sides (left of the camera dot, in from the right corner), the dock a touch lower */
html.duo-side #topbar { padding-left: calc(10px + var(--safe-l) * .7); padding-right: calc(20px + var(--safe-r) * .7); }
html.duo-side body.hold-wide #dock { padding-bottom: calc(8px + var(--safe-b) * .6); }
/* the other iPhones held sideways in the app (html.app-phone.duo-side, js/hold.js), much wider than the
   outer display: my stack stands right on my actions, its left end on theirs (--dm-l, --acts-b: main.js
   measureHud), the seen hand against its right end (below); the result ribbon and "tap to deal" in the middle over
   the board, clear of the seats at the sides */
html.app-phone.duo-side body.hold-wide #dockMain .myrow { right: auto; left: var(--dm-l, 60%); bottom: calc(var(--acts-b, 70px) + 4px); }
html.app-phone.duo-side body.hold-wide #dockMain .myinfo { justify-content: flex-start; }
html.app-phone.duo-side body.hold-wide #dockMain .myinfo > :not(.stk) { text-align: left; }
/* (my win chance all in: on a line of its own over my stack, as wide as its numbers, not a long sky bar: the
   margin fills the rest of that line) */
html.app-phone.duo-side body.hold-wide #dockMain .myinfo > .eqme { flex: 0 0 auto; margin-right: 100%; }
/* the seen hand right against my stack's right end (--seen-r: hold.js), the two one group; the raise panel
   open, my stack stands on its top edge at its left end (the hand tucks at its right end, as on the Duo) */
html.app-phone.duo-side body.hold-wide #hold.seen { right: var(--seen-r, calc(36px + var(--safe-r))); }
/* and face down there too, not on the felt by the board (whose turn and river it covered): peeked, it stands up
   where it lies (the raise panel open, it tucks on the panel as on the Duo) */
html.app-phone.duo-side body.hold-wide:not(.raise-open) #hold.felt { left: auto; top: auto; right: var(--seen-r, calc(36px + var(--safe-r))); bottom: var(--seen-b, 74px);
  transform: none; scale: 1.05; transform-origin: 100% 100%; }
html.app-phone.duo-side body.hold-wide.raise-open #dockMain .myrow { bottom: calc(var(--tuck-b, 180px) + 12px); }
html.app-phone.duo-side #banner:not(:has(> .sdeq)) { left: 50%; right: auto; width: max-content; max-width: calc(100% - 24px - var(--safe-l) - var(--safe-r)); transform: translateX(-50%); }
/* all in, the versus bars (and the run-it-twice vote's title over them) lie on the near felt at the bottom, between the
   stickers (#fxbar above) and my column (--dm-l), level with the stickers: up in the top bar, where the outer display
   has them, the blinds pill covers them here; there they cover neither the board, the pot nor a tabled hand */
html.app-phone.duo-side body.hold-wide #banner:has(> .sdeq) { top: auto; bottom: calc(6px + var(--safe-b) / 2); left: calc(282px + var(--safe-l) / 4);
  right: calc(100% - var(--dm-l, 60%) + 8px); align-content: flex-end; }
html.app-phone.duo-side body.hold-wide #banner .sdeq { gap: 4px; }
html.app-phone.duo-side body.hold-wide #banner .sdeq .row { gap: 4px; padding: 1px 7px 1px 3px; }
html.app-phone.duo-side body.hold-wide #banner .sdeq .mc i { height: 22px; min-width: 22px; padding: 0 2px; font-size: 12px; border-radius: 5px; }
html.app-phone.duo-side body.hold-wide #banner .sdeq .pct { font-size: 15px; }

/* ------------------------------------------------ the inner display stood up (html.duo-up, js/hold.js): the phone
   open like a laptop, the screen bending half way down (--fold).
   A little open (html.up-peek, the hinge under 60°): a felt over the whole screen and my hand big in the upper half,
   lifted with the screen (holdHinge); the buttons come up only on my turn.
   Open further (html.up-stand, also html.duo-side): the felt fades and the table fills the whole screen, one table
   over the bend: the standing half holds the far side (the others, the pot, the board), the half lying flat is the
   table in front of me, my hand, stack, buttons and stickers on it, laid out like the outer display held sideways.
   Between the two the hand slides down and shrinks (hold.js flip). */
#upPane { display: none; }
html.duo-up body.hold-on #upPane { display: block; position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #2f8a57, #1d5b39 75%, #123925); transition: opacity .4s, visibility 0s .4s; }
html.up-peek body.hold-on #upPane { opacity: 1; visibility: visible; transition: opacity .25s; }
/* (the bend, while peeking) */
html.up-peek body.hold-on #upPane::after { content: ""; position: absolute; left: 0; right: 0; top: var(--fold, 50%); height: 0;
  border-top: 2px dashed rgba(255, 255, 255, .28); box-shadow: 0 -6px 14px rgba(0, 0, 0, .25); }
html.up-peek body.hold-on #hold { --up-k: 2.5; left: 50%; right: auto; top: calc((var(--fold, 50%) + var(--hud-top, 60px)) / 2); bottom: auto;
  transform: translate(-50%, -50%); scale: var(--up-k); transform-origin: 50% 50%; padding: 0; }
html.up-peek body.hold-on #hold :is(.hold-hint, .hold-name) { font-size: calc(13px / var(--up-k)); text-shadow: 0 calc(2px / var(--up-k)) 0 var(--ink); }
html.up-peek body.hold-on #hold .hold-hint { order: 2; }
html.up-peek body.hold-on #hold.seen .hold-name { display: block; opacity: 1; }
html.up-peek body.hold-on #hold.tuck .hold-cards { scale: 1; }
html.up-peek body.hold-on :is(#fxbar, #atk, #banner) { visibility: hidden; }
/* standing: the half lying flat is the table in front of me, so my hand is bigger there (growing from its bottom
   right corner), my stack stepped left to make room */
html.up-stand body.hold-wide #hold:is(.seen, .felt) { scale: 1.6; transform-origin: 100% 100%; }
html.up-stand body.hold-wide #dockMain .myrow { right: calc(196px + var(--safe-r)); }
html.up-peek body.hold-on:not(.my-turn) #dock { visibility: hidden; }
/* TestFlight builds: the hinge angle in a corner (main.js), for tuning the lift on the phone */
#hingeRead { position: fixed; left: calc(8px + var(--safe-l)); bottom: calc(4px + var(--safe-b)); z-index: 60; padding: 1px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, .55); color: #fff; font: 700 11px/1.4 ui-monospace, Menlo, monospace; pointer-events: none; }