/* v131 dh/fb_stage.js
   A. Ride + party (Feat 'rideParty', body.fbr): the hero sits ON the mount (home and battle) and the allies stand as one group.
   B. 3-D room test (founders only, body.f3on): a real perspective hall drawn over the zone picture. Nothing is dimmed. */

/* ---------- A. battle: hero rides the mount ----------
   v131d: the hero SITS on the mount. The far leg is cut away at the hip (it is on the other side of the animal) and the
   near leg hangs down the animal's side. The hero is placed so the point where the legs part lands on the mount's seat.
   This block is written by tools/ride_css.py: change the numbers there, not here. */
#mountf{display:none}
/* per hero picture: where the legs part */
:is(.hspot,#hhero){--hx:.57;--hy:.81}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero.webp"],[src$="/dh_hero_ride.webp"])){--hx:0.5;--hy:0.79}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_bow.webp"],[src$="/dh_hero_bow_ride.webp"])){--hx:0.46;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_bow_1.webp"],[src$="/dh_hero_bow_1_ride.webp"])){--hx:0.66;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_bow_2.webp"],[src$="/dh_hero_bow_2_ride.webp"])){--hx:0.56;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_bow_3.webp"],[src$="/dh_hero_bow_3_ride.webp"])){--hx:0.66;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_dagger.webp"],[src$="/dh_hero_dagger_ride.webp"])){--hx:0.57;--hy:0.81}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_dagger_1.webp"],[src$="/dh_hero_dagger_1_ride.webp"])){--hx:0.55;--hy:0.76}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_dagger_2.webp"],[src$="/dh_hero_dagger_2_ride.webp"])){--hx:0.47;--hy:0.76}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_dagger_3.webp"],[src$="/dh_hero_dagger_3_ride.webp"])){--hx:0.67;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_fire_1.webp"],[src$="/dh_hero_fire_1_ride.webp"])){--hx:0.62;--hy:0.81}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_fire_2.webp"],[src$="/dh_hero_fire_2_ride.webp"])){--hx:0.5;--hy:0.82}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_fire_3.webp"],[src$="/dh_hero_fire_3_ride.webp"])){--hx:0.57;--hy:0.84}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_ice_1.webp"],[src$="/dh_hero_ice_1_ride.webp"])){--hx:0.5;--hy:0.86}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_ice_2.webp"],[src$="/dh_hero_ice_2_ride.webp"])){--hx:0.7;--hy:0.84}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_ice_3.webp"],[src$="/dh_hero_ice_3_ride.webp"])){--hx:0.68;--hy:0.84}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_lightning_1.webp"],[src$="/dh_hero_lightning_1_ride.webp"])){--hx:0.62;--hy:0.82}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_lightning_2.webp"],[src$="/dh_hero_lightning_2_ride.webp"])){--hx:0.66;--hy:0.82}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_lightning_3.webp"],[src$="/dh_hero_lightning_3_ride.webp"])){--hx:0.68;--hy:0.81}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_staff.webp"],[src$="/dh_hero_staff_ride.webp"])){--hx:0.56;--hy:0.84}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_sword.webp"],[src$="/dh_hero_sword_ride.webp"])){--hx:0.58;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_sword_1.webp"],[src$="/dh_hero_sword_1_ride.webp"])){--hx:0.69;--hy:0.82}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_sword_2.webp"],[src$="/dh_hero_sword_2_ride.webp"])){--hx:0.58;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_hero_sword_3.webp"],[src$="/dh_hero_sword_3_ride.webp"])){--hx:0.66;--hy:0.79}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_heroine_bow.webp"],[src$="/dh_heroine_bow_ride.webp"])){--hx:0.58;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_heroine_dagger.webp"],[src$="/dh_heroine_dagger_ride.webp"])){--hx:0.45;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_heroine_fists.webp"],[src$="/dh_heroine_fists_ride.webp"])){--hx:0.44;--hy:0.84}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_heroine_staff.webp"],[src$="/dh_heroine_staff_ride.webp"])){--hx:0.57;--hy:0.8}
:is(.hspot,#hhero):has(img.dsp:is([src$="/dh_heroine_sword.webp"],[src$="/dh_heroine_sword_ride.webp"])){--hx:0.6;--hy:0.82}
/* per mount: the seat */
:is(.hspot,#hhero):has(.m-wolf),#hhero.m-wolf{--mx:0.33;--my:0.42;--mk:1}:is(.hspot,#hhero):has(.m-horse),#hhero.m-horse{--mx:0.4;--my:0.575;--mk:1}:is(.hspot,#hhero):has(.m-lizard),#hhero.m-lizard{--mx:0.31;--my:0.47;--mk:1}:is(.hspot,#hhero):has(.m-griffin),#hhero.m-griffin{--mx:0.5;--my:0.6;--mk:1.15}:is(.hspot,#hhero):has(.m-bear),#hhero.m-bear{--mx:0.46;--my:0.2;--mk:1}:is(.hspot,#hhero):has(.m-hoverbike),#hhero.m-hoverbike{--mx:0.45;--my:0.36;--mk:1}
/* sizes are parts of the hero spot's width: --ms mount (times --mk per mount), --ml mount left edge, --h hero, --mb how high the mount stands */
body.fbr .b1 .hspot.hasmount{--ms:1;--mk:1;--ml:-.07;--h:.74;--mb:5%;--mx:.45;--my:.45}
body.fbr .b1 .hspot.hasmount #mount{left:calc(var(--ml)*100%);bottom:var(--mb);width:calc((var(--ms)*var(--mk))*100%);height:auto;aspect-ratio:1;line-height:0}
body.fbr .b1 .hspot.hasmount #me{top:0;right:auto;width:calc(var(--h)*100%);bottom:var(--mb);
  left:calc((var(--ml) + var(--mx)*(var(--ms)*var(--mk)) - (1 - var(--hx))*var(--h))*100%);
  margin-bottom:calc(((1 - var(--my))*(var(--ms)*var(--mk)) - (1 - var(--hy))*var(--h))*100%)}
/* a look with no riding picture yet: hide the far leg of the standing picture (a riding picture needs no cut) */
body.fbr .b1 .hspot.hasmount:not(:has(.m-bear)) #me .av:not([data-ride]) > img,body.fbr #hhero.fbride:not(.m-bear) > .av:not([data-ride]) > img{clip-path:polygon(0 0,100% 0,100% calc(var(--hy)*100%),calc(var(--hx)*100%) calc(var(--hy)*100%),calc(var(--hx)*100%) 100%,0 100%)}
/* the bear stands upright: the hero rides its shoulders, legs behind its head */
body.fbr .b1 .hspot.hasmount:has(.m-bear) #me{z-index:0}body.fbr .b1 .hspot.hasmount:has(.m-bear) #mount{z-index:1}
body.fbr .b1 .hspot.hasmount .plat{left:4%;right:18%;bottom:calc(var(--mb) - 3%);height:8%}
/* the horse is drawn facing right already */
body.fbr #mount.m-horse .allypic img{transform:none;animation-name:fbbob}
@keyframes fbbob{50%{transform:translateY(-3%)}}
/* home screen: the same seat, mirrored (everything faces left there). Sizes are parts of the hero box: --wm mount, --lm its left edge,
   --bm its bottom edge, --s hero size. The hero picture is scaled around 50% 92% (dh.css), so the maths starts from there. */
body.fbr .h122 #hhero.fbride{--wm:.88;--mk:1;--lm:.06;--bm:-.07;--s:.68;--mx:.45;--my:.45}
body.fbr #hhero.fbride .h122a.mount{left:calc(var(--lm)*100%);bottom:calc(var(--bm)*100%);width:calc(var(--wm)*var(--mk)*100%);z-index:-1}
body.fbr #hhero.fbride .h122a.mount.mfront{display:none}
body.fbr #hhero.fbride > .av{scale:var(--s);
  translate:calc((var(--lm) + (1 - var(--mx))*var(--wm)*var(--mk) - .5 - (var(--hx) - .5)*var(--s))*100%) calc((1 - var(--bm) - (1 - var(--my))*var(--wm)*var(--mk) - .92 - (var(--hy) - .92)*var(--s))*100%)}
body.fbr #hhero.fbride.m-bear .h122a.mount{z-index:1}

/* ---------- A. battle: one party (v131c) ----------
   The mercenary and the summon used to stand in a back row far above the hero's head, so the party read as spread over the
   screen. They now stand on the ground a step behind the hero, right beside the pet. Nobody covers anybody
   (tests/dh/allyvis-ui.cjs); the pet keeps clear of the summon's place (PetSpot in stage26.js). */
body.fbr .b1 .hspot #merc,body.fbr .b1 .hspot.hasmount #merc{left:84%;bottom:20%;width:50%;height:17%;z-index:3}
body.fbr .b1 .hspot #sumspot,body.fbr .b1 .hspot.hasmount #sumspot{left:126%;bottom:27%;width:42%;height:15%;z-index:2}

/* ---------- A. home: one tight party ---------- */
body.fbr .h122 #hhero{isolation:isolate}
body.fbr .h122a.mount{left:9%;bottom:-10%;width:82%;z-index:-1}
body.fbr .h122a.merc{right:-3%;left:auto;bottom:0;width:42%;z-index:-2}
body.fbr .h122a.summon{left:-6%;right:auto;bottom:0;width:38%;z-index:-2}
body.fbr .h122a.pet{right:1%;left:auto;bottom:-7%;width:30%;z-index:3}
body.fbr #hhero.m-horse .h122a.mount img{transform:scaleX(-1)}
body.fbr #hhero.fbride .h122a.merc{bottom:6%}body.fbr #hhero.fbride .h122a.summon{bottom:6%}

/* ---------- B. 3-D room test ---------- */
.fb3{display:none}
body.f3on .b1 > .fb3{display:block;position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  perspective:600px;perspective-origin:50% 27%;animation:f3in .8s cubic-bezier(.2,.7,.2,1);transition:scale .12s ease-out}
@keyframes f3in{from{perspective:230px}}
.fb3 > i{position:absolute;display:block}
/* v131b: every plane is drawn at one third size and scaled up 3x inside the 3-D transform. Same picture on screen, about
   a ninth of the memory (full-size planes were hundreds of MB on a 3x phone screen and crashed the page). */
/* floor: flagstones running to the far wall, a pool of light in the middle, haze far away */
.fb3 .fl{left:13.33%;right:13.33%;bottom:0;height:800px;transform-origin:50% 100%;transform:rotateX(90deg) scale(3);
  background:linear-gradient(180deg,hsla(var(--zm,200),45%,74%,.55),hsla(var(--zm,200),45%,74%,0) 42%),
    radial-gradient(ellipse 42% 26% at 50% 80%,hsla(var(--zm,200),75%,78%,.2),transparent 70%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 2px,transparent 2px 66.67px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 2px,transparent 2px 12.5%),
    linear-gradient(180deg,rgba(12,16,30,.5),rgba(12,16,30,.28))}
/* side walls: a row of pillars each side, so the zone picture still shows between them */
.fb3 .wl,.fb3 .wr{bottom:0;height:46.67%;width:800px}
.fb3 .wl{left:-60%;transform-origin:0 100%;transform:rotateY(90deg) scale(3);
  background:linear-gradient(180deg,rgba(13,17,30,.97) 0 7%,transparent 7% 95.5%,rgba(13,17,30,.97) 95.5%),
    repeating-linear-gradient(90deg,transparent 0 70px,#0b101d 70px,#27304d 87px,#44517c 97px,#1b2238 113px,#090d18 120px,transparent 120px 133.33px);
  -webkit-mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,.5));mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,.5))}
.fb3 .wr{right:-60%;transform-origin:100% 100%;transform:rotateY(-90deg) scale(3);
  background:linear-gradient(180deg,rgba(13,17,30,.97) 0 7%,transparent 7% 95.5%,rgba(13,17,30,.97) 95.5%),
    repeating-linear-gradient(270deg,transparent 0 70px,#0b101d 70px,#27304d 87px,#44517c 97px,#1b2238 113px,#090d18 120px,transparent 120px 133.33px);
  -webkit-mask-image:linear-gradient(270deg,#000 45%,rgba(0,0,0,.5));mask-image:linear-gradient(270deg,#000 45%,rgba(0,0,0,.5))}
/* ceiling ribs, one above each pair of pillars */
.fb3 .ce{left:13.33%;right:13.33%;top:-40%;height:800px;transform-origin:50% 0;transform:rotateX(-90deg) scale(3);
  background:repeating-linear-gradient(180deg,transparent 0 83.33px,rgba(11,15,28,.92) 83.33px 120px,transparent 120px 133.33px);
  -webkit-mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.5));mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.5))}
/* the old flat walls and floor step aside; the far wall and its door line up with the end of the hall */
body.f3on .b1 .room .rwall,body.f3on .b1 .room .rfloor,body.f3on .b1 .room .rtorch{display:none}
body.f3on .b1 .room .rback{left:28%;right:28%;top:13.6%;bottom:58.4%}
body.f3on .b1 .room.arena .rback{left:28%;right:28%;top:13.6%;bottom:58.4%}
body.f3on .b1 .room .rfog{top:34%;height:14%}
body.f3on .b1 .zbg{scale:1.08}
body.f3on .b1.f3k > .fb3{scale:1.035}
@media (prefers-reduced-motion:reduce){body.f3on .b1 > .fb3{animation:none;transition:none}}