body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:linear-gradient(145deg,#1a1a2e,#16213e);border-radius:15px;padding:30px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px #00000080;border:1px solid #3a4a6b}.modal-content h2{color:#fff;text-align:center;margin-bottom:25px;font-size:28px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.package-card{background:linear-gradient(145deg,#2a2a40,#1e1e32);border:2px solid #3a4a6b;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;text-align:center;position:relative;overflow:hidden}.package-card:hover:not(.owned){border-color:#4a90e2;box-shadow:0 8px 25px #4a90e24d;transform:translateY(-2px)}.package-card.selected{border-color:#4a90e2;box-shadow:0 0 20px #4a90e280;background:linear-gradient(145deg,#2a3a50,#1e2e42)}.package-card.owned{opacity:.7;cursor:not-allowed;border-color:#28a745;background:linear-gradient(145deg,#1a2a1a,#0f1f0f)}.package-card.owned:hover{transform:none;box-shadow:none}.skin-image{width:85%;height:60%;object-fit:cover;border-radius:5%;margin-bottom:15px;border:3px solid #3a4a6b;transition:border-color .3s ease}.package-card:hover:not(.owned) .skin-image{border-color:#4a90e2}.package-card.owned .skin-image{border-color:#28a745}.skin-name{color:#fff;font-size:18px;font-weight:700;margin-bottom:8px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.skin-rarity{color:#b8c5d6;font-size:14px;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.package-card.owned .skin-rarity{color:#a8b8a8}.price{color:#4a90e2;font-size:20px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.owned-badge{color:#28a745;font-size:16px;font-weight:700;background:#28a74533;padding:4px 12px;border-radius:20px;border:1px solid #28a745}.owned-overlay{position:absolute;top:10px;right:10px;background:#28a745;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;box-shadow:0 2px 8px #28a74580}.checkout-section{background:linear-gradient(145deg,#2a2a40,#1e1e32);border:1px solid #3a4a6b;border-radius:12px;padding:25px;margin:20px 0}.checkout-section h3{color:#fff;margin-bottom:20px;text-align:center;font-size:20px}.checkout-section form{display:flex;flex-direction:column;gap:20px}.checkout-section button{background:linear-gradient(145deg,#4a90e2,#357abd);color:#fff;border:none;padding:15px 30px;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.checkout-section button:hover:not(:disabled){background:linear-gradient(145deg,#357abd,#2968a3);box-shadow:0 5px 15px #4a90e266;transform:translateY(-2px)}.checkout-section button:disabled{background:#666;cursor:not-allowed;opacity:.6}.close-button{background:linear-gradient(145deg,#dc3545,#c82333);color:#fff;border:none;padding:12px 30px;border-radius:8px;font-size:16px;cursor:pointer;margin-top:20px;width:100%;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.close-button:hover{background:linear-gradient(145deg,#c82333,#bd2130);box-shadow:0 5px 15px #dc354566;transform:translateY(-2px)}.payment-error{color:#dc3545;background:#dc35451a;border:1px solid #dc3545;border-radius:8px;padding:12px;text-align:center;font-weight:700}.payment-success{color:#28a745;background:#28a7451a;border:1px solid #28a745;border-radius:8px;padding:12px;text-align:center;font-weight:700}.loading{text-align:center;color:#4a90e2;font-size:18px;padding:40px;font-weight:700}.error-message{color:#dc3545;background:#dc35451a;border:1px solid #dc3545;border-radius:8px;padding:15px;text-align:center;margin-bottom:20px;font-weight:700}@media (max-width: 768px){.modal-content{padding:20px;width:95%}.packages{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.package-card{padding:15px}.skin-image{width:60px;height:60px}.skin-name{font-size:16px}.price{font-size:18px}}.card-game{position:relative;width:100px;height:auto;border-radius:1rem;overflow:visible!important;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;transform-style:preserve-3d;z-index:1}.card-game.ally{box-shadow:0 0 10px 10px #48c0e8}.card-game.enemy{box-shadow:0 0 10px 10px red}.card-game:hover{animation:hoverEffect .5s ease-in-out forwards;transform:scale(1.1);z-index:9999!important;position:relative}.card-game:active{transform:scale(1) translateY(0);transition:transform .1s;z-index:1}@keyframes hoverEffect{to{transform:scale(1.5) translateY(-30px);z-index:9999}}.game-points{position:absolute;font-size:.8em;color:#fff;text-shadow:0 0 5px black}.game-top-left{font-weight:500!important;top:-1px;left:2px}.game-bottom-left{font-weight:500!important;bottom:0;left:2px}.game-top-right{font-weight:500!important;top:-1px;right:2px}.game-bottom-right{font-weight:500!important;bottom:0;right:2px}.card-game.stronger{animation:attackAnimation 1s ease}@keyframes attackAnimation{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.react-beautiful-dnd-droppable,.react-beautiful-dnd-draggable{overflow:visible!important}@media (max-width: 768px){.card-game:hover{animation:mobileHoverEffect .5s ease-in-out forwards}@keyframes mobileHoverEffect{to{transform:scale(1.3) translateY(-20px);z-index:9999}}}.top-left{top:10px;left:10px}.bottom-left{bottom:10px;left:10px}.top-right{top:10px;right:10px}.bottom-right{bottom:10px;right:10px}.modal-top-left{top:18%;left:5.5%}.modal-bottom-left{bottom:19%;left:6%}.modal-top-right{top:18%;right:63.7%}.modal-bottom-right{bottom:19%;right:63.7%}.card.common{box-shadow:0 0 30px 10px gray}.card.rare{box-shadow:0 0 30px 10px #00b2ff}.card.epic{box-shadow:0 0 30px 10px #bb00a3}.card.legendary{box-shadow:0 0 30px 10px gold}.points-container{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.mini-spell.ally{box-shadow:0 0 10px 10px #48c0e8}.mini-spell.enemy{box-shadow:0 0 10px 10px red}.mini-spell{position:absolute;width:100%;height:100%;top:0;left:0}.mini-spell:hover{animation:hoverEffect .5s ease-in-out forwards;transform:scale(1.1);z-index:10}.mini-spell:active{transform:scale(1) translateY(0);transition:transform .1s;z-index:1}@keyframes hoverEffect{to{transform:scale(1.5)translateY(-30px)}}.points{position:absolute;font-size:1.2em;color:#fff;text-shadow:0 0 5px black}.top-left{top:7px;left:7px}.bottom-left{bottom:7px;left:7px}.top-right{top:7px;right:7px}.bottom-right{bottom:7px;right:7px}.highlight{color:green}.banner{width:100%;max-width:600px;background-color:#00c4ff;padding:20px 40px;text-align:center;margin:20px auto;box-shadow:0 4px 20px #00c4ff;animation:pulse 2s infinite;position:sticky;top:40%;z-index:1000;border-radius:50px;box-sizing:border-box}.banner p{margin:0;font-size:1.5rem;font-weight:700;color:#333;animation:bounce 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}