:root{--primary-color: #3d2c5e;--secondary-color: #4b3f72;--accent-color: #d4af37;--bg-color: #0d0d15;--text-color: #e0e0e0;--card-back-color: #1a1a2e;--font-heading: "Cinzel", serif;--font-body: "Zen Kaku Gothic New", sans-serif;--glass-bg: rgba(20, 20, 30, .7);--glass-border: rgba(212, 175, 55, .3)}.modal-overlay{position:fixed;inset:0;background-color:#0a0a14e6;height:100dvh;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease-out;padding:20px}.modal-content.mystical-modal{background:linear-gradient(135deg,#1e1e32e6,#141428f2);border:1px solid rgba(255,255,255,.1);box-shadow:0 0 30px #6464ff33,inset 0 0 20px #00000080;border-radius:16px;padding:2rem;max-width:800px;width:90%;max-height:90dvh;max-height:90vh;overflow-y:auto;position:relative;color:#fff;animation:scaleIn .4s cubic-bezier(.175,.885,.32,1.275);scrollbar-width:thin;scrollbar-color:rgba(160,160,255,.3) transparent;display:flex;flex-direction:column;align-items:center}.modal-content.mystical-modal::-webkit-scrollbar{width:6px}.modal-content.mystical-modal::-webkit-scrollbar-track{background:transparent}.modal-content.mystical-modal::-webkit-scrollbar-thumb{background-color:#a0a0ff4d;border-radius:3px}.modal-content.mystical-modal::-webkit-scrollbar-thumb:hover{background-color:#a0a0ff80}.modal-close-btn{margin-top:2rem;padding:12px 40px;background:transparent;border:1px solid var(--accent-color);color:var(--accent-color);font-family:var(--font-heading);font-size:1.1rem;cursor:pointer;border-radius:4px;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;width:100%;max-width:200px}.modal-close-btn:hover{background:var(--accent-color);color:#0d0d15;box-shadow:0 0 15px #d4af3766}.modal-body{display:flex;gap:2rem;align-items:center}@media(max-width:768px){.modal-body{flex-direction:column;text-align:center}}.modal-card-visual{flex:0 0 240px;position:relative;display:flex;flex-direction:column;align-items:center}.modal-card-image{width:100%;border-radius:10px;box-shadow:0 10px 20px #00000080;z-index:2}.modal-card-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;background:radial-gradient(circle,rgba(100,100,255,.4) 0%,transparent 70%);z-index:1;animation:pulseGlow 3s infinite alternate}.modal-card-name-en{margin-top:1rem;font-family:Cinzel,serif;color:#fff9;letter-spacing:2px;font-size:.9rem}.modal-text-content{flex:1}.modal-position-label{font-size:1rem;color:var(--accent-color);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.modal-card-name-ja{font-size:2.5rem;font-weight:700;margin:0 0 1rem;background:linear-gradient(to right,#fff,#a0a0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.modal-divider{height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);margin:1.5rem 0}.modal-meaning{font-size:1.1rem;line-height:1.8;color:#ffffffe6;font-family:Shippori Mincho,serif}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulseGlow{0%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}to{opacity:.8;transform:translate(-50%,-50%) scale(1.1)}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);margin-top:20px;background-color:var(--bg-color);color:var(--text-color);min-height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(/img/mysterious_bg.png);background-size:cover;background-position:center;background-attachment:fixed}.wash-shuffle-container{position:relative;width:300px;height:300px;margin:0 auto}.wash-card{position:absolute;width:80px;height:130px;top:50%;left:50%;transform:translate(-50%,-50%);animation:washMix 3s ease-in-out infinite}.wash-card .card-back{width:100%;height:100%;background:var(--card-back-color);background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid var(--accent-color);border-radius:4px;box-shadow:0 2px 5px #0000004d;display:flex;align-items:center;justify-content:center;color:var(--accent-color);font-size:1rem}@keyframes washMix{0%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(calc(-50% + var(--random-x)),calc(-50% + var(--random-y))) rotate(var(--random-r))}50%{transform:translate(calc(-50% - var(--random-x) * .5),calc(-50% - var(--random-y) * .5)) rotate(calc(var(--random-r) * -.5))}75%{transform:translate(calc(-50% + var(--random-x) * .2),calc(-50% + var(--random-y) * .2)) rotate(calc(var(--random-r) * .2))}to{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(0)}}.dealing-container{position:relative;width:300px;height:300px;margin:0 auto}.flying-card{position:absolute;width:80px;height:130px;top:50%;left:50%;transform:translate(-50%,-50%);animation:flyOut 1s cubic-bezier(.25,1,.5,1) forwards}.flying-card .card-back{width:100%;height:100%;background:var(--card-back-color);background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid var(--accent-color);border-radius:4px;box-shadow:0 5px 15px #00000080}@keyframes flyOut{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}40%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}to{transform:translate(calc(-50% + var(--fly-x)),calc(-50% + var(--fly-y))) rotate(var(--fly-r)) scale(1);opacity:0}}.app-container{width:100%;max-width:900px;min-height:90vh;background:#0d0d1599;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:12px;padding:40px;box-shadow:0 0 50px #00000080;display:flex;flex-direction:column;position:relative;overflow:hidden}.logo-container{display:flex;justify-content:center;margin-bottom:20px}.logo{max-width:100%;height:auto;max-height:120px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(212,175,55,.5))}h1{font-family:var(--font-heading);color:var(--accent-color);font-size:3rem;text-shadow:0 0 10px rgba(212,175,55,.5);margin-bottom:10px;text-transform:uppercase;text-align:center}.subtitle{font-size:.9rem;letter-spacing:3px;opacity:.8;font-weight:300;text-align:center;margin-bottom:40px}h2{text-align:center;margin-bottom:30px;font-family:var(--font-body);font-weight:500}.screen{transition:opacity .5s ease;opacity:1;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.screen.hidden{display:none;opacity:0}#category-selection{display:block;width:100%;position:relative;z-index:10}.category-buttons{display:flex;flex-direction:column;gap:20px}.category-btn{background:#ffffff08;border:1px solid var(--glass-border);padding:25px;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:20px;cursor:pointer;transition:all .3s ease;color:var(--text-color);font-family:var(--font-body);font-size:1.2rem}.category-btn:hover{background:#d4af371a;border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}.category-btn .icon{font-size:1.5rem}.back-btn{background:#ffffff0d;border:1px solid var(--accent-color);color:var(--accent-color);cursor:pointer;font-size:1.2rem;padding:15px 40px;margin:20px auto;display:block;border-radius:30px;transition:all .3s ease;font-family:var(--font-heading);letter-spacing:2px;text-transform:uppercase}.back-btn:hover{background:var(--accent-color);color:#0d0d15;box-shadow:0 0 15px #d4af3766;transform:translateY(-2px)}.reading-options{display:grid;gap:15px}.reading-option-btn{background:var(--glass-bg);border:1px solid var(--glass-border);padding:15px;color:var(--text-color);text-align:left;cursor:pointer;transition:.3s;border-radius:4px}.reading-option-btn:hover{background:#d4af371a;border-color:var(--accent-color)}.reading-option-btn strong{font-size:1.3rem;display:block;margin-bottom:5px}.reading-option-btn small{font-size:1rem;opacity:.9}.reading-header{text-align:center;margin-bottom:30px}#reading-instruction{font-size:.9rem;opacity:.7;margin-top:10px;transition:opacity .3s}.deck-container{display:flex;justify-content:center;margin-bottom:40px;height:200px;align-items:center}.deck{position:relative;width:120px;height:200px;cursor:pointer;transition:transform .3s}.deck:hover{transform:scale(1.05)}.deck .card-back{position:absolute;width:100%;height:100%;background:var(--card-back-color);background-size:cover;background-position:center;background-repeat:no-repeat;border:2px solid var(--accent-color);border-radius:8px;box-shadow:0 2px 5px #00000080;display:flex;align-items:center;justify-content:center;color:var(--accent-color);font-size:1.5rem}.deck .card-back:nth-child(1){top:0;left:0}.deck .card-back:nth-child(2){top:-2px;left:-2px}.deck .card-back:nth-child(3){top:-4px;left:-4px}.deck.shuffling{animation:shuffle .5s infinite alternate}@keyframes shuffle{0%{transform:rotate(0)}25%{transform:rotate(-5deg) translate(-10px)}75%{transform:rotate(5deg) translate(10px)}to{transform:rotate(0)}}.spread-container{display:flex;justify-content:center;flex-wrap:wrap;gap:60px;min-height:400px;perspective:1000px;margin-bottom:100px;margin-top:40px}@media(min-width:768px){.spread-container{min-width:760px}}.card-slot{width:240px;height:400px;position:relative;display:flex;flex-direction:column;align-items:center}.tarot-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s;cursor:pointer}.tarot-card.flipped{transform:rotateY(180deg)}.tarot-card .front,.tarot-card .back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px #0000004d}.tarot-card .back{background:var(--card-back-color);background-size:cover;background-position:center;background-repeat:no-repeat;border:2px solid var(--accent-color);color:var(--accent-color);font-size:2rem}.tarot-card .front{background:#111;color:var(--accent-color);transform:rotateY(180deg);flex-direction:column;justify-content:space-between;border:2px solid var(--accent-color)}.card-image-container{width:90%;height:65%;margin:10px auto;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid rgba(212,175,55,.3);background:#000}.card-image-container img{width:100%;height:100%;object-fit:cover;opacity:.9}.card-image-placeholder{width:100%;height:100%;background:#222;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#555}.card-name{font-family:var(--font-heading);font-weight:700;font-size:.85rem;letter-spacing:1px;text-transform:uppercase;text-align:center;padding:5px}.card-position-label{position:absolute;top:-40px;bottom:auto;width:100%;text-align:center;font-size:.85rem;color:var(--accent-color);font-family:var(--font-heading);text-shadow:0 0 5px rgba(0,0,0,.8)}.menu-art-container{text-align:center;margin-bottom:30px;padding:0 20px}.menu-art{max-width:100%;height:auto;max-height:400px;border-radius:8px;box-shadow:0 0 30px #000c;border:1px solid var(--glass-border);opacity:.9;transition:opacity .5s ease}.menu-art:hover{opacity:1}.result-area{padding-bottom:100px}.result-card-detail{margin-bottom:40px;padding:30px;background:linear-gradient(135deg,#ffffff08,#ffffff03);border:1px solid rgba(212,175,55,.2);border-radius:8px;box-shadow:0 4px 20px #0003;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.result-card-detail:before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:linear-gradient(to bottom,transparent,var(--accent-color),transparent);opacity:.5}.result-card-detail:hover{transform:translateY(-2px);box-shadow:0 8px 30px #0006;border-color:#d4af3766}.result-card-detail h4{color:var(--accent-color);margin-bottom:20px;font-size:1.3rem;font-family:var(--font-heading);letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.5);border-bottom:1px solid rgba(212,175,55,.1);padding-bottom:10px;display:inline-block}.result-card-detail p{line-height:2;color:#e0e0e0;font-size:1.05rem;text-align:justify}.result-card-detail small{display:block;margin-top:5px;color:var(--accent-color);font-style:italic}#reset-btn{display:block;margin:40px auto 0;padding:15px 50px;background:transparent;color:var(--accent-color);border:1px solid var(--accent-color);border-radius:2px;font-size:1.1rem;font-family:var(--font-heading);cursor:pointer;transition:.4s;letter-spacing:2px;text-transform:uppercase}#reset-btn:hover{background:var(--accent-color);color:#000;box-shadow:0 0 20px #d4af3780}footer{margin-top:auto;text-align:center;padding:20px;font-size:.8rem;opacity:.4;font-family:var(--font-heading)}