/* The fight's animation layer (anim.ts): an overlay over the stage, only transforms and opacity move.
   The look follows the approved prototype «Базар» (D-Run1-Live, slowed ×1.35 in D2-Run1-Slow). */
.anl {
  --ivory: var(--c-ink); --soft: var(--c-ink-2); --faint: var(--c-ink-dim); --brass: var(--c-accent); --brass-hi: var(--c-accent-2); --brass-lo: var(--c-accent-lo); --red: var(--c-danger); --red-glow: rgba(var(--c-danger-rgb), .55); --ok: var(--c-ok);
  --disp: "Cormorant SC", "Cormorant", serif; --ui: "Fira Sans", system-ui, sans-serif; --num: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;
  --paper: var(--c-paper); --paper-ink: var(--c-paper-ink); --plate: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-3)); --line: inset 0 0 0 1px var(--c-line);
  position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; color: var(--c-ink); font: var(--fw-med) 16px/1.2 var(--font-body);
  contain: layout style;
}
.anl-fade { background: rgba(var(--t-bg2-10-rgb), .5); }
.anl .an-dim { position: absolute; inset: 74px 0 0 0; background: rgba(var(--t-bg2-10-rgb), .3); }
.anl .an-catch { position: absolute; inset: 74px 0 0 0; pointer-events: auto; cursor: pointer; }
/* a point on the stage: its child is centred on it and is what moves */
.anl .an-at { position: absolute; width: 0; height: 0; display: flex; align-items: center; justify-content: center; }
.anl .an-at > * { flex: none; white-space: nowrap; will-change: transform, opacity; }

/* the screen under a playing run: its totals, ledgers, pairs and chips are the overlay's counters now */
.fx.an-on .plate .rt { visibility: hidden; }

/* the run's columns: a socket's number (and its lit frame) stays covered until its column scores (anim.ts adds .an-cN) */
.fx.an-on:not(.an-c0) .sk[data-col="0"] .n { opacity: 0; }
.fx.an-on:not(.an-c0) .sk[data-col="0"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c0) .sk[data-col="0"].idle .g, .fx.an-on:not(.an-c0) .sk[data-col="0"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c1) .sk[data-col="1"] .n { opacity: 0; }
.fx.an-on:not(.an-c1) .sk[data-col="1"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c1) .sk[data-col="1"].idle .g, .fx.an-on:not(.an-c1) .sk[data-col="1"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c2) .sk[data-col="2"] .n { opacity: 0; }
.fx.an-on:not(.an-c2) .sk[data-col="2"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c2) .sk[data-col="2"].idle .g, .fx.an-on:not(.an-c2) .sk[data-col="2"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c3) .sk[data-col="3"] .n { opacity: 0; }
.fx.an-on:not(.an-c3) .sk[data-col="3"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c3) .sk[data-col="3"].idle .g, .fx.an-on:not(.an-c3) .sk[data-col="3"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c4) .sk[data-col="4"] .n { opacity: 0; }
.fx.an-on:not(.an-c4) .sk[data-col="4"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c4) .sk[data-col="4"].idle .g, .fx.an-on:not(.an-c4) .sk[data-col="4"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c5) .sk[data-col="5"] .n { opacity: 0; }
.fx.an-on:not(.an-c5) .sk[data-col="5"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c5) .sk[data-col="5"].idle .g, .fx.an-on:not(.an-c5) .sk[data-col="5"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c6) .sk[data-col="6"] .n { opacity: 0; }
.fx.an-on:not(.an-c6) .sk[data-col="6"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c6) .sk[data-col="6"].idle .g, .fx.an-on:not(.an-c6) .sk[data-col="6"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c7) .sk[data-col="7"] .n { opacity: 0; }
.fx.an-on:not(.an-c7) .sk[data-col="7"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c7) .sk[data-col="7"].idle .g, .fx.an-on:not(.an-c7) .sk[data-col="7"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c8) .sk[data-col="8"] .n { opacity: 0; }
.fx.an-on:not(.an-c8) .sk[data-col="8"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c8) .sk[data-col="8"].idle .g, .fx.an-on:not(.an-c8) .sk[data-col="8"] .g.dim { opacity: 1; }
.fx.an-on:not(.an-c9) .sk[data-col="9"] .n { opacity: 0; }
.fx.an-on:not(.an-c9) .sk[data-col="9"].lit { box-shadow: var(--shadow-well), 0 0 0 var(--bw) rgba(var(--c-accent-rgb), .18); }
.fx.an-on:not(.an-c9) .sk[data-col="9"].idle .g, .fx.an-on:not(.an-c9) .sk[data-col="9"] .g.dim { opacity: 1; }

.anl .an-ticker { font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-accent-2-tx); text-shadow: 0 2px 12px var(--c-shadow), 0 0 2px var(--c-shadow); }
.anl .an-tot { font: var(--fw-bold) 34px/1 var(--font-num); color: var(--c-ink); text-shadow: 0 2px 8px var(--c-shadow); }
.anl .an-tot.me { color: var(--c-accent-2-tx); }
.anl .an-chip { font: var(--fw-bold) 18px/1 var(--font-num); color: var(--c-ink); }

/* a cell's turn: it rises in a brass frame, its check resolves, the number pops and flies */
.anl .an-glow { position: absolute; border-radius: var(--r-md); box-shadow: 0 0 0 var(--bw-strong) var(--c-accent-2), 0 0 26px rgba(var(--c-accent-2-rgb), .7); will-change: transform, opacity; }
.anl .an-glow.no { box-shadow: 0 0 0 var(--bw-strong) rgba(var(--c-ink-2-rgb), .6), 0 0 12px rgba(var(--c-shadow-rgb), .6); }
.anl .an-glow.none { box-shadow: 0 0 0 var(--bw) rgba(var(--c-accent-2-rgb), .55), 0 0 14px rgba(var(--c-accent-2-rgb), .3); }

.anl .an-pop { font: var(--fw-bold) 24px/1 var(--font-num); color: var(--c-accent-2-tx); text-shadow: 0 2px 8px var(--c-shadow), 0 0 12px rgba(var(--c-accent-2-rgb), .45); }
.anl .an-pop.bad { color: var(--c-danger); text-shadow: 0 2px 8px var(--c-shadow), 0 0 10px var(--c-danger-glow); }
.anl .an-pop.trick { color: var(--t-magic-7); }
.anl .an-pop.small { font-size: 18px; }
.anl .an-pop.label { font: var(--fw-bold) 18px/1 var(--font-body); padding: 4px 9px; border-radius: var(--r-xs); background: rgba(var(--t-bg-13-rgb), .9); box-shadow: inset 0 0 0 var(--bw) var(--c-accent); }
.anl .an-pop.label.bad { box-shadow: inset 0 0 0 var(--bw) var(--c-danger); }

.anl .an-beam { position: absolute; height: 4px; transform-origin: 0 50%; border-radius: calc(var(--r-xs) / 2); background: linear-gradient(90deg, var(--c-danger), var(--t-danger2-7)); box-shadow: 0 0 14px var(--c-danger); will-change: transform, opacity; }
.anl .an-beam.mimic { height: 2px; background: var(--t-magic-4); box-shadow: 0 0 10px var(--t-magic-4); }
.anl .an-beam.mid-feed { height: 3px; background: linear-gradient(90deg, var(--t-gold-2), var(--t-paper-14)); box-shadow: 0 0 12px var(--t-gold-2); }
.anl .an-beam.mid-link { height: 2px; background: var(--t-info-6); box-shadow: 0 0 10px var(--t-magic-1); opacity: .8; }

/* totals: the leader's halo; the settle's rings, chips and bank */
.anl .an-halo { width: 150px; height: 90px; border-radius: var(--r-round); background: radial-gradient(ellipse at center, rgba(var(--c-accent-2-rgb), .42), transparent 70%); }
.anl .an-lead { font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-accent-2-tx); text-shadow: 0 1px 4px var(--c-shadow); }

.anl .an-token { display: flex; align-items: center; gap: 6px; }
/* a physical stack: chips with an edge stripe, 4 px apart; the stack flies on an arc and squashes as it lands (anim.ts chipFly) */
.anl .an-token .stk { position: relative; display: block; width: 28px; height: 44px; }
.anl .an-token .stk i { position: absolute; left: 0; bottom: calc(var(--k) * 4px); display: block; width: 28px; height: 28px; border-radius: var(--r-round);
  background: repeating-conic-gradient(from 10deg, rgba(var(--t-ink-7-rgb), .0) 0 30deg, rgba(var(--t-ink-7-rgb), .35) 30deg 45deg), radial-gradient(circle at 35% 30%, var(--t-accent2-5), var(--c-accent) 55%, var(--c-accent-lo));
  box-shadow: 0 0 0 var(--bw-strong) var(--c-accent-edge), 0 2px 0 var(--t-paperink-11), 0 4px 7px rgba(var(--c-shadow-rgb), .55), inset 0 0 0 5px rgba(var(--c-accent-edge-rgb), .35); }
.anl .an-token.ante .stk i { background: repeating-conic-gradient(from 10deg, rgba(var(--t-ink-7-rgb), 0) 0 30deg, rgba(var(--t-ink-20-rgb), .3) 30deg 45deg), radial-gradient(circle at 35% 30%, var(--t-danger2-8), var(--t-danger-10) 55%, var(--t-accentedge-11)); box-shadow: 0 0 0 var(--bw-strong) var(--t-paperink-12), 0 2px 0 var(--t-paperink-13), 0 4px 7px rgba(var(--c-shadow-rgb), .55); }
/* juice: family sparks, the ring at a total as points land, a streak's hot number, the chips' shards at a bust */
.anl .an-spark { width: 6px; height: 6px; border-radius: var(--r-round); background: radial-gradient(circle, var(--t-ink-8) 0 25%, var(--sc) 55%, transparent 75%); box-shadow: 0 0 8px var(--sc); }
.anl .an-tring { width: 70px; height: 46px; border-radius: calc(var(--r-md) * 4 / 5); box-shadow: 0 0 0 var(--bw-strong) rgba(var(--c-accent-2-rgb), .8), 0 0 18px rgba(var(--c-accent-2-rgb), .45); }
.anl .an-pop.hot { font-size: 34px; color: var(--t-ink-9); text-shadow: 0 2px 8px var(--c-shadow), 0 0 16px rgba(var(--t-warn-5-rgb), .85), 0 0 30px rgba(var(--t-accent-6-rgb), .5); }
.anl .an-shard { width: 12px; height: 7px; border-radius: var(--r-round); background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent-lo)); box-shadow: 0 0 0 var(--bw) var(--c-accent-edge); }
.anl .an-token b { font: var(--fw-bold) 18px/1 var(--font-num); color: var(--c-accent-2-tx); text-shadow: 0 1px 4px var(--c-shadow); }
.anl .an-token.ante b { color: var(--c-danger); }
.anl .an-crack { position: absolute; border-radius: var(--r-md); background: linear-gradient(115deg, transparent 46%, rgba(var(--c-danger-rgb), .75) 48%, transparent 50%), rgba(var(--t-accentink-9-rgb), .45);
  box-shadow: 0 0 0 var(--bw-strong) var(--c-danger), 0 0 22px var(--c-danger-glow); will-change: transform, opacity; }
.anl .an-out { font: var(--fw-bold) 34px/1 var(--font-display); color: var(--c-danger); letter-spacing: .08em; text-transform: uppercase; padding: 4px 14px; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-danger); background: rgba(var(--t-bg2-19-rgb), .8); }
.anl .an-delta { font: var(--fw-bold) 16px/1 var(--font-num); text-shadow: 0 1px 4px var(--c-shadow); }
.anl .an-delta.up { color: var(--c-ok); } .anl .an-delta.dn { color: var(--c-danger); }

/* card plays and board motions: the flying card, the slam, a hit's shock, cells travelling (their real sockets wait) */
.sk.an-hold > * { opacity: 0; }
.anl .an-flycard { position: absolute; z-index: 3; pointer-events: none; will-change: transform, opacity; }
.anl .an-card { display: flex; align-items: center; justify-content: center; border-radius: calc(var(--r-sm) * 7 / 6); font: var(--fw-semi) 34px/1 var(--font-body); color: var(--c-paper-ink);
  background: linear-gradient(170deg, var(--t-paper-2), var(--t-accent2-9)); box-shadow: 0 0 0 var(--bw) var(--c-accent-lo), 0 8px 18px rgba(var(--c-shadow-rgb), .6); }
.anl .an-flycell { position: absolute; z-index: 2; pointer-events: none; will-change: transform, opacity; box-shadow: 0 0 0 var(--bw-strong) var(--c-accent-2), 0 10px 22px rgba(var(--c-shadow-rgb), .7) !important; }
.anl .an-slam { position: absolute; border-radius: var(--r-md); box-shadow: 0 0 0 3px var(--c-accent-2), 0 0 24px rgba(var(--c-accent-2-rgb), .75); will-change: transform, opacity; }
.anl .an-slam.hit { box-shadow: 0 0 0 3px var(--c-danger), 0 0 26px var(--c-danger-glow); }
.anl .an-shock { width: 110px; height: 110px; border-radius: var(--r-round); box-shadow: 0 0 0 4px var(--c-danger), 0 0 30px var(--c-danger-glow), inset 0 0 20px var(--c-danger-glow); }
/* a new round: the rule's paper stamp and the round's name over the felt */

/* the cell's flash in its family colour (anim.ts: at most 3 flash moments a second), the end's dusk on a loss */
.anl .an-flash { position: absolute; border-radius: var(--r-md); mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fc) 70%, var(--t-ink-8)) 0 30%, color-mix(in srgb, var(--fc) 45%, transparent) 65%, transparent 100%); will-change: opacity; }
.anl .an-dusk { width: 1400px; height: 800px; border-radius: var(--r-round); background: radial-gradient(ellipse at center, rgba(var(--t-bg-6-rgb), .55), rgba(var(--t-bg-6-rgb), .25) 50%, transparent 72%); }