:root{--accent-glow:#4299e166}.arcana-app{background-color:#0f1115;flex-direction:column;align-items:center;min-height:100vh;padding:60px 20px;display:flex}.arcana-header{flex-direction:column;align-items:center;gap:25px;margin-bottom:50px;display:flex}.arcana-title{text-transform:uppercase;letter-spacing:.6em;color:#4b5563;margin-right:-.6em;font-size:1.2rem;font-weight:300}.shuffle-btn-main{color:#94a3b8;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff26;border-radius:9999px;padding:10px 35px;font-size:13px;font-weight:600;transition:all .3s}.shuffle-btn-main:hover{color:#000;box-shadow:0 0 20px var(--accent-glow);background:#fff}.reading-options{gap:12px;display:flex}.option-btn{color:#64748b;cursor:pointer;background:#ffffff05;border:1.5px solid #ffffff1a;border-radius:25px;padding:12px 24px;font-size:12px;font-weight:800;transition:all .3s}.option-btn:hover,.option-btn.active{color:#fff;background:#4299e11a;border-color:#4299e1}.arcana-spread{flex-wrap:wrap;justify-content:center;gap:40px;width:100%;display:flex}.card-column{flex-direction:column;align-items:center;gap:20px;display:flex}.card-label{letter-spacing:.4em;color:#4299e1;opacity:.7;font-size:11px;font-weight:900}.card-3d-wrapper{perspective:1000px;cursor:pointer;width:175px;height:272px}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1);position:relative}.card-front,.card-back{backface-visibility:hidden;border-radius:10px;width:100%;height:100%;position:absolute;overflow:hidden;box-shadow:0 15px 35px #0006}.card-back{transform:rotateY(180deg)}.card-front img,.card-back img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.card-text-area{text-align:center;flex-direction:column;align-items:center;gap:12px;max-width:240px;display:flex}.card-name-block{flex-direction:column;gap:2px;display:flex}.card-name{text-transform:uppercase;letter-spacing:.05em;font-size:17px;font-weight:900}.card-reversed-tag{text-transform:uppercase;color:#ef4444;font-size:10px;font-weight:700}.card-meaning{color:#63b3ed;font-size:15px;font-style:italic;font-weight:500;line-height:1.4}.visible{opacity:1;transition:opacity 1s}.hidden{opacity:0;pointer-events:none}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.hidden{display:none}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.bg-\[\#0f1115\]{background-color:#0f1115}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#fff;background-color:#0f1115;justify-content:center;align-items:center;min-height:100vh;margin:0;display:flex}#root{width:100%}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
