.preserve-3d{transform-style:preserve-3d}.backface-hidden{backface-visibility:hidden}.rotate-y-180{transform:rotateY(180deg)}@keyframes card-appear{0%{opacity:0;transform:scale(.8) rotateY(180deg)}to{opacity:1;transform:scale(1) rotateY(0deg)}}@keyframes card-select{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(.8)}}.card-appear{animation:card-appear .8s cubic-bezier(.25,.46,.45,.94) forwards}.card-select{animation:card-select .5s cubic-bezier(.25,.46,.45,.94) forwards}.mystical-glow{box-shadow:0 0 20px rgba(251,191,36,.3),0 0 40px rgba(251,191,36,.2),0 0 60px rgba(251,191,36,.1)}.mystical-glow-hover{box-shadow:0 0 30px rgba(251,191,36,.4),0 0 60px rgba(251,191,36,.3),0 0 90px rgba(251,191,36,.2)}.card-perspective{perspective:1000px;perspective-origin:50%}.card-hover-scale{transition:transform .3s ease}.card-hover-scale:hover{transform:translateZ(20px) scale(1.05)}.cards-panel,.cards-panel .inner-card-panel{display:flex;justify-content:center;pointer-events:none;position:absolute}.cards-panel-wrapper{margin-top:15rem;height:100%}@media (max-width:320px){.cards-panel-wrapper{margin-top:10rem;height:40vh}}@media (min-width:321px) and (max-width:375px){.cards-panel-wrapper{margin-top:10rem;height:40vh}}@media (min-width:376px) and (max-width:414px){.cards-panel-wrapper{margin-top:5rem;height:46vh}}@media (min-width:415px) and (max-width:430px){.cards-panel-wrapper{margin-top:5rem;height:40vh}}@media (min-width:768px) and (max-width:1023px){.cards-panel-wrapper{margin-top:5rem;height:50vh}}@media (min-width:1024px){.cards-panel-wrapper{margin-top:5rem;height:60vh}}@media (min-width:1440px){.cards-panel-wrapper{margin-top:5rem;height:65vh}}.card-axis{align-items:flex-end;box-sizing:initial;display:flex;flex-shrink:0;height:var(--fan-height,100%);min-height:var(--axis-min-height,180px);justify-content:center;left:50%;margin-left:auto;margin-right:auto;margin-top:auto;pointer-events:auto;position:absolute;right:auto;top:var(--fan-baseline,50%);width:8%;will-change:transform;transform-origin:center top;transform:translate(-50%,-100%) rotate(0deg) scale(.3);opacity:0;transition:transform calc(.8s * (1.5 + (var(--total-cards) / 2 - var(--card-position)) * .0375)) cubic-bezier(.3,0,.14,1),opacity calc(.8s * (1.5 + (var(--total-cards) / 2 - var(--card-position)) * .0375)) cubic-bezier(.3,0,.14,1)}.card-axis.shown{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1deg * var(--swipe-offset, 0))) scale(1);opacity:1}.card-wrapper{pointer-events:auto;background:transparent;border:none;padding:0;transform-origin:center bottom}.card-el{position:relative;width:80px;height:120px;perspective:1000px}@media (max-width:767px){.card-el{width:100px;height:150px}}@media (min-width:1024px){.card-el{width:130px;height:210px}}@media (min-width:1280px){.card-el{width:150px;height:223px}}.card-back,.card-inner{position:relative;width:100%;height:100%}.card-back figure{margin:0;width:100%;height:100%}.card-back img{width:100%;height:100%;object-fit:cover}.card-name{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:12px;text-align:center;opacity:.8}.card-selected{z-index:50}.card-unselected{z-index:10}.card-unselected:hover{z-index:100}.card-selected .card-back{box-shadow:0 0 25px oklch(var(--p)/.5),0 0 50px oklch(var(--p)/.3),0 10px 35px oklch(var(--b3)/.4)}.card-unselected:hover .card-back{box-shadow:0 0 20px oklch(var(--p)/.3),0 0 35px oklch(var(--p)/.15),0 6px 25px oklch(var(--b3)/.3)}.title-panel{text-align:center;color:oklch(var(--bc));padding:.75rem 1.25rem;background:transparent;backdrop-filter:blur(10px);border-radius:1rem;border:1px solid oklch(var(--bc)/.1);box-shadow:0 8px 32px oklch(var(--b3)/.5);width:auto;min-width:320px;max-width:90vw}.instruction,.status-panel{margin-bottom:1rem}.instruction{font-size:1rem;font-weight:300;opacity:.9}.counter-element{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.75rem;font-size:1.5rem;font-weight:300}.open-message{margin-top:.75rem}.msg{font-size:.875rem;font-weight:500;margin-bottom:.25rem;min-height:1rem;transition:all .3s ease-in-out}.hint{font-size:.75rem}@media (max-width:669px){.title-panel{min-width:280px;max-width:95vw;padding:.5rem .75rem}.instruction,.status-panel{margin-bottom:.75rem}.instruction{font-size:.875rem}.counter-element{font-size:1.25rem;gap:.5rem}}@media (min-width:670px){.title-panel{max-width:600px;padding:1rem 1.5rem;transform:translateY(.5rem)}.instruction,.status-panel{margin-bottom:1.25rem}.instruction{font-size:1.125rem}}@media (min-width:1024px){.title-panel{max-width:700px;padding:1.25rem 2rem;transform:translateY(1rem)}.instruction{font-size:1.25rem}}.perspective-1000{perspective:1000px}.card-inner{transform-style:preserve-3d}.card-face{position:absolute;width:100%;height:100%;inset:0}.card-front{transform:rotateY(180deg)}.card-back{transform:rotateY(0deg)}.flip-card{transform:rotateY(180deg)}.card-unselected:hover .card-inner{transform:rotateY(5deg) scale(1.05);transition:transform .3s ease}.card-unselected:hover .card-inner.flip-card{transform:rotateY(185deg) scale(1.05);transition:transform .3s ease}@media (min-width:670px){.card-axis{width:10%}}@media (min-width:1440px){.card-axis{width:10%}}@media (max-width:767px){.cards-panel-wrapper:not(.dragging) .card-axis{transition:transform .2s ease-out}.inner-card-panel{touch-action:pan-x;user-select:none}.card-axis,.card-wrapper{touch-action:manipulation}.card-wrapper{pointer-events:auto}.card-wrapper.btn-ghost:active{transform:scale(.95)}.card-unselected:hover{transform:scale(1.08) translateY(2px)}.card-selected .badge{transform:scale(.8)}}.card-selected-final{animation:card-to-final-position 3.5s cubic-bezier(.25,.46,.45,.94) var(--selected-delay,0s) forwards;z-index:100!important}@keyframes card-to-final-position{0%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1deg * var(--swipe-offset, 0))) scale(1)}10%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 60deg + 1deg * var(--swipe-offset, 0))) scale(1.1);filter:brightness(1.2) drop-shadow(0 0 15px rgba(251,191,36,.5))}20%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 120deg + 1deg * var(--swipe-offset, 0))) scale(1.3);filter:brightness(1.4) drop-shadow(0 0 25px rgba(251,191,36,.7))}30%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 180deg + 1deg * var(--swipe-offset, 0))) scale(1.4);filter:brightness(1.5) drop-shadow(0 0 30px rgba(251,191,36,.8))}40%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 240deg + 1deg * var(--swipe-offset, 0))) scale(1.3);filter:brightness(1.4) drop-shadow(0 0 25px rgba(251,191,36,.7))}50%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 300deg + 1deg * var(--swipe-offset, 0))) scale(1.2);filter:brightness(1.3) drop-shadow(0 0 20px rgba(251,191,36,.6))}60%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1turn + 1deg * var(--swipe-offset, 0))) scale(1.1);filter:brightness(1.2) drop-shadow(0 0 18px rgba(251,191,36,.5))}70%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * var(--selected-position) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1turn + 1deg * var(--swipe-offset, 0))) scale(1.12);filter:brightness(1.25) drop-shadow(0 0 20px rgba(251,191,36,.6))}75%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * var(--selected-position) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1turn + 1deg * var(--swipe-offset, 0))) scale(1.08);filter:brightness(1.2) drop-shadow(0 0 18px rgba(251,191,36,.5))}90%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * var(--selected-position) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1turn + 1deg * var(--swipe-offset, 0))) scale(1.03);filter:brightness(1.12) drop-shadow(0 0 15px rgba(251,191,36,.42))}to{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * var(--selected-position) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1turn + 1deg * var(--swipe-offset, 0))) scale(1);filter:brightness(1.08) drop-shadow(0 0 12px rgba(251,191,36,.35))}}.card-fading-out{animation:fade-out-cards 1.2s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes fade-out-cards{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}.card-selected-final:before{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;background:linear-gradient(45deg,rgba(251,191,36,.9),rgba(251,191,36,.6));border-radius:50%;transform:translate(-50%,-50%);animation:trail-effect-selected 2.5s cubic-bezier(.25,.46,.45,.94) var(--selected-delay,0s) forwards;pointer-events:none;z-index:-1;box-shadow:0 0 8px rgba(251,191,36,.8)}@keyframes trail-effect-selected{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}10%{opacity:.8;transform:translate(-50%,-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}60%{opacity:.9;transform:translate(-50%,-50%) scale(1.2)}80%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}to{opacity:0;transform:translate(-50%,-50%) scale(.3)}}.card-selected-final .card-back{animation:enhanced-glow-selected 2.5s cubic-bezier(.25,.46,.45,.94) var(--selected-delay,0s) forwards}@keyframes enhanced-glow-selected{0%{box-shadow:0 0 20px oklch(var(--p)/.4),0 0 40px oklch(var(--p)/.2)}15%{box-shadow:0 0 40px oklch(var(--p)/.8),0 0 80px oklch(var(--p)/.6),0 0 120px oklch(var(--p)/.4)}30%{box-shadow:0 0 45px oklch(var(--p)/.9),0 0 90px oklch(var(--p)/.7),0 0 135px oklch(var(--p)/.5)}45%{box-shadow:0 0 40px oklch(var(--p)/.8),0 0 80px oklch(var(--p)/.6),0 0 120px oklch(var(--p)/.4)}60%{box-shadow:0 0 35px oklch(var(--p)/.7),0 0 70px oklch(var(--p)/.5),0 0 105px oklch(var(--p)/.3)}80%{box-shadow:0 0 30px oklch(var(--p)/.6),0 0 60px oklch(var(--p)/.4),0 0 90px oklch(var(--p)/.2)}to{box-shadow:0 0 25px oklch(var(--p)/.6),0 0 50px oklch(var(--p)/.4),0 10px 30px oklch(var(--b3)/.5)}}.navigation-button{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:48px;height:48px;border-radius:50%;background:oklch(var(--b1)/.9);backdrop-filter:blur(10px);border:1px solid oklch(var(--bc)/.2);box-shadow:0 4px 12px oklch(var(--b3)/.3);display:flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;opacity:.7;animation:navigation-button-appear .3s ease-out;svg{color:oklch(var(--bc));transition:color .2s ease-in-out}}@keyframes navigation-button-appear{0%{opacity:0;transform:translateY(-50%) scale(.8)}to{opacity:.7;transform:translateY(-50%) scale(1)}}.navigation-button:hover{opacity:1;background:oklch(var(--b2)/.95);box-shadow:0 6px 20px oklch(var(--b3)/.4);transform:translateY(-50%) scale(1.05);svg{color:oklch(var(--bc)/1.1)}}.navigation-button:active{transform:translateY(-50%) scale(.95)}.navigation-button:focus{outline:2px solid oklch(var(--p));outline-offset:2px}.navigation-button-left{left:16px}.navigation-button-right{right:16px}@media (max-width:767px){.navigation-button{width:44px;height:44px;opacity:.8}.navigation-button-left{left:12px}.navigation-button-right{right:12px}.navigation-button svg{width:20px;height:20px}}@media (min-width:768px) and (max-width:1023px){.navigation-button{width:46px;height:46px}.navigation-button svg{width:22px;height:22px}}@media (min-width:1024px){.navigation-button{width:50px;height:50px}.navigation-button svg{width:24px;height:24px}}@keyframes gentle-pulse{0%,to{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1deg * var(--swipe-offset, 0))) scale(1)}50%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1deg * var(--swipe-offset, 0))) scale(1.02)}}@keyframes mobile-gentle-pulse{0%,to{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1deg * var(--swipe-offset, 0))) scale(1)}50%{transform:translate(-50%,-100%) rotate(calc(1deg * var(--fan-spread) / 2 - 1deg * (var(--card-position) - 1) * var(--fan-spread) / max(var(--total-cards) - 1, 1) + 1deg * var(--swipe-offset, 0))) scale(1.03)}}.mystical-loading-container{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;background:radial-gradient(ellipse at center,rgba(251,191,36,.05) 0,rgba(251,191,36,.02) 50%,transparent 100%);animation:loading-fade-in .5s ease-out}@keyframes loading-fade-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.mystical-circle{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:3rem}.mystical-ring{position:absolute;width:100%;height:100%;border:2px solid transparent;border-top:2px solid oklch(var(--p));border-radius:50%;animation:mystical-spin 2s linear infinite}.mystical-ring-delayed{animation-delay:1s;border-top-color:oklch(var(--a))}.mystical-core{position:relative;width:60px;height:60px;background:radial-gradient(circle,oklch(var(--p)/.3) 0,oklch(var(--p)/.1) 70%,transparent 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px oklch(var(--p)/.4);animation:mystical-pulse 2s ease-in-out infinite}.mystical-symbol{font-size:1.5rem;animation:mystical-shine 3s ease-in-out infinite}.floating-cards{position:relative;width:300px;height:200px;margin-bottom:2rem}.floating-card{position:absolute;transition:all .3s ease}.floating-card.card-1{top:20%;left:10%;animation:float-card-1 4s ease-in-out infinite}.floating-card.card-2{top:60%;left:20%;animation:float-card-2 4s ease-in-out .5s infinite}.floating-card.card-3{top:30%;right:10%;animation:float-card-3 4s ease-in-out 1s infinite}.floating-card.card-4{bottom:20%;left:30%;animation:float-card-4 4s ease-in-out 1.5s infinite}.floating-card.card-5{top:10%;right:25%;animation:float-card-5 4s ease-in-out 2s infinite}.card-back-skeleton{width:50px;height:70px;background:linear-gradient(135deg,oklch(var(--b2)) 0,oklch(var(--b3)) 50%,oklch(var(--b2)) 100%);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:1px solid oklch(var(--b3)/.5);position:relative;overflow:hidden}.card-back-skeleton:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 50%,transparent);animation:shimmer-loading 2s ease-in-out infinite}.mystical-text{text-align:center;color:oklch(var(--bc))}.text-glow{font-size:1.125rem;font-weight:500;margin-bottom:.5rem;background:linear-gradient(45deg,oklch(var(--p)),oklch(var(--a)));background-size:200% 200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:text-shimmer 3s ease-in-out infinite}.text-subtitle{font-size:.875rem;opacity:.7;font-weight:300}.cards-fade-in{animation:cards-appear .8s cubic-bezier(.25,.46,.45,.94) .3s both}@keyframes cards-appear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mystical-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes mystical-pulse{0%,to{transform:scale(1);box-shadow:0 0 30px oklch(var(--p)/.4)}50%{transform:scale(1.1);box-shadow:0 0 50px oklch(var(--p)/.6)}}@keyframes mystical-shine{0%,to{transform:scale(1) rotate(0deg);filter:brightness(1)}50%{transform:scale(1.2) rotate(180deg);filter:brightness(1.3)}}@keyframes float-card-1{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-10px) rotate(2deg)}50%{transform:translateY(-5px) rotate(-1deg)}75%{transform:translateY(-15px) rotate(1deg)}}@keyframes float-card-2{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-12px) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)}75%{transform:translateY(-18px) rotate(-1deg)}}@keyframes float-card-3{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-15px) rotate(3deg)}50%{transform:translateY(-10px) rotate(-2deg)}75%{transform:translateY(-20px) rotate(2deg)}}@keyframes float-card-4{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-8px) rotate(-3deg)}50%{transform:translateY(-12px) rotate(2deg)}75%{transform:translateY(-16px) rotate(-2deg)}}@keyframes float-card-5{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-18px) rotate(1deg)}50%{transform:translateY(-12px) rotate(-3deg)}75%{transform:translateY(-22px) rotate(2deg)}}@keyframes shimmer-loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes text-shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@media (max-width:767px){.mystical-circle{width:100px;height:100px;margin-bottom:2rem}.mystical-core{width:50px;height:50px}.mystical-symbol{font-size:1.25rem}.floating-cards{width:250px;height:160px;margin-bottom:1.5rem}.card-back-skeleton{width:40px;height:56px}.text-glow{font-size:1rem}.text-subtitle{font-size:.75rem}}