@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lato:wght@300;400;700&display=swap";:root{--bg:#1a0d35;--bg2:#0f0820;--surface:#2a1858;--surface2:#3d2480;--gold:#d4a853;--gold-light:#f5d880;--text:#f5eeff;--text-muted:#c8a8ee;--text-body:#ede0ff}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);color:var(--text-body);background-attachment:fixed;min-height:100vh;font-family:Lato,sans-serif;font-size:17px;line-height:1.7;overflow-x:hidden}h1,h2,h3{color:var(--gold-light);font-family:Cinzel,serif}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(1px 1px at 10% 20%,#ffffffe6 0%,#0000 100%),radial-gradient(1px 1px at 30% 60%,#ffffffb3 0%,#0000 100%),radial-gradient(1px 1px at 50% 10%,#fff 0%,#0000 100%),radial-gradient(1px 1px at 70% 80%,#fffc 0%,#0000 100%),radial-gradient(1px 1px at 85% 40%,#ffffffe6 0%,#0000 100%),radial-gradient(1px 1px at 20% 90%,#fff9 0%,#0000 100%),radial-gradient(1px 1px at 60%,#ffffffb3 0%,#0000 100%),radial-gradient(1px 1px at 90% 15%,#fff 0%,#0000 100%),radial-gradient(1px 1px at 40% 75%,#fffc 0%,#0000 100%),radial-gradient(1px 1px at 75% 30%,#ffffffe6 0%,#0000 100%),radial-gradient(1px 1px at 15% 45%,#ffffffb3 0%,#0000 100%),radial-gradient(1px 1px at 55% 85%,#fffc 0%,#0000 100%),radial-gradient(1px 1px at 92% 65%,#fff9 0%,#0000 100%);animation:4s infinite alternate twinkle;position:fixed;inset:0}@keyframes twinkle{0%{opacity:.5}to{opacity:1}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.shimmer{background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;animation:3s linear infinite shimmer}#root{z-index:1;position:relative}.container{max-width:900px;margin:0 auto;padding:0 1.5rem}button{cursor:pointer;border:1.5px solid var(--gold);color:var(--gold-light);letter-spacing:.05em;background:0 0;border-radius:6px;padding:.75rem 1.8rem;font-family:Cinzel,serif;font-size:1rem;transition:all .25s}button:hover{background:var(--gold);color:#1a0d35;box-shadow:0 0 18px #d4a85366}input,textarea,select{background:var(--surface);border:1.5px solid var(--surface2);color:var(--text);border-radius:6px;width:100%;padding:.75rem 1.1rem;font-family:Lato,sans-serif;font-size:1rem}input:focus,textarea:focus,select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #d4a85326}.narrative-text{color:var(--text);white-space:pre-wrap;font-size:1.1rem;line-height:2}.card-meaning-text{color:var(--text-muted);font-size:1rem;line-height:1.7}@keyframes blink{50%{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card-wrapper{flex-direction:column;align-items:center;gap:.5rem;display:flex}.card-position-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;font-family:Cinzel,serif;font-size:.7rem}.card-scene{perspective:600px;cursor:pointer;background:0 0;border:none;width:100px;height:160px;padding:0}.card-scene.flipped{cursor:default;opacity:.85}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease-in-out;position:relative}.card-scene.flipped .card-inner{transform:rotateY(180deg)}.card-face,.card-back{backface-visibility:hidden;border:1px solid var(--gold);border-radius:8px;position:absolute;inset:0}.card-back{background:var(--surface);background-image:repeating-conic-gradient(var(--surface2) 0% 25%, var(--surface) 0% 50%);background-size:20px 20px;justify-content:center;align-items:center;display:flex}.card-back-symbol{opacity:.4;font-size:2.5rem}.card-face{background:var(--surface);flex-direction:column;display:flex;overflow:hidden;transform:rotateY(180deg)}.card-face img{object-fit:cover;width:100%;height:120px}.card-face.reversed img{transform:rotate(180deg)}.card-art-fallback{background:var(--surface2);width:100%;height:120px;color:var(--gold);opacity:.6;justify-content:center;align-items:center;font-size:2rem;display:flex}.card-name{color:var(--gold);text-align:center;padding:.3rem;font-family:Cinzel,serif;font-size:.6rem;line-height:1.2}
