/* HiDoof · card fan on the 1 / 3 / 5 / 10 quantity buttons.
   Each button holds exactly as many equal-size card backs as the cards bought.
   Closed: a neat deck. Selected (or mouse hover): the deck opens into a fan, pivoting around a point below the cards.
   Only `transform` is animated (GPU-composited) so it stays smooth on phones. */
#choose .lvl{position:relative;overflow:hidden;isolation:isolate}
.lvl .cfan{position:relative;display:block;height:62px;margin:0 auto 6px;width:100%;pointer-events:none}
.lvl .cfan i{position:absolute;left:50%;bottom:4px;width:28px;height:43px;margin-left:-14px;border-radius:4px;
 background-color:#1c1a16;background-position:center;background-size:cover;background-repeat:no-repeat;
 box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 1px rgba(154,111,28,.55);
 transform-origin:50% 210%;will-change:transform;backface-visibility:hidden;
 /* closed deck: tiny offset per card so the thickness shows the count */
 transform:translate3d(calc(var(--o)*.9px),calc(var(--o)*-.5px),0) rotate(0deg);
 /* closing: top card first */
 transition:transform .5s cubic-bezier(.4,0,.2,1) calc(var(--r)*22ms)}
/* open fan */
.lvl[aria-pressed=true] .cfan i{transform:translate3d(0,-2px,0) rotate(calc(var(--o)*var(--a)));
 box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 1px #d9b25a;
 transition:transform .75s cubic-bezier(.22,1,.36,1) calc(var(--k)*28ms)}
@media(hover:hover){.lvl:hover .cfan i{transform:translate3d(0,-2px,0) rotate(calc(var(--o)*var(--a)));transition:transform .75s cubic-bezier(.22,1,.36,1) calc(var(--k)*28ms)}}
/* soft gold glow behind the selected fan (opacity only) */
.lvl .cfan::before{content:none}
#choose .lvl[aria-pressed=true]{box-shadow:inset 0 0 10px rgba(233,190,90,.30)}
@media(max-width:560px){.lvl .cfan{height:54px;transform:scale(.62);transform-origin:50% 100%;margin-bottom:2px}}
@media(prefers-reduced-motion:reduce){.lvl .cfan i{transition:none!important}}