body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-image:url(/card/phone.jpeg);background-size:cover;background-position:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff}.container{text-align:center;background:none;padding:20px;border-radius:10px;position:relative}.cards-container{display:flex;flex-wrap:wrap;justify-content:center;margin:20px;perspective:1200px;position:relative;min-height:150px}.selected-cards-container{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px;min-height:170px}.card{width:90px;height:160px;margin:10px;background-image:url(/card/back.png);background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:8px;transition:all .6s ease;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 10px #2d217dd9}50%{transform:scale(1.08);box-shadow:0 0 20px #2d217dd9}to{transform:scale(1);box-shadow:0 0 10px #2d217dd9}}.deck{width:160px;height:280px;margin:10px;background-image:url(/card/coloda.png);background-size:contain;background-repeat:no-repeat;background-position:center;cursor:pointer;transition:transform .3s ease;border-radius:8px;position:relative;z-index:10;filter:drop-shadow(10px 15px 20px rgba(45,33,125,.6));animation:deckPulse 2.5s ease-in-out infinite}@keyframes deckPulse{0%{transform:scale(1);filter:drop-shadow(10px 15px 20px rgba(45,33,125,.6))}50%{transform:scale(1.02);filter:drop-shadow(10px 15px 25px rgba(45,33,125,.7))}to{transform:scale(1);filter:drop-shadow(10px 15px 20px rgba(45,33,125,.6))}}.deck:hover{transform:translateY(-5px)}#continueButton{padding:10px 20px;font-size:16px;cursor:pointer;background-color:#d4af37;color:#000;border:none;border-radius:5px;transition:opacity .6s ease,background-color .3s ease;opacity:0;margin-top:20px}#continueButton.visible{opacity:1;position:relative;bottom:260px;animation:continiuePulse 2.5s ease-in-out infinite}@keyframes continiuePulse{0%{transform:scale(1);filter:drop-shadow(10px 15px 20px #d4af37)}50%{transform:scale(1.02);filter:drop-shadow(10px 15px 25px #d4af37a6)}to{transform:scale(1);filter:drop-shadow(10px 15px 20px #d4af37)}}#continueButton:hover{background-color:#b5933a}.title-wrapper{display:inline-block;padding:12px 20px;text-align:center;margin-bottom:20px}#chooseCardsTitle{font-family:Palatino Linotype,Book Antiqua,Palatino,serif;font-size:26px;font-weight:400;color:#ffef10fa;letter-spacing:1px;word-spacing:3px;font-size:24px;margin:0;position:relative;top:60px;text-shadow:0 0 4px #320c4a,0 0 8px #320c4a,0 0 12px #320c4a,0 0 16px #320c4a}.counter{font-size:20px;color:#ffef10fa;margin-top:8px;position:relative;top:60px;text-shadow:0 0 4px #320c4a,0 0 8px #320c4a,0 0 12px #320c4a,0 0 16px #320c4a}.flying-card{position:absolute;border-radius:8px;width:90px;height:160px;background-size:cover;background-position:center;transform-origin:center center;z-index:1000;pointer-events:none}.flying-card.flying{animation:flyToPosition 1.4s ease-out forwards}.flying-card.flipping{animation:flipCard .4s ease-in-out forwards}@keyframes flyToPosition{0%{transform:translate(0) rotate(-10deg) scale(.9)}30%{transform:translate(calc(var(--delta-x) * .3 - 30px),calc(var(--delta-y) * .3 - 80px)) rotate(5deg) scale(1.1)}60%{transform:translate(calc(var(--delta-x) * .7 + 20px),calc(var(--delta-y) * .7 - 40px)) rotate(-3deg) scale(1.05)}to{transform:translate(calc(var(--delta-x) * 1),calc(var(--delta-y) * 1)) rotate(0) scale(1)}}@keyframes flipCard{0%{transform:translate(calc(var(--delta-x) * 1),calc(var(--delta-y) * 1)) rotateY(0)}50%{transform:translate(calc(var(--delta-x) * 1),calc(var(--delta-y) * 1)) rotateY(90deg)}to{transform:translate(calc(var(--delta-x) * 1),calc(var(--delta-y) * 1)) rotateY(0)}}
