@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Noto+Serif+Thai:wght@400;600;700&display=swap";:root{font-family:"Noto Serif Thai",Cinzel,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0d0118;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-width:320px;min-height:100vh}#root{min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0d0118}::-webkit-scrollbar-thumb{background:#4c1d95;border-radius:3px}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,#1e0a3c,#0d0118 60%,#000);overflow:hidden;position:relative}.app-main{position:relative;z-index:10;width:100%;max-width:900px;padding:1.5rem;display:flex;flex-direction:column;align-items:center}.stars{position:fixed;inset:0;pointer-events:none;z-index:0}.star{position:absolute;border-radius:50%;background:#fff;opacity:0;animation:starFlash var(--dur, 10s) ease-in-out var(--del, 0s) infinite}@keyframes starFlash{0%,42%{opacity:0;transform:scale(.6)}48%{opacity:.85;transform:scale(1.5);box-shadow:0 0 4px 1px #fff9}50%{opacity:1;transform:scale(1.7);box-shadow:0 0 6px 2px #ffffffb3}54%{opacity:.4;transform:scale(1.1)}58%,to{opacity:0;transform:scale(.6)}}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2.2rem;border-radius:50px;border:none;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .2s;letter-spacing:.04em}.btn:active{transform:scale(.96)}.btn-icon{font-size:1.2rem}.btn-primary{background:linear-gradient(135deg,#7c3aed,#a855f7,#c084fc);color:#fff;box-shadow:0 4px 20px #a855f780}.btn-secondary{background:linear-gradient(135deg,#0ea5e9,#6366f1);color:#fff;box-shadow:0 4px 20px #6366f180}.btn-outline{background:transparent;color:#e2e8f0;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 12px #ffffff14}.btn-outline:hover{background:#ffffff14}.btn-glow:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 32px #a855f7b3}.home-screen{display:flex;flex-direction:column;align-items:center;gap:2.5rem;animation:fadeInUp .6s ease both}.home-title{text-align:center}.home-crystal{display:block;font-size:5rem;margin-bottom:.5rem;animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(192,132,252,.8))}.home-title h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:800;background:linear-gradient(90deg,#e0c3fc,#8ec5fc,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:.02em}.home-subtitle{font-size:1.05rem;color:#ffffff8c;letter-spacing:.08em}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.shuffle-screen{display:flex;flex-direction:column;align-items:center;gap:2.5rem;animation:fadeInUp .4s ease both}.shuffle-label{font-size:1.2rem;color:#fff9;letter-spacing:.12em;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.shuffle-deck{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}.shuffle-card{position:absolute;width:90px;height:155px;object-fit:cover;border-radius:10px;box-shadow:0 8px 30px #000000b3;transform-origin:bottom center;animation-duration:.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:calc(var(--i) * .07s)}.shuffle-card:nth-child(odd){animation-name:shuffleLeft}.shuffle-card:nth-child(2n){animation-name:shuffleRight}@keyframes shuffleLeft{0%{transform:translate(0) translateY(0) rotate(0);opacity:1}40%{transform:translate(-55px) translateY(-8px) rotate(-12deg);opacity:.9}to{transform:translate(0) translateY(0) rotate(0);opacity:1}}@keyframes shuffleRight{0%{transform:translate(0) translateY(0) rotate(0);opacity:1}40%{transform:translate(55px) translateY(-8px) rotate(12deg);opacity:.9}to{transform:translate(0) translateY(0) rotate(0);opacity:1}}.pick-btn-wrapper{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}.pick-btn-wrapper.visible{opacity:1;transform:translateY(0);pointer-events:auto}.spread-screen{display:flex;flex-direction:column;align-items:center;gap:3rem;animation:fadeInUp .4s ease both}.spread-label{font-size:1.15rem;color:#ffffffb3;letter-spacing:.1em}.spread-fan{position:relative;width:340px;height:280px;display:flex;align-items:flex-end;justify-content:center}.spread-card-btn{position:absolute;background:none;border:none;cursor:pointer;padding:0;transform-origin:bottom center;transform:rotate(var(--angle)) translate(var(--tx));transition:transform .2s ease,filter .2s ease;bottom:0}.spread-card-btn:hover{transform:rotate(var(--angle)) translate(var(--tx)) translateY(-18px);filter:drop-shadow(0 0 14px rgba(192,132,252,.9));z-index:100!important}.spread-card-img{width:72px;height:120px;object-fit:cover;border-radius:7px;box-shadow:0 6px 20px #000000b3;display:block}.result-screen{display:flex;flex-direction:column;align-items:center;gap:1.2rem;animation:fadeInUp .5s ease both;width:100%}.result-title{font-size:1.8rem;font-weight:700;background:linear-gradient(90deg,#e0c3fc,#8ec5fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em;text-align:center}.copy-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1.1rem;border-radius:20px;border:1px solid rgba(255,255,255,.25);background:#ffffff17;color:#fffc;font-size:.85rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s;white-space:nowrap}.copy-btn:hover{background:#ffffff29;color:#fff;transform:translateY(-1px)}.copy-btn.copied{background:#10b98133;border-color:#34d39980;color:#34d399}.result-cards{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;width:100%;padding-top:.5rem}.result-card-wrap{display:flex;flex-direction:column;align-items:center;gap:.45rem;animation:cardReveal .5s ease both}.result-card-frame{position:relative;width:120px;height:200px;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px #000000a6;transition:transform .3s ease}.result-card-frame:hover{transform:translateY(-6px) scale(1.03)}.result-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.result-card-img.reversed{transform:rotate(180deg)}.result-card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 70%,transparent 100%);padding:1.6rem .4rem .45rem;display:flex;align-items:flex-end;justify-content:center;min-height:60px}.result-card-name{font-size:.72rem;font-weight:700;color:#fff;text-align:center;line-height:1.25;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.8)}.result-badge{font-size:.7rem;font-weight:700;padding:.22rem .7rem;border-radius:20px;letter-spacing:.08em}.badge-upright{background:#10b98140;color:#34d399;border:1px solid rgba(52,211,153,.45)}.badge-reversed{background:#ef444433;color:#f87171;border:1px solid rgba(248,113,113,.4)}.result-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes cardReveal{0%{opacity:0;transform:scale(.7) rotateY(90deg)}to{opacity:1;transform:scale(1) rotateY(0)}}