.df-overlay{z-index:90;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000bd;place-items:center;padding:16px;animation:.18s ease-out both df-fade;display:grid;position:fixed;inset:0}.df-card{border:1px solid var(--c-line);background:var(--c-bg-2);width:min(100%,400px);max-height:calc(100dvh - 32px);animation:df-rise .28s var(--ease-out) both;border-radius:20px;outline:none;flex-direction:column;gap:14px;padding:20px 18px 16px;display:flex;position:relative;overflow-y:auto;box-shadow:0 40px 80px -30px #000000e6}.df-head{flex-direction:column;gap:6px;display:flex}.df-title{font-size:clamp(22px,6.4vw,28px);line-height:1.05}.df-help{color:var(--c-text-2);font-size:14px;line-height:1.35}.df-stage{flex-direction:column;justify-content:center;gap:10px;min-height:190px;display:flex;position:relative}.df-foot{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.df-status{min-width:0;color:var(--c-text-2);flex:1;font-size:13px;font-weight:700}.df-status.is-bad{color:var(--c-err)}.df-status.is-ok{color:var(--c-green)}.df-cancel{flex:none}.df-cards{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.df-pick{aspect-ratio:3/4;border:2px solid color-mix(in srgb, var(--rc) 60%, transparent);background:linear-gradient(165deg, color-mix(in srgb, var(--rc) 30%, #101010) 0%, #101010 78%);color:#fff;cursor:pointer;min-height:96px;transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);-webkit-tap-highlight-color:transparent;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:6px 4px;display:flex;position:relative}.df-pick:hover:not(:disabled){transform:translateY(-2px)}.df-pick:focus-visible{outline-offset:2px;outline:3px solid #fff}.df-pick:disabled{cursor:default}.df-pick-name{text-align:center;color:var(--rc);font-size:12px;font-weight:800;line-height:1.1}.df-pips{gap:3px;display:flex}.df-pips i{background:color-mix(in srgb, var(--rc) 35%, #222);border-radius:50%;width:6px;height:6px}.df-pips i.is-on{background:var(--rc);box-shadow:0 0 6px var(--rc)}.df-pick.is-ok{box-shadow:0 0 0 3px var(--rc), 0 0 28px color-mix(in srgb, var(--rc) 70%, transparent);animation:df-pop .4s var(--ease-spring) both;transform:scale(1.07)}.df-pick.is-bad{animation:.36s linear both df-shake}.df-flips{perspective:700px;grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.df-flip{aspect-ratio:3/4;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;min-height:110px;padding:0;position:relative}.df-flip:focus-visible{outline-offset:3px;border-radius:14px;outline:3px solid #fff}.df-flip:disabled{cursor:default}.df-flip-in{transform-style:preserve-3d;transition:transform .45s var(--ease-out);position:absolute;inset:0}.df-flip.is-up .df-flip-in{transform:rotateY(180deg)}.df-face{backface-visibility:hidden;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:0;overflow:hidden}.df-back{background:linear-gradient(160deg,#1d2b24,#0f1613 75%);border:2px solid #2a3a32}.df-back .eq-mark i{animation:none}.df-front{border:2px solid var(--c-legend);background:linear-gradient(165deg, color-mix(in srgb, var(--c-legend) 35%, #101010), #101010 80%);color:var(--c-legend);font-size:12px;font-weight:800;transform:rotateY(180deg)}.df-front.is-plain{color:var(--c-text-3);background:#151515;border-color:#3a3a3a}.df-back.is-shiny{background:linear-gradient(160deg,#2a4d3a,#121b16 75%);border-color:#6fe8ae;box-shadow:0 0 16px #9fd6ff59}.df-sheen{pointer-events:none;background:linear-gradient(110deg,#0000 28%,#ffffff4d 42%,#9fd6ff61 50%,#ff9fd652 58%,#0000 72%);animation:2.2s ease-in-out infinite alternate df-sheen;position:absolute;inset:0;transform:translate(-85%)}.df-flip.is-ok .df-flip-in{animation:df-pop .5s var(--ease-spring) both}.df-flip.is-bad{animation:.36s linear both df-shake}.df-pack{border-radius:14px;width:168px;height:150px;margin:0 auto 4px;position:relative}.df-pack-body{color:#04210f;letter-spacing:.02em;background:linear-gradient(170deg,#1ed760 0%,#0e7a37 100%);border-radius:0 0 14px 14px;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:900;display:flex;position:absolute;inset:34px 0 0}.df-pack-body .eq-mark{height:22px}.df-pack-body .eq-mark i{background:#04210f;animation:none}.df-flap{clip-path:polygon(0 0,100% 0,100% 100%,92% 70%,84% 100%,76% 70%,68% 100%,60% 70%,52% 100%,44% 70%,36% 100%,28% 70%,20% 100%,12% 70%,4% 100%,0 80%);transform-origin:0 100%;height:36px;transform:translate(calc(var(--p,0) * 22px), calc(var(--p,0) * -30px)) rotate(calc(var(--p,0) * -16deg));background:linear-gradient(170deg,#3be477 0%,#17a24a 100%);border-radius:14px 14px 0 0;transition:transform .18s ease-out;position:absolute;top:0;left:0;right:0}.df-pack.is-drag .df-flap{transition:none}.df-pack.is-ok .df-flap{opacity:0;transition:transform .4s ease-in,opacity .4s ease-in;transform:translate(60px,-90px)rotate(-40deg)}.df-track{border:1px solid var(--c-line);touch-action:pan-y;background:#0e0e0e;border-radius:26px;height:52px;position:relative}.df-track-hint{color:var(--c-text-3);pointer-events:none;justify-content:center;align-items:center;padding-left:40px;font-size:13px;font-weight:700;display:flex;position:absolute;inset:0}.df-knob{background:var(--c-green);color:#04210f;cursor:grab;touch-action:none;width:44px;height:44px;transform:translateX(calc(var(--p,0) * (100cqw - 50px)));transition:transform .2s var(--ease-out);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:3px;left:3px;box-shadow:0 6px 16px -6px #1ed760b3}.df-track{container-type:inline-size}.df-track.is-drag .df-knob{cursor:grabbing;transition:none}.df-knob:focus-visible{outline-offset:2px;outline:3px solid #fff}.df-alt{align-self:center}.df-done{z-index:2;background:color-mix(in srgb, var(--c-bg-2) 88%, transparent);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:8px;animation:.15s ease-out both df-fade;display:flex;position:absolute;inset:0}.df-done-badge{background:var(--c-green);color:#000;width:72px;height:72px;animation:df-pop .5s var(--ease-spring) both;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 0 40px #1ed76080}.df-done-text{font-size:18px;font-weight:900}.df-spark{background:var(--c-legend);opacity:0;width:7px;height:7px;animation:df-spark .8s var(--ease-out) both;animation-delay:var(--d,0s);border-radius:50%;margin:-3px;position:absolute;top:42%;left:50%}.df-spark:nth-child(3n){background:var(--c-green)}.df-spark:nth-child(3n+1){background:#fff}.df-wait{color:var(--c-text-2);justify-content:center;align-items:center;gap:8px;min-height:20px;font-size:14px;font-weight:700;display:flex}.df-hp{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}@keyframes df-fade{0%{opacity:0}to{opacity:1}}@keyframes df-rise{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:none}}@keyframes df-pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes df-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}@keyframes df-sheen{0%{transform:translate(-85%)}to{transform:translate(85%)}}@keyframes df-spark{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--x,0), var(--y,0)) scale(.3)}}@media (prefers-reduced-motion:reduce){.df-overlay,.df-card,.df-pick,.df-flip-in,.df-flap,.df-knob,.df-done,.df-done-badge{transition:none!important;animation:none!important}.df-pick.is-ok,.df-pick.is-bad,.df-flip.is-ok .df-flip-in,.df-flip.is-bad{animation:none!important}.df-sheen,.df-spark{display:none}.df-pick:hover:not(:disabled){transform:none}}