/* Generated by r4/play/.work/mat/build.mjs from vendor/broadcast/broadcast.css: the stage rules alone. Do not edit. */
/* the aperture every rule on the matte sits on (broadcast.css :root): one matte at 2.39:1, kept here so no layout loses it */
:root { --ap: 12.9%; }
/* ============================================================ the card: the round-3 card in the battle's box
   The card is ../cards/card.css (card.gen.css, scoped under .bc-card), printed by markup.js card(). The box is the
   battle's: it is placed and moved here, and broadcast/src/card.ts lays the card out at its tier and scales it into the
   box. Over it lie the battle's own layers: the hit's white, the crack, the crit split, the one-ink drain, the dim and
   the X-ray; under it, for a pop-up, its inside. */
.bc-card { --c: var(--paper); position: absolute; aspect-ratio: 63 / 88; container-type: size; isolation: isolate; }
.bc-card > .card { position: absolute; left: 0; top: 0; --card: 100cqw; transform-origin: 0 0; cursor: inherit; touch-action: auto; }
.bc-card .body { will-change: auto; transition: none; }
.bc-card .body::before { transition: none; }
/* a card that turns over (Elo's blind option) shows its back flat over its face; the scene picks which by opacity */
.bc-card[data-back] .back { transform: none; }
.bc-pop { position: absolute; left: 10%; right: 10%; top: 12%; aspect-ratio: 1; border-radius: 50%; border: 1.2cqw solid #fff; opacity: 0; pointer-events: none; }
.bc-card-inside { position: absolute; inset: 0; border-radius: 4.8cqw; overflow: hidden; background: #000; }
.bc-card-inside-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-card-inside-obj { position: absolute; left: 6%; bottom: 12%; height: 64%; width: 88%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; filter: drop-shadow(0 3cqh 4cqh rgba(0, 0, 0, .45)); }
.bc-card-inside-obj[data-window] { -webkit-mask: radial-gradient(closest-side, #000 62%, transparent); mask: radial-gradient(closest-side, #000 62%, transparent); filter: none; }
/* the hit, laid over the card: it keeps the card's corners (4.8% of its width, SPEC 2.1) */
.bc-card-flash, .bc-card-split, .bc-card-ink, .bc-card-crack, .bc-card-dim, .bc-card-xray { position: absolute; inset: 0; opacity: 0; pointer-events: none; border-radius: 4.8cqw; }
.bc-card-flash { background: #fff; mix-blend-mode: screen; }
.bc-card-split-a { background: #ff2d55; mix-blend-mode: screen; }
.bc-card-split-b { background: #19e3ff; mix-blend-mode: multiply; }
.bc-card-ink { background: #2a2a2c; mix-blend-mode: color; }
.bc-card-ink::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #1b1b1d; mix-blend-mode: multiply; opacity: .55; }
.bc-card-dim { background: #000; }
.bc-card-xray { background: #fff; mix-blend-mode: difference; }
.bc-card-crack { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cg stroke='%23000' stroke-opacity='.6' stroke-width='3'%3E%3Cpath d='M58 52 44 30 48 14 40 0M58 52 80 40 92 46 100 38M58 52 66 76 58 96 64 120 60 140M58 52 32 64 18 60 0 72M58 52 74 66 96 70M44 30 30 24M66 76 82 88'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M58 52 44 30 48 14 40 0M58 52 80 40 92 46 100 38M58 52 66 76 58 96 64 120 60 140M58 52 32 64 18 60 0 72M58 52 74 66 96 70M44 30 30 24M66 76 82 88'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 58% 37%; }

/* ============================================================ the stage: the replay cut */
.stage { position: absolute; inset: 0; z-index: 5; container-type: size; }
.stage-black { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; transition: opacity .12s; pointer-events: none; }
.sd-scene { --sd-bar: #000; --sd-bayer-cell: 6px; --sd-stroke: rgba(0, 0, 0, .8); --sd-crit: color-mix(in oklab, var(--c, #ff4d5e) 82%, #fff); --ex: color-mix(in oklab, var(--c, #8ea2ff) 74%, #000); }
/* A still is a panel at its own aspect, a little in from the frame and clear of the dealt card. */
.sd-scene[data-feature="still"][data-kind="attack"] .sd-feature { scale: .86; translate: 5cqw 0; filter: drop-shadow(0 4cqh 6cqh rgba(0, 0, 0, .6)); }
.sd-scene[data-feature="still"][data-kind="attack"][data-side="rival"] .sd-feature { translate: -5cqw 0; }

/* A mask over a name in a clip, drawn as a sticker in the island's own style (bday.land). */
.sd-mask[data-style="sticker"] { border-radius: 5px; box-shadow: 0 0 0 2px #fff, 2px 3px 0 2px #2b1d14; }

/* the attacker's card, dealt in front of the bars; its object breaks out of the window over the lower matte */
/* its foot stands high enough that, fallen back and turned, the card's name still reads above the frame's edge */
.bc-deal { left: 3.5cqw; bottom: 7cqh; height: 46cqh; transform-origin: 50% 100%; will-change: transform; }
.sd-scene[data-side="rival"] .bc-deal { left: auto; right: 3.5cqw; }
.sd-scene[data-kind="attack"] .sd-cutout > img, .sd-scene[data-kind="attack"] .sd-cutout > .sd-sil { inset: auto; left: 9cqw; bottom: 3cqh; width: 46cqw; height: 66cqh; object-position: 22% 100%; will-change: transform, opacity; }
.sd-scene[data-kind="attack"][data-side="rival"] .sd-cutout > img, .sd-scene[data-kind="attack"][data-side="rival"] .sd-cutout > .sd-sil { left: auto; right: 9cqw; object-position: 78% 100%; }
.sd-scene .sd-cutout > img { filter: drop-shadow(0 2cqh 4cqh rgba(0, 0, 0, .5)); }
.sd-cutout > .sd-ph { display: none; }
/* the lower third (a trait, a status, an item, Guard): a smaller card, its name beside it, its value in the matte */
.bc-deal-third { left: 4cqw; bottom: 3.5cqh; height: 33cqh; }
.sd-scene[data-side="rival"] .bc-deal-third { left: auto; right: 4cqw; }
.sd-scene[data-kind="trait"] .sd-cutout > img { display: none; }
/* a status, an item and Guard happen to the card's subject: it stands in its world as it does in the arena, beside the
   small card, so the frame always has its subject (a trait's scene is its card's own) */
.sd-scene:is([data-kind="status"], [data-kind="item"], [data-kind="guard"]) .sd-cutout > img { inset: auto; left: 30cqw; bottom: 13cqh; width: 50cqw; height: 60cqh; object-position: 50% 100%; }
.sd-scene:is([data-kind="status"], [data-kind="item"], [data-kind="guard"])[data-side="rival"] .sd-cutout > img { left: 20cqw; }
.bc-deal-result { left: calc(50cqw - 21.12cqh); bottom: 18cqh; height: 59cqh; }
.sd-scene[data-kind="result"] .sd-cutout > img { display: none; }

/* the contact: the target in its world takes the hit */
.sd-scene[data-kind="attack"] .sd-target > img, .sd-scene[data-kind="attack"] .sd-target > .sd-sil, .sd-target > .sd-ph { display: none; }
.bc-contact { position: absolute; inset: 0; overflow: hidden; transform-origin: 94% 24%; background: #0b0b0d; will-change: transform, opacity; }
.bc-contact[data-from="rival"] { transform-origin: 6% 24%; }
.bc-contact-world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-contact-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 56% 52%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); }
.bc-contact[data-from="rival"] .bc-contact-shade { background: radial-gradient(ellipse 60% 70% at 44% 52%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); }
.bc-contact > .bc-rush { position: absolute; inset: 0; width: 100%; height: 100%; }
.bc-contact-card { position: absolute; height: 58cqh; aspect-ratio: 63 / 88; left: calc(56cqw - 20.76cqh); top: 20cqh; transform-origin: 50% 60%; }
.bc-contact[data-from="rival"] .bc-contact-card { left: calc(44cqw - 20.76cqh); }
.bc-contact-card > .bc-card { inset: 0; height: 100%; transform-origin: 50% 80%; }
.bc-contact[data-ending="crash"] { transform-origin: 56% 49%; }
.bc-contact[data-ending="crash"][data-from="rival"] { transform-origin: 44% 49%; }
.bc-contact-frame { position: absolute; inset: 0; border: 10px solid var(--paper); opacity: 0; }
.bc-contact-seam { position: absolute; top: -10%; bottom: -10%; left: -2px; width: 4px; background: var(--paper); opacity: 0; box-shadow: 0 0 30px rgba(0, 0, 0, .6); }
.bc-contact-num { position: absolute; left: 56cqw; top: 44cqh; translate: -50% -50%; font: 700 clamp(22px, 3.4cqw, 58px)/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; -webkit-text-stroke: .06em #000; paint-order: stroke fill; opacity: 0; }
.bc-contact[data-from="rival"] .bc-contact-num { left: 44cqw; }

/* a switch-in: the card opens like a pop-up into its world */
.bc-popup { left: calc(50cqw - 19.33cqh); top: 21cqh; height: 54cqh; transform-origin: 50% 50%; will-change: transform, opacity; }
.bc-popup .face { transform-origin: 0 50%; }
.bc-popup[data-from="rival"] .face { transform-origin: 100% 50%; }
.sd-scene[data-kind="switch"] .sd-cutout > img { display: none; }
/* a knockout: the card held up in front of the bars */
.bc-kocard { left: calc(50cqw - 21.12cqh); top: 17cqh; height: 59cqh; transform-origin: 50% 90%; -webkit-mask-size: 6px 6px; mask-size: 6px 6px; }
.sd-scene[data-kind="ko"] .sd-target > img, .sd-scene[data-kind="ko"] .sd-target > .sd-sil { display: none; }

/* the call-out: the move's own name, a hard extrusion in the card's colour, straddling the lower matte */
.sd-callout { display: block; padding: 0; }
.sd-callout-text { position: absolute; right: 5.5cqw; bottom: calc(var(--ap) - .2em); width: 64cqw; height: 1.1em; display: block; text-align: right; overflow: visible;
  font: 800 min(8.6cqw, 64cqw / (var(--clen, 10) * .64), 150px)/1 var(--sans); font-variation-settings: "wght" var(--sd-wght, 800); color: #fff;
  text-shadow: .014em .014em 0 var(--ex), .028em .028em 0 var(--ex), .042em .042em 0 var(--ex), .056em .056em 0 var(--ex), .07em .07em 0 var(--ex), .1em .14em .3em rgba(0, 0, 0, .55); }
.sd-scene[data-side="rival"] .sd-callout-text { right: auto; left: 5.5cqw; text-align: left;
  text-shadow: -.014em .014em 0 var(--ex), -.028em .028em 0 var(--ex), -.042em .042em 0 var(--ex), -.056em .056em 0 var(--ex), -.07em .07em 0 var(--ex), -.1em .14em .3em rgba(0, 0, 0, .55); }
.sd-callout[data-style="ledger"] .sd-callout-text { font: 600 min(5cqw, 80px)/1 var(--sans); font-variant-numeric: tabular-nums; color: #e7ffef; text-shadow: 0 .04em 0 rgba(0, 0, 0, .6), 0 0 .3em rgba(80, 255, 170, .35); -webkit-text-stroke: 0; }
.sd-callout[data-style="sticker"] .sd-callout-text { color: #ff5da2; -webkit-text-stroke: .07em #fff; paint-order: stroke fill; text-shadow: .05em .06em 0 #2b1d14; }
.sd-callout[data-style="specimen"] .sd-callout-text { font-weight: 100; font-variation-settings: "wght" var(--sd-wght, 100); width: var(--spec-w, 64cqw); text-align: left; }
.sd-callout:is([data-style="switch"], [data-style="ko"], [data-style="result"]) .sd-callout-text { right: 0; left: 0; width: auto; text-align: center; bottom: calc(var(--sd-mat, 17cqh) / 2 - .45em); font: 650 min(7cqh, 9cqw, 84px, 88cqw / (var(--clen, 10) * .56))/1 var(--sans); text-shadow: none; -webkit-text-stroke: 0; }
.sd-scene[data-kind="switch"] { --sd-mat: 17cqh; }
.sd-scene[data-kind="ko"] { --sd-mat: 24.7cqh; }
.sd-scene[data-kind="result"] { --sd-mat: 18.8cqh; }
/* (merge) Where a pop-up has grown over the lower matte, the entrance name sits on the card's art: a soft ink halo keeps it
   legible on any art and is invisible on the matte. Paint only, no box change. */
.sd-callout[data-style="switch"] .sd-callout-text { text-shadow: 0 0 .3em rgba(0, 0, 0, .78), 0 0 .1em rgba(0, 0, 0, .9), 0 .04em .5em rgba(0, 0, 0, .6); }
.sd-callout[data-style="ko"] .sd-callout-text { text-decoration: line-through; text-decoration-thickness: .06em; color: rgba(242, 240, 234, .86); }
.sd-callout[data-style="trait"] .sd-callout-text { left: calc(4cqw + 26cqh); right: auto; width: auto; max-width: 54cqw; bottom: calc(10.1cqh + 1.4cqh); height: auto; text-align: left;
  font: 650 min(4.4cqh, 3.2cqw, 50px)/1 var(--sans); padding: .36em .7em .42em .8em; background: rgba(8, 8, 10, .92); box-shadow: inset .22em 0 0 var(--c, var(--paper)); text-shadow: none; -webkit-text-stroke: 0; }
.sd-scene[data-side="rival"] .sd-callout[data-style="trait"] .sd-callout-text { left: auto; right: calc(4cqw + 26cqh); padding: .36em .8em .42em .7em; box-shadow: inset -.22em 0 0 var(--c, var(--paper)); }

/* the number and its receipt */
.sd-damage { display: block; padding: 0; transform-origin: 84% 42%; }
.sd-scene[data-side="rival"] .sd-damage { transform-origin: 16% 42%; }
.sd-number { position: absolute; right: 5.5cqw; top: 32cqh; display: block; text-align: right; font: 800 min(12cqw, 26cqh, 200px)/.9 var(--sans); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 .03em 0 rgba(0, 0, 0, .4), 0 .06em .4em rgba(0, 0, 0, .55); }
.sd-scene[data-side="rival"] .sd-number { right: auto; left: 5.5cqw; text-align: left; }
.sd-scene[data-label="word"] .sd-number { font-size: min(6.4cqw, 13cqh, 110px); top: 38cqh; }
.sd-receipt { position: absolute; right: 5.5cqw; top: calc(32cqh + min(12cqw, 26cqh, 200px) * .95); max-width: 42cqw; text-align: right; font: 500 clamp(11px, .95cqw, 14px)/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.sd-scene[data-side="rival"] .sd-receipt { right: auto; left: 5.5cqw; text-align: left; }
.sd-scene:is([data-kind="trait"], [data-kind="status"], [data-kind="item"], [data-kind="guard"]) .sd-number { top: auto; right: auto; left: calc(4cqw + 26cqh); bottom: 2.6cqh; font: 650 min(4.4cqh, 40px)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--paper); text-shadow: none; -webkit-text-stroke: 0; }
.sd-scene:is([data-kind="trait"], [data-kind="status"], [data-kind="item"], [data-kind="guard"])[data-side="rival"] .sd-number { left: auto; right: calc(4cqw + 26cqh); }
.sd-scene:is([data-kind="trait"], [data-kind="status"], [data-kind="item"], [data-kind="guard"]) .sd-receipt { display: none; }
/* (merge) The value's 1.25x entry scales about the value itself, not the attack number's place: it never leaves the frame. */
.sd-scene:is([data-kind="trait"], [data-kind="status"], [data-kind="item"], [data-kind="guard"]) .sd-damage { transform-origin: calc(4cqw + 26cqh) calc(100% - 2.6cqh); }
.sd-scene:is([data-kind="trait"], [data-kind="status"], [data-kind="item"], [data-kind="guard"])[data-side="rival"] .sd-damage { transform-origin: calc(100% - 4cqw - 26cqh) calc(100% - 2.6cqh); }
.sd-credit { inset: auto 2cqw 1.2cqh auto; max-width: 56cqw; font-size: 10px; color: rgba(255, 255, 255, .8); text-shadow: none; }
.sd-scene[data-side="rival"] .sd-credit { inset: auto auto 1.2cqh 2cqw; text-align: left; }
.sd-credit:empty { display: none; }

/* ---------- effects ---------- */
.bc-band { position: absolute; top: -12%; bottom: -12%; left: -24%; right: -24%; background: linear-gradient(90deg, var(--c) 0 61%, var(--paper) 61% 62.2%, var(--ink) 62.2%); overflow: hidden; transform: translate3d(-140%, 0, 0); will-change: transform; }
.sd-scene[data-side="rival"] .bc-band { background: linear-gradient(270deg, var(--c) 0 61%, var(--paper) 61% 62.2%, var(--ink) 62.2%); }
.bc-band-tex { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; mix-blend-mode: multiply; filter: grayscale(.4) contrast(1.4); }
/* the band's material (looks.ts): the card's world fills its colour field, the colour kept as the leading edge; or the
   card's own marks over the colour */
.bc-band[data-look="world"] .bc-band-tex { opacity: 1; mix-blend-mode: normal; filter: none; clip-path: inset(0 42% 0 0); }
.sd-scene[data-side="rival"] .bc-band[data-look="world"] .bc-band-tex { clip-path: inset(0 0 0 42%); }
.bc-band-marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-scene[data-side="rival"] .bc-band-marks { transform: scaleX(-1); }
.bc-rush { position: absolute; inset: 0; width: 100%; height: 100%; }
.bc-stamp { position: absolute; right: 5.5cqw; top: calc(32cqh - 7cqh); font: 700 min(3cqw, 6cqh, 46px)/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; background: #111; padding: .12em .32em; transform-origin: 50% 100%; }
.sd-scene[data-side="rival"] .bc-stamp { right: auto; left: 5.5cqw; }
.bc-stamp[data-crit] { background: #ff3b4f; }
.bc-ledger { position: absolute; z-index: 13; left: 5cqw; top: calc(var(--ap) + 5cqh); font: 500 clamp(12px, 1.25cqw, 19px)/1.55 var(--sans); font-variant-numeric: tabular-nums; color: #dfffe9; text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, .7); }
.sd-scene[data-side="rival"] .bc-ledger { left: auto; right: 5cqw; text-align: right; }
.bc-ledger-row { min-height: 1.55em; white-space: pre; }
.bc-ledger-typed { display: inline-block; }
/* the ledger is the receipt typed out: the receipt waits until it has gone, so the arithmetic never prints twice or
   over itself (a long receipt crossed the ledger on a phone) */
.sd-scene:has(> .bc-ledger) .sd-receipt { opacity: 0; }
.bc-ledger-total { font-weight: 700; font-size: 1.5em; color: #fff; border-top: 1px solid rgba(223, 255, 233, .5); margin-top: .2em; padding-top: .15em; }
.bc-tele { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bc-tele path { fill: none; stroke: #ffd84a; stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bc-redact { position: absolute; left: 0; top: 0; display: grid; place-items: center; transform-origin: 0 0; background: rgba(18, 16, 13, .96); color: #fff; font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(232, 200, 140, .7); white-space: nowrap; }
.bc-tc { position: absolute; z-index: 13; left: 5.5cqw; bottom: calc(var(--ap) / 2); translate: 0 50%; display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; }
.bc-tc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; }
.bc-scrubline { position: absolute; z-index: 13; left: calc(5.5cqw + 26px); right: 5.5cqw; bottom: calc(var(--ap) / 2 - 1px); height: 2px; background: rgba(255, 255, 255, .2); }
.bc-scrubline i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.sd-scene[data-kind="attack"] .bc-scrubline { left: calc(5.5cqw + 26px + 30cqh); }
.sd-scene[data-kind="attack"] .bc-tc { left: calc(5.5cqw + 30cqh); }
.sd-scene[data-kind="attack"][data-side="rival"] .bc-scrubline { left: calc(5.5cqw + 26px); right: calc(5.5cqw + 30cqh); }
.sd-scene[data-kind="attack"][data-side="rival"] .bc-tc { left: 5.5cqw; }
.bc-caption { position: absolute; z-index: 13; left: 50%; top: calc(var(--ap) + 24cqh); translate: -50% 0; background: #000; color: #fff; font: 500 clamp(18px, 2.3cqw, 36px)/1.2 var(--sans); padding: .22em .6em .28em; white-space: pre; }
.bc-caption:empty { visibility: hidden; }
.bc-wave { position: absolute; z-index: 13; left: 30%; top: calc(var(--ap) + 7cqh); width: 40%; height: 14%; }
.bc-axis { position: absolute; z-index: 13; right: 5.5cqw; width: 38cqw; bottom: calc(var(--ap) + 13cqh); }
.sd-scene[data-side="rival"] .bc-axis { right: auto; left: 5.5cqw; }
.bc-axis-rail { position: relative; height: 2px; background: rgba(255, 255, 255, .4); container-type: inline-size; }
.bc-axis-rail i { position: absolute; top: -6px; width: 1px; height: 14px; background: rgba(255, 255, 255, .55); }
.bc-axis-rail i[data-n]::after { content: attr(data-n); position: absolute; top: 18px; left: 0; translate: -50% 0; font: 500 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .7); }
.bc-axis-head { position: absolute; left: 0; top: -10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #ff5246; box-shadow: 0 0 0 4px rgba(255, 82, 70, .25); will-change: transform; }
.bc-axis-read { margin-top: 34px; font: 500 clamp(13px, 1.3cqw, 18px)/1 var(--sans); font-variant-numeric: tabular-nums; white-space: pre; color: #fff; }
.bc-doodles { position: absolute; inset: 0; width: 100%; height: 100%; }
.bc-doodles path { fill: #ff5da2; fill-opacity: 0; stroke: #fff; stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- the HUD on the matte: during a scene the score rides the top bar, white on black ---------- */
.bc-mhud { opacity: .42; transition: opacity .2s; position: absolute; left: 50%; bottom: 3.6cqh; width: min(880px, 90cqw); height: 5.6cqh; translate: -50% 0; display: grid; grid-template-columns: minmax(0, 1fr) 6.4cqh minmax(0, 1fr); align-items: center; column-gap: 2cqw; color: #fff; }
.bc-mhud-tag { --c: var(--paper); grid-row: 1; grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr) 3.4em; grid-template-rows: auto 3px; column-gap: 12px; row-gap: 6px; align-items: end; min-width: 0; }
.bc-mhud-tag[data-side="rival"] { grid-column: 3; grid-template-columns: 3.4em minmax(0, 1fr); }
.bc-mhud-name { grid-area: 1 / 1; font: 600 min(14px, 1.9cqh)/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bc-mhud-tag[data-side="rival"] .bc-mhud-name { grid-area: 1 / 2; text-align: right; }
.bc-mhud-hp { grid-area: 2 / 1; position: relative; height: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.bc-mhud-tag[data-side="rival"] .bc-mhud-hp { grid-area: 2 / 2; }
.bc-mhud-hp i { position: absolute; inset: 0; transform-origin: left; }
.bc-mhud-tag[data-side="rival"] .bc-mhud-hp i { transform-origin: right; }
.bc-mhud-ghost { background: rgba(255, 255, 255, .55); transition: transform .55s .32s cubic-bezier(.3, .7, .2, 1); }
.bc-mhud-fill { background: var(--c); transition: transform .2s ease-out; }
.bc-mhud-num { grid-area: 1 / 2 / 3 / 3; align-self: center; font: 700 min(22px, 3cqh)/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.bc-mhud-tag[data-side="rival"] .bc-mhud-num { grid-area: 1 / 1 / 3 / 2; text-align: left; }
.bc-mhud-turn { grid-row: 1; grid-column: 2; justify-self: stretch; font: 650 min(14px, 1.9cqh)/1 var(--sans); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6); }

.bc-mhud-turn::before { content: "T"; }
.res-team > .bc-card { position: relative; height: var(--rt); }
.res-team > .bc-card[data-down="true"] { opacity: .32; }
.sd-scene[data-variant="reduced"] .sd-callout:not([data-style="trait"]) .sd-callout-text { bottom: calc(var(--ap) / 2 - .5em); height: 1em; font-size: min(6.6cqh, 64cqw / (var(--clen, 10) * .64)); }
@media (max-width: 719px) {
.bc-mhud { display: none; }
.sd-scene[data-feature="still"][data-kind="attack"] .sd-feature { scale: 1; translate: 0 0; }
.bc-deal { left: 4cqw; bottom: 5cqh; height: 30cqh; }
.sd-scene[data-side="rival"] .bc-deal { right: 4cqw; }
.sd-scene[data-kind="attack"] .sd-cutout > img, .sd-scene[data-kind="attack"] .sd-cutout > .sd-sil { left: 2cqw; bottom: 3cqh; width: 80cqw; height: 46cqh; }
.sd-scene[data-kind="attack"][data-side="rival"] .sd-cutout > img, .sd-scene[data-kind="attack"][data-side="rival"] .sd-cutout > .sd-sil { right: 2cqw; }
.sd-callout-text { right: 10cqw; width: 85cqw; font-size: min(11cqw, 85cqw / (var(--clen, 10) * .64)); bottom: calc(var(--ap) - .18em); }
.sd-scene[data-side="rival"] .sd-callout-text { left: 10cqw; }
.sd-callout[data-style="ledger"] .sd-callout-text { font-size: min(10cqw, 44px); }
.sd-callout[data-style="trait"] .sd-callout-text { left: 5cqw; right: auto; width: auto; max-width: 90cqw; bottom: calc(10.1cqh + 2cqh); font-size: min(6.4cqw, 26px); }
.sd-scene[data-side="rival"] .sd-callout[data-style="trait"] .sd-callout-text { left: auto; right: 5cqw; }
.bc-deal-third { left: auto; right: 5cqw; bottom: 26cqh; height: 34cqh; }
.sd-scene[data-side="rival"] .bc-deal-third { right: auto; left: 5cqw; }
.sd-number { top: calc(var(--ap) + 3cqh); right: 5cqw; font-size: min(22cqw, 96px); }
.sd-scene[data-side="rival"] .sd-number { left: 5cqw; }
.sd-scene[data-label="word"] .sd-number { top: calc(var(--ap) + 4cqh); font-size: min(11cqw, 48px); }
.sd-receipt { top: calc(var(--ap) + 3cqh + min(22cqw, 96px) * .95); right: 5cqw; max-width: calc(90cqw - var(--sd-dx, 0cqw)); font-size: 10.5px; }
.sd-scene[data-side="rival"] .sd-receipt { left: 5cqw; }
.sd-credit { inset: auto 3cqw 1cqh 3cqw; max-width: none; font-size: 8.5px; text-align: left; }
.bc-contact-card { height: 42cqh; left: calc(50cqw - 15.03cqh); top: 30cqh; }
.bc-contact[data-from="rival"] .bc-contact-card { left: calc(50cqw - 15.03cqh); }
.bc-contact { transform-origin: 92% 26%; }
.bc-contact[data-from="rival"] { transform-origin: 8% 26%; }
.bc-contact[data-ending="crash"] { transform-origin: 50% 51%; }
.bc-contact-num { left: 50cqw; top: 46cqh; }
.bc-contact[data-from="rival"] .bc-contact-num { left: 50cqw; }
.bc-popup { height: 46cqh; left: calc(50cqw - 16.47cqh); top: 24cqh; }
.bc-kocard { height: 46cqh; left: calc(50cqw - 16.47cqh); top: 22cqh; }
.bc-deal-result { height: 44cqh; left: calc(50cqw - 15.75cqh); bottom: 22cqh; }
.bc-stamp { right: 5cqw; top: calc(var(--ap) + 1cqh); font-size: 18px; }
.bc-tc { bottom: calc(var(--ap) / 2); left: 5cqw; }
.bc-scrubline, .sd-scene[data-kind="attack"] .bc-scrubline, .sd-scene[data-kind="attack"][data-side="rival"] .bc-scrubline { left: calc(5cqw + 26px); right: 5cqw; }
.sd-scene[data-kind="attack"] .bc-tc, .sd-scene[data-kind="attack"][data-side="rival"] .bc-tc { left: 5cqw; }
.bc-ledger { top: calc(var(--ap) + 3cqh); left: 5cqw; font-size: 12px; }
.sd-scene[data-side="rival"] .bc-ledger { right: 5cqw; }
.bc-caption { top: calc(var(--ap) + 20cqh); font-size: 18px; }
.bc-wave { left: 15%; width: 70%; top: calc(var(--ap) + 4cqh); height: 10cqh; }
.bc-axis { right: 5cqw; width: 90cqw; bottom: calc(var(--ap) + 14cqh); }
.sd-scene[data-side="rival"] .bc-axis { left: 5cqw; }
.sd-scene[data-variant="reduced"] .sd-callout:not([data-style="trait"]) .sd-callout-text { font-size: min(5.6cqh, 85cqw / (var(--clen, 10) * .64)); }
}