/* What both stage layouts share over the Stage: the board ending's stand-down, the leader's cut-in in the top matte,
   the damage numeral, and the mode switch's 4x4 Bayer dissolve. Each mode's own sheet (mat.css, arena.css) holds its
   room, its board and its console colours, and only the active mode's sheet applies. */

/* the board ending's contact: the cards or figures in frame carry the HP and the number, so the matte HUD, the
   receipt and the scene's own number stand down until the scene ends */
#app .sd-scene[data-board] .bc-mhud { opacity: 0; transition: opacity .1s; }
#app .sd-scene[data-board] :is(.sd-receipt, .bc-stamp, .sd-damage) { visibility: hidden; }

/* the scene's picture layers (world, plate, footage, target, flash) in one box under the bars (runtime.js Stage) */
.sd-pics { position: absolute; inset: 0; z-index: 1; }
/* a scene staged in a band over the board (the Mat): its bars dim the board instead of hiding it, and the board's
   own cards carry the HP, so the matte HUD stands down */
:root { --band-dim: oklch(15% 0.012 75 / .64); }
.stage[data-band] .sd-scene { --sd-bar: var(--band-dim); }
.stage[data-band] .bc-mhud { display: none; }

/* a leader's cut-in: for every full attack the commanding leader steps into the frame on its side in its front
   command pose, its name and title under it on an ink plate (shared/battle.js places it through the layout). The
   matte HUD keeps clear of the corner it takes. */
:root { --cutin-w: 160px; }
@media (min-width: 720px) { :root { --cutin-w: 180px; } }
@media (min-width: 1280px) { :root { --cutin-w: 220px; } }
#app .bc-mhud { width: min(880px, 90cqw, 100cqw - 2 * (var(--cutin-w) + 32px)); }
.cutin { position: absolute; z-index: 28; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: var(--cutin-w); opacity: 0; pointer-events: none; }
.cutin[data-side="rival"] { align-items: flex-end; text-align: right; }
.cutin-face { flex: none; display: block; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 6px 14px oklch(0% 0 0 / .55)); }
.cutin[data-face="false"] .cutin-face { display: none; }
.cutin p { margin: 0; display: grid; gap: 3px; min-width: 0; padding: 7px 14px 8px 11px; background: oklch(12% 0.01 70 / .9); color: #fbf7ee; box-shadow: inset 3px 0 0 var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.cutin[data-side="rival"] p { padding: 7px 11px 8px 14px; box-shadow: inset -3px 0 0 var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%); }
.cutin b { font: 800 13px/1.15 var(--sans); color: var(--accent); }
.cutin span { font: 600 13px/1.25 var(--sans); }
.cutin[data-line="false"] span { display: none; }
@media (max-width: 719px) { .cutin b { font-size: 12px; } .cutin p { padding: 5px 11px 6px 9px; } }

/* the damage numeral the board owns: white tabular figures cut out in ink, the hit's true value from its first frame;
   its tags (Critical, the ring, Out, a multi-hit's count) hang right under it and move with it */
.num { position: absolute; left: 0; top: 0; font: 800 44px/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 0 #000, 2px 2px 0 oklch(8% 0.01 70), -1px -1px 0 oklch(8% 0.01 70), 1px -1px 0 oklch(8% 0.01 70), -1px 1px 0 oklch(8% 0.01 70), 0 6px 14px oklch(0% 0 0 / .5); }
.num[data-kind="crit"] { color: var(--nc, #ffd166); font-size: 56px; }
.num[data-kind="heal"] { color: #c8ffd4; font-size: 34px; }
.num-tags { position: absolute; left: 50%; top: 100%; translate: -50% 3px; display: flex; gap: 4px; font-size: max(13px, .4em); }
.num-tag { padding: .18em .42em .2em; background: oklch(12% 0.01 75); color: #fbf7ee; font: 800 1em/1 var(--sans); font-style: normal; white-space: nowrap; text-shadow: none;
  clip-path: polygon(.3em 0, 100% 0, calc(100% - .3em) 100%, 0 100%); }
.num-tag[data-kind="crit"] { background: var(--rival, oklch(56% 0.2 30)); color: #fff; }
.num-tag[data-kind="ring"], .num-tag[data-kind="out"] { background: #fbf7ee; color: oklch(14% 0.01 75); }
.num-tag[data-kind="hits"] { background: none; padding-inline: 0; clip-path: none; text-shadow: 0 1px 0 oklch(8% 0.01 70), 0 0 6px oklch(0% 0 0 / .6); }

/* the Ground's world canvas, used only to warm the cards' programs before the battle draws them */
#world.warm { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; opacity: 0; pointer-events: none; z-index: -1; }

/* the mode switch: the new board shows through the old one cell by cell, 4x4 Bayer at 3 css px (shared/battle.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { -webkit-mask-size: 12px 12px; mask-size: 12px 12px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }

/* nothing shows until the first board is mounted, so no box is drawn by a fallback and then moves */
html[data-boot] #app { visibility: hidden; }

/* the result's title, called large over the board (at least 12% of the frame's height) and held before the panel */
#app .sd-callout[data-style="result"] .sd-callout-text { font-size: min(12cqh, 92cqw / (var(--clen, 10) * .5)); }
/* the result's line on a phone, in both modes: the winner's name over its quote */
.result .result-say { display: grid; gap: 3px; font: 600 14px/1.3 var(--sans); }
.result .result-say b { font: 800 11px/1 var(--sans); color: var(--accent); }

/* the Arena's hand cards printed ahead of a deal's mount (arena/board.js prepare), unseen; here because the Arena's own
   sheet may not apply yet while it prepares */
.arena-print { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; contain: strict; }
.arena-print .bc-card { left: 0; top: 0; width: 100%; height: 100%; }