:root{--gold:#d4af37;--gold-soft:#e6c96a;--purple-deep:#12072b;--purple-mid:#2a1657}*{box-sizing:border-box}body{color:#e8e0f0;background:linear-gradient(165deg,#1a0b35 0%,#0b0518 55%,#060310 100%);min-height:100vh;margin:0;font-family:Sarabun,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 28% 8%,#f0e6ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 41% 26%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 55% 12%,#e6d5ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 68% 22%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 78% 9%,#f0e6ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 88% 28%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 6% 42%,#e6d5ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 18% 55%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 33% 70%,#f0e6ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 50% 48%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 64% 60%,#e6d5ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 77% 72%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 90% 55%,#f0e6ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 94% 80%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 8% 82%,#e6d5ff 50%,#0000 51%);animation:4s ease-in-out infinite alternate twinkle;position:fixed;inset:0}@keyframes twinkle{0%{opacity:.45}to{opacity:1}}.app{flex-direction:column;align-items:center;min-height:100vh;display:flex}.header{text-align:center;padding:3rem 1rem 1.5rem}.header h1{background:linear-gradient(180deg, #f5e6b8, var(--gold) 60%, #a8832a);color:#0000;text-shadow:0 0 40px #d4af3740;-webkit-background-clip:text;background-clip:text;margin:0;font-family:Noto Serif Thai,serif;font-size:clamp(2rem,6vw,3rem);font-weight:700}.header p{color:#b8a8d8;letter-spacing:.05em;margin:.75rem 0 0;font-weight:300}.stage{flex-direction:column;flex:1;align-items:center;gap:2rem;width:100%;max-width:640px;padding:1rem 1rem 3rem;display:flex}.card-frame{aspect-ratio:2/3.5;perspective:1200px;width:min(280px,72vw)}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,.1,.2,1);position:relative;transform:rotateY(0)}.card-inner.show-back{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:14px;position:absolute;inset:0;overflow:hidden;box-shadow:0 12px 45px #0000008c,0 0 30px #d4af371f}.card-front{background:#241a3d}.card-front img{object-fit:cover;width:100%;height:100%;display:block}.card-back{border:2px solid var(--gold);background:var(--purple-deep);transform:rotateY(180deg)}.card-back img{object-fit:cover;width:100%;height:100%;display:block}.draw-btn{letter-spacing:.04em;color:#1a0b2e;background:linear-gradient(180deg, #f5e6b8, var(--gold) 55%, #b8912f);cursor:pointer;border:none;border-radius:999px;padding:.85rem 2.6rem;font-family:Noto Serif Thai,serif;font-size:1.15rem;transition:transform .15s,box-shadow .15s,filter .15s;box-shadow:0 4px 22px #d4af3759}.draw-btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 8px 30px #d4af3780}.draw-btn:active:not(:disabled){transform:translateY(0)}.draw-btn:disabled{opacity:.55;cursor:wait}.meaning{text-align:center;opacity:0;max-width:460px;transition:opacity .7s,transform .7s;transform:translateY(14px)}.meaning.visible{opacity:1;transform:translateY(0)}.meaning h2{color:var(--gold-soft);margin:0;font-family:Noto Serif Thai,serif;font-size:1.8rem}.meaning .en{color:#9a86c8;margin:.3rem 0 0;font-style:italic}.meaning .suit{letter-spacing:.12em;text-transform:uppercase;color:#7c6ba3;margin:.8rem 0 1rem;font-size:.85rem}.meaning .text{color:#ddd2f0;margin:0;font-weight:300;line-height:1.9}.footer{color:#6a5a90;text-align:center;padding:1.5rem 1rem 2.5rem;font-size:.8rem}@media (width<=420px){.card-frame{width:62vw}}