*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:radial-gradient(120% 80% at 50% 10%,#4b1f8f 0%,#2a1060 40%,#120733 80%,#0a0420 100%);color:#f3e9ff;font-family:Quicksand,system-ui,sans-serif;overflow-x:hidden;min-height:100dvh}
#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
main{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 18px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;min-height:100dvh}
header{display:flex;align-items:center;justify-content:space-between}
h1{font-family:'Cinzel Decorative',serif;font-size:26px;margin:6px 0;background:linear-gradient(90deg,#ffd98a,#fff6d8,#ffb3f0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(255,200,120,.25)}
.icon{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(6px)}
.icon:disabled{opacity:.35}
#stage{position:relative;height:min(50vh,430px);display:flex;justify-content:center;align-items:flex-end;margin-top:4px}
#furby{position:relative;z-index:3;height:100%;width:auto;max-width:100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.glow{position:absolute;bottom:6%;left:50%;width:85%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(150,90,255,.45),rgba(120,60,220,.12) 50%,transparent 70%);z-index:1;transition:.4s}
.ball{position:absolute;z-index:2;bottom:-4px;left:50%;transform:translateX(-50%);width:72%;height:44px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#d9c2ff 0%,#8f5cff 35%,#3d1a8a 75%);box-shadow:0 0 30px 8px rgba(160,110,255,.55),inset 0 -8px 16px rgba(0,0,0,.4);overflow:hidden}
.ball .shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%)}
.table{position:absolute;z-index:1;bottom:-26px;left:50%;transform:translateX(-50%);width:96%;height:46px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#5b2aa8,#251052 70%);box-shadow:0 16px 30px rgba(0,0,0,.5)}
body.thinking .glow{background:radial-gradient(circle,rgba(255,180,255,.75),rgba(140,80,255,.3) 50%,transparent 72%);animation:pulse .5s ease-in-out infinite alternate}
body.thinking .ball{animation:ballglow .4s ease-in-out infinite alternate}
body.thinking .ball .shine{animation:shine 1s linear infinite}
@keyframes pulse{to{transform:translateX(-50%) scale(1.08);opacity:.85}}
@keyframes ballglow{to{box-shadow:0 0 50px 18px rgba(255,170,255,.8),inset 0 -8px 16px rgba(0,0,0,.4);filter:brightness(1.3)}}
@keyframes shine{to{transform:translateX(120%)}}
.card{position:relative;margin:40px 4px 0;padding:22px 22px 20px;min-height:132px;border-radius:14px;background:linear-gradient(180deg,#fff5dc,#f3dfb3);color:#4a2a12;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 2px #e2c48a,inset 0 0 30px rgba(170,110,40,.25);font-size:20px;line-height:1.38;font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center}
.card::before,.card::after{content:"";position:absolute;left:-6px;right:-6px;height:14px;border-radius:7px;background:linear-gradient(180deg,#c99b55,#8a5a22)}
.card::before{top:-7px}.card::after{bottom:-7px}
.card.empty{color:#8a6a48;font-weight:500;font-style:italic;font-size:18px}
.seal{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:radial-gradient(#e0414f,#9b1525);color:#ffd;display:grid;place-items:center;font-size:16px;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#fortune .caret{display:inline-block;width:2px;height:1em;background:#4a2a12;margin-left:2px;vertical-align:-2px;animation:blink .7s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.actions{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:22px}
.big{flex:1;height:64px;border:0;border-radius:32px;font:700 21px Quicksand,sans-serif;color:#2b1100;cursor:pointer;background:linear-gradient(180deg,#ffe49a,#ffb547 60%,#f28a2e);box-shadow:0 0 0 3px rgba(255,220,150,.3),0 8px 24px rgba(255,160,60,.45),inset 0 -4px 0 rgba(0,0,0,.15);transition:transform .1s}
.big:active{transform:scale(.97)}
.big:disabled{filter:grayscale(.4) brightness(.85)}
.actions .icon{width:64px;height:64px;font-size:24px}
#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(0,0,0,.75);padding:10px 16px;border-radius:20px;font-size:15px;opacity:0;transition:.3s;pointer-events:none}
#toast.on{opacity:1}
@media (min-width:700px){#stage{height:420px}h1{font-size:32px}}
@media (max-height:700px){#stage{height:40vh}.card{min-height:110px;font-size:18px}}