/* Water: illuminated ribbon arcs and a suspended droplet, outside the face. */
#screen-setup #shopPanel [data-whimsy-element=Water] .element-filigree{width:68px;height:68px;margin:-34px 0 0 -34px;opacity:1;rotate:0deg;animation:water-ribbon253 7s ease-in-out infinite;animation-delay:var(--whimsy-delay);color:#b5e9f2;filter:drop-shadow(0 0 3px #59c7e799)}
#screen-setup #shopPanel [data-whimsy-element=Water] .element-filigree .filigree-element{stroke-width:1.25;stroke-dasharray:82 4 18 6;animation:water-current253 12s linear infinite}
@keyframes water-ribbon253{0%,100%{transform:translateY(0) rotate(-3deg);opacity:.8}50%{transform:translateY(-2px) rotate(3deg);opacity:1}}
@keyframes water-current253{to{stroke-dashoffset:-110}}
/* A warm, engraved invitation with restrained edge ornament. The same button owns taps. */
#screen-setup #formationPanel #start{position:relative;isolation:isolate;overflow:hidden;min-height:38px;height:38px;border:1px solid #f0d79b!important;border-radius:5px!important;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%);background:linear-gradient(108deg,#b88d4f,#edd399 25%,#fae6b5 50%,#e1bf7b 76%,#b78d4f)!important;color:#352919!important;font:600 14px/1.15 Georgia,serif!important;letter-spacing:.035em;text-shadow:0 1px #fff7;box-shadow:inset 0 2px #fff5,inset 0 -3px #63432055!important;transition:filter .18s,transform .12s}
#screen-setup #formationPanel #start::before{content:'';position:absolute;inset:4px 12px;border-top:1px solid #62452155;border-bottom:1px solid #fff7;pointer-events:none;z-index:-1}
#screen-setup #formationPanel #start::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#fff6 49%,transparent 65%);translate:-120% 0;pointer-events:none;z-index:-1}
@media(hover:hover){#screen-setup #formationPanel #start:not(:disabled):hover{filter:brightness(1.09)}#screen-setup #formationPanel #start:not(:disabled):hover::after{translate:120% 0;transition:translate .7s ease}}
#screen-setup #formationPanel #start:not(:disabled):active{transform:translateY(1px);filter:brightness(.94)}
#screen-setup #formationPanel #start:focus-visible{outline:2px solid #fff0ca;outline-offset:3px}
#screen-setup #formationPanel #start:disabled{filter:saturate(.25);opacity:.5}
/* The folio keeps its bounded layout, with warmer parchment ink and a light arrival. */
#equipmentDetailsOverlay .equip-modal.creature-modal.folio-creature{background:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--folio-tone) 17%,transparent),transparent 60%),linear-gradient(145deg,#243b43,#10222d 85%)!important;animation:folio-arrive253 .2s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 55%}
#equipmentDetailsOverlay .folio-creature::after{content:'✦';position:absolute;right:27px;bottom:12px;color:#d8bd8055;font:16px Georgia;pointer-events:none}
#equipmentDetailsOverlay .folio-creature #equipModalDesc{background:linear-gradient(90deg,#d9bf7f07,transparent);padding-left:8px!important;padding-right:8px!important}
#equipmentDetailsOverlay .folio-creature .equip-modal-actions{padding-right:17px}
@keyframes folio-arrive253{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.folio-dismiss253{pointer-events:none!important;animation:folio-leave253 .16s ease-in both!important}
@keyframes folio-leave253{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}
/* One persistent seal and backdrop carry the request into the rival introduction. */
#battle-entry-veil[data-shared-loading=true]{visibility:hidden!important;pointer-events:none!important}
#legendLoadingScreen{overflow:hidden;opacity:1;transition:opacity .3s ease;background:radial-gradient(ellipse at 50% 44%,#293c3f,#091923 78%)}
#legendLoadingScreen::before{content:'';position:absolute;width:min(74vw,620px);aspect-ratio:1;border:1px solid #d0b57612;border-radius:50%;box-shadow:0 0 0 28px #d0b57605,0 0 0 29px #d0b57609;pointer-events:none;transform:scale(.83);transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .3s}
#legendLoadingScreen>div{position:relative;width:min(560px,100%);max-width:560px;transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .3s}
#legendLoadingScreen .loading-seal{transition:width .65s,height .65s,filter .65s}
#legendLoadingScreen h2{overflow-wrap:anywhere;transition:color .5s}
#legendLoadingScreen[data-phase=rival]::before{transform:scale(1.08)}
#legendLoadingScreen[data-phase=rival] .loading-seal{width:126px;height:126px;filter:drop-shadow(0 0 16px #dbb97733)}
#legendLoadingScreen[data-phase=rival] h2{color:#ffe5b5;animation:rival-ink253 .5s ease both}
#legendLoadingScreen[data-phase=rival] p{animation:rival-ink253 .6s ease both}
#legendLoadingScreen[data-phase=reveal]{opacity:0;pointer-events:none}
#legendLoadingScreen[data-phase=reveal]>div{transform:translateY(-8px);opacity:0}
#legendLoadingScreen[data-phase=reveal]::before{transform:scale(1.35);opacity:0}
@keyframes rival-ink253{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:350px){#legendLoadingScreen{padding:14px}#legendLoadingScreen[data-phase=rival] .loading-seal{width:92px;height:92px}#legendLoadingScreen h2{font-size:25px}#legendLoadingScreen small{margin:10px 0 7px}}
@media(prefers-reduced-motion:reduce){#screen-setup #shopPanel [data-whimsy-element=Water] .element-filigree,#screen-setup #shopPanel [data-whimsy-element=Water] .filigree-element,#equipmentDetailsOverlay .folio-creature,#legendLoadingScreen h2,#legendLoadingScreen p{animation:none!important}#legendLoadingScreen,#legendLoadingScreen::before,#legendLoadingScreen>div,#legendLoadingScreen .loading-seal,#screen-setup #formationPanel #start{transition:none!important}}
