/* SOFT 17 — Play: the felt, a betting slip, a printer and a bumper.
   ≥1100px: felt + rail in one column, the receipt tape hanging in a 340px column on the right.
   768–1099px: felt, the 48px Receipt tab, then the rail, each full width.
   <768px: a full-bleed felt that fills the screen above the tab and a sticky three-row rail.
   <640px: 64×90 cards, hand labels above the cards, the 72px slip at the felt's bottom edge. */
@layer pages{

  /* ───────── page frame ───────── */
  /* --play-top is the gap under the header (64px bar + its 1px hairline); --rail-h and --tab-h are what sits under the
     felt, so felt + rail fit the viewport (the felt never shrinks below its content: --felt-min) */
  body[data-page="play"]{--play-top:var(--gap-out);--play-bottom:clamp(12px,1vw,20px);--play-footer-h:calc(53px + var(--safe-b));display:flex;flex-direction:column}
  body[data-page="play"] main{padding-block:var(--play-top) var(--play-bottom)}
  body[data-page="play"]>.site-footer{margin-block-start:auto}
  /* Rail padding grows gently with the screen; the controls determine its final height. */
  .table{--rail-pad:clamp(12px,1vw,16px);--rail-h:max(128px,calc(2 * var(--rail-pad) + 102px));--tab-h:0px;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"felt tape" "rail tape";column-gap:var(--space-m)}

  /* ───────── the felt ───────── */
  .felt{
    --card-w:96px;--card-h:134px;--card-r:var(--r-card);--rank:28px;--ipip:18px;--cpip:40px;--card-gap:12px;
    --felt-min:600px;
    --felt-h:max(var(--felt-min),calc(100svh - var(--header-h) - 1px - var(--play-top) - var(--play-bottom) - var(--rail-h) - var(--tab-h) - var(--play-footer-h)));
    grid-area:felt;position:relative;isolation:isolate;overflow:hidden;
    display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;row-gap:var(--space-xs);
    block-size:var(--felt-h);padding:var(--pad);
    border:1px solid var(--hair);border-block-end:0;border-radius:var(--r-felt) var(--r-felt) 0 0;
    background-color:var(--cover);
  }
  /* the single radial highlight, laid over the printing in screen mode: the cloth reads --felt-hi at the hot spot
     (screen of --cover and this ink), and the printed '21' stays legible under the lamp */
  .felt::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 60% 50% at 50% 18%,rgb(34 12 19),transparent 70%);mix-blend-mode:screen}
  /* a faint nap on the cloth, under everything printed or dealt on it */
  .felt::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;border-radius:inherit;background:url(/assets/grain-light.png) 0 0/160px 160px;opacity:.07}
  .felt:focus-visible{outline-offset:-4px}

  /* the shoe: three card backs at the top right; cards are dealt from here */
  .shoe{position:absolute;z-index:1;inset-block-start:var(--space-m);inset-inline-end:var(--pad);inline-size:56px;block-size:80px}
  .shoe span{position:absolute;inline-size:48px;block-size:72px;border-radius:4px;background:url(/assets/card-back-240.webp) center/cover var(--cover);box-shadow:inset 0 0 0 2px var(--ivory),0 1px 0 rgb(0 0 0 / .45)}
  .shoe span:nth-child(1){inset-block-start:8px;inset-inline-start:0;box-shadow:inset 0 0 0 2px var(--ivory),var(--shadow-rest)}
  .shoe span:nth-child(2){inset-block-start:4px;inset-inline-start:4px}
  .shoe span:nth-child(3){inset-block-start:0;inset-inline-start:8px}

  /* Top row: the table mode tickets. */
  .felt__top{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-s);min-block-size:44px;padding-inline-end:72px}
  .mode-tickets{display:flex;flex:none;filter:drop-shadow(0 1px 0 rgb(0 0 0 / .45)) drop-shadow(0 8px 10px rgb(0 0 0 / .3))}
  .mode-ticket{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--space-2xs);block-size:44px;padding:0 var(--space-s);color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans);white-space:nowrap}
  .mode-ticket::before{content:"";position:absolute;inset:2px 0;z-index:-1;border:1px solid var(--hair);background-color:var(--board);transition:background-color var(--dur-1) var(--ease-out)}
  .mode-ticket:first-child::before{border-radius:var(--r-ticket) 0 0 var(--r-ticket);border-inline-end:0}
  .mode-ticket:last-child::before{border-radius:0 var(--r-ticket) var(--r-ticket) 0;border-inline-start:1px dashed var(--hair-strong)}
  .mode-ticket:hover{color:var(--ivory)}
  .mode-ticket:not([aria-pressed="true"]):hover::before{background-color:var(--board-2)}
  .mode-ticket[aria-pressed="true"]{color:var(--bar);--pip-black:var(--bar);--focus:var(--citron)}
  .mode-ticket[aria-pressed="true"]::before{border-color:transparent;background-color:var(--ivory)}
  .mode-ticket .pip,.mode-ticket .i{inline-size:14px;block-size:14px}
  .mode-ticket .i{color:var(--text-2)}
  .mode-ticket--chips .i{inline-size:22px;block-size:22px;flex:none;color:currentColor}
  @media (max-width:1199.98px){.mode-ticket--chips .mode-ticket__more{display:none}.mode-ticket--chips>span{text-transform:capitalize}}
  .felt__rules{display:inline-flex;align-items:center;gap:var(--space-2xs);min-block-size:44px;color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans);text-decoration:underline;text-decoration-color:var(--citron);text-decoration-thickness:2px;text-underline-offset:6px}
  .felt__rules:hover{color:var(--ivory)}
  .felt__rules .i{inline-size:16px;block-size:16px}
  /* Keys: a keyboard, the word and its own key; opens the keymap. Only where a keyboard is plausible (≥640px, not touch-only) */
  .felt__keys{display:inline-flex;align-items:center;gap:var(--space-2xs);min-block-size:44px;color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans)}
  .felt__keys:hover{color:var(--ivory)}
  .felt__keys-icon{inline-size:20px;block-size:20px;color:var(--text-2)}
  .felt__keys-label{text-decoration:underline;text-decoration-color:var(--citron);text-decoration-thickness:2px;text-underline-offset:6px}
  .felt__notice{display:none;margin-inline-start:auto;font:500 var(--fs-14)/20px var(--font-sans);color:var(--text-2);white-space:nowrap}

  /* hands: caption + ivory tag to the left, cards centred */
  .hand{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-block-size:var(--card-h)}
  .hand__label{grid-column:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2xs);margin-inline-end:var(--space-m)}
  .table[data-state="idle"] .hand__label{visibility:hidden}
  .hand__caption{font:500 var(--fs-15)/20px var(--font-sans);color:var(--text-2)}
  .hand__tagwrap{position:relative;display:inline-flex}
  .hand-tag{display:inline-grid;grid-auto-flow:column;align-items:baseline;align-content:center;column-gap:var(--space-2xs);block-size:40px;min-inline-size:40px;justify-content:center;padding:0 var(--space-xs);border-radius:var(--r-paper);background-color:var(--ivory);color:var(--bar);box-shadow:var(--shadow-rest);font:600 28px/1 var(--font-serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;white-space:nowrap}
  .hand-tag em{font:italic 300 17px/1 var(--font-serif);letter-spacing:0;color:var(--sepia)}
  .hand-tag__num{--slot:.62em;display:inline-flex}
  #player-total[data-bust]{outline:1.5px solid var(--rouge);outline-offset:2px}
  .hand__stamp{position:absolute;z-index:3;inset-inline-start:calc(100% - 24px);inset-block-start:-12px;--stamp-rot:-8deg;block-size:32px;padding-inline:var(--space-xs);background-color:var(--cover)}

  /* card rows: 12px apart up to three cards, then they overlap */
  .card-row{grid-column:2;display:flex;align-items:center;gap:var(--card-gap);min-block-size:var(--card-h)}
  .card-row:has(>.playing-card:nth-child(4)){gap:0}
  .card-row:has(>.playing-card:nth-child(4))>.playing-card+.playing-card{margin-inline-start:calc(var(--card-w) * -.28)}
  .card-row:has(>.playing-card:nth-child(6))>.playing-card+.playing-card{margin-inline-start:calc(var(--card-w) * -.5)}

  /* ───────── table cards ───────── */
  .playing-card{position:relative;flex:none;inline-size:var(--card-w);block-size:var(--card-h);perspective:700px;rotate:var(--rot,0deg)}
  .card-inner{position:relative;block-size:100%;transform-style:preserve-3d}
  .card-face,.card-back{position:absolute;inset:0;border-radius:var(--card-r);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .card-face{overflow:hidden;background-color:var(--ivory);color:var(--bar);box-shadow:inset 0 0 0 1px rgb(20 10 15 / .12),var(--shadow-rest);transition:filter var(--dur-3) var(--ease-out)}
  .playing-card.red .card-face{color:var(--suit)}
  .card-back{transform:rotateY(180deg);background:url(/assets/card-back-240.webp) center/cover var(--cover);box-shadow:inset 0 0 0 3px var(--ivory),inset 0 0 0 4px rgb(20 10 15 / .2),var(--shadow-rest)}
  .idx{position:absolute;z-index:2;inset-block-start:0;inset-inline-start:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3xs);padding:8px 4px 4px 8px;border-end-end-radius:4px}
  .idx b{font:600 var(--rank)/1 var(--font-serif);font-variation-settings:"opsz" 72;letter-spacing:-.04em}
  .idx svg{display:block;inline-size:var(--ipip);block-size:var(--ipip)}
  .idx--b{inset:auto 0 0 auto;rotate:180deg}
  .court .idx{background-color:var(--ivory)}
  .card__pip{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:flex;translate:-50% -50%}
  .card__pip svg{inline-size:var(--cpip);block-size:var(--cpip)}
  .card__ace{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:60%;block-size:auto;translate:-50% -50%}
  .card__court{position:absolute;inset:30% 10%;overflow:hidden;border:1px solid rgb(20 10 15 / .3);outline:1px solid rgb(20 10 15 / .3);outline-offset:2px}
  .card__court img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 20%}
  .card-row.is-dim .card-face{filter:brightness(.62) saturate(.6)}
  /* blackjack: one holo-foil sweep across your cards (never under reduced motion) */
  .playing-card.is-foil .card-face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgb(220 237 146 / .35) 50%,transparent 65%) 0 0/300% 100% no-repeat;mix-blend-mode:color-dodge;animation:card-foil 900ms var(--ease-out) both}
  @keyframes card-foil{from{background-position:100% 0}to{background-position:0 0}}
  /* the dealer's second card is drawn after you stand */
  .playing-card.ghost{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-2xs);rotate:none;border:1.5px dashed var(--felt-type);border-radius:var(--card-r);color:var(--felt-type);text-align:center;font:500 var(--fs-14)/20px var(--font-sans)}
  .ghost__moon{inline-size:20px;block-size:20px}

  /* table printing: the '21' and two arcs, decoration only */
  .felt__print{position:relative;z-index:0;min-block-size:0;container:print/size}
  .felt__21{position:absolute;z-index:-1;inset-inline:0;inset-block-start:50%;translate:0 -50%;color:var(--felt-print);font:900 calc(var(--felt-h) * .62)/.8 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.05em;text-align:center;white-space:nowrap;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out)}
  body[data-hand="live"] .felt__21{opacity:.5}
  .felt-arcs{position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;overflow:visible;pointer-events:none}
  .felt-arcs--wide{inline-size:min(720px,100%);block-size:auto}
  .felt-arcs--narrow{display:none}
  .felt-arcs__rule{fill:none;stroke:var(--felt-print);stroke-width:1}
  .felt-arcs__text{fill:var(--felt-type);font:700 18px/1 var(--font-ticket);letter-spacing:.12em}
  /* when the printing row is squeezed (short screens), the arcs step aside rather than run into the hands */
  @container print (height < 20px){.felt-arcs{display:none}}

  /* ───────── bet spot + betting slip ───────── */
  .felt__bottom{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
  .bet-spot{grid-column:1;justify-self:end;display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);margin-inline-end:var(--space-m)}
  .bet-spot__ring{position:relative;display:grid;place-items:center;inline-size:72px;block-size:72px;border:1.5px dashed var(--felt-type);border-radius:50%}
  .chip-stack{position:relative;inline-size:44px;block-size:44px}
  .chip-stack .chip{--chip:44px;position:absolute;inset-block-start:calc(var(--n,0) * -3px);inset-inline-start:0;rotate:var(--r,0deg)}
  .chip-more{position:absolute;inset-block-start:-4px;inset-inline-end:-18px;color:var(--text-2);font:600 var(--fs-14)/1 var(--font-sans)}
  .bet-spot__amount{min-block-size:22px;color:var(--ivory);font:600 22px/1 var(--font-serif);font-variation-settings:"opsz" 72;letter-spacing:-.02em;white-space:nowrap}
  .slip-wrap{grid-column:2}
  .slip{display:flex;flex-direction:column;gap:var(--space-xs);padding:calc(var(--space-m) + 8px) var(--space-m) var(--space-m)}
  .slip__hand{color:var(--suit)}
  .slip__plate{display:flex;align-items:flex-start;gap:var(--space-2xs)}
  .slip__col{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--space-2xs)}
  .slip__cap{color:var(--sepia);font:500 var(--fs-14)/20px var(--font-sans)}
  .slip__box{position:relative;display:flex;align-items:center;justify-content:center;min-inline-size:88px;block-size:56px;padding:0 var(--space-2xs);border:1.5px solid var(--bar);border-radius:4px;transition:background-color var(--dur-2) var(--ease-out)}
  .slip__val{font:600 28px/1 var(--font-serif);font-variation-settings:"opsz" 72;letter-spacing:-.03em;white-space:nowrap}
  .slip__val--muted{color:var(--sepia)}
  .slip__val--muted.is-live{color:var(--bar);font-style:italic;font-weight:400}
  .slip__op{font:300 28px/56px var(--font-serif)}
  .slip__box--result[data-tone="win"]{background-color:var(--citron)}
  .slip__box--result[data-tone="loss"] .slip__val{color:var(--suit)}
  .slip__box--result:is([data-tone="push"],[data-tone="none"]) .slip__val{color:var(--sepia)}
  .slip__stamp{position:relative;block-size:32px;padding-inline:var(--space-xs)}
  .slip__ring{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:56px;block-size:28px;border:1.5px solid var(--bar);border-radius:var(--r-pill);translate:-50% -50%;rotate:-12deg}
  .slip__fee{color:var(--sepia);font:400 var(--fs-14)/20px var(--font-mono)}
  .slip__short{display:none}

  /* ───────── tent cards ───────── */
  .tent-wrap{position:absolute;z-index:3;inset-inline:0;inset-block:calc(var(--pad) + 56px) calc(var(--pad) + 178px);display:flex;align-items:center;justify-content:center;pointer-events:none}
  /* the reserved card may stand over the slip (never the rail) */
  .tent-wrap:has(>#tent-reserved:not([hidden])){inset-block-end:var(--pad)}
  .tent{pointer-events:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-xs);inline-size:320px;max-inline-size:calc(100% - 32px);min-block-size:180px;padding:0 var(--space-m) var(--space-m);box-shadow:var(--shadow-lift)}
  .tent::before{content:"";display:block;block-size:12px;margin-inline:calc(var(--space-m) * -1);border-radius:var(--r-paper) var(--r-paper) 0 0;border-block-end:1px solid var(--hair-paper);background-color:var(--thermal)}
  .tent:not([hidden]){animation:sheet-drop var(--dur-3) var(--ease-settle) both}
  .tent:focus-visible{outline-offset:4px}
  .tent__title{font:italic 400 28px/1.1 var(--font-serif);letter-spacing:-.01em;text-wrap:balance}
  .tent__title--sm{font:400 24px/1.15 var(--font-serif);padding-inline-end:var(--space-l)}
  .tent__lead{color:var(--sepia);font-size:var(--fs-body);line-height:1.45}
  .tent__fine{color:var(--sepia);font-size:var(--fs-14);line-height:20px}
  .tent__hint{color:var(--sepia);font-size:var(--fs-15);line-height:var(--lh-15);text-align:center}
  .tent__stamp{position:absolute;z-index:2;inset-block-start:var(--space-m);inset-inline-end:var(--space-s);block-size:32px;padding-inline:var(--space-xs)}
  .tent .keycap.tent__deal{inline-size:100%;min-inline-size:0;block-size:56px;gap:var(--space-xs);border-color:transparent;background-color:var(--bar);color:var(--ivory)}
  .tent .keycap.tent__deal:hover{background-color:var(--board-2)}
  .tent__actions{display:flex;flex-direction:column;gap:var(--space-2xs);margin-block-start:var(--space-3xs)}
  .tent__actions .btn{inline-size:100%}

  /* ───────── the receipt tab (below 1100px) ───────── */
  .receipt-tab{grid-area:tab;position:relative;isolation:isolate;display:none;align-items:center;gap:var(--space-2xs);inline-size:100%;block-size:48px;margin-block:var(--space-xs);padding:0 var(--space-s) 8px;color:var(--bar);text-align:start}
  .receipt-tab:hover{color:var(--bar)}
  .receipt-tab__paper{position:absolute;inset:0;z-index:-1}
  .receipt-tab__label{flex:none;font:800 var(--fs-14)/1 var(--font-ticket);letter-spacing:.12em;text-transform:uppercase}
  .receipt-tab__mid{flex:1 1 auto;min-inline-size:0;overflow:hidden;font:400 var(--fs-14)/1 var(--font-mono);text-overflow:ellipsis;white-space:nowrap}
  .receipt-tab__last{flex:none;font:700 var(--fs-14)/1 var(--font-mono);white-space:nowrap}
  .receipt-tab__chev{flex:none;inline-size:18px;block-size:18px;rotate:-90deg}

  /* ───────── the receipt tape (≥1100px: hangs from a printer slot) ───────── */
  .tape-home{grid-area:tape;position:relative;min-inline-size:0}
  .tape{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}
  .tape__slot{position:relative;flex:none;align-self:stretch;block-size:12px;border-radius:var(--r-ticket) var(--r-ticket) 0 0;background-color:var(--board-2);box-shadow:inset 0 1px 0 rgb(245 239 223 / .08)}
  .tape__head{position:absolute;inset-inline:8px;inset-block-end:0;block-size:4px;border-radius:2px 2px 0 0;background-color:var(--bar)}
  .tape__drop{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0;inline-size:316px;max-inline-size:100%}
  .tape__paper{--grain:.1;display:flex;flex-direction:column;flex:1 1 auto;gap:var(--space-xs);min-block-size:0;padding:var(--space-m) var(--space-m) calc(var(--space-m) + 8px)}
  .tape__top{flex:none;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-xs);padding-block-end:var(--space-xs);border-block-end:1px dashed rgb(20 10 15 / .4)}
  .tape__titles{flex:1 1 0;display:flex;flex-direction:column;gap:var(--space-2xs);min-inline-size:0}
  .tape__meta{color:var(--sepia);font:400 var(--fs-14)/20px var(--font-mono)}
  .tape__grip,.tape__close{display:none}
  .comp-card{flex:none;display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-xs);border:1px solid var(--hair-paper);border-radius:var(--r-paper)}
  .comp-card__punches{display:flex;justify-content:space-between}
  .punch{position:relative;display:block;flex:none;inline-size:18px;block-size:18px}
  .punch svg{display:block}
  .p-fill{fill:var(--bar)}
  .p-x{fill:none;stroke:var(--suit);stroke-width:2.25;stroke-linecap:round}
  .p-ring{fill:none;stroke:var(--bar);stroke-width:1.5}
  .p-empty{fill:none;stroke:rgb(20 10 15 / .4);stroke-width:1.5;stroke-dasharray:2 2}
  .p-star{color:var(--citron)}
  .punch--dbl::after{content:"";position:absolute;inset-block-start:-4px;inset-inline-end:-4px;inline-size:5px;block-size:5px;border-radius:50%;background-color:var(--bar)}
  .comp-card__note{color:var(--sepia);font:500 var(--fs-14)/20px var(--font-sans)}
  .tape__lines{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-3xs);min-block-size:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(20 10 15 / .35) transparent}
  .tape__lines:focus-visible{outline-offset:-2px}
  .tape__colhead{display:flex;justify-content:space-between;color:var(--sepia);font:400 var(--fs-14)/20px var(--font-mono);white-space:pre}
  /* 21ch: the line breaks after the first sentence, never before its last word */
  .tape__empty{max-inline-size:21ch;color:var(--sepia);font:400 var(--fs-15)/22px var(--font-mono)}
  .tape__list{display:flex;flex-direction:column}
  .tape__line{position:relative;display:flex;align-items:baseline;gap:var(--space-2xs);padding-inline-end:2px;font:400 var(--fs-15)/22px var(--font-mono);white-space:pre}
  .tape__tag{color:var(--sepia)}
  .tape__dots{flex:1 1 auto;min-inline-size:8px;border-block-end:1.5px dotted rgb(20 10 15 / .4)}
  .tape__amt{font-weight:700}
  :is(.tape__amt,#session-result,.receipt-tab__last)[data-tone="loss"]{color:var(--suit)}
  :is(.tape__amt,.receipt-tab__last)[data-tone="push"],.receipt-tab__last[data-tone="none"]{color:var(--sepia)}
  .tape__bj{position:absolute;z-index:1;inset-block-start:-4px;inset-inline-end:56px;--stamp-rot:-8deg;block-size:28px;padding-inline:var(--space-2xs)}
  /* New receipt: a 2px suit strike through every line, 40ms apart */
  .tape__line::after{content:"";position:absolute;z-index:2;inset-inline:0;inset-block-start:10px;block-size:2px;background-color:var(--suit);transform:scaleX(0);transform-origin:0 50%}
  .tape.is-closing .tape__line::after{transform:scaleX(1);transition:transform 240ms var(--ease-out) calc(min(var(--i,0), 8) * 40ms)}
  .tape__closed{position:absolute;z-index:3;inset-block-start:96px;inset-inline:0;inline-size:fit-content;margin-inline:auto;background-color:var(--thermal);font-size:16px}
  .tape__foot{flex:none;display:flex;flex-direction:column;gap:var(--space-2xs);padding-block-start:var(--space-xs);border-block-start:3px double var(--bar)}
  .tape__totals{font:700 16px/24px var(--font-mono)}
  .tape__last{display:flex;align-items:center;gap:var(--space-2xs);min-block-size:32px;font:400 var(--fs-15)/22px var(--font-mono)}
  .tape__last-val{flex:1 1 auto;display:flex;align-items:center;gap:var(--space-2xs);min-inline-size:0}
  .tape__last-val .leader__dots{align-self:flex-end;margin-block-end:8px}
  .tape__stamp{block-size:28px;padding-inline:10px}
  .tape__none{color:var(--sepia)}
  .tape__barcode{display:block;inline-size:132px;block-size:24px;fill:var(--bar)}
  .tape__sign{font:italic 400 16px/22px var(--font-serif)}
  .tape__new{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-xs)}
  .tape__reset{min-block-size:44px;color:var(--bar);font:600 var(--fs-15)/1 var(--font-sans);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
  .tape__reset:hover{color:var(--cover)}
  .tape__reset[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
  .tape__reason{color:var(--sepia);font-size:var(--fs-14);line-height:20px}

  /* the receipt as a bottom sheet (below 1100px): native modal dialog */
  .receipt-sheet{position:fixed;inset:auto var(--space-2xs) 0;inline-size:auto;max-inline-size:440px;max-block-size:80svh;margin:0 auto;padding:0;border:0;background:transparent;color:var(--bar);overflow:visible}
  .receipt-sheet[open]{display:flex;flex-direction:column;animation:sheet-rise var(--dur-2) var(--ease-out) both}
  .receipt-sheet::backdrop{background:rgb(20 10 15 / .72)}
  .receipt-sheet .tape{position:static;flex:1 1 auto;min-block-size:0;align-items:stretch}
  .receipt-sheet .tape__slot{display:none}
  .receipt-sheet .tape__drop{inline-size:auto;max-inline-size:none}
  .receipt-sheet .tape__paper{padding:calc(var(--space-s) + 8px) var(--space-m) calc(var(--space-s) + var(--safe-b));border-radius:0}
  .receipt-sheet .tape__grip{display:block;flex:0 0 100%;block-size:4px;background:linear-gradient(var(--sepia),var(--sepia)) 50% 0/36px 4px no-repeat}
  .receipt-sheet .tape__close{display:flex;flex:none;align-items:center;justify-content:center;inline-size:44px;block-size:44px;border:1px solid var(--hair-paper);border-radius:var(--r-ticket);color:var(--bar)}
  .receipt-sheet .tape__close:hover{background-color:rgb(20 10 15 / .07);color:var(--bar)}
  .receipt-sheet .tape__close .i{inline-size:20px;block-size:20px}
  .receipt-sheet .tape__lines{min-block-size:88px}
  .receipt-sheet .tape__closed{inset-block-start:24px}

  /* ───────── the rail bumper ───────── */
  .rail{grid-area:rail;display:flex;flex-wrap:wrap;align-items:stretch;row-gap:var(--space-2xs);min-block-size:128px;padding:var(--rail-pad);border:1px solid var(--hair);border-radius:0 0 var(--r-felt) var(--r-felt);background-color:var(--board-2);box-shadow:inset 0 1px 0 rgb(245 239 223 / .08)}
  .rail__zone{display:flex;flex-direction:column;justify-content:center;gap:var(--space-3xs);padding-inline:var(--space-xs);border-inline-start:1px solid var(--hair)}
  .rail__balance{flex:0 0 auto;min-inline-size:160px;padding-inline-start:0;border:0}
  .rail__chips,.rail__bet{flex:0 0 auto}
  .rail__actions{flex:1 1 240px;min-inline-size:0;gap:var(--space-2xs);padding-inline-end:0}
  /* below 1430px the balance zone gives up its spare 24px to the other zones */
  @media (min-width:768px) and (max-width:1429.98px){.rail__balance{min-inline-size:136px}}
  /* where the four zones do not fit one row (the keys need 270px: three move keys), the rail becomes a two-row grid:
     balance, chips and bet across the top with the bet zone taking the rest of the row, then the keys under the bet zone
     (same column, same edges) and the reason under the balance and chips, centred on the keys */
  @media (min-width:768px) and (max-width:1019.98px),(min-width:1100px) and (max-width:1429.98px){
    .table{--rail-h:calc(2 * var(--rail-pad) + 158px)}
    .table:has(.hand-actions:not([hidden])){--rail-h:calc(2 * var(--rail-pad) + 170px)}
    .rail{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"bal chips bet" "why why act";align-items:stretch;row-gap:var(--space-2xs)}
    .rail__balance{grid-area:bal}
    .rail__chips{grid-area:chips}
    .rail__bet{grid-area:bet;padding-inline-end:0}
    .rail__segments>*{padding-inline:var(--space-2xs)}
    .rail__actions{display:contents}
    .rail__actions>:is(.keycap,.hand-actions){grid-area:act}
    /* the reason wraps inside the width the balance and chips leave: a long line never widens their columns */
    .rail__reason{grid-area:why;align-self:center;padding-inline-end:var(--space-m);contain:inline-size}
  }
  /* beside the receipt the taller rail needs about 945px of screen for a full-size felt; just under that, the gap under the
     header gives way first, to 24px and then to 16px (the short-screen rules below take over under 900px) */
  @media (min-width:1100px) and (max-width:1429.98px) and (max-height:944.98px){body[data-page="play"]{--play-top:var(--space-m)}}
  @media (min-width:1100px) and (max-width:1429.98px) and (max-height:909.98px){body[data-page="play"]{--play-top:var(--space-s)}}
  .rail__caption{color:var(--text-2);font:500 var(--fs-14)/20px var(--font-sans);white-space:nowrap}
  .rail__figure{color:var(--ivory);font:400 40px/1 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;white-space:nowrap}
  .rail__note{color:var(--text-3);font-size:var(--fs-14);line-height:20px;white-space:nowrap}
  /* wallet credits to withdraw: the button takes the note's 20px line, so the balance zone (and the rail) keeps its
     height: a 32px key hangs 6px over each side of that line, and its hit area reaches 44px */
  .rail__withdraw{position:relative;align-self:flex-start;block-size:32px;margin-block:-6px}
  .rail__withdraw::after{content:"";position:absolute;inset:-6px 0}
  .rail__balance:has(>.rail__withdraw:not([hidden]))>.rail__note{display:none}
  .tent__faucet{align-self:flex-start;font-size:var(--fs-14);line-height:20px}
  .rail .chip-tray{--chip:48px}
  /* three-digit denominations stay inside the chip face (its dashed edge, r≈13px on a 48px chip) with 2px to spare:
     the narrow optical size at weight 500, 14px and tightened (all four labels share the weight) */
  .rail .chip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
  .rail .chip{font-size:15px;font-weight:500;font-variation-settings:"opsz" 144;letter-spacing:-.04em}
  .rail :is(.chip--100,.chip--500){font-size:14px;letter-spacing:-.07em}
  .rail .chip{--chip:48px;box-shadow:inset 0 0 0 1.5px var(--chip-edge),0 2px 0 rgb(10 4 8 / .45),0 10px 16px -8px rgb(10 4 8 / .8)}
  .rail .chip[aria-pressed="true"]{outline:2px solid var(--ivory);outline-offset:3px}
  .rail__bet{gap:var(--space-2xs)}
  .rail__betline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);block-size:44px}
  .rail__input{inline-size:104px;block-size:44px;padding:0;border:0;border-block-end:2px solid var(--hair);border-radius:0;background:transparent;color:var(--ivory);font:400 40px/1 var(--font-serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;text-align:end;-moz-appearance:textfield;appearance:textfield}
  .rail__input::-webkit-inner-spin-button,.rail__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .rail__input:focus{border-block-end-color:var(--citron)}
  .rail__input:disabled{opacity:1;color:var(--ivory);-webkit-text-fill-color:var(--ivory);cursor:not-allowed}
  .rail__unit{color:var(--text-2);font:500 var(--fs-14)/20px var(--font-sans)}
  .rail__adjust{display:none}
  .rail__segments>*{flex:1 1 0;min-inline-size:48px}
  /* chips 1–4: a paper key stuck on the chip's lower right, clear of the denomination; it lifts and dims with the chip */
  .rail .chip{position:relative}
  .chip__key{position:absolute;inset-block-end:calc(var(--space-2xs) * -1);inset-inline-end:calc(var(--space-2xs) * -1);pointer-events:none}
  /* Clear wears the same sticker on its lower right, so the bet zone keeps its width; the control lets it hang over its
     edge, so the end segments round their own corners */
  .rail__segments{overflow:visible}
  .rail__segments>:first-child{border-start-start-radius:calc(var(--r-key) - 1px);border-end-start-radius:calc(var(--r-key) - 1px)}
  .rail__segments>:last-child{border-start-end-radius:calc(var(--r-key) - 1px);border-end-end-radius:calc(var(--r-key) - 1px)}
  .rail__segments>:has(>.seg__key){position:relative}
  .seg__key{position:absolute;inset-block-end:calc(var(--space-2xs) * -1);inset-inline-end:calc(var(--space-2xs) * -1);pointer-events:none}
  @media (hover:none) and (pointer:coarse){.chip__key,.seg__key,.felt__keys{display:none}}
  /* 640–767px with a keyboard: the top row also carries the notice, so the mode tickets print their short names */
  @media (min-width:640px) and (max-width:767.98px) and ((hover:hover) or (pointer:fine)){.mode-ticket__more{display:none}}
  .rail__actions>.keycap{inline-size:100%;min-inline-size:0}
  @media (min-width:768px){
    .rail__actions>.keycap{block-size:48px}
    .table[data-chips="true"] .rail__balance{inline-size:184px;min-inline-size:184px;flex:0 0 184px;flex-direction:row;flex-wrap:wrap;align-items:baseline;align-content:center;justify-content:flex-start;column-gap:6px;row-gap:4px}
    .table[data-chips="true"] .rail__figure{order:1;max-inline-size:100%;font-size:32px;overflow-wrap:anywhere;white-space:normal}
    .table[data-chips="true"] .rail__balance>.rail__caption{order:2;font-size:13px;line-height:16px}
    .table[data-chips="true"] .rail__balance>.rail__note{order:3;flex-basis:100%;font-size:12px;line-height:16px}
    .table[data-chips="true"] .chip-cashier{order:4;flex-basis:100%}
  }
  .hand-actions{display:flex;gap:var(--space-2xs);container:moves/inline-size}
  .hand-actions .keycap{flex:1 1 0;min-inline-size:0;padding-inline:var(--space-xs)}
  /* "Double" and its paper key side by side need a 116px key; under three of those the label sits over its key
     (17 + 4 + 24px inside the 60px cap), the same on all three keys */
  @container moves (width < 364px){.hand-actions .keycap{flex-direction:column;gap:var(--space-3xs);padding-inline:var(--space-2xs)}}
  /* the 300ms arming lock after a deal never flashes the keys */
  .keycap.is-arming[aria-disabled="true"]{opacity:1;cursor:default}
  .rail__reason{min-block-size:18px;color:var(--text-3);font:500 13px/18px var(--font-sans)}
  .rail__reason[data-tone="error"]{color:var(--rouge)}
  /* wallet table: "— get more at the faucet" links out of the reason line; its hit area grows to 44px tall without
     moving the line. An unknown error's name follows the sentence in thermal print. */
  .rail__link{position:relative;color:var(--ivory);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  .rail__link::after{content:"";position:absolute;inset:-12px -4px}
  .rail__link:hover{text-decoration-thickness:2px}
  .rail__code{color:var(--text-3);font:400 var(--fs-14)/20px var(--font-mono);overflow-wrap:anywhere}
  /* the wallet quote's "Gas is paid in ETH." prints where the reason line has the room (the two-row rail); the one-row
     rail and phones keep the quote to one line (the slip's fee line says "gas in ETH"); screen readers always hear it */
  @media (min-width:1430px),(min-width:1020px) and (max-width:1099.98px),(max-width:767.98px){
    .rail__tail{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  }

  /* ───────── 768–1099px: felt, tab and rail stacked ───────── */
  @media (max-width:1099.98px){
    .table{grid-template-columns:minmax(0,1fr);grid-template-areas:"felt" "tab" "rail"}
    .table{--tab-h:72px}
    .felt{--card-w:80px;--card-h:112px;--rank:22px;--ipip:14px;--cpip:32px;--felt-min:556px;border-block-end:1px solid var(--hair);border-radius:var(--r-felt)}
    .rail{border-radius:var(--r-felt)}
    .tape-home{display:none}
    .receipt-tab{display:flex}
  }

  /* ───────── phones (<768px): full-bleed felt, the tab, a sticky rail ───────── */
  @media (max-width:767.98px){
    body[data-page="play"] main{padding-block:0}
    .play-main>.wrap--play{padding-inline:0}
    .table{grid-template-rows:minmax(min-content,1fr) auto auto;min-block-size:calc(100svh - var(--header-h) - 1px - var(--play-footer-h))}
    .felt{block-size:auto;min-block-size:360px;padding:var(--space-s) var(--space-s) 0;border:0;border-radius:0}
    .shoe{display:none}
    .felt__top{padding-inline-end:0}
    .felt__notice{display:block}
    .felt__bottom{margin-block-end:var(--space-xs)}
    .receipt-tab{margin:0}
    .receipt-tab__paper{border-radius:0}

    .rail{position:sticky;z-index:20;inset-block-end:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"adjust adjust" "bal bet" "chips chips" "act act";column-gap:var(--space-xs);row-gap:0;min-block-size:0;padding:var(--space-s) var(--space-s) max(var(--space-s),var(--safe-b));border:0;border-block-start:1px solid var(--hair);border-radius:0;transition:grid-template-rows var(--dur-2) var(--ease-out)}
    body[data-hand="live"] .rail{grid-template-rows:auto auto minmax(0,0fr) auto}
    .rail__zone{padding:0;border:0}
    .rail__balance{grid-area:bal;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:var(--space-2xs);min-inline-size:0;align-self:center}
    .rail__balance .rail__caption{order:2}
    .rail__figure{font-size:28px}
    .rail__note,.rail__withdraw{display:none}
    .rail__more{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .rail__chips{grid-area:chips;align-items:center;min-block-size:0;overflow:hidden;padding-block-start:var(--space-2xs)}
    body[data-hand="live"] .rail__chips{visibility:hidden;transition:visibility 0s linear var(--dur-2)}
    .rail__chips .rail__caption{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .rail .chip-slot{inline-size:56px;block-size:56px}
    .rail .chip{--chip:52px}
    .rail__bet{display:contents}
    .rail__betline{grid-area:bet;justify-content:flex-end;gap:var(--space-2xs);block-size:48px}
    .rail__input{inline-size:56px;block-size:44px;font-size:28px}
    .rail__adjust{display:inline-flex;align-items:center;gap:var(--space-2xs);block-size:48px;padding:0 14px;border:1px solid var(--hair);border-radius:var(--r-ticket);background-color:var(--board);color:var(--ivory);font:600 var(--fs-15)/1 var(--font-sans)}
    .rail__adjust .i{inline-size:16px;block-size:16px;rotate:-90deg;transition:rotate var(--dur-2) var(--ease-out)}
    .rail__adjust[aria-expanded="true"] .i{rotate:90deg}
    .rail__adjust[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
    .rail__segments{grid-area:adjust;display:none;block-size:48px;margin-block-end:var(--space-2xs)}
    .rail[data-adjust="open"] .rail__segments{display:flex;animation:fade-in var(--dur-2) var(--ease-out) both}
    .rail__actions{grid-area:act;gap:var(--space-3xs);padding:0;margin-block-start:var(--space-2xs)}
    .rail__actions .keycap{block-size:56px}
    .rail__reason{text-align:center}
    /* Funded tables share a row between the cashier and chip tray. */
    .table[data-chips="true"] .rail{grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"adjust adjust" "bal bet" "funds chips" "act act";padding:12px var(--space-s) max(12px,var(--safe-b))}
    .table[data-chips="true"] .rail__balance{display:contents}
    .table[data-chips="true"] .rail__balance>.rail__caption{display:none}
    .table[data-chips="true"] .rail__balance>.rail__figure{grid-area:bal;align-self:center;min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere;white-space:normal}
    .table[data-chips="true"] .chip-cashier{grid-area:funds;align-self:center}
    .table[data-chips="true"] .rail__chips{padding-block:4px 8px}
    .table[data-chips="true"] .rail .chip-slot{inline-size:48px;block-size:48px}
    .table[data-chips="true"] .rail .chip{--chip:44px}
    body[data-hand="live"] .table[data-chips="true"] .rail__chips{display:none}
    /* wallet table: the balance carries decimals and a unit, so the unit prints under the figure and the bet line drops
       its own (the slip and the reason line name it); winnings waiting at the table put Withdraw in the unit's place */
    .table[data-mode="onchain"] .rail__balance{flex-direction:column;align-items:flex-start;gap:0}
    .table[data-mode="onchain"] .rail__figure{line-height:28px}
    .table[data-mode="onchain"] .rail__unit{display:none}
    .table[data-mode="onchain"] .rail__balance>.rail__withdraw:not([hidden]){display:inline-flex;block-size:44px;margin:0}
    .table[data-mode="onchain"] .rail__withdraw::after{content:none}
    .table[data-mode="onchain"] .rail__balance:has(>.rail__withdraw:not([hidden]))>.rail__caption{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  }

  /* ───────── small felt (<640px): 64×90 cards, labels above cards, a 72px slip ───────── */
  @media (max-width:639.98px){
    .felt{--card-w:64px;--card-h:90px;--card-r:5px;--rank:18px;--ipip:12px;--cpip:24px;--card-gap:8px}
    .felt__top{gap:var(--space-2xs)}
    .felt__notice{min-inline-size:0;white-space:normal;text-align:end;line-height:16px}
    .felt__rules,.felt__keys{display:none}
    .mode-ticket{padding-inline:var(--space-s)}
    .mode-ticket:last-child{padding-inline-start:var(--space-xs)}
    .mode-ticket__more{display:none}
    .hand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);min-block-size:0}
    .hand__label{flex-direction:row;align-items:center;gap:var(--space-xs);margin:0}
    .hand__stamp{inset-inline-start:calc(100% - 8px);inset-block-start:4px;--stamp-rot:-7deg}
    .card-row:has(>.playing-card:nth-child(3)){gap:0}
    .card-row:has(>.playing-card:nth-child(3))>.playing-card+.playing-card{margin-inline-start:calc(var(--card-w) * -.28)}
    .card-row:has(>.playing-card:nth-child(6))>.playing-card+.playing-card{margin-inline-start:calc(var(--card-w) * -.5)}
    .idx{gap:var(--space-3xs);padding:4px 2px 2px 4px}
    .card__ace{inline-size:36px}
    .card__court{inset:auto;inset-block-start:50%;inset-inline-start:50%;inline-size:28px;block-size:28px;translate:-50% -50%;border:3px double var(--sepia);border-radius:2px;outline:0}
    .ghost__moon,.ghost__more{display:none}
    .playing-card.ghost{padding:var(--space-3xs);font:italic 400 var(--fs-14)/1.2 var(--font-serif)}
    .felt__21{font-size:180px}
    .felt-arcs--wide{display:none}
    .felt-arcs--narrow{display:block;inline-size:100%;block-size:auto;translate:-50% -67%}
    @container print (height < 60px){.felt-arcs--narrow{translate:-50% -54%}.felt-arcs__line2{display:none}}
    .felt-arcs__text{font-size:15px;letter-spacing:.08em}
    .felt__bottom{display:block}
    .bet-spot{display:none}
    .tent-wrap{inset:calc(var(--space-s) + 56px) var(--space-s) auto;display:block}
    .tent{inline-size:auto;max-inline-size:none;min-block-size:0}
  }
  @media (max-width:359.98px){body[data-page="play"]{--play-footer-h:calc(63px + var(--safe-b))}}

  /* ───────── short screens (≥768px wide): smaller cards and the compact slip keep the rail in view ─────────
     768–1019px stacks felt, tab and a two-row rail (about 955px with a full-size felt), so it counts as short up to 955px */
  @media (min-width:768px) and (max-height:899.98px),(min-width:768px) and (max-width:1019.98px) and (max-height:954.98px){
    body[data-page="play"]{--play-top:var(--space-m)}
    .felt{--card-w:80px;--card-h:112px;--rank:22px;--ipip:14px;--cpip:32px;--felt-min:464px}
    .bet-spot{flex-direction:row;gap:var(--space-xs)}
    .tent-wrap{inset-block:calc(var(--pad) + 56px) calc(var(--pad) + 96px)}
  }
  @media (min-width:768px) and (max-height:799.98px){
    body[data-page="play"]{--play-top:var(--space-s)}
    .felt{--card-w:64px;--card-h:90px;--card-r:5px;--rank:18px;--ipip:12px;--cpip:24px;--card-gap:8px;--felt-min:392px;padding:var(--pad-compact)}
    .shoe{inset-block-start:var(--space-s);inset-inline-end:var(--pad-compact);scale:.8;transform-origin:100% 0}
    .ghost__moon,.ghost__more{display:none}
    .card__court{inset:auto;inset-block-start:50%;inset-inline-start:50%;inline-size:28px;block-size:28px;translate:-50% -50%;border:3px double var(--sepia);border-radius:2px;outline:0}
    .card__ace{inline-size:36px}
    .idx{padding:4px 2px 2px 4px}
    .tent-wrap{inset-block:calc(var(--pad-compact) + 56px) calc(var(--pad-compact) + 96px)}
    .tent-wrap:has(>#tent-reserved:not([hidden])){inset-block-end:var(--pad-compact)}
    .tent{gap:var(--space-2xs)}
    .tent__title,.tent__title--sm{font-size:22px}
    .tent__lead{font-size:var(--fs-15);line-height:var(--lh-15)}
  }

  /* ───────── the compact 72px slip: phones and short screens ───────── */
  @media (max-width:639.98px),(max-height:899.98px),(min-width:768px) and (max-width:1019.98px) and (max-height:954.98px){
    .slip{flex-direction:row;align-items:center;block-size:72px;padding:var(--space-s) var(--space-s) var(--space-xs)}
    .slip__head{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .slip__plate{flex:1 1 auto;align-items:center;gap:0;min-inline-size:0}
    .slip__col{position:relative;flex:1 1 0;flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;min-inline-size:0;block-size:44px;padding:4px var(--space-2xs);border:1.5px solid var(--bar);border-radius:4px;transition:background-color var(--dur-2) var(--ease-out)}
    .slip__col:has(>.slip__box--result[data-tone="win"]){background-color:var(--citron)}
    .slip__cap{font:500 var(--fs-14)/14px var(--font-sans)}
    .slip__box{position:static;justify-content:flex-end;min-inline-size:0;block-size:auto;padding:0;border:0;border-radius:0}
    .slip__val{font-size:22px;line-height:18px}
    .slip__op{flex:0 0 20px;text-align:center;font-size:22px;line-height:1}
    .slip__stamp{position:absolute;inset-block-start:5px;inset-inline-end:4px}
    .slip__ring{display:none}
    .slip__fee{display:none}
    .slip__long{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .slip__short{display:inline}
    .slip__box--result[data-tone]{background-color:transparent}
  }
  @media (min-width:640px) and (max-height:899.98px),(min-width:768px) and (max-width:1019.98px) and (max-height:954.98px){
    .slip-wrap{inline-size:360px;max-inline-size:100%}
  }

  /* ───────── the keymap: every key on one thermal slip (native modal dialog: focus trapped, Escape and the backdrop
     close it, focus goes back to whatever opened it). Centred over the table, never docked on the rail. ───────── */
  .keymap{position:fixed;inset:0;inline-size:min(400px,calc(100vw - 2 * var(--gutter)));max-inline-size:none;block-size:fit-content;max-block-size:calc(100dvh - 2 * var(--space-s));margin:auto;padding:0;border:0;background:transparent;color:var(--bar);overflow:visible}
  .keymap[open]{display:flex;flex-direction:column;animation:sheet-drop var(--dur-3) var(--ease-settle) both}
  .keymap::backdrop{background:rgb(20 10 15 / .72)}
  .keymap__drop{display:flex;flex-direction:column;min-block-size:0}
  .keymap__paper{--grain:.1;display:flex;flex-direction:column;gap:var(--space-s);min-block-size:0;max-block-size:calc(100dvh - 2 * var(--space-s));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(20 10 15 / .35) transparent;padding:var(--space-m) var(--space-m) calc(var(--space-m) + 8px)}
  .keymap__top{display:flex;align-items:flex-start;gap:var(--space-xs);padding-block-end:var(--space-xs);border-block-end:1px dashed rgb(20 10 15 / .4)}
  .keymap__titles{flex:1 1 0;display:flex;flex-direction:column;gap:var(--space-2xs);min-inline-size:0}
  .keymap__meta{color:var(--sepia);font:400 var(--fs-14)/20px var(--font-mono)}
  .keymap__close{flex:none;display:flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;margin:calc(var(--space-2xs) * -1) calc(var(--space-2xs) * -1) 0 0;border:1px solid var(--hair-paper);border-radius:var(--r-ticket);color:var(--bar)}
  .keymap__close:hover{background-color:rgb(20 10 15 / .07);color:var(--bar)}
  .keymap__close .i{inline-size:20px;block-size:20px}
  .keymap__group{display:flex;flex-direction:column;gap:var(--space-2xs)}
  .keymap__label{font:700 var(--fs-15)/var(--lh-15) var(--font-mono);letter-spacing:0}
  .keymap__rows{display:flex;flex-direction:column;gap:var(--space-3xs);margin:0}
  .keymap__row{display:flex;align-items:baseline;gap:var(--space-2xs);min-block-size:28px;font:400 var(--fs-15)/22px var(--font-mono)}
  .keymap__row dt{flex:1 1 auto;display:flex;align-items:baseline;gap:var(--space-2xs);min-inline-size:0}
  .keymap__row dt::after{content:"";flex:1 1 var(--space-s);min-inline-size:var(--space-s);border-block-end:1.5px dotted rgb(20 10 15 / .4)}
  .keymap__row dd{flex:none;display:flex;align-items:baseline;gap:var(--space-2xs);margin:0}
  .keymap__note,.keymap__or{color:var(--sepia);font-size:var(--fs-14)}
  .keymap__fine{padding-block-start:var(--space-xs);border-block-start:3px double var(--bar);color:var(--sepia);font:500 var(--fs-14)/20px var(--font-sans)}
  .chip-cashier{display:flex;flex-wrap:wrap;gap:4px;margin-inline:0;max-inline-size:none}
  .chip-cashier[hidden]{display:none}
  .chip-cashier .btn{padding-inline:8px;min-block-size:44px}
  .chip-cashier #chip-retry{inline-size:100%;color:var(--citron)}
  .cashier{inline-size:min(440px,calc(100vw - 2 * var(--gutter)))}
  .cashier h2{font:600 28px/1.15 var(--font-serif)}
  .cashier .keymap__paper{color-scheme:light}
  .cashier .keymap__paper>*{flex-shrink:0}
  .cashier__lead{font:500 var(--fs-15)/22px var(--font-sans)}
  .cashier__label{font:600 var(--fs-14)/20px var(--font-mono)}
  .cashier__amount{display:flex;align-items:baseline;gap:var(--space-s);border-block-end:2px solid var(--bar);padding-block-end:var(--space-xs)}
  .cashier__amount input{inline-size:100%;min-inline-size:0;border:0;background:transparent;color:var(--bar);font:600 36px/1.2 var(--font-mono)}
  .cashier__amount span{font:500 var(--fs-15)/22px var(--font-mono)}
  .cashier__presets{display:flex;gap:var(--space-xs)}
  .cashier__presets button{flex:1;min-block-size:44px;border:1px dashed var(--sepia);border-radius:var(--r-ticket);font:600 var(--fs-15)/22px var(--font-mono)}
  .cashier__presets button:hover{background:rgb(20 10 15 / .07)}
  .cashier__fee,.cashier__trust{color:var(--sepia);font:500 var(--fs-14)/20px var(--font-sans)}
  .cashier__remaining{font:500 var(--fs-14)/20px var(--font-mono);border-block-end:1px dashed var(--sepia);padding-block-end:var(--space-xs)}
  .cashier__presets button:disabled{opacity:.4;cursor:default}
  .cashier__trust{padding-block-start:var(--space-xs);border-block-start:1px dashed var(--sepia)}
  .cashier__note{min-block-size:40px;font:500 var(--fs-14)/20px var(--font-mono)}
  .cashier__note[data-tone="error"]{color:var(--red)}
  @media (max-width:639.98px){.table[data-chips="true"] .chip-cashier .btn{font-size:12px;padding-inline:6px;min-block-size:44px}.table[data-chips="true"] .rail__caption{display:none}.table[data-chips="true"] .rail__figure{line-height:30px}}
  /* the rules sheet lists the keys too; touch-only screens skip that list */
  @media (hover:none) and (pointer:coarse){.sheet__keys,.sheet__keys-lead{display:none}}

  /* ───────── reduced motion / Motion off: every move becomes a ≤120ms fade ───────── */
  @media (prefers-reduced-motion:reduce){
    .felt__21{transition-duration:var(--dur-1)}
    .tent:not([hidden]),.receipt-sheet[open],.keymap[open],.rail[data-adjust="open"] .rail__segments{animation:fade-in var(--dur-1) linear both}
    .rail,.rail__adjust .i,.slip__box,.slip__col{transition:none}
    body[data-hand="live"] .rail__chips{transition:none}
    .playing-card.is-foil .card-face::after{content:none}
    .tape.is-closing .tape__line::after{transition:none}
    .card-face{transition-duration:var(--dur-1)}
    .mode-ticket::before{transition:none}
  }
  html[data-motion="off"] .felt__21{transition-duration:var(--dur-1)}
  html[data-motion="off"] :is(.tent:not([hidden]),.receipt-sheet[open],.keymap[open],.rail[data-adjust="open"] .rail__segments){animation:fade-in var(--dur-1) linear both}
  html[data-motion="off"] :is(.rail,.rail__adjust .i,.slip__box,.slip__col){transition:none}
  html[data-motion="off"] .mode-ticket::before{transition:none}
  html[data-motion="off"] body[data-hand="live"] .rail__chips{transition:none}
  html[data-motion="off"] .playing-card.is-foil .card-face::after{content:none}
  html[data-motion="off"] .tape.is-closing .tape__line::after{transition:none}
  html[data-motion="off"] .card-face{transition-duration:var(--dur-1)}
}