.live-demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,26px);align-items:start}
@media(max-width:1000px){.live-demo-grid{grid-template-columns:1fr;justify-items:center}}
.ld-card{position:relative;z-index:1;width:100%;max-width:520px;margin:0 auto;padding:clamp(12px,1.2vw,18px);border-radius:20px;background:linear-gradient(180deg,var(--surface,rgba(255,255,255,.05)),color-mix(in srgb,var(--surface,rgba(255,255,255,.04)) 70%,transparent));border:1px solid var(--border,rgba(255,255,255,.1));box-shadow:0 10px 28px var(--theme-shadow,rgba(0,0,0,.35))}
.ld-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.ld-live{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--theme-muted,var(--muted,#9A9AA6))}
.ld-live i{width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 8px rgba(229,72,77,.8);animation:ldPulse 1.6s ease infinite}
@keyframes ldPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ld-score{font:600 .88rem Inter,system-ui,sans-serif;color:var(--theme-muted,var(--muted,#9A9AA6));white-space:nowrap}
.ld-score b{color:var(--theme-ink,var(--text,#EDEDF2));font-size:1.06rem;margin-left:4px}
.ld-board{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;border:1px solid var(--theme-line,rgba(255,255,255,.12));overflow:hidden}
.ld-grid{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ld-grid path{stroke:var(--theme-line,rgba(255,255,255,.12));stroke-width:1;fill:none}
.ld-ball{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 40%),radial-gradient(circle at 50% 55%,var(--c),color-mix(in srgb,var(--c) 45%,#000));box-shadow:0 2px 6px rgba(0,0,0,.35);transition:left .09s linear,top .09s linear;will-change:left,top}

.ld-ball.ld-rainbow{background:linear-gradient(180deg,#e6194B 0 16.66%,#f58231 16.66% 33.33%,#ffe119 33.33% 50%,#3cb44b 50% 66.66%,#4363d8 66.66% 83.33%,#911eb4 83.33% 100%)}
.ld-ball.ld-bomb{background:radial-gradient(circle at 50% 50%,#ffdc78 0 16%,#ff8228 16% 28%,#c85014 28% 40%,#782808 40% 52%,#24242c 52% 100%)}
.ld-ball.ld-lightning{background:radial-gradient(circle at 50% 50%,#fffcdc 0 50%,#ffe878 50% 68%,#ffe047 68% 85%,#ffd60a 85% 100%)}
.ld-ball.ld-bonus::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 40%)}
.ld-bolt{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ld-ball.pop{animation:ldPop .32s ease}
@keyframes ldPop{0%{transform:scale(.15)}70%{transform:scale(1.14)}100%{transform:scale(1)}}
.ld-ball.sel{animation:ldSel .45s ease infinite alternate}
@keyframes ldSel{from{transform:scale(1)}to{transform:scale(1.22)}}
.ld-ball.clear{animation:ldClear .45s ease forwards}
@keyframes ldClear{to{transform:scale(1.8);opacity:0}}

.ld-fx{position:absolute;pointer-events:none;border-radius:10px;z-index:2;animation:ldFx .6s ease forwards}
.ld-fx.boom{background:radial-gradient(circle,#ffdc78 0 30%,#ff8228 60%,rgba(255,130,40,0) 78%)}
.ld-fx.zap{background:radial-gradient(circle,#fffcdc 0 35%,#ffd60a 65%,rgba(255,214,10,0) 80%)}
@keyframes ldFx{0%{opacity:0;transform:scale(.35)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
.ld-float{position:absolute;z-index:3;font:800 .98rem Inter,system-ui,sans-serif;color:var(--theme-accent,#ffb64a);text-shadow:0 2px 6px rgba(0,0,0,.45);transform:translate(-50%,-50%);animation:ldFloat 1s ease forwards;pointer-events:none}
@keyframes ldFloat{to{transform:translate(-50%,-190%);opacity:0}}
.ld-mode{margin:10px 0 0;font-size:.8rem;color:var(--theme-muted,var(--muted,#9A9AA6));line-height:1.55;text-align:center}
.ld-mode b{color:var(--theme-ink,var(--text,#EDEDF2))}
.ld-cap{margin:20px auto 0;max-width:760px;font-size:.86rem;color:var(--theme-muted,var(--muted,#9A9AA6));line-height:1.55;text-align:center;position:relative;z-index:1}
.ld-cap a{color:var(--theme-accent,#ffb64a);font-weight:600;text-decoration:none}
.ld-cap a:hover{text-decoration:underline}