/* Cribbage: a card room. Green baize, mahogany, cream cards with red and black pips, brass peg holes.
   The theme block swaps the shared tokens while the game is on screen; the rest is this game's own pieces, scoped
   under the game's own class names (.crib-*, .pcard) so nothing leaks into the other games' pages. */
html.theme-cribbage {
    --bg: #0f3a28;
    --panel: #164a34;
    --panel-2: #1d5a40;
    --panel-3: #256a4c;
    --line: #2f7a58;
    --text: #f4efe2;
    --muted: #b7cdbd;
    --accent: #d7b35a;
    --accent-2: #f0d27a;
    --accent-dark: #a3812f;
    --accent-text: #2a200a;
    --parch: #f6efdc;
    --parch-2: #e3d6b4;
    --parch-ink: #2b2118;
    --danger: #e8584a;
    --ok: #86d48f;
    --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
    --body: "Lora", Georgia, "Times New Roman", serif;
    --wood-light: #7a4a24;
    --wood: #5a3218;
    --wood-2: #3d2010;
    --card: #fbf6e8;
    --card-red: #b8322a;
    --card-black: #1f1b1a;
    --back: #8a2a2a;
    --back-2: #a84343;
    --hole: #2a1507;
    --hole-deep: #1a0d04;
    --hole-rim: #c9a24b;
    --count-high: #ffb86b;
}

/* ---- the game page: board on top, the table in the middle, your hand at the bottom, one bar of actions */
.crib-page .topbar .round { color: var(--accent-2); }
.crib-page .error { color: var(--danger); }
/* The cloth under the board and the table take 15% of the viewer's seat colour (--me on the phone's page; the table page
   has none and keeps the plain green), with a light vignette (the inset shadow); the board sits under one soft shadow. */
.crib-board-card { background: linear-gradient(color-mix(in srgb, #20543c 85%, var(--me, #20543c)), color-mix(in srgb, #17422f 85%, var(--me, #17422f))); border: 1px solid color-mix(in srgb, var(--line) 60%, var(--me, var(--line))); border-radius: 12px; padding: .45rem .6rem .75rem; margin-bottom: .5rem; box-shadow: inset 0 0 28px rgba(0,0,0,.28); }
.crib-scores { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; }
.crib-scores .team { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; min-width: 0; }
.crib-scores .team .dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--cauldron); border: 1px solid rgba(0,0,0,.5); flex: none; margin: 0; }
.crib-scores .team .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crib-scores .team .score { font-family: var(--display); font-size: 1.35rem; color: var(--accent-2); line-height: 1; }
.crib-scores .team.me .name { font-weight: 700; }
.crib-board-wrap { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* max-width: none and margin: 0 undo the Quacks pot board's unscoped .board rule (420px, centred), which halved this
   board on the table page and on a tablet. */
.crib-svg { display: block; width: 100%; max-width: none; height: auto; margin: 0; border-radius: 2.2%; box-shadow: 0 2px 3px rgba(0,0,0,.45), 0 7px 14px rgba(0,0,0,.35); }
.crib-svg .wood-hi { stop-color: var(--wood-light, #7a4a24); }
.crib-svg .wood { stop-color: var(--wood, #5a3218); }
.crib-svg .wood-lo { stop-color: var(--wood-2, #3d2010); }
.crib-svg .check-light { fill: var(--parch, #f6efdc); }
.crib-svg .check-dark { fill: var(--hole-deep, #1a0d04); }
.crib-svg .arrow-head { fill: var(--accent-2, #f0d27a); }
.crib-svg .hole { fill: var(--hole, #2a1507); stroke: var(--hole-rim, #c9a24b); stroke-width: .7; }
.crib-svg .hole.five { stroke: var(--accent-2, #f0d27a); stroke-width: 1; }
.crib-svg .hole.start, .crib-svg .hole.finish { stroke: var(--accent-2, #f0d27a); stroke-width: 1.2; fill: var(--hole-deep, #1a0d04); }
.crib-svg .finish-ring { fill: none; stroke: var(--parch, #f6efdc); stroke-width: .9; stroke-dasharray: 1.6 1.2; }
.crib-svg .finish-band { stroke: rgba(0,0,0,.6); stroke-width: .4; }
.crib-svg .way { fill: none; stroke: rgba(240,210,122,.72); stroke-width: 1; stroke-dasharray: 2 1.7; stroke-linecap: round; }
.crib-svg .hn { font-size: 5px; fill: rgba(255,225,170,.75); font-family: var(--body); }
.crib-svg .hn.end { font-size: 4.2px; fill: rgba(246,239,220,.9); font-weight: 700; }
.crib-svg .peg { opacity: 0; transition: opacity .2s; }
.crib-svg .peg.moving .body { filter: brightness(1.25); }
.crib-svg .peg .dir { display: none; fill: var(--peg); stroke: rgba(0,0,0,.7); stroke-width: .6; stroke-linejoin: round; }
.crib-svg .peg.lead .dir { display: block; }
.crib-svg .peg.lead .shine { r: 1.5; }

.crib-table { position: relative; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, #1f6b4a 85%, var(--me, #1f6b4a)), color-mix(in srgb, #0f3a28 85%, var(--me, #0f3a28)) 75%); border: 1px solid color-mix(in srgb, var(--line) 60%, var(--me, var(--line))); border-radius: 14px; padding: .5rem .6rem .4rem; margin-bottom: .5rem; box-shadow: inset 0 0 40px rgba(0,0,0,.35); min-height: 12.5rem; }
.crib-table .crib-opps { display: flex; justify-content: space-around; gap: .5rem; margin-bottom: .35rem; }
.crib-table .crib-opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; flex: 1; padding: .3rem .25rem; border-radius: 10px; border: 1px solid transparent; }
.crib-table .crib-opp.turn { border-color: var(--accent); background: rgba(215,179,90,.12); }
.crib-table .crib-opp .name { font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.crib-table .crib-opp .name .ico { color: var(--cauldron); width: .9rem; height: .9rem; }
.crib-table .crib-opp .name .ico.dealer-mark { color: var(--accent); width: 1.05rem; height: 1.05rem; margin-left: .1rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.crib-table .crib-opp .backs { display: inline-flex; gap: 0; min-height: 1.5rem; align-items: center; }
.crib-table .crib-opp .status { font-size: .8rem; color: var(--muted); min-height: 1em; }
.crib-table .crib-opp .status.done { color: var(--ok); }
.crib-pulse { display: inline-block; animation: crib-pulse .6s ease-out; }
@keyframes crib-pulse { 0% { transform: none; } 35% { transform: scale(1.18); color: var(--accent-2); } 100% { transform: none; } }
/* A go: a parchment badge on the tile for a moment */
.crib-go { position: absolute; top: -.35rem; right: .2rem; font: 700 .8rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--parch); color: var(--parch-ink); border: 1px solid var(--accent-dark); border-radius: 999px; padding: .2rem .5rem; box-shadow: 0 2px 6px rgba(0,0,0,.45); animation: crib-go-in .35s cubic-bezier(.2,.8,.2,1) both; z-index: 2; }
@keyframes crib-go-in { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: rotate(-6deg); opacity: 1; } }
.mini-back { display: inline-block; width: .95rem; height: 1.35rem; border-radius: 2px; background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%, rgba(0,0,0,.18)), repeating-linear-gradient(45deg, var(--back) 0 2px, var(--back-2) 2px 4px); border: 1px solid var(--parch); box-shadow: 0 1px 2px rgba(0,0,0,.5); margin-left: -.35rem; }
.mini-back:first-child { margin-left: 0; }
.crib-table .crib-centre { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; }
.crib-table .crib-deck-area { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; padding-left: .25rem; max-width: 9rem; }
.crib-table .crib-deck, .crib-table .crib-box { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.crib-table .crib-deck small, .crib-table .crib-box small { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.crib-table .crib-stack { display: inline-flex; min-height: 1.6rem; align-items: center; min-width: 1.4rem; }
.crib-table .crib-stack .mini-back { margin-left: -.55rem; transform: translateY(calc(var(--i) * -1px)); }
.crib-table .crib-stack .mini-back:first-child { margin-left: 0; }
.crib-table .crib-box.mine small { color: var(--accent-2); }
.crib-table .crib-pile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 7rem; min-width: 0; }
.crib-table .crib-pile .count { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.crib-table .crib-pile .count small { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.crib-table .crib-pile .count b { font-family: var(--display); font-size: 2.2rem; color: var(--accent-2); display: inline-block; min-width: 2ch; text-align: center; }
.crib-table .crib-pile .count.high b { color: var(--count-high); }
/* 15 and 31: the count flashes brass */
.crib-table .crib-pile .count b.flash { animation: crib-count-flash .9s ease-out; }
@keyframes crib-count-flash { 0% { transform: none; } 30% { transform: scale(1.35); color: var(--accent); text-shadow: 0 0 14px var(--accent-2), 0 0 2px var(--accent-dark); } 100% { transform: none; } }
.crib-table .crib-pile .seq { display: flex; justify-content: center; align-items: center; min-height: 4.6rem; }
.crib-table .crib-pile .seq .pcard { margin-left: -1.3em; }
.crib-table .crib-pile .seq .pcard:first-child { margin-left: 0; }
.crib-table .crib-pile .seq .pcard.mine { outline: 2px solid var(--accent); outline-offset: -2px; }
.crib-table .crib-pile .seq .pcard.last { transform: translateY(-8px) rotate(4deg); filter: drop-shadow(0 0 8px var(--accent-2)); z-index: 1; }
/* A count that has ended: its cards sink towards the earlier counts before they turn into chips there */
.crib-table .crib-pile .seq.ending .pcard { animation: crib-seq-out .7s ease-in both; }
@keyframes crib-seq-out { 0%, 45% { transform: none; opacity: 1; } 100% { transform: translateY(22px) scale(.6); opacity: .15; } }
/* The earlier counts: one chip per card, the rank in the suit's colour, a gap between counts */
.crib-table .crib-pile .prev { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .5rem; }
.crib-run { display: inline-flex; gap: .12rem; }
.crib-run.fresh { animation: crib-prev-in .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes crib-prev-in { from { transform: translateY(-26px) scale(1.25); opacity: 0; } to { transform: none; opacity: 1; } }
.crib-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.6rem; padding: 0 .2rem; border-radius: 4px; background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0) 50%, rgba(40,25,5,.12)), var(--card); border: 1px solid var(--parch-2); font: 700 .85rem/1 var(--display); box-shadow: inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(40,25,5,.22), 0 1px 2px rgba(0,0,0,.4); opacity: .9; }
.crib-chip.red { color: var(--card-red); }
.crib-chip.black { color: var(--card-black); }
.crib-chip.mine { box-shadow: 0 0 0 1.5px var(--accent), inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(40,25,5,.22), 0 1px 2px rgba(0,0,0,.4); }
.crib-lastcard { margin: .15rem 0 0; font-size: .85rem; text-align: center; color: var(--parch); }
.crib-lastcard b { color: var(--accent-2); }

/* The peek house rule: the card just above the cut, shown for a while under the deck */
.crib-peek { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: .4rem; animation: peek-in .5s ease-out both; }
.crib-peek small { font-size: .78rem; line-height: 1.1; color: var(--muted); max-width: 4.8rem; text-align: right; }
.crib-peek span { display: inline-flex; gap: .2rem; }
.crib-peek .pcard { animation: peek-flip .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes peek-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes peek-flip { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- the cut: the deck fanned out across the table; touch or drag along it to choose where to lift */
.crib-cutting { display: flex; flex-direction: column; gap: .35rem; padding: .25rem 0 .1rem; }
.crib-fan { --cut: 999; position: relative; display: flex; align-items: flex-end; height: 5.9rem; padding: 1.3rem 3rem 0 .25rem; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; border-radius: 10px; }
.crib-fan.mine { cursor: pointer; background: rgba(215,179,90,.07); box-shadow: inset 0 0 0 1px rgba(215,179,90,.35); }
/* The top packet (the first --cut cards) lifts away; the starter is the first card left lying. */
.crib-fan .fcard { flex: 1 1 0; min-width: 0; height: 4rem; position: relative; transition: transform .14s ease-out; transform: translateY(calc(-16px * clamp(0, var(--cut) - var(--i), 1))); }
.crib-fan .fcard > .pcard { position: absolute; left: 0; bottom: 0; font-size: .8rem; pointer-events: none; }
.crib-fan .fcard > .pcard svg { filter: drop-shadow(1px 0 0 rgba(0,0,0,.35)); }
/* Quacks' fortune card (.fcard .back) is styled globally; the fan's backs are this game's own cards */
.crib-fan .fcard .pcard.back { border: 0; box-shadow: none; background: transparent; border-radius: 8%; }
.crib-fan.done .fcard.taken { z-index: 2; animation: fan-taken 1.1s ease-out both; }
.crib-fan.done .fcard.taken .pcard svg { filter: drop-shadow(0 0 8px var(--accent-2)); }
@keyframes fan-taken { 0% { transform: none; } 40% { transform: translateY(-44px) rotate(-6deg); } 100% { transform: translateY(-44px) rotate(-6deg); } }
/* The starter turns face up in the fan once it is lifted clear: the back turns edge-on, then the face turns in */
.crib-fan .fcard > .turnover { position: absolute; left: 0; bottom: 0; font-size: .8rem; width: 3.6em; aspect-ratio: 5 / 7; perspective: 400px; pointer-events: none; }
.crib-fan .turnover > .pcard { position: absolute; left: 0; bottom: 0; font-size: .8rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.crib-fan .turnover > .back-side { animation: crib-turn-away .2s ease-in .45s both; }
.crib-fan .turnover > .face { animation: crib-turn-up .24s ease-out .65s both; }
@keyframes crib-turn-away { from { transform: none; } to { transform: rotateY(90deg); visibility: hidden; } }
@keyframes crib-turn-up { from { transform: rotateY(-90deg); } to { transform: none; } }
.crib-cut-note { margin: 0; min-height: 1.2em; }
.crib-cut-note b { color: var(--accent-2); }

.crib-hand { position: relative; padding: .3rem 0 0; }
/* Your turn: an accent rule above the fan */
.crib-hand.turn::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent-2) 20%, var(--accent-2) 80%, transparent); box-shadow: 0 0 10px var(--accent); animation: crib-rule-in .4s ease-out both; }
@keyframes crib-rule-in { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.crib-hand .fan { display: flex; justify-content: center; align-items: flex-end; min-height: 6.6rem; padding-top: 1rem; }
.crib-hand .fan .pcard { margin-left: -1.1em; transition: transform .18s ease, box-shadow .18s ease, opacity .18s; }
.crib-hand .fan .pcard:first-child { margin-left: 0; }
.crib-hand .fan .pcard.sel { transform: translateY(-16px); box-shadow: 0 10px 18px rgba(0,0,0,.5), 0 0 0 3px var(--accent); }
.crib-hand .fan .pcard.playable { box-shadow: 0 0 0 2px var(--accent-2), 0 8px 16px rgba(0,0,0,.45); transform: translateY(-6px); }
.crib-hand .fan .pcard.dim { opacity: .55; }
.crib-hand .waiting { padding: .35rem .25rem 0; margin: 0; font-size: .9rem; }
.crib-actions { align-items: center; }
.crib-actions .btn.wide { flex: 1; box-shadow: var(--shadow); }
.crib-actions .fab-status { font-size: .95rem; }
/* Your turn to play: a lit status pill, not a disabled button */
.crib-actions .fab-status.crib-yourturn { background: var(--accent); color: var(--accent-text); border-color: var(--accent-dark); font-weight: 700; box-shadow: var(--shadow), 0 0 0 3px rgba(215,179,90,.25); }
.crib-actions .fab-status.crib-yourturn .ico { width: 1.15rem; height: 1.15rem; }
.page.crib-page.with-fabs { padding-bottom: 6rem; }

/* ---- the flights: a card on its way is hidden where it will land; the ghost flies over everything */
.crib-hold { visibility: hidden !important; }
.crib-ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.crib-ghost .crib-gi { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.crib-ghost .crib-gp { position: absolute !important; left: 0; top: 0; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; animation: none !important; visibility: visible !important; opacity: 1 !important; outline: none; }
.crib-ghost .crib-gp.end, .crib-ghost .crib-gp.start { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.crib-ghost .crib-gp.start { transform: rotateY(180deg) !important; }
.crib-ghost .pcard svg { filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }

/* ---- playing cards (CardView): sized by font-size, 5:7 */
.pcard { display: inline-block; width: 3.6em; aspect-ratio: 5 / 7; padding: 0; border: 0; background: transparent; font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; flex: none; color: var(--card-black); border-radius: 8%; margin: 0; }
.pcard:disabled { cursor: default; }
.pcard svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.pcard .cf { fill: var(--card); stroke: rgba(0,0,0,.3); stroke-width: 1; }
.pcard .cb { fill: var(--parch); stroke: rgba(0,0,0,.3); stroke-width: 1; }
.pcard.red { color: var(--card-red); }
.pcard.black { color: var(--card-black); }
.pcard.xs { font-size: .55rem; }
.pcard.sm { font-size: .78rem; }
.pcard.md { font-size: 1.15rem; }
.pcard.lg { font-size: 1.5rem; }
.pcard.faded { opacity: .6; }
.pcard.lit svg { filter: drop-shadow(0 0 6px var(--accent-2)) drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.pcard.lit .cf { stroke: var(--accent); stroke-width: 2.5; }
.pcard.starter { transform: rotate(-4deg); }
.pcard.land { animation: card-land .32s cubic-bezier(.2,.8,.2,1); }
@keyframes card-land { from { transform: translateY(-26px) scale(1.1); opacity: 0; } to { transform: none; opacity: 1; } }
.pcard.starter.land { animation-name: starter-land; }
@keyframes starter-land { from { transform: rotate(40deg) scale(1.2); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }

/* ---- the show sheet: short, at the bottom, in the player's colour, leaving the board in view above it */
.sheet.show { max-height: calc(100dvh - var(--crib-keep, 15rem)); max-height: min(calc(100dvh - var(--crib-keep, 15rem)), 640px); }
.sheet.show > .body { padding-top: .5rem; }
.sheet.show .show-cards { display: flex; justify-content: center; align-items: center; gap: .2rem; margin: .1rem 0 .5rem; }
.sheet.show .show-cards .plus { font-family: var(--display); font-size: 1.4rem; color: var(--muted); margin: 0 .25rem; }
.show-lines { list-style: none; padding: 0; margin: 0 0 .35rem; }
.show-lines li { display: grid; grid-template-columns: 1fr auto 2.4rem; gap: .5rem; align-items: baseline; padding: .32rem .5rem; border-bottom: 1px solid var(--line); animation: line-in .35s both; cursor: pointer; }
.show-lines li .pts { color: var(--accent-2); font-weight: 700; }
.show-lines li .run { text-align: right; font-family: var(--display); font-size: 1.15rem; color: var(--text); }
@keyframes line-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sheet.show .call { font-style: italic; font-size: 1.05rem; color: var(--parch); text-align: center; margin: .45rem 0; animation: line-in .4s both; }
.sheet.show .nineteen { font-family: var(--display); font-size: 2.2rem; text-align: center; color: var(--accent-2); margin: .5rem 0 .25rem; }
.show-total { text-align: center; animation: line-in .4s both; margin: .25rem 0 0; }
.show-total b { font-family: var(--display); font-size: 1.6rem; color: var(--accent-2); }
.show-total small { color: var(--muted); }
.show-total .muted { display: block; font-size: .85rem; }
.skunk { text-align: center; font-weight: 700; color: var(--accent-2); margin: .25rem 0; }

/* ---- the cut for the deal: the lowest card lit; the sheet closes itself (the bar runs down) */
.cut-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.cut-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.cut-row.low { border-color: var(--accent); background: rgba(215,179,90,.14); box-shadow: 0 0 0 1px var(--accent-dark) inset; }
.cut-row .name { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.cut-row .name .ico { color: var(--cauldron); }
.cut-row .low-tag { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--accent-2); text-transform: uppercase; letter-spacing: .06em; }
.cut-row .cards { display: inline-flex; gap: .25rem; }
.crib-autoclose { position: relative; overflow: hidden; }
.crib-autoclose::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-text); opacity: .35; transform-origin: left; animation: crib-autoclose 3.2s linear both; }
@keyframes crib-autoclose { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- game over: confetti falls inside the standings card */
.crib-final { position: relative; }
.crib-final .fx-layer { border-radius: 12px; }

/* ---- the rules sheet's tables */
.rule-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rule-table td { padding: .3rem .25rem; border-bottom: 1px solid var(--line); }
.rule-table td:last-child { text-align: right; font-weight: 700; color: var(--accent-2); white-space: nowrap; }

/* ---- the table screen */
.crib-tablepage .crib-board-card { max-width: 760px; margin: 0 auto .75rem; }
.crib-tablepage .crib-table { max-width: 760px; margin: 0 auto .75rem; }
.show-row { display: grid; grid-template-columns: 7rem 1fr auto; gap: .5rem .75rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.show-row .show-cards { display: inline-flex; align-items: center; gap: .1rem; }
.show-row .total { font-family: var(--display); font-size: 1.4rem; color: var(--accent-2); }
.show-row .muted { grid-column: 2 / span 2; font-size: .85rem; }
/* The walk: each hand's row comes in, its call and total after its lines have been read */
.show-row.walk { animation: line-in .45s both; }
.show-row.walk .call, .show-row.walk .total { animation: line-in .4s both; }

/* ---- short phones */
@media (max-height: 700px) {
    .crib-table { min-height: 10rem; }
    .crib-table .crib-pile { min-height: 5.5rem; }
    .crib-table .crib-pile .count b { font-size: 1.7rem; }
    .crib-hand .fan .pcard.md { font-size: 1rem; }
    .crib-fan { height: 5.6rem; }
    .crib-fan .fcard { height: 3.8rem; }
}

/* ---- reduced motion: every keyframe above is skipped; things simply appear where they end */
@media (prefers-reduced-motion: reduce) {
    .pcard.land, .pcard.starter.land, .crib-peek, .crib-peek .pcard, .crib-fan.done .fcard.taken,
    .show-lines li, .sheet.show .call, .show-total, .show-row.walk, .show-row.walk .call, .show-row.walk .total,
    .crib-pulse, .crib-go, .crib-run.fresh, .crib-table .crib-pile .count b.flash, .crib-table .crib-pile .seq.ending .pcard,
    .crib-hand.turn::before, .crib-autoclose::after { animation: none; }
    .crib-fan.done .fcard.taken { transform: translateY(-44px); }
    .crib-fan .turnover > .back-side { animation: none; visibility: hidden; }
    .crib-fan .turnover > .face { animation: none; }
    .crib-go { transform: rotate(-6deg); }
    .crib-fan .fcard, .crib-hand .fan .pcard { transition: none; }
}