.og-root{position:relative;width:100%;height:100%;min-height:200px;overflow:hidden;isolation:isolate;color:#fff;font-family:Inter,"Segoe UI",sans-serif;--og-scale:1;--og-hit:1.62;--og-accent:#a98cff}
.og-scale{position:absolute;left:50%;top:50%;width:500px;height:400px;margin:-200px 0 0 -250px;transform:scale(var(--og-scale))}
.og-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transform:translateY(10px) scale(.94);transition:opacity .32s,transform .32s;will-change:transform,opacity}
.og-root[data-state="CARD_IN"] .og-card,.og-root[data-state="PLAYING"] .og-card,.og-root[data-state="SETTLE"] .og-card,.og-root[data-state="HOLD"] .og-card{opacity:1;transform:none}
.og-glow{position:absolute;z-index:-1;left:40px;top:0;width:420px;height:400px;background:radial-gradient(closest-side,rgba(150,110,255,.55),transparent 70%);filter:blur(30px);animation:og-drift 14s ease-in-out infinite alternate;pointer-events:none}
.og-glow.second{width:340px;left:80px;animation-duration:18s;animation-direction:alternate-reverse}
.og-label{font-size:30px;font-weight:900;letter-spacing:.14em;line-height:1.2;background:linear-gradient(#cfc4ff,#a98cff 55%,#8f6dff);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 8px #966eff) drop-shadow(0 0 22px #7846ff);z-index:2}
.og-stage{position:relative;width:186px;height:186px;flex:none;border-radius:14px;isolation:isolate;box-shadow:0 0 24px #8c64ff88,0 0 64px #6e3ce659;transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform;z-index:1}
.og-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:rgba(12,7,26,.4)}
.og-rays{position:absolute;inset:-25%;background:repeating-conic-gradient(#bea0ff48 0deg 4deg,transparent 4deg 12deg);mask-image:radial-gradient(closest-side,#000 30%,transparent);animation:og-spin 26s linear infinite}
.og-icon,.og-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;box-sizing:border-box;transition:opacity .12s}
.og-icon{padding:12px}.og-video{opacity:0}.og-video.opaque{background:#05030c}
.og-missing{position:absolute;inset:0;display:grid;place-items:center;font-size:72px;color:#d9c5ff}.og-missing[hidden]{display:none}
.og-name{font-size:34px;font-weight:800;line-height:1.05;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 12px #beaaffd9,0 2px #0008;z-index:2;transition:transform .24s}
.og-coins{display:flex;align-items:center;gap:8px;font-size:27px;font-style:italic;font-weight:800;font-variant-numeric:tabular-nums;z-index:2;transition:transform .24s}
.og-number{background:linear-gradient(#c9b6ff,#8f6dff);background-clip:text;-webkit-background-clip:text;color:transparent}.og-coin{width:24px;height:24px;object-fit:contain}
.og-badge{position:absolute;right:8px;top:8px;font-size:16px;font-weight:900;border-radius:999px;padding:3px 9px;background:#ffffff24;z-index:4}.og-badge[hidden]{display:none}
.og-root[data-state="PLAYING"] .og-stage{transform:scale(var(--og-hit))}.og-root[data-state="PLAYING"] .og-label{transform:translateY(-48px)}
.og-root[data-state="PLAYING"] .og-name,.og-root[data-state="PLAYING"] .og-coins{transform:translateY(52px)}
.og-root[data-state="PLAYING"] .og-video{opacity:1}.og-root[data-state="PLAYING"] .og-icon{opacity:0}
.og-root[data-state="CARD_IN"] .og-card{animation:og-in .38s cubic-bezier(.2,.9,.2,1)}
.og-burst{position:absolute;inset:0;pointer-events:none}.og-burst i{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#e5d5ff;opacity:0}.og-burst.fire i{animation:og-spark .9s ease-out both;transform:rotate(var(--angle))}
.og-empty{display:none;position:absolute;inset:0;align-items:center;justify-content:center;padding:32px;text-align:center;color:#c7b9e7;font:15px/1.6 "Segoe UI",sans-serif}.og-root[data-state="IDLE"] .og-empty{display:flex}
.og-note{position:absolute;bottom:10px;left:12px;right:12px;text-align:center;color:#c7b9e7;font:12px/1.5 "Segoe UI",sans-serif;pointer-events:none}
@keyframes og-in{from{opacity:0;transform:scale(.86) translateY(14px)}to{opacity:1;transform:none}}
@keyframes og-spin{to{transform:rotate(360deg)}}@keyframes og-drift{from{transform:translate(-18px,-8px);opacity:.7}to{transform:translate(18px,8px);opacity:1}}
@keyframes og-spark{0%{opacity:1;transform:rotate(var(--angle)) translateX(8px) scale(1)}100%{opacity:0;transform:rotate(var(--angle)) translateX(135px) scale(.1)}}
@media(prefers-reduced-motion:reduce){.og-root *{animation:none!important;transition:opacity .2s!important}.og-rays,.og-glow,.og-burst{display:none}.og-root .og-stage,.og-root .og-label,.og-root .og-name,.og-root .og-coins{transform:none!important}.og-root .og-card{transform:none!important}}
