/* The full-screen effects of rare and legendary cards (js/fx/): the HTML
   over the cinema's picture. While one plays, the table's own buttons,
   plaques and numbers step aside, and a tap anywhere skips it. Sizes are in
   --u, a pixel on a 900 px tall screen. */
.fx-on > :not(.fx-root) { opacity: 0 !important; pointer-events: none !important; }
.fx-root { position: absolute; inset: 0; z-index: 45; overflow: hidden; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fx-root > * { position: absolute; pointer-events: none; }

/* a character brushed in: a mask sweeping down it, the ink spreading then settling */
.fx-ch { display: inline-block; --p: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--p) * 135% - 35%), transparent calc(var(--p) * 135%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--p) * 135% - 35%), transparent calc(var(--p) * 135%));
  filter: blur(calc((1 - var(--p)) * 5px)); }

/* ------------------------------------------------------------ the name, and the card beside it */
.fx-title-wrap { display: flex; align-items: center; gap: calc(var(--u) * 30); transform: translate(-50%, -50%) scale(var(--grow, 1)); }
.fx-title-wrap.card-left { flex-direction: row-reverse; }
.fx-title-wrap.card-below { flex-direction: column; gap: calc(var(--u) * 18); }
.fx-title-wrap.card-above { flex-direction: column-reverse; gap: calc(var(--u) * 18); }
.fx-card { position: relative; flex: none; aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%; overflow: hidden; opacity: var(--ca, 0);
  transform: perspective(calc(var(--u) * 1400)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--cs, 1));
  box-shadow: 0 0 0 calc(var(--u) * 2) #f2d27a99, 0 calc(var(--u) * 14) calc(var(--u) * 34) #000c, 0 0 calc(var(--u) * 40) #ffd27a55; }
.fx-card canvas { display: block; width: 100%; height: 100%; }
.fx-card::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(115deg, transparent calc(var(--sh, 0) * 170% - 70%), #fff4d0aa calc(var(--sh, 0) * 170% - 52%), transparent calc(var(--sh, 0) * 170% - 34%)); }
.fx-title { display: flex; align-items: center; gap: calc(var(--u) * 20); }
/* the card flying to its place at the moment's end (js/fx/cinema.js fly()), then lingering there a moment */
.fx-card.fx-fly { aspect-ratio: auto; transform-origin: 50% 50%; }
.fx-card.fx-fly-out { position: absolute; z-index: 44; pointer-events: none; animation: fxFlyOut 0.3s ease-in forwards; }
@keyframes fxFlyOut { to { opacity: 0; } }
.fx-title.v { flex-direction: row-reverse; align-items: flex-start; }
.fx-title.v .fx-name { writing-mode: vertical-rl; }
.fx-title.h { flex-direction: column; gap: calc(var(--u) * 6); }
.fx-name { font: 700 1em/1.04 'LXGW WenKai TC', 'Noto Serif TC', serif; letter-spacing: 0.03em; white-space: nowrap; }
.fx-title-side { display: flex; align-items: center; gap: calc(var(--u) * 12); opacity: var(--side, 0); transform: translateY(calc((1 - var(--side, 0)) * var(--u) * 14)); }
.fx-title.v .fx-title-side { flex-direction: column; align-items: flex-end; padding-top: calc(var(--u) * 10); }
.fx-mini-seal { display: grid; place-items: center; min-width: calc(var(--u) * 44); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 5);
  background: #b3261e; color: #fff3dc; font: 700 calc(var(--u) * 28)/1 'LXGW WenKai TC', serif; box-shadow: inset 0 0 0 calc(var(--u) * 2.5) #fff3dc33, 0 0 calc(var(--u) * 12) #000c;
  -webkit-mask: url(ui/stamp.svg) center / calc(var(--u) * 120); mask: url(ui/stamp.svg) center / calc(var(--u) * 120); }
.fx-sub { font: 700 calc(var(--u) * 34)/1.15 var(--font-head); letter-spacing: 0.05em; color: #f6ead0; text-shadow: 0 calc(var(--u) * 2) 0 #000, 0 0 calc(var(--u) * 14) #000; white-space: nowrap; }
.fx-title.v .fx-sub { writing-mode: horizontal-tb; }
.fx-word { font: 700 calc(var(--u) * 26)/1.2 var(--font-head); color: var(--gold-bright, #f2d27a); text-shadow: 0 0 calc(var(--u) * 10) #000, 0 calc(var(--u) * 2) 0 #000; white-space: nowrap; }

/* the inks */
.fx-title.gold .fx-name, .fx-calli.gold, .fx-counter.gold { color: #fbe6a2; -webkit-text-stroke: calc(var(--u) * 1.4) #3a2208;
  text-shadow: 0 calc(var(--u) * 4) 0 #2a1608, 0 0 calc(var(--u) * 6) #000, 0 0 calc(var(--u) * 34) #ffbe5099; }
.fx-title.ink .fx-name, .fx-calli.ink { color: #140b07; text-shadow: 0 0 calc(var(--u) * 3) #fff6e2e6, 0 0 calc(var(--u) * 26) #fff2dccc; }
.fx-title.red .fx-name, .fx-calli.red { color: #e0372c; -webkit-text-stroke: calc(var(--u) * 1.2) #3a0806; text-shadow: 0 calc(var(--u) * 3) 0 #200402, 0 0 calc(var(--u) * 30) #ff3a1a99; }
.fx-title.jade .fx-name, .fx-calli.jade { color: #d4ffe6; -webkit-text-stroke: calc(var(--u) * 1.2) #0a3a20; text-shadow: 0 calc(var(--u) * 3) 0 #04200f, 0 0 calc(var(--u) * 34) #4fe0a0aa; }
.fx-title.white .fx-name, .fx-calli.white { color: #f4efe6; text-shadow: 0 calc(var(--u) * 3) 0 #000, 0 0 calc(var(--u) * 24) #000; }
.fx-title.yellow .fx-name, .fx-calli.yellow { color: #ffd21a; -webkit-text-stroke: calc(var(--u) * 1.4) #3a2a00; text-shadow: 0 calc(var(--u) * 4) 0 #1a1200, 0 0 calc(var(--u) * 40) #ffc80099; }

/* ------------------------------------------------------------ seals */
.fx-seal { width: var(--sz); height: var(--sz); display: grid; place-items: center; border-radius: calc(var(--sz) * 0.07);
  transform: translate(-50%, -50%) rotate(var(--rot, -7deg)) scale(var(--sc, 1));
  background: radial-gradient(circle at 35% 30%, #d33a2e, #b3261e 55%, #8e1b14); color: #fff3dc;
  box-shadow: inset 0 0 0 calc(var(--sz) * 0.045) #fff3dc, inset 0 0 0 calc(var(--sz) * 0.07) #b3261e, 0 0 calc(var(--u) * 30) #000a;
  -webkit-mask: url(ui/stamp.svg) center / calc(var(--sz) * 1.1); mask: url(ui/stamp.svg) center / calc(var(--sz) * 1.1); }
.fx-seal.round { border-radius: 50%; }
.fx-seal.jade { background: radial-gradient(circle at 35% 30%, #4fb878, #2e8a4f 55%, #14502c); }
.fx-seal.gold { background: radial-gradient(circle at 35% 30%, #f7d77a, #c7961c 55%, #7a5408); color: #2a1608; box-shadow: inset 0 0 0 calc(var(--sz) * 0.045) #2a1608aa, inset 0 0 0 calc(var(--sz) * 0.07) #c7961c, 0 0 calc(var(--u) * 30) #000a; }
.fx-seal-in { font: 700 calc(var(--sz) * 0.7)/1 'LXGW WenKai TC', 'Noto Serif TC', serif; text-align: center; }
.fx-seal.n2 .fx-seal-in { writing-mode: vertical-rl; font-size: calc(var(--sz) * 0.42); line-height: 1; }
.fx-seal.n3 .fx-seal-in, .fx-seal.n4 .fx-seal-in { writing-mode: vertical-rl; height: calc(var(--sz) * 0.84); font-size: calc(var(--sz) * 0.4); line-height: 1.04; }

/* ------------------------------------------------------------ the scroll */
.fx-scroll { width: var(--w); height: var(--h); transform: translate(-50%, -50%); max-width: 94vw; max-height: 88vh; }
.fx-paper { position: absolute; inset: 0; overflow: hidden; background: #efe2c2 url(ui/paper.svg) center / 420px; border-top: calc(var(--u) * 6) solid #6a2a12; border-bottom: calc(var(--u) * 6) solid #6a2a12;
  box-shadow: inset 0 0 calc(var(--u) * 40) #8a6a3a66, 0 calc(var(--u) * 16) calc(var(--u) * 40) #000c; }
.fx-scroll.h .fx-paper { clip-path: inset(0 calc((1 - var(--open, 0)) * 50%)); }
.fx-scroll.v .fx-paper { clip-path: inset(0 0 calc((1 - var(--open, 0)) * 100%) 0); border: 0; border-left: calc(var(--u) * 6) solid #6a2a12; border-right: calc(var(--u) * 6) solid #6a2a12; }
.fx-roller { position: absolute; display: block; border-radius: calc(var(--u) * 8); background: linear-gradient(90deg, #2a140b, #8a5a34 40%, #5a3418 70%, #1e0e06); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 14) #000a; }
.fx-scroll.h .fx-roller { top: calc(var(--u) * -14); bottom: calc(var(--u) * -14); width: calc(var(--u) * 24); }
.fx-scroll.h .fx-roller.a { left: calc((1 - var(--open, 0)) * 50%); transform: translateX(-50%); }
.fx-scroll.h .fx-roller.b { right: calc((1 - var(--open, 0)) * 50%); transform: translateX(50%); }
.fx-scroll.v .fx-roller { left: calc(var(--u) * -14); right: calc(var(--u) * -14); height: calc(var(--u) * 24); background: linear-gradient(180deg, #2a140b, #8a5a34 40%, #5a3418 70%, #1e0e06); }
.fx-scroll.v .fx-roller.a { top: 0; transform: translateY(-50%); }
.fx-scroll.v .fx-roller.b { top: calc(var(--open, 0) * 100%); transform: translateY(-50%); }
.fx-scroll-body { position: absolute; inset: 7% 6%; display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: 0.55em; }
.fx-scroll-title { writing-mode: vertical-rl; font: 700 1.25em/1.1 'LXGW WenKai TC', serif; color: #8e1b14; margin-left: 0.4em; }
.fx-col { position: relative; writing-mode: vertical-rl; font: 700 1em/1.12 'LXGW WenKai TC', 'Noto Serif TC', serif; color: #1a0e08; white-space: nowrap; }
.fx-col.red { color: #a31d14; }
.fx-col .fx-ch.stamp { margin: 0.06em 0; padding: 0.06em; border-radius: 0.1em; background: #b3261e; color: #fff3dc; filter: none;
  transform: scale(calc(2 - var(--p))); opacity: calc(var(--p) * 3); -webkit-mask-image: none; mask-image: none; }
.fx-strike { position: absolute; left: -35%; top: -3%; width: 170%; height: 106%; overflow: visible; --p: 0; }
.fx-strike path { fill: none; stroke: #c4281e; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); filter: drop-shadow(0 0 1px #6a0a06); }

/* ------------------------------------------------------------ great calligraphy */
.fx-calli { display: flex; flex-direction: row-reverse; gap: 0.35em; transform: translate(-50%, -50%); font: 700 1em/1.06 'LXGW WenKai TC', 'Noto Serif TC', serif; white-space: nowrap; }
.fx-calli.v .fx-calli-line { writing-mode: vertical-rl; }
.fx-calli.h { flex-direction: column; align-items: center; gap: 0.1em; }

/* ------------------------------------------------------------ a counter */
.fx-counter { display: flex; align-items: center; gap: 0.18em; transform: translate(-50%, -50%); font: 700 1em/1 'LXGW WenKai TC', serif; color: #fff3dc; }
.fx-counter .g { display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 0.1em; background: #b3261e; box-shadow: inset 0 0 0 0.05em #fff3dc;
  -webkit-mask: url(ui/stamp.svg) center / 3em; mask: url(ui/stamp.svg) center / 3em; }
.fx-counter .g:empty { display: none; }
.fx-counter .n { font: 900 0.8em/1 'Noto Serif', 'Noto Serif TC', serif; color: #fff3dc; -webkit-text-stroke: 0.02em #3a0806; text-shadow: 0 0.05em 0 #200402, 0 0 0.3em #ff3a1acc; }
.fx-counter .n.pop { animation: fxPop 0.22s ease-out; }
@keyframes fxPop { from { transform: scale(1.9); } to { transform: scale(1); } }

/* ------------------------------------------------------------ the note out of the pouch */
.fx-note { transform: translate(-50%, 0) scaleY(var(--open, 0)); transform-origin: top center; max-width: min(84vw, calc(var(--u) * 640));
  padding: calc(var(--u) * 20) calc(var(--u) * 30); background: #efe2c2 url(ui/paper.svg) center / 420px; border: calc(var(--u) * 2) solid #8a5c1c;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) #000c; color: #2b1a0e; text-align: center; }
.fx-note-in { font: 700 calc(var(--u) * 38)/1.45 var(--font); }