/* The fight's waves (fightwave.ts): the round's candle-light sweep and the phase's ripple on the felt. Transform, opacity and clip-path only.
   Above the board, under the windows: .shade is 65. */
.wv-round, .wv-phase { position: absolute; pointer-events: none; z-index: 60; }
.wv-round { inset: 0; overflow: hidden; }
.wv-round > * { pointer-events: none; }

.wv-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(15, 9, 4, .55), rgba(5, 3, 1, .88)); animation: wv-dim 3.4s linear forwards; }
@keyframes wv-dim { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

.wv-sweep { position: absolute; top: -100px; left: 0; width: 1000px; height: 1280px; filter: blur(30px); mix-blend-mode: screen; transform: translateX(-1100px);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tb-brass) 35%, transparent) 30%, color-mix(in srgb, var(--tb-brass-hi) 90%, transparent) 52%, color-mix(in srgb, var(--tb-brass) 30%, transparent) 75%, transparent);
  animation: wv-sweep 3.4s linear forwards; }
@keyframes wv-sweep { 0% { transform: translateX(-1100px); animation-timing-function: cubic-bezier(.4, .1, .5, 1); } 47% { transform: translateX(2100px); } 100% { transform: translateX(2100px); } }

.wv-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; clip-path: inset(0 100% 0 0); animation: wv-write 3.4s linear forwards; }
@keyframes wv-write { 0% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(.4, .1, .5, 1); } 47%, 82% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.wv-cap { font: 230px/1 var(--font-display); color: var(--tb-brass-hi); text-shadow: 0 6px 0 var(--tb-brass-lo), 0 0 60px color-mix(in srgb, var(--tb-brass) 50%, transparent); }
.wv-rule { margin-top: 14px; font: 84px/1 var(--font-display); color: var(--c-ink); letter-spacing: .06em; }
.wv-text { margin-top: 16px; width: 900px; font: 28px/1.4 var(--font-body); color: rgba(var(--c-ink-rgb), .9); }
.wv-bank { margin-top: 22px; font: 30px/1 var(--font-display); letter-spacing: .3em; color: var(--tb-brass); }

.wv-dust { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: var(--tb-flame); box-shadow: 0 0 10px var(--tb-flame); opacity: 0; animation: wv-dust 3.4s linear var(--w) forwards; }
@keyframes wv-dust { 0% { opacity: 0; transform: translate(0, 0); } 14% { opacity: 1; } 40% { opacity: .9; } 80% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 100% { opacity: 0; } }

/* the phase: the ripple is clipped to the felt oval (the layer's own rect and radius) */
.wv-phase { overflow: hidden; }
.wv-ink { position: absolute; inset: 0; background: radial-gradient(circle, rgb(26, 74, 67), rgb(10, 26, 24) 70%); clip-path: circle(0px at 50% 50%); opacity: 0; animation: wv-ink 1.5s linear forwards; }
@keyframes wv-ink { 0% { clip-path: circle(0px at 50% 50%); opacity: .95; animation-timing-function: cubic-bezier(.3, .5, .3, 1); } 60%, 75% { clip-path: circle(560px at 50% 50%); opacity: .95; } 100% { clip-path: circle(560px at 50% 50%); opacity: 0; } }
.wv-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 3px solid var(--tb-brass-hi); opacity: 0; animation: wv-ring 1.5s linear forwards; }
.wv-ring2 { animation-delay: .18s; border-width: 2px; }
@keyframes wv-ring { 0% { opacity: .9; transform: scale(0); } 60% { opacity: 0; transform: scale(9); } 100% { opacity: 0; transform: scale(9); } }
.wv-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 96px/1 var(--font-display); color: var(--tb-brass-hi); text-shadow: 0 4px 0 var(--tb-brass-lo); opacity: 0; animation: wv-label 1.5s linear forwards; }
@keyframes wv-label { 0% { opacity: 0; transform: scale(.85); } 40%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }

/* no motion: the text card alone, shown for the same time */

/* the input lock (fightwave.ts): a transparent blocker over the whole stage under the top bar (80 px: «?», ⚙ and leave stay usable); above the waves, below windows (.shade 65).
   The turn ring dims while it is on: a quiet «not now». */
.mlock { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; z-index: 64; pointer-events: auto; cursor: progress; background: transparent; }
.mbusy .mmed { opacity: .55; filter: saturate(.6); transition: opacity .25s, filter .25s; }