/* Ace Ladder — skin of the table shell: a card room. Lithographed playing cards on a baize table under one lamp (the
   shell's light pool, top centre), a library ladder of turned wood beside it. Layout stays the shell's; this file draws
   the felt, the ladder (two rails; the rungs you climbed come into the light, the rest wait in shade), the card table
   (deck, the card in play, the discard pile), the two calls printed on card stock once a card is in play, the
   rung-counter bar, the main button as a ladder rung between two rails, and the pips of the big wins.
   Light: one key light from above the table's centre — lit tops on everything horizontal, the lit side of the rails
   facing the table, soft contact shadows falling away from the lamp. Colours are tokens from skin.js themeMap; the
   material tones (--rail-hi/-lo, --rung-hi/-lo) are mixed from them here, so both presets keep their own wood.
   Art direction: docs/design-system/reelhaven/pages/art-direction.md §4–§5. Motion on transform / opacity only. */
:root{--display:"Fjalla One","Arial Narrow","Roboto Condensed",sans-serif;--ui:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--radius:12px;--radius-sm:8px;--prim-radius:10px;
  --wood-dark:#2B1A0C;--rail-hi:color-mix(in srgb,var(--al-rail) 64%,#fff);--rail-lo:color-mix(in srgb,var(--al-rail) 56%,var(--wood-dark));
  --rung-hi:color-mix(in srgb,var(--al-rung) 58%,#fff);--rung-lo:color-mix(in srgb,var(--al-rung) 62%,var(--wood-dark));
  /* a turned dowel standing upright, lit from the table's side (the ladder stands left of the lamp) */
  --dowel:linear-gradient(90deg,var(--rail-lo) 0,var(--al-rail) 34%,var(--rail-hi) 64%,var(--al-rail) 84%,color-mix(in srgb,var(--al-rail) 78%,var(--wood-dark)) 100%);
  --card-r:6.4%/4.57%;--card-shadow:0 1px 1.5px rgb(0 0 0 / .3),0 7px 16px -5px rgb(0 0 0 / .45)}

/* ---- the scene: baize under the lamp — lighter where the lamp falls, darker toward the room, one static grain. The
   light and the grain are position:fixed pseudo-elements over a solid ground, so axe can still measure every text's
   contrast against the ground (as table.css does for its lamp) ---- */
.al-scene{background:var(--bg)}
.al-scene::before,.al-scene::after{content:"";position:fixed;inset:0;pointer-events:none}
.al-scene::before{background:radial-gradient(ellipse 78% 66% at 50% 34%,color-mix(in srgb,var(--bg) 90%,#fff) 0,var(--bg) 50%,color-mix(in srgb,var(--bg) 74%,#000) 100%)}
.al-scene::after{opacity:.09;mix-blend-mode:overlay;background-size:160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-variant="plain"] .al-scene::after{display:none}
body.bg-custom .al-scene{display:none} /* the admin's own background picture shows instead */

/* ---- the board: ladder | table ---- */
.table-game .board.tboard{flex:1 1 0;min-height:236px;container-type:size}
.al-board{--lw:clamp(64px,21cqw,206px);--gap:clamp(8px,2.6cqw,30px);--pitch:clamp(30px,7.4cqh,46px);--bh:clamp(48px,10.5cqh,62px);--vg:clamp(5px,1.7cqh,12px);
  /* the card in play: as tall as the board leaves under the counter and the two calls, as wide as the table allows */
  --card-h:min(calc(min(100cqh,720px) - 46px - 2 * var(--bh) - 5 * var(--vg)),calc((100cqw - var(--lw) - var(--gap)) * .62),330px);
  display:grid;grid-template-columns:var(--lw) minmax(0,1fr);gap:var(--gap);width:100%;height:100%;max-height:720px}
.al-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---- the ladder: two turned rails; the rungs move down as the climb goes up ---- */
.al-ladder{position:relative;overflow:hidden;container-type:inline-size;margin:2px 0;padding-left:6px}
.al-ladder::before,.al-ladder::after{content:"";position:absolute;top:0;bottom:0;width:10px;z-index:1;border-radius:5px;background:var(--dowel);
  box-shadow:-4px 3px 8px -3px rgb(0 0 0 / .45)}
.al-ladder::before{left:6px}.al-ladder::after{right:0}
.al-track{position:absolute;left:16px;right:10px;bottom:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column-reverse;
  transition:transform 460ms var(--ease-out)}
.al-rung{position:relative;flex:none;height:var(--pitch);display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-bottom:14px}
/* a rung waiting in the shade: the rails' wood, dimmed toward the felt, lit along its top, a soft shadow under it */
.al-rung::before{content:"";position:absolute;left:-6px;right:-6px;bottom:4px;height:7px;border-radius:3.5px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--al-ghost) 80%,#fff),var(--al-ghost) 48%,color-mix(in srgb,var(--al-ghost) 74%,#000));
  box-shadow:0 4px 5px -3px rgb(0 0 0 / .4)}
.al-rung .x{font-family:var(--display);font-size:clamp(13px,2.6cqh,19px);line-height:1;color:var(--muted);white-space:nowrap;letter-spacing:.02em}
/* a rung climbed: in the lamp's light */
.al-rung.won::before{background:linear-gradient(180deg,var(--rung-hi),var(--al-rung) 46%,var(--rung-lo));box-shadow:0 4px 6px -3px rgb(0 0 0 / .5)}
.al-rung.won .x{color:var(--ink)}
.al-rung.top::before{height:9px;bottom:3px}
.al-rung.won.top::before{box-shadow:0 4px 6px -3px rgb(0 0 0 / .5),0 0 14px -2px color-mix(in srgb,var(--al-rung) 55%,transparent)}
.al-rung.top .x{color:var(--al-num);font-size:clamp(15px,3.3cqh,24px)}
.al-rung.ground::before{height:10px;bottom:3px;background:linear-gradient(180deg,var(--rail-hi),var(--al-rail) 45%,var(--rail-lo))}
.al-rung.ground .x{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
/* the next rung: chalked on, waiting for the call */
.al-rung.next::before{background:none;box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--al-rung) 80%,transparent);height:8px;bottom:3px}
.al-rung.next .x{color:var(--al-num)}
.al-rung.ghost .x{visibility:hidden}
.al-rung.new{animation:al-rung-in 360ms var(--ease-out) backwards}
.al-rung.lit::before{background:linear-gradient(180deg,#fff,var(--al-num) 48%,var(--rung-lo));box-shadow:0 0 12px 1px color-mix(in srgb,var(--al-num) 55%,transparent)}
@keyframes al-rung-in{from{transform:scaleX(.6);opacity:0}}
/* the card that won a rung, hung on it as a small paper tag */
.al-rung .mini{display:inline-flex;align-items:center;gap:1px;height:22px;padding:0 6px 0 3px;border-radius:4px;background:var(--al-stock);color:var(--al-black);
  font-family:var(--display);font-size:15px;line-height:1;box-shadow:0 0 0 .5px var(--al-edge),0 2px 4px -1px rgb(0 0 0 / .45)}
.al-rung .mini.red{color:var(--al-red)}
.al-rung .mini svg{width:12px;height:12px;fill:currentColor}
.al-rung .mini .arr{width:12px;height:12px;margin-right:2px;fill:var(--al-soft)}
/* a narrow ladder (phones): the card hangs on its rung as a small tag, the cash-out above it */
@container (max-width:132px){
  .al-rung.won{flex-direction:column-reverse;justify-content:flex-start;align-items:center;gap:1px;padding-bottom:0}
  .al-rung .mini{position:relative;height:14px;padding:0 3px 0 2px;gap:0;border-radius:3px;font-size:11.5px}
  .al-rung .mini svg{width:8px;height:8px}
  .al-rung .mini .arr{width:9px;height:9px;margin-right:1px}
}
.al-more{position:absolute;left:calc(50% + 3px);bottom:2px;z-index:2;transform:translateX(-50%);padding:0 6px;border-radius:999px;background:var(--plate);color:var(--muted);font-size:12px;font-weight:600}
.al-more:empty{display:none}

/* ---- the table ---- */
/* the counter heads the table: it, the calls and the card sit together in the middle of the board's height (on a tall
   phone the free space falls above and below the group, not between the counter and the calls) */
.al-play{display:grid;grid-template-rows:minmax(0,1fr) auto auto auto auto minmax(0,1fr);justify-items:center;align-items:center;gap:var(--vg);min-width:0;min-height:0}
.al-counter{grid-row:2;margin-bottom:clamp(2px,1.6cqh,14px)}.al-hi{grid-row:3}.al-felt{grid-row:4}.al-lo{grid-row:5}
/* the rung counter: rung, cash-out, skips — a quiet plate, labels in sentence case, figures in the display face */
.al-counter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,440px);border:1px solid var(--line);border-radius:10px;background:var(--plate);
  box-shadow:0 6px 14px -10px rgb(0 0 0 / .6)}
.al-counter>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:4px 6px 5px}
.al-counter>div+div{border-left:1px solid var(--line)}
.al-counter span{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--muted);white-space:nowrap}
.al-counter b{font-family:var(--display);font-weight:400;font-size:clamp(17px,3.2cqh,23px);line-height:1.15;color:var(--al-num);font-variant-numeric:tabular-nums}

/* the calls: an outline printed on the felt while no card is in play; once one is, a slip of card stock with a fine
   inner rule (lit along the top by the lamp), the cash-out it reaches on the right */
.al-call{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:min(100%,440px);min-height:var(--bh);padding:4px 16px 4px 12px;
  border-radius:var(--radius);border:1px solid var(--line);background-color:transparent;color:var(--ink);text-align:left;
  transition:background-color var(--t-base) var(--ease-std),color var(--t-base) var(--ease-std),border-color var(--t-base) var(--ease-std),box-shadow var(--t-base) var(--ease-std),transform var(--t-press) var(--ease-out)}
.al-call::after{content:"";position:absolute;inset:4px;border:1px solid var(--al-rule);border-radius:calc(var(--radius) - 4px);opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease-std)}
.al-call .arr{width:24px;height:24px;fill:currentColor}
.al-call .t{min-width:0}
.al-call .t b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(19px,3.6cqh,24px);line-height:1.05;letter-spacing:.04em;text-transform:uppercase}
.al-call .t small{display:block;margin-top:1px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-call .pay{font-family:var(--display);font-size:clamp(21px,4.2cqh,29px);line-height:1;color:var(--al-red);font-variant-numeric:tabular-nums}
.al-board.live .al-call:not(.off){border-color:var(--al-edge);color:var(--al-black);background-color:var(--al-stock);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .55),inset 0 -6px 10px -6px rgb(0 0 0 / .1),0 1px 0 var(--al-edge),0 10px 18px -12px rgb(0 0 0 / .75)}
.al-board.live .al-call:not(.off)::after{opacity:1}
.al-board.live .al-call:not(.off) .t small{color:var(--al-soft)}
.al-call:hover:not(:disabled){transform:translateY(-1px)}
.al-board.live .al-call:hover:not(:disabled):not(.off){box-shadow:inset 0 2px 0 rgb(255 255 255 / .55),inset 0 -6px 10px -6px rgb(0 0 0 / .1),0 1px 0 var(--al-edge),0 14px 22px -12px rgb(0 0 0 / .8)}
.al-call:active:not(:disabled){transform:translateY(1px)}
.al-board.live .al-call:active:not(:disabled):not(.off){box-shadow:inset 0 2px 4px rgb(0 0 0 / .08),0 1px 0 var(--al-edge),0 4px 8px -6px rgb(0 0 0 / .7)}
/* a call the card does not offer (nothing above a King, below an Ace, or past the cap) */
.al-call.off{background-color:var(--al-off);border-style:dashed;color:var(--ink)}
.al-call.off .t small{color:var(--ink)}
.al-call:disabled{cursor:default}

/* the felt row: deck (skip) | the card in play | the discard pile */
.al-felt{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,3cqw,26px);width:100%;height:var(--card-h)}
.al-slot{position:relative;height:var(--card-h);aspect-ratio:5/7;perspective:1000px}
.al-deck{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:48px;padding:4px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink)}
.al-stack{position:relative;display:block;height:calc(var(--card-h) * .5);aspect-ratio:5/7;transition:transform var(--t-fast) var(--ease-out)}
.al-stack .al-card:nth-child(1){transform:translate(-4px,4px)}
.al-stack .al-card:nth-child(2){transform:translate(-2px,2px)}
.al-stack .al-card .al-ba{box-shadow:0 1px 1px rgb(0 0 0 / .35),0 3px 6px -3px rgb(0 0 0 / .35)}
.al-deck:not(:disabled):hover .al-stack{transform:translateY(-3px)}
.al-decklab{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.al-decklab b{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.al-decklab small{font-size:12px;font-weight:600;color:var(--muted)}
.al-deck:disabled{opacity:.6}
/* the discard place: an outline printed on the baize */
.al-discard{justify-self:start;position:relative;height:calc(var(--card-h) * .5);aspect-ratio:5/7}
.al-discard .al-card{transform:rotate(var(--tilt,0deg))}
.al-discard .al-fa{box-shadow:0 1px 1px rgb(0 0 0 / .3),0 4px 8px -4px rgb(0 0 0 / .4)}
.al-discard::before{content:"";position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);border-radius:var(--card-r)}

/* a card: two faces turning in 3D (the server's card is drawn on its face before it turns); paper with a thin edge and
   a contact shadow on the felt (box-shadow on each face: no filter on the turning card) */
.al-card{position:absolute;inset:0}
.al-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform var(--flip,280ms) cubic-bezier(.3,.7,.3,1)}
.al-fa,.al-ba{position:absolute;inset:0;border-radius:var(--card-r);box-shadow:var(--card-shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.al-ba{transform:rotateY(180deg)}
.al-card.down .al-flip{transform:rotateY(180deg)}
.al-card svg{display:block;width:100%;height:100%}
.al-card.over{transform:translate(12%,2%) rotate(3deg)}
.al-card.fell{transform:translate(14%,2%) rotate(6deg)}
.al-card.fell .al-fa::after{content:"";position:absolute;inset:-5px;border:2.5px solid var(--al-red);border-radius:8%/5.6%;box-shadow:0 0 0 1px color-mix(in srgb,var(--al-stock) 60%,transparent)}
.al-card.idle{opacity:.8}
.al-slot .al-card:not(:last-child){filter:brightness(.92)}
/* card art (art.js paint classes) */
.al-stock{fill:var(--al-stock);stroke:var(--al-edge);stroke-width:1.5}
.al-hole{fill:var(--al-stock)}
.al-rule{stroke:var(--al-rule)}
.al-ink{fill:var(--al-black)}
.al-red{fill:var(--al-red)}
.al-court{fill:var(--al-court)}
.al-back{fill:var(--al-back)}
.al-back2{fill:var(--al-back2)}
.al-backRule{stroke:var(--al-backrule)}
.al-card text{font-family:var(--display);font-weight:400}
body[data-variant="plain"] .al-card [fill^="url(#al-screen"]{display:none}

/* ---- the main button: a ladder rung between two short rails, lit from above; waiting (no call won yet, or the card
   still turning) it is the rung's outline, not a greyed slab ---- */
.table-game .spin.tprim{min-width:142px;height:52px;padding:0 24px;margin:0 12px;overflow:visible;color:var(--btn-ink);
  background:var(--btn-bg);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .5),inset 0 -10px 14px -10px rgb(0 0 0 / .22),inset 0 -2px 0 rgb(0 0 0 / .16),0 2px 3px rgb(0 0 0 / .3),0 12px 20px -10px rgb(0 0 0 / .6);
  transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-fast) var(--ease-std),background-color var(--t-fast) var(--ease-std),color var(--t-fast) var(--ease-std)}
.table-game .spin.tprim::before,.table-game .spin.tprim::after{content:"";position:absolute;top:-9px;bottom:-9px;width:9px;border-radius:5px;background:var(--dowel);
  box-shadow:-2px 3px 6px -2px rgb(0 0 0 / .45);pointer-events:none}
.table-game .spin.tprim::before{left:-12px}.table-game .spin.tprim::after{right:-12px}
.table-game .spin.tprim span{max-width:16ch;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.05em;text-transform:uppercase}
.table-game .spin.tprim:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 5px rgb(0 0 0 / .28),0 1px 2px rgb(0 0 0 / .3)}
.table-game .spin.tprim:disabled{opacity:1;background:transparent;color:var(--al-num);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--al-rail) 55%,transparent)}

/* ---- the HUD: the rung-counter bar, its top edge a ladder rail lying along it (lit edge above, shade below; a solid
   ground under the figures) ---- */
.hud.thud{background:var(--hud-bg);border:1px solid var(--line);border-top:3px solid var(--al-rail);
  box-shadow:0 -1px 0 var(--rail-hi),inset 0 1px 0 var(--rail-lo),0 14px 30px -14px rgb(0 0 0 / .6)}
.thud .meter b{font-family:var(--display);font-weight:400;letter-spacing:.02em}
.tstrip li{font-family:var(--display);font-weight:400;letter-spacing:.03em;font-size:14px}
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.message{font-weight:600}
.message b{color:var(--ink);font-weight:800}

/* ---- rules: the first call's pays ---- */
.al-paywrap{overflow-x:auto;margin:8px 0 4px}
.al-paytab{border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:min(100%,340px)}
.al-paytab th,.al-paytab td{padding:6px 14px;border-bottom:1px solid var(--line);text-align:right}
.al-paytab td:first-child,.al-paytab th:first-child{text-align:left}
.al-paytab th{font-size:13px;font-weight:600;color:var(--muted)}
.al-paytab small{color:var(--muted)}

/* ---- big wins: card pips out of the card in play ---- */
.al-pips{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.al-pips i{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;background:var(--al-pip-a);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  opacity:0;animation:al-pip 2.3s cubic-bezier(.3,.55,.5,1) var(--d,0ms) forwards}
.al-pips i.s0{--m:var(--pip-0)}.al-pips i.s1{--m:var(--pip-1);background:var(--al-pip-b)}.al-pips i.s2{--m:var(--pip-2);background:var(--al-pip-b)}.al-pips i.s3{--m:var(--pip-3)}
@keyframes al-pip{0%{opacity:0;transform:translate(0,0) rotate(0) scale(var(--s))}10%{opacity:1}
  45%{transform:translate(calc(var(--dx) * .6),var(--h)) rotate(calc(var(--r) * .5)) scale(var(--s))}100%{opacity:0;transform:translate(var(--dx),55vh) rotate(var(--r)) scale(var(--s))}}

/* ---- narrow boards ---- */
@container (max-width:520px){
  .al-call{gap:8px;padding:3px 12px 3px 9px}
  .al-call .arr{width:20px;height:20px}
  .al-call .t small{font-size:12px}
  .al-call .pc{display:none}
}
@container (max-width:330px){
  .al-counter span{font-size:11.5px;letter-spacing:0}
}
@media (max-width:400px){
  .table-game .spin.tprim{min-width:116px;height:50px;padding:0 14px}
  .table-game .spin.tprim span{font-size:17px;letter-spacing:.03em}
}
@media (max-width:340px){
  .table-game .spin.tprim{min-width:104px;padding:0 10px;margin:0 10px}
  .table-game .spin.tprim span{font-size:15.5px;letter-spacing:.01em;max-width:none}
  .table-game .spin.tprim::before{left:-10px}.table-game .spin.tprim::after{right:-10px}
}
@media (max-width:420px) and (max-height:700px){.thud #mBetSub{display:none}}
/* phones held sideways (and other short, wide screens): the column board (counter, call, card, call over a 236 px
   floor) and the strip and message line above and below it do not fit the 180-260 px between the header and the HUD.
   The board takes the stage's full height on the left, the results strip and the message line stand in a column
   beside it (their wrappers display:contents, as Brass Dial and Sappers' Field do); inside the board the card in play
   stands on the felt beside the ladder and the counter and the two calls stack to its right — Higher above, Lower
   below. The card is as tall as the board allows, or as wide as the felt column leaves. */
@media (max-height:500px) and (min-width:560px){
  .table-game .stage.tstage{display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,20vw,200px);grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"board strip" "board msg" "board ctl";gap:6px 12px}
  .table-game .boardarea.tboardarea,.table-game .frame{display:contents}
  .tstrip{grid-area:strip;justify-self:stretch;min-width:0}
  .table-game .board.tboard{grid-area:board;min-height:0;height:100%}
  .table-game .message{grid-area:msg;align-self:center;font-size:14px;line-height:1.35}
  .tcontrols{grid-area:ctl}
  /* --felt: the felt column; the deck and the discard pile take half a card's width each (and the deck at least
     --dmin, its label's width), so the card is the felt less both piles and gaps */
  .al-board{--lw:clamp(64px,13cqw,100px);--gap:8px;--ctl:clamp(180px,40cqw,250px);--cg:10px;--fg:8px;--dmin:52px;
    --felt:calc(100cqw - var(--lw) - var(--gap) - var(--ctl) - var(--cg));
    --card-h:min(calc(100cqh - 12px),calc((var(--felt) - 2 * var(--fg) - 16px) / 1.44),calc((var(--felt) - 2 * var(--fg) - 2 * var(--dmin)) / .72),300px)}
  .al-play{grid-template-columns:minmax(0,1fr) var(--ctl);column-gap:var(--cg)}
  .al-felt{grid-column:1;grid-row:1/-1;gap:var(--fg)}
  .al-counter,.al-hi,.al-lo{grid-column:2}
  .al-counter{margin-bottom:2px}
  .al-call{gap:6px;padding:3px 10px 3px 8px}
  .al-call .arr{width:20px;height:20px}
  .al-call .t small{font-size:12px;white-space:normal;text-wrap:balance}
  .al-call .odds{white-space:nowrap}
  .al-call .pc{display:none}
  .al-counter span{font-size:11.5px;letter-spacing:0}
  .thud #mBetSub{display:none}
}
/* the shortest (≈ 320 px, e.g. 568 × 320): the results strip goes, the message line takes its place */
@media (max-height:340px) and (min-width:560px){
  .tstrip{display:none}
  .table-game .stage.tstage{grid-template-columns:minmax(0,1fr) clamp(120px,20vw,200px);grid-template-areas:"board msg" "board msg" "board ctl"}
  /* the skips left stay on the counter; the deck keeps its name only */
  .al-decklab small{display:none}
  .al-board{--dmin:48px}
}
@media (prefers-reduced-motion:reduce){
  .al-track,.al-flip,.al-call,.al-call::after,.al-stack{transition:none}
  .al-rung.new{animation:none}
  .al-pips{display:none}
}
body.still .al-track,body.still .al-flip,body.still .al-call{transition:none}