/* Premium hover layer for the app (lib/fx.mjs sets the variables). Style only, no trading logic.
   Spotlight cards · Long/Short shimmer border + press + glow · gentle tilt for common creature cards and packs ·
   sliding terminal-tab underline · first-appear rise. Reduced motion, touch and coarse pointers get none of the motion. */
@property --fx-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---- spotlight: a radial light follows the cursor over the fill and along the border (--sx/--sy, px) ---- */
.hlt,.more>.panel,.side{background-image:radial-gradient(520px circle at var(--sx,-9999px) var(--sy,-9999px),rgba(124,131,255,.055),transparent 42%)}
.more>.panel{position:relative}
.hlt::before,.more>.panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--sx,-9999px) var(--sy,-9999px),rgba(170,176,255,.6),rgba(124,131,255,.18) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hlt.fx-on::before,.more>.panel.fx-on::before{opacity:1}

/* ---- Long/Short: shimmering gradient ring on hover, press-down, soft glow.
   The buttons' own pseudo-elements carry the hover light, press shade and busy shimmer, and their fill differs by
   breakpoint, so the ring is drawn by .btns' pseudo-elements in the hovered grid cell (the trick the m-cue ring uses).
   It only exists while .m-cue is absent, so the cue ring always wins. ---- */
@media (hover:hover) and (pointer:fine){
  .side .btns:not(.m-cue)::before,.side .btns:not(.m-cue)::after{content:"";position:absolute;inset:-1px;grid-row:1/2;z-index:2;border-radius:9px;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .25s ease;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .side .btns:not(.m-cue)::before{grid-column:1/2;background:conic-gradient(from var(--fx-ang),rgba(34,197,139,.25),#B6FFE0 10%,rgba(34,197,139,.9) 22%,rgba(34,197,139,.25) 45%,#E9FFF6 62%,rgba(34,197,139,.9) 74%,rgba(34,197,139,.25))}
  .side .btns:not(.m-cue)::after{grid-column:2/3;background:conic-gradient(from var(--fx-ang),rgba(242,73,92,.25),#FFD0D6 10%,rgba(242,73,92,.95) 22%,rgba(242,73,92,.25) 45%,#FFE6E9 62%,rgba(242,73,92,.95) 74%,rgba(242,73,92,.25))}
  .side .btns:not(.m-cue):has(#bLong:hover:not(:disabled):not(.m-busy))::before,.side .btns:not(.m-cue):has(#bShort:hover:not(:disabled):not(.m-busy))::after{opacity:1;animation:fx-ang 2.4s linear infinite}
  #bLong:hover:not(:disabled):not(:focus-visible){box-shadow:0 6px 22px -6px rgba(34,197,139,.55)}
  #bShort:hover:not(:disabled):not(:focus-visible){box-shadow:0 6px 22px -6px rgba(242,73,92,.5)}
}
#bLong,#bShort{transition:transform 140ms var(--ease-out),opacity 160ms ease,box-shadow .25s ease}
#bLong:active:not(:disabled),#bShort:active:not(:disabled){transform:scale(.965);transition-duration:80ms}
@keyframes fx-ang{to{--fx-ang:360deg}}

/* ---- tilt: common creature cards (rare ones keep the foil tilt .p4-t) and the pack on the open stage ---- */
.p2-card.fx-ct,button.p2-card.fx-ct:not(:disabled):is(.p2-rT,.p2-rH):hover{transform:perspective(720px) rotateX(calc((.5 - var(--fy,.5)) * 10deg)) rotateY(calc((var(--fx,.5) - .5) * 12deg)) scale(1.02);transition:transform .12s linear;z-index:4;will-change:transform}
.p3-stage.fx-pt{transform:perspective(900px) rotateX(calc((.5 - var(--fy,.5)) * 8deg)) rotateY(calc((var(--fx,.5) - .5) * 10deg));transition:transform .12s linear}
.p3-stage{transition:transform .45s cubic-bezier(.23,1,.32,1)}
/* touch: no tilt anywhere (the rare-card foil still follows a dragging finger) */
@media (hover:none),(pointer:coarse){.p2-card.p4-t,.p2-card.fx-ct,.p3-stage.fx-pt{transform:none!important}}

/* ---- micro-interactions ---- */
.hlt-tabs.fx-ul{position:relative}
.hlt-tabs.fx-ul button[aria-selected="true"]{border-bottom-color:transparent}
.hlt-tabs.fx-ul::after{content:"";position:absolute;left:0;bottom:0;height:2px;border-radius:2px;width:var(--uw,0);transform:translateX(var(--ul,0));background:var(--accent);transition:transform .28s cubic-bezier(.23,1,.32,1),width .28s cubic-bezier(.23,1,.32,1);pointer-events:none}
.fx-rise{animation:fx-rise .55s cubic-bezier(.23,1,.32,1) both}
@keyframes fx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .side .btns:not(.m-cue)::before,.side .btns:not(.m-cue)::after{animation:none!important}
  .p2-card.fx-ct,.p3-stage.fx-pt{transform:none!important}
  .fx-rise{animation:none!important}
  .hlt-tabs.fx-ul::after,.hlt::before,.more>.panel::before{transition:none!important}
}