@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap";body{margin:0;padding:0;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:root{--bg-color: #0b0c10;--text-primary: #f5f5f5;--gold: #d4af37;--gold-glow: rgba(212, 175, 55, .5);--dark-blue: #1f2833}body{margin:0;font-family:"Noto Serif JP",Cinzel,serif;background-color:var(--bg-color);color:var(--text-primary);background-image:linear-gradient(#0b0c10bf,#0b0c10bf),url(../assets/bg.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;min-height:100vh}.app-container{max-width:1200px;margin:0 auto;padding:40px 20px;display:flex;flex-direction:column;align-items:center}.app-header{display:flex;align-items:center;justify-content:flex-start;width:100%;margin-bottom:40px;gap:20px}.site-logo-small{width:70px;height:70px;object-fit:cover;border-radius:50%;box-shadow:0 0 15px #d4af3766;border:2px solid var(--gold);animation:glow 4s infinite alternate}.site-title{color:var(--gold);font-size:1.8rem;margin:0;text-shadow:0 0 15px var(--gold-glow);font-family:Cinzel,"Noto Serif JP",serif;letter-spacing:2px}@keyframes glow{0%{box-shadow:0 0 20px #d4af374d}to{box-shadow:0 0 40px #d4af3799}}.spread-selection-wrapper{display:flex;flex-direction:column;width:100%;max-width:1000px;align-items:center}.section-title{color:#fff;font-size:1.8rem;margin-bottom:25px;text-shadow:0 0 15px rgba(212,175,55,.6);border-bottom:2px solid var(--gold);padding-bottom:10px;width:100%;text-align:center}.spread-selection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%}@media (max-width: 768px){.spread-selection-grid{grid-template-columns:1fr}.site-title{font-size:1.3rem}}.spread-option{background:#1f2833f2;border:1px solid rgba(212,175,55,.5);border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column}.spread-option:hover{background:#1f2833;border-color:var(--gold);transform:translateY(-2px);box-shadow:0 5px 15px #000c,0 0 15px var(--gold-glow)}.spread-option h2{color:var(--gold);margin:0 0 10px;font-size:1.5rem}.spread-option p{margin:0;color:#ccc;line-height:1.5}.reading-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;gap:20px;margin-bottom:20px}.btn{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:10px 24px;font-size:1.1rem;font-family:"Noto Serif JP",serif;border-radius:30px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn:hover:not(:disabled){background:var(--gold);color:var(--bg-color);box-shadow:0 0 15px var(--gold-glow)}.btn:disabled{border-color:#555;color:#555;cursor:not-allowed}.btn-primary{background:#d4af371a}.instruction{font-size:1.2rem;color:#fff;margin-bottom:20px;animation:pulse 2s infinite;background:#000000d9;padding:10px 20px;border-radius:8px;border:1px solid rgba(212,175,55,.5)}@keyframes pulse{0%{opacity:.7}50%{opacity:1;text-shadow:0 0 10px rgba(255,255,255,.5)}to{opacity:.7}}.deck-pile{margin:40px 0;display:flex;flex-direction:column;align-items:center}.deck-pile p{color:var(--gold);margin-top:20px;font-size:1.2rem}.result-panel{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:20px;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.reading-layout{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;width:100%;max-width:1400px;gap:40px}.board-section{flex:1;display:flex;flex-direction:column;align-items:center}.panel-section{width:400px;flex-shrink:0;position:sticky;top:40px}.meaning-placeholder{background:#1a1a2ef2;border:1px solid rgba(212,175,55,.5);border-radius:12px;padding:40px 20px;color:#fff;text-align:center;margin-top:20px}@media (max-width: 1024px){.reading-layout{flex-direction:column;align-items:center}.panel-section{width:100%;max-width:600px;position:static}}.piles-container{display:flex;gap:40px;margin-top:40px;justify-content:center}.pile-wrapper{display:flex;flex-direction:column;align-items:center;cursor:pointer;position:relative;transition:all .3s ease}.pile-wrapper:hover{transform:translateY(-5px)}.pile-wrapper p{color:var(--gold);margin-top:15px;font-size:1rem}.selected-pile{opacity:.5;pointer-events:none;transform:scale(.95)}.pile-order-badge{position:absolute;top:-15px;right:-15px;background-color:var(--gold);color:var(--bg-color);width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;box-shadow:0 0 10px var(--gold-glow);z-index:10}.app-footer{margin-top:60px;width:100%;max-width:1200px;display:flex;justify-content:center;align-items:center;position:relative;padding:20px 0;border-top:1px solid rgba(212,175,55,.15);font-size:.85rem;color:#8e8d9a}.footer-center{font-family:Cinzel,"Noto Serif JP",serif;letter-spacing:1px}.footer-right{position:absolute;right:0;color:#707080;font-size:.8rem}@media (max-width: 768px){.app-footer{flex-direction:column;align-items:center;gap:10px;margin-top:40px;padding:15px 0}.footer-right{position:static;text-align:center}}.btn-export{background:linear-gradient(135deg,#7b2cbf,#3c096c);color:#fff;border:1px solid var(--gold);padding:12px 24px;font-size:1rem;font-weight:600;border-radius:30px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease;box-shadow:0 4px 15px #7b2cbf66;font-family:inherit}.btn-export:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7b2cbf99,0 0 10px #d4af374d;background:linear-gradient(135deg,#9d4edd,#7b2cbf)}.shuffling-deck-wrapper{position:relative;width:150px;height:250px;margin:40px auto}.shuffling-card{position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .6s cubic-bezier(.25,.8,.25,1)}.shuffling-card:nth-child(1){transform:translate(0) rotate(0);z-index:5}.shuffling-card:nth-child(2){transform:translate(2px,2px) rotate(.5deg);z-index:4}.shuffling-card:nth-child(3){transform:translate(4px,4px) rotate(-.5deg);z-index:3}.shuffling-card:nth-child(4){transform:translate(6px,6px) rotate(1deg);z-index:2}.shuffling-card:nth-child(5){transform:translate(8px,8px) rotate(-1deg);z-index:1}.is-shuffling .shuffling-card:nth-child(1){animation:shuffle-left .6s ease-in-out infinite}.is-shuffling .shuffling-card:nth-child(2){animation:shuffle-right .6s ease-in-out infinite}.is-shuffling .shuffling-card:nth-child(3){animation:shuffle-left-far .6s ease-in-out infinite}.is-shuffling .shuffling-card:nth-child(4){animation:shuffle-right-far .6s ease-in-out infinite}.is-shuffling .shuffling-card:nth-child(5){animation:shuffle-center .6s ease-in-out infinite}@keyframes shuffle-left{0%{transform:translate(0) rotate(0)}50%{transform:translate(-140px,-15px) rotate(-18deg);z-index:1}to{transform:translate(0) rotate(0);z-index:5}}@keyframes shuffle-right{0%{transform:translate(2px,2px) rotate(.5deg)}50%{transform:translate(140px,15px) rotate(18deg);z-index:5}to{transform:translate(2px,2px) rotate(.5deg);z-index:4}}@keyframes shuffle-left-far{0%{transform:translate(4px,4px) rotate(-.5deg)}50%{transform:translate(-90px,10px) rotate(-12deg);z-index:2}to{transform:translate(4px,4px) rotate(-.5deg);z-index:3}}@keyframes shuffle-right-far{0%{transform:translate(6px,6px) rotate(1deg)}50%{transform:translate(90px,-10px) rotate(12deg);z-index:4}to{transform:translate(6px,6px) rotate(1deg);z-index:2}}@keyframes shuffle-center{0%{transform:translate(8px,8px) rotate(-1deg)}50%{transform:translateY(-40px) rotate(0);z-index:3}to{transform:translate(8px,8px) rotate(-1deg);z-index:1}}.shuffle-counter{font-family:Cinzel,"Noto Serif JP",serif;font-size:1.1rem;color:var(--gold);margin-top:15px;margin-bottom:25px;text-shadow:0 0 10px rgba(212,175,55,.3)}@media (max-width: 768px){.shuffling-deck-wrapper{width:100px;height:166px;margin:30px auto}@keyframes shuffle-left{0%{transform:translate(0) rotate(0)}50%{transform:translate(-80px,-10px) rotate(-15deg);z-index:1}to{transform:translate(0) rotate(0);z-index:5}}@keyframes shuffle-right{0%{transform:translate(2px,2px) rotate(.5deg)}50%{transform:translate(80px,10px) rotate(15deg);z-index:5}to{transform:translate(2px,2px) rotate(.5deg);z-index:4}}@keyframes shuffle-left-far{0%{transform:translate(4px,4px) rotate(-.5deg)}50%{transform:translate(-50px,5px) rotate(-10deg);z-index:2}to{transform:translate(4px,4px) rotate(-.5deg);z-index:3}}@keyframes shuffle-right-far{0%{transform:translate(6px,6px) rotate(1deg)}50%{transform:translate(50px,-5px) rotate(10deg);z-index:4}to{transform:translate(6px,6px) rotate(1deg);z-index:2}}@keyframes shuffle-center{0%{transform:translate(8px,8px) rotate(-1deg)}50%{transform:translateY(-25px) rotate(0);z-index:3}to{transform:translate(8px,8px) rotate(-1deg);z-index:1}}}.tarot-card-container{perspective:1000px;width:150px;height:250px;cursor:pointer;position:relative;transition:transform .2s ease}.tarot-card-container:hover{transform:translateY(-5px)}.tarot-card{width:100%;height:100%;position:relative;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;box-shadow:0 10px 20px #0000004d,0 0 15px #d4af3733;border-radius:12px}.tarot-card.revealed{transform:rotateY(180deg)}.tarot-card.revealed.reversed{transform:rotateY(180deg) rotate(180deg)}.tarot-card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;overflow:hidden;border:2px solid #d4af37;background-color:#1a1a2e}.tarot-card-front{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#16213e,#0f3460)}.tarot-card-back{background-image:url(../assets/cards/back.png);background-size:cover;background-position:center;background-repeat:no-repeat;border:3px solid #d4af37}.card-image{width:100%;height:100%;object-fit:contain;background-color:#0b0c10}.minor-arcana-design{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;color:#d4af37;text-align:center}.minor-arcana-number{font-size:1.5rem;font-weight:700;margin-bottom:5px;font-family:Times New Roman,serif}.minor-arcana-suit{display:flex;justify-content:center;align-items:center;height:80px;margin-bottom:10px}.suit-icon{max-width:65px;max-height:65px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(212,175,55,.7));animation:suit-float 3s ease-in-out infinite alternate}.minor-arcana-name{font-size:.9rem;font-weight:500;margin-top:10px;border-top:1px solid #d4af37;padding-top:5px;width:80%}@keyframes suit-float{0%{transform:translateY(0)}to{transform:translateY(-6px)}}@media (max-width: 768px){.tarot-card-container{width:100px;height:166px}.minor-arcana-number{font-size:1.2rem}.minor-arcana-suit{height:50px;margin-bottom:5px}.suit-icon{max-width:40px;max-height:40px}.minor-arcana-name{font-size:.7rem}}.spread-board{display:flex;flex-direction:column;align-items:center;width:100%;margin:40px 0;position:relative}.cards-container{position:relative;width:100%;max-width:1000px;min-height:400px;display:flex;justify-content:center;align-items:center}.layout-three_card_time,.layout-three_card_time_major,.layout-three_card_problem,.layout-three_card_problem_major{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}.layout-diamond_cross,.layout-diamond_cross_major{position:relative;width:500px;height:500px}.layout-diamond_cross .card-pos-0,.layout-diamond_cross_major .card-pos-0{position:absolute;top:125px;left:0}.layout-diamond_cross .card-pos-1,.layout-diamond_cross_major .card-pos-1{position:absolute;top:125px;left:350px}.layout-diamond_cross .card-pos-2,.layout-diamond_cross_major .card-pos-2{position:absolute;top:250px;left:175px}.layout-diamond_cross .card-pos-3,.layout-diamond_cross_major .card-pos-3{position:absolute;top:0;left:175px}.layout-celtic_cross{position:relative;width:800px;height:800px}.layout-celtic_cross .card-pos-0{position:absolute;top:250px;left:200px}.layout-celtic_cross .card-pos-1{position:absolute;top:250px;left:200px;transform:rotate(90deg)}.layout-celtic_cross .card-pos-2{position:absolute;top:0;left:200px}.layout-celtic_cross .card-pos-3{position:absolute;top:500px;left:200px}.layout-celtic_cross .card-pos-4{position:absolute;top:250px;left:0}.layout-celtic_cross .card-pos-5{position:absolute;top:250px;left:400px}.layout-celtic_cross .card-pos-6{position:absolute;top:750px;left:600px}.layout-celtic_cross .card-pos-7{position:absolute;top:500px;left:600px}.layout-celtic_cross .card-pos-8{position:absolute;top:250px;left:600px}.layout-celtic_cross .card-pos-9{position:absolute;top:0;left:600px}.card-wrapper{display:flex;flex-direction:column;align-items:center;transition:all .3s ease}.card-wrapper.selected .tarot-card-container{box-shadow:0 0 25px #ffd700cc;transform:translateY(-10px) scale(1.05)}.position-label{margin-top:15px;font-size:.9rem;color:#d4af37;background:#0009;padding:4px 12px;border-radius:20px;border:1px solid rgba(212,175,55,.3);text-align:center;font-weight:500;letter-spacing:1px}@media (max-width: 800px){.layout-diamond_cross,.layout-diamond_cross_major,.layout-celtic_cross{position:static;display:flex;flex-wrap:wrap;gap:20px;height:auto;width:100%;justify-content:center}.layout-diamond_cross>div,.layout-diamond_cross_major>div,.layout-celtic_cross>div{position:static!important;transform:none!important}}.meaning-panel{background:#1a1a2ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.6);border-radius:12px;padding:20px;color:#fff;box-shadow:0 4px 30px #000c;margin-top:20px;animation:fadeIn .5s ease-out;max-width:600px;width:100%}.panel-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(212,175,55,.5);padding-bottom:10px;margin-bottom:15px}.card-title{font-size:1.5rem;color:#d4af37;margin:0;display:flex;align-items:center;gap:10px}.position-badge{font-size:.8rem;padding:4px 8px;border-radius:4px;font-weight:700}.position-badge.upright{background-color:#2ecc7133;color:#2ecc71;border:1px solid #2ecc71}.position-badge.reversed{background-color:#e74c3c33;color:#e74c3c;border:1px solid #e74c3c}.meaning-section{margin-bottom:15px}.meaning-section h4{color:#a0a0b8;margin:0 0 5px;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.meaning-text{font-size:1.1rem;line-height:1.5;margin:0}.description-text{font-size:.95rem;line-height:1.6;color:#f5f5f5;background:#000000d9;padding:15px;border-radius:8px;border-left:3px solid #d4af37}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}