/* inv-fx.css (31.10): the shows inside the Invasion battle window (see js/inv-fx.js) */
.stage{position:relative;margin:0 auto 14px;border-radius:16px;overflow:hidden}

/* ---- the two generals, face to face (Eyes of Steel, Siege of Stillness) ---- */
.stage--face{width:100%;aspect-ratio:1672/941;background:#120804;box-shadow:inset 0 0 0 1px rgba(233,176,74,.35);--p:0;--beat:1.1s}
.stage--face .st-zoom{position:absolute;inset:0;transform-origin:51% 39%;transform:scale(calc(1 + var(--p) * .22));transition:transform .2s linear}
.stage--face .st-img,.stage--face .st-calm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage--face .st-calm{opacity:0;transition:opacity .45s}
.stage--face .st-calm--a{clip-path:inset(0 50% 0 0)}.stage--face .st-calm--b{clip-path:inset(0 0 0 50%)}
.stage--face.lose--a .st-calm--a,.stage--face.lose--b .st-calm--b{opacity:1}
/* everything placed on the faces moves with the slow push-in */
.stage--face .heat,.stage--face .tear,.stage--face .drop,.stage--face .puff{position:absolute}
.stage--face .heat{width:16%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,30,10,.55),rgba(255,30,10,0));mix-blend-mode:overlay;opacity:calc(var(--p) * 1.1)}
.stage--eyes .heat--a{left:32.4%;top:26.2%}.stage--eyes .heat--b{left:53.4%;top:29%}
.stage--siege .heat{width:26%;height:36%;background:radial-gradient(closest-side,rgba(255,20,0,.7),rgba(255,20,0,0))}
.stage--siege .heat--a{left:25%;top:30%}.stage--siege .heat--b{left:50%;top:32%}
/* a blink: that general's half swaps, in an instant, to the same picture with the eyes shut */
.stage--eyes .st-calm{transition:opacity .07s}
.stage--eyes.twitch--a .st-calm--a,.stage--eyes.twitch--b .st-calm--b{opacity:1}
/* the eyes water as the seconds go by */
.stage--eyes .tear{width:.7%;height:1.6%;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:radial-gradient(circle at 35% 35%,#fff,rgba(190,225,255,.75) 45%,rgba(160,200,255,.2));opacity:clamp(0,calc((var(--p) - .45) * 3),.9)}
.stage--eyes .tear--a{left:41.2%;top:39.6%}.stage--eyes .tear--b{left:60.3%;top:42.4%}
.stage--eyes.on .tear{animation:trickle 1.7s ease-in infinite}
.stage--eyes.on .tear--b{animation-delay:.6s}
@keyframes trickle{0%{translate:0 0}80%{translate:-20% 380%;opacity:.8}100%{translate:-20% 420%;opacity:0}}
/* sweat on the brow while they hold their breath */
.stage--siege .drop{width:.8%;height:1.8%;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:radial-gradient(circle at 35% 35%,#fff,rgba(220,235,255,.6) 50%,transparent);opacity:clamp(0,calc((var(--p) - .3) * 2.5),.9)}
.stage--siege .drop--a{left:44%;top:30%}.stage--siege .drop--b{left:57%;top:33%}
.stage--siege.on .drop{animation:trickle 2.2s ease-in infinite}.stage--siege.on .drop--b{animation-delay:.9s}
/* the breath that bursts out of the one who gives in */
.stage--siege .puff{width:22%;height:24%;opacity:0;pointer-events:none}
.stage--siege .puff::before,.stage--siege .puff::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,.25) 60%,transparent);filter:blur(4px)}
.stage--siege .puff::after{inset:25% -30% -10% 30%}
.stage--siege .puff--a{left:41%;top:43%}.stage--siege .puff--b{left:35%;top:46%}
.stage--siege.lose--a .puff--a{animation:puff-r 1s ease-out forwards}.stage--siege.lose--b .puff--b{animation:puff-l 1s ease-out forwards}
@keyframes puff-r{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:translateX(35%) scale(1.6)}}
@keyframes puff-l{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:translateX(-35%) scale(1.6)}}
/* the dark edge closes in and throbs with the heartbeat */
.stage--face .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 51% 40%,transparent calc(62% - var(--p) * 22%),rgba(0,0,0,.85) 100%)}
.stage--face.on .vig{animation:beat var(--beat) ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.75}12%{opacity:1}24%{opacity:.8}36%{opacity:.97}}
.stage--face.late{animation:tremble .09s linear infinite}
@keyframes tremble{0%{translate:0 0}25%{translate:1.5px -1px}50%{translate:-1px 1.5px}75%{translate:1px 1px}100%{translate:0 0}}
.stage--face .tag{position:absolute;top:8px;padding:3px 10px;border-radius:99px;font:600 12px Figtree,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:rgba(20,8,3,.7);color:#FFD98A;box-shadow:0 0 0 1px rgba(233,176,74,.5)}
.stage--face .tag--a{left:10px}.stage--face .tag--b{right:10px}
.stage--face .st-word{position:absolute;top:58%;font:400 clamp(26px,5vw,44px) 'Yatra One',serif;color:#ff6a4a;text-shadow:0 3px 0 #2a0904,0 0 24px rgba(255,80,40,.6);opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
.stage--face .st-word.w--a{left:14%}.stage--face .st-word.w--b{right:14%}
.stage--face.done .st-word{opacity:1;transform:scale(1) rotate(-6deg)}

/* ---- Dice Duel ---- */
.stage--dice{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,28px);padding:18px 10px;background:radial-gradient(ellipse at 50% 60%,#5a2814,#1C0D06 75%);box-shadow:inset 0 0 0 1px rgba(233,176,74,.35)}
.dz{text-align:center;padding:10px 12px;border-radius:14px;transition:box-shadow .3s,background .3s}
.dz b{display:block;font:600 12px Figtree,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mist,#e8d7c0)}
.dz-dice{display:flex;gap:6px;margin:8px 0}
.dz-d{width:76px;height:76px;display:grid;place-items:center;font:700 34px Figtree,sans-serif;color:#FFD98A}
.dz-d canvas{display:block;width:100%!important;height:100%!important}
.dz-sum{display:block;font:400 34px 'Yatra One',serif;color:#FFD98A;min-height:40px}
.dz-vs{font:400 22px 'Yatra One',serif;color:var(--saffron,#F5A623)}
.stage--dice.rolling .dz-dice{animation:tremble .08s linear infinite}
.dz.win{background:rgba(255,200,80,.12);box-shadow:0 0 0 2px #E9B04A,0 0 30px rgba(255,190,70,.45)}
.dz.win .dz-sum{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.stage--dice.tie .dz-sum{color:#ff8a6a}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@media (max-width:600px){.dz-d{width:58px;height:58px}.dz{padding:8px 4px}}

/* ---- Clash of the Handlords ---- */
.stage--clash{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(14px,6vw,50px);background:radial-gradient(ellipse at 50% 60%,#4a2410,#1C0D06 75%);box-shadow:inset 0 0 0 1px rgba(233,176,74,.35)}
.fist{text-align:center;transition:filter .3s,opacity .3s}
.fist span{display:block;font-size:clamp(54px,9vw,82px);line-height:1.1;transform-origin:50% 80%}
.fist--a span{transform:scaleX(-1)}
.fist b{display:block;margin-top:4px;font:600 12px Figtree,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mist,#e8d7c0)}
.cl-word{font:400 clamp(20px,3.6vw,30px) 'Yatra One',serif;color:#FFD98A;text-align:center}
.stage--clash.shake .fist--a span{animation:pump-a .4s ease-in-out}
.stage--clash.shake .fist--b span{animation:pump-b .4s ease-in-out}
@keyframes pump-a{0%,100%{transform:scaleX(-1) translateY(0)}45%{transform:scaleX(-1) translateY(-28%) rotate(-12deg)}}
@keyframes pump-b{0%,100%{transform:translateY(0)}45%{transform:translateY(-28%) rotate(-12deg)}}
.stage--clash.open .fist span{animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.stage--clash.open .fist--a span{animation-name:pop-a}
@keyframes pop-a{0%{transform:scaleX(-.4) scaleY(.4)}100%{transform:scaleX(-1) scaleY(1)}}
.stage--clash.win-a .fist--b,.stage--clash.win-b .fist--a{filter:grayscale(1) brightness(.6);opacity:.6}
.stage--clash.win-a .fist--a span,.stage--clash.win-b .fist--b span{filter:drop-shadow(0 0 16px rgba(255,200,80,.9))}

/* ---- Alphabet Arena ---- */
.stage--tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:14px 8px;overflow:visible}
.tile{width:clamp(30px,5vw,42px);height:clamp(38px,6vw,52px);perspective:300px}
.tile b{display:grid;place-items:center;width:100%;height:100%;border-radius:8px;font:400 clamp(20px,3vw,28px) 'Yatra One',serif;color:#2a1206;background:linear-gradient(#f5e2bd,#d9bb85);box-shadow:0 4px 0 #8a5a24,0 8px 14px -6px #000;transition:transform .35s}
.tile:not(.flip) b{transform:rotateX(90deg)}
.tile.flip b{animation:tile-in .35s ease-out}
.tile.ok b{background:linear-gradient(#ffe39a,#E9B04A)}
.tile.bad b{background:linear-gradient(#ff9a7a,#c0391b);color:#fff}
@keyframes tile-in{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.stage--tiles.shake{animation:tremble .08s linear 5}
.stage--tiles.done .tile b{box-shadow:0 4px 0 #8a5a24,0 0 18px rgba(255,200,80,.7)}

/* ---- War of the Wise: the clock ---- */
.stage--clock{width:70px;height:70px;display:grid;place-items:center;overflow:visible}
.stage--clock svg{position:absolute;inset:0;transform:rotate(-90deg)}
.stage--clock circle{fill:none;stroke-width:4}
.stage--clock .ck-bg{stroke:rgba(255,246,230,.12)}
.stage--clock .ck{stroke:#E9B04A;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke .3s}
.stage--clock strong{font:400 24px 'Yatra One',serif;color:#FFD98A}
.stage--clock.hurry .ck{stroke:#ff6a4a}.stage--clock.hurry strong{color:#ff6a4a;animation:pop .5s ease-in-out infinite alternate}
.ans-ok{box-shadow:0 0 0 2px #7CD67C,0 0 22px rgba(124,214,124,.55)!important;background:rgba(124,214,124,.15)!important}
.ans-bad{box-shadow:0 0 0 2px #ff6a4a!important;animation:tremble .08s linear 5}

/* ---- the wheel of attack cards ---- */
.stage--wheel{display:grid;place-items:center;padding:6px;overflow:visible}
.stage--wheel .wh{perspective:500px}
.stage--wheel img{display:block;height:clamp(120px,22vw,170px);border-radius:10px;box-shadow:0 14px 30px -10px #000,0 0 0 1px rgba(233,176,74,.5)}
.stage--wheel.tick img{animation:wheel-tick .12s ease-out}
@keyframes wheel-tick{0%{transform:rotateY(-35deg) scale(.95);filter:brightness(1.3)}100%{transform:none}}
.stage--wheel.landed img{animation:pop .45s cubic-bezier(.2,1.6,.4,1);box-shadow:0 0 0 2px #E9B04A,0 0 34px rgba(255,190,70,.6)}

/* ---- the verdict over the fortress ---- */
.verdict{position:absolute;left:50%;top:40%;z-index:30;transform:translate(-50%,-50%) scale(.5) rotate(-4deg);padding:14px 28px;border-radius:18px;font:400 clamp(26px,4.5vw,46px) 'Yatra One',serif;white-space:nowrap;pointer-events:none;opacity:0;animation:verdict-in .45s cubic-bezier(.2,1.6,.4,1) forwards}
.verdict.good{color:#FFD98A;background:rgba(28,13,6,.88);box-shadow:0 0 0 2px #E9B04A,0 0 50px rgba(255,190,70,.5)}
.verdict.bad{color:#ffb4a0;background:rgba(40,8,4,.9);box-shadow:0 0 0 2px #c0391b,0 0 50px rgba(200,40,20,.45)}
.verdict.out{transition:opacity .3s,transform .3s;opacity:0!important;transform:translate(-50%,-50%) scale(1.15)}
@keyframes verdict-in{to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}}
/* a royal guard who loses falls backwards */
.sol.fall{animation:guard-fall .6s ease-in forwards}
@keyframes guard-fall{to{transform:translateY(30px) rotateX(75deg);opacity:0}}

@media (prefers-reduced-motion:reduce){.stage *,.verdict{animation:none!important;transition:none!important}}

.inv-table{position:relative}