@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--dark-purple: #0f0c1d;--medium-purple: #2a1f44;--light-purple: #6d5b8e;--gold: #d4af37;--beige: #f5f0e1;--deep-blue: #1a1a2e;--mystic-teal: #0d7a80}body{font-family:Montserrat,sans-serif;background-color:var(--deep-blue);color:var(--gold);min-height:100vh;font-size:16px}#root{min-height:100vh;display:flex;flex-direction:column;overflow:hidden}.app{flex:1;padding:10px;max-width:100vw;overflow:hidden}.home-page,.result-page{overflow:hidden;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;max-width:100%;box-sizing:border-box;width:100%;height:100%}.home-page>*,.result-page>*{position:relative;z-index:2}.header{text-align:center;margin-bottom:15px;max-width:100%;padding:20px 10px}.header h1{font-size:1.8rem;margin-bottom:8px;letter-spacing:2px;text-shadow:0 0 15px rgba(212,175,55,.8);text-align:center}.header p{font-size:.8rem;margin-bottom:35px;opacity:.9;text-align:center;max-width:500px;margin-left:auto;margin-right:auto}.counter{display:flex;justify-content:center;gap:15px;margin-top:15px}.dot{width:12px;height:12px;border-radius:50%;background-color:var(--medium-purple);border:2px solid var(--light-purple);transition:all .3s ease}.dot.active{background-color:var(--gold);border-color:var(--light-purple);box-shadow:0 0 8px var(--gold);transform:scale(1.2)}.mystic-symbols{color:var(--gold);display:flex;gap:25px;margin-top:25px;opacity:.8}.symbol{font-size:2rem;text-shadow:0 0 10px rgba(212,175,55,.5)}.mystic-background{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,var(--dark-purple) 0%,var(--deep-blue) 70%);z-index:1}.mystic-background:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(109,91,142,.15) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(42,31,68,.15) 0%,transparent 40%);pointer-events:none}.card-container{perspective:100px;width:100%;height:100%}.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-front,.card-middle,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px;box-shadow:0 3px 10px #00000080;display:flex;justify-content:center;align-items:center}.card-middle{background-color:#000;z-index:2}.card-back{display:flex;justify-content:center;align-items:center;border:1px solid var(--light-purple);z-index:3}.card-back-image{width:100%;height:100%;background-image:url(/img/card-back/CardBack.png);background-size:cover;background-position:center;border-radius:8px}.card-front{transform:rotateY(180deg);background:linear-gradient(to bottom,var(--beige),var(--gold));padding:5px;flex-direction:column;justify-content:space-between;border:1px solid var(--light-purple);z-index:1}.card-image{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:6px;display:block}.card-name{font-size:.65rem;text-align:center;margin-top:3px;font-weight:700;color:var(--medium-purple);line-height:1.2;text-shadow:0 0 3px rgba(255,255,255,.5)}.disabled{opacity:.5;cursor:not-allowed}.cards-grid{display:grid;grid-template-columns:repeat(3,95px);gap:15px;max-width:500px;margin:0 auto 20px}@media (max-width: 350px){.cards-grid{align-items:center;gap:12px}.header h1{font-size:1.4rem}.header p{font-size:.6rem}.mystic-symbols{gap:15px}.text-symbol{font-family:Arial,sans-serif;font-size:1.3rem;line-height:1;display:inline-block;-webkit-text-emphasis:none;text-emphasis:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}.text-symbol{font-family:Arial,sans-serif;font-size:2rem;line-height:1;display:inline-block;-webkit-text-emphasis:none;text-emphasis:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.result-page .header{max-width:100%;margin-bottom:10px}.result-page .header h1{font-size:1.8rem}.selected-cards{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:25px;max-width:100%;margin:-40px 0 20px;width:100%}.result-card-container{display:flex;flex-direction:column;align-items:center;width:calc(33.33% - 20px);min-width:120px;background:#2a1f44b3;border-radius:10px;padding:10px;box-shadow:0 5px 15px #00000080;position:relative;z-index:3;border:1px solid var(--light-purple)}@media (max-width: 768px){.selected-cards{flex-direction:column;align-items:center}.result-card-container{width:100%;max-width:180px}.learn-more-btn{font-size:1.1rem;padding:12px 24px}}.card-meaning{margin-top:10px;text-align:center;width:100%}.card-meaning h3{font-size:1rem;margin-bottom:5px;color:var(--gold);border-bottom:1px solid var(--light-purple);padding-bottom:3px;text-align:center}.card-meaning p{font-size:.7rem;line-height:1.3;opacity:.9}.learn-more-btn{background:linear-gradient(to right,var(--light-purple),var(--medium-purple));color:var(--beige);border:none;padding:12px 30px;font-size:1rem;border-radius:25px;cursor:pointer;transition:all .3s ease;letter-spacing:1px;box-shadow:0 4px 15px #6d5b8e66;margin-top:15px;font-family:Montserrat,sans-serif;font-weight:600;width:100%;max-width:300px;position:relative;z-index:3}.learn-more-btn:hover{background:linear-gradient(to right,#8a7eb6,#4a3a7a)}.mystic-footer{margin-top:30px;text-align:center;max-width:100%;font-size:.8rem;opacity:.8;padding:0 15px;position:relative;z-index:3;color:var(--beige);text-shadow:0 0 5px rgba(0,0,0,.5)}.result-page .mystic-background:after{background:radial-gradient(circle at 10% 20%,rgba(109,91,142,.2) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(42,31,68,.2) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(26,26,46,.15) 0%,transparent 80%);animation:rotate 60s linear infinite;z-index:1}.loader{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#0a0a14f2;z-index:1000}.home-page>*:not(.loader){position:relative;z-index:2}.cards-grid{position:relative;z-index:3}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}