/* Doraemon Store — LIVE TOOLS (modul terpisah, tidak memakai/menimpa style.css toko) */
:root{--bg:#06101d;--panel:#0b2035;--panel2:#0e2942;--line:#1d496b;--text:#f5fbff;--muted:#9db6cc;--blue:#11a9ff;--cyan:#62dcff;--green:#19d878;--yellow:#ffd32e;--red:#ff4d5e;--neon:#35d7ff}
*{box-sizing:border-box}html,body{margin:0}
body.lv{background:radial-gradient(1000px 500px at 80% -10%,#0b3a63 0,transparent 60%),var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
.lv a{color:var(--cyan)}
.lv-wrap{max-width:1100px;margin:0 auto;padding:0 16px 40px}
.lv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 0}
.lv-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:900}
.lv-brand img{width:38px;height:38px;border-radius:10px;object-fit:cover}
.lv-brand small{display:block;color:var(--muted);font-weight:600;font-size:11px}
.lv-nav{display:flex;gap:8px;flex-wrap:wrap}
.lv-nav a,.lv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:800;font-size:13px;text-decoration:none;cursor:pointer;font-family:inherit}
.lv-btn.primary{background:linear-gradient(135deg,#0a8de8,#11a9ff);border-color:transparent;color:#03111f}
.lv-btn.green{background:linear-gradient(135deg,#12b862,#19d878);border-color:transparent;color:#032013}
.lv-btn.red{background:#3a121a;border-color:#7a2230;color:#ff9aa5}
.lv-btn:disabled{opacity:.45;cursor:not-allowed}
.lv-hero{text-align:center;padding:34px 0 22px}
.lv-hero .tag{display:inline-block;padding:5px 12px;border-radius:99px;background:#ff4d5e22;border:1px solid #ff4d5e66;color:#ff9aa5;font-size:12px;font-weight:900;letter-spacing:.08em}
.lv-hero h1{margin:14px 0 6px;font-size:clamp(30px,7vw,54px);line-height:1.05;letter-spacing:-.02em}
.lv-hero h1 span{background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.lv-hero p{margin:0;color:var(--muted);font-size:clamp(14px,3.6vw,17px)}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:22px}
.lv-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.lv-card h3{margin:6px 0 4px;font-size:15px}.lv-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.lv-card .ic{font-size:26px}
.lv-badge{display:inline-block;margin-top:10px;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:900;border:1px solid var(--line);color:var(--muted)}
.lv-badge.on{background:#19d87822;border-color:#19d87877;color:var(--green)}
.lv-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:14px}
.lv-box h2{margin:0 0 10px;font-size:17px}
.lv-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lv-in{min-height:42px;border-radius:10px;border:1px solid var(--line);background:#06111e;color:var(--text);padding:0 12px;font:inherit;font-size:14px;min-width:0;flex:1 1 150px}
.lv-msg{margin-top:8px;font-size:13px;min-height:18px}.lv-msg.err{color:#ff8792}.lv-msg.ok{color:var(--green)}
.lv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lv table{width:100%;border-collapse:collapse;font-size:13px}.lv th,.lv td{padding:8px 10px;border-bottom:1px solid #16344d;text-align:left;white-space:nowrap}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:900;background:#16344d}
.pill.live{background:#19d87833;color:var(--green)}.pill.paused{background:#ffd32e33;color:var(--yellow)}.pill.finished,.pill.cancelled{background:#ff4d5e33;color:#ff9aa5}
.lv-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.lv-two{grid-template-columns:1fr}.lv-btn{min-height:46px}}
.lv-note{color:var(--muted);font-size:12px;line-height:1.5}
/* ===== OVERLAY ===== */
body.ov{background:transparent;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow:hidden;height:100vh;width:100vw}
body.ov.page{background:var(--bg)}
.ov-stage{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:2.5vmin}
.ov-panel{width:100%;max-width:100%;background:linear-gradient(180deg,#071a2de6,#06101de6);border:2px solid #35d7ff77;border-radius:3vmin;padding:3vmin;box-shadow:0 0 4vmin #11a9ff33;display:flex;flex-direction:column;gap:2vmin;max-height:100%;overflow:hidden}
body.ov[data-ratio="9x16"] .ov-panel{max-width:min(100vw,56.25vh)}
body.ov[data-ratio="1x1"] .ov-panel{max-width:100vmin}
.ov-title{font-weight:900;font-size:4.2vmin;letter-spacing:.04em;text-align:center}
body.ov[data-ratio="9x16"] .ov-title{font-size:min(7vw,4vh)}
.ov-sub{text-align:center;color:#9db6cc;font-size:2.4vmin;font-weight:700}
.ov-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5vmin}
.ov-stat{background:#0b2035;border:1px solid #1d496b;border-radius:2vmin;padding:1.6vmin;text-align:center;min-width:0}
.ov-stat small{display:block;color:#9db6cc;font-size:1.8vmin;font-weight:800}.ov-stat b{font-size:3.4vmin;color:var(--cyan);overflow-wrap:anywhere}
.ov-list{display:flex;flex-direction:column;gap:1.2vmin;overflow:hidden}
.ov-item{display:flex;align-items:center;gap:2vmin;background:#0b2035;border:1px solid #1d496b;border-radius:2vmin;padding:1.4vmin 2vmin;transition:transform .5s ease,background .4s}
.ov-item.r1{border-color:#ffd32e;background:linear-gradient(90deg,#3a2f06,#0b2035)}
.ov-item.r2{border-color:#cfd8e3}.ov-item.r3{border-color:#d08a4b}
.ov-item.up{animation:ovUp .8s ease}
@keyframes ovUp{0%{transform:scale(1)}40%{transform:scale(1.04);background:#0d4a2e}100%{transform:scale(1)}}
.ov-rank{font-size:3.4vmin;min-width:5vmin;text-align:center;font-weight:900}
.ov-name{flex:1;min-width:0;font-weight:800;font-size:2.9vmin;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-coin{font-weight:900;color:var(--yellow);font-size:2.8vmin;white-space:nowrap}
.ov-alert{position:fixed;left:50%;top:6vmin;transform:translate(-50%,-30vh);opacity:0;background:linear-gradient(135deg,#0a8de8,#6a4dff);border:2px solid #fff6;border-radius:3vmin;padding:2.5vmin 5vmin;text-align:center;box-shadow:0 0 6vmin #35d7ffaa;max-width:94vw;z-index:5}
.ov-alert.show{animation:ovAlert 4s ease forwards}
.ov-alert small{display:block;font-size:2.2vmin;font-weight:900;letter-spacing:.1em}.ov-alert b{display:block;font-size:4vmin;margin:.6vmin 0;overflow-wrap:anywhere}.ov-alert span{font-size:3.6vmin;font-weight:900;color:var(--yellow)}
@keyframes ovAlert{0%{opacity:0;transform:translate(-50%,-30vh) scale(.8)}12%{opacity:1;transform:translate(-50%,0) scale(1.06)}20%{transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-20vh)}}
.ov-state{position:fixed;inset:0;display:grid;place-items:center;text-align:center;font-weight:900;font-size:5vmin;letter-spacing:.06em}
.ov-conn{position:fixed;right:1.5vmin;bottom:1.5vmin;background:#ff4d5e;color:#fff;font-weight:900;font-size:1.9vmin;padding:.8vmin 1.6vmin;border-radius:99px;display:none;z-index:9}
@media(prefers-reduced-motion:reduce){.ov-item.up,.ov-alert.show{animation:none}.ov-alert.show{opacity:1;transform:translate(-50%,0)}}
/* ===== V184 TIMER / COUNTDOWN ===== */
.ov-timer{text-align:center;border:1px solid #1d496b;background:#0b2035;border-radius:2vmin;padding:1.2vmin 2vmin;transition:border-color .3s,background .3s}
.ov-timer small{display:block;color:#9db6cc;font-size:1.9vmin;font-weight:800;letter-spacing:.08em}
.ov-timer b{display:block;font-size:6.4vmin;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#fff}
body.ov[data-ratio="9x16"] .ov-timer b{font-size:min(14vw,8vh)}
.ov-timer.warn{border-color:#ff4d5e;background:#3a121a}
.ov-timer.warn b{color:#ff8792;animation:ovWarn 1s ease-in-out infinite}
.ov-timer.paused b{color:#ffd32e}
@keyframes ovWarn{0%,100%{opacity:1}50%{opacity:.55}}
.ov-banner{text-align:center;font-weight:900;font-size:3.6vmin;letter-spacing:.06em;color:#ffd32e;background:linear-gradient(90deg,#3a2f06,#1c1703);border:1px solid #ffd32e88;border-radius:2vmin;padding:1.4vmin}
body.ov[data-ratio="9x16"] .ov-banner{font-size:min(6vw,3.4vh)}
.ov-cd{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin;background:#06101df2;z-index:6;text-align:center}
.ov-cd small{font-size:3.4vmin;font-weight:900;letter-spacing:.1em;color:#9db6cc}
.ov-cd b{font-size:30vmin;line-height:1;font-weight:900;color:#62dcff;font-variant-numeric:tabular-nums;text-shadow:0 0 6vmin #11a9ff88;animation:ovCd 1s ease-out infinite}
body.ov[data-ratio="9x16"] .ov-cd small{font-size:min(5.2vw,3vh)}
@keyframes ovCd{0%{transform:scale(1.25);opacity:.4}30%{transform:scale(1);opacity:1}100%{transform:scale(.96);opacity:1}}
/* admin: info event */
.lv-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:8px 0}
.lv-info div{background:#06111e;border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0}
.lv-info small{display:block;color:var(--muted);font-size:11px;font-weight:800}
.lv-info b{display:block;font-size:15px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.lv-info b.warn{color:#ff8792}
@media(prefers-reduced-motion:reduce){.ov-cd b,.ov-timer.warn b{animation:none}}

.lv-fld{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;min-width:0;color:var(--muted);font-size:11px;font-weight:800}
.lv-fld .lv-in{flex:none;width:100%}

/* ===== WINNER SCREEN (event FINISHED) — LIVE tidak terpengaruh: semua aturan di bawah dibatasi body.fin / .ov-win ===== */
.ov-win{display:none;flex-direction:column;align-items:center;gap:1.8vmin;text-align:center;min-width:0;width:100%}
.ov-confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4}
.ov-confetti i{position:absolute;top:-4vmin;left:var(--x);width:1.3vmin;height:2.3vmin;background:var(--c);border-radius:.3vmin;opacity:0;transform:rotate(var(--r));animation:ovCf 4s linear var(--d) 2 both}
@keyframes ovCf{0%{opacity:0;transform:translateY(0) rotate(var(--r))}8%{opacity:.95}100%{opacity:.9;transform:translateY(108vh) rotate(calc(var(--r) + 560deg))}}
body.fin #title,body.fin #timer,body.fin #list,body.fin #dur{display:none!important}
body.fin .ov-win{display:flex}
body.fin .ov-stage{align-items:center}
body.fin #sub{font-size:2.2vmin;letter-spacing:.14em;text-transform:uppercase}
.ov-win-flag{font-weight:900;font-size:3.4vmin;letter-spacing:.1em;color:#ffd32e}
.ov-win-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.2vmin;padding:3.2vmin 2.4vmin;border-radius:3vmin;border:2px solid #ffd32e99;background:radial-gradient(120% 90% at 50% 0,#3d3107 0,#0b2035 72%);box-shadow:0 0 5vmin #ffd32e33,inset 0 0 4vmin #ffd32e14;min-width:0}
.ov-win-trophy{font-size:13vmin;line-height:1;filter:drop-shadow(0 0 2.4vmin #ffd32eaa)}
.ov-win-label{font-weight:900;font-size:2.9vmin;letter-spacing:.24em;color:#ffd32e}
.ov-win-medal{font-size:6.4vmin;line-height:1}
.ov-win-name{max-width:100%;font-weight:900;font-size:11vmin;line-height:1.08;color:#fff;overflow-wrap:anywhere;word-break:break-word;text-shadow:0 0 3vmin #11a9ff55}
.ov-win-name.len-m{font-size:7.6vmin}.ov-win-name.len-l{font-size:5.2vmin}
.ov-win-coin{font-weight:900;font-size:7.2vmin;line-height:1.1;color:#ffd32e;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ov-win.none .ov-win-medal,.ov-win.none .ov-win-name,.ov-win.none .ov-win-coin{display:none}
.ov-win.none .ov-win-label{font-size:4.2vmin;letter-spacing:.1em;color:#fff}
.ov-win.none .ov-win-trophy{font-size:11vmin;filter:none}
body.fin .ov-stats{gap:1vmin;opacity:.92}
body.fin .ov-stat{padding:.9vmin}
body.fin .ov-stat small{font-size:1.5vmin}
body.fin .ov-stat b{font-size:2.5vmin;color:#9db6cc}
/* portrait 9:16: lebar panel = min(100vw,56.25vh) -> ukuran font mengikuti lebar panel, bukan vmin */
body.ov[data-ratio="9x16"] .ov-win-flag{font-size:min(5.4vw,3.2vh)}
body.ov[data-ratio="9x16"] .ov-win-trophy{font-size:min(22vw,13vh)}
body.ov[data-ratio="9x16"] .ov-win-label{font-size:min(4.6vw,2.6vh)}
body.ov[data-ratio="9x16"] .ov-win-medal{font-size:min(11vw,6.4vh)}
body.ov[data-ratio="9x16"] .ov-win-name{font-size:min(15vw,8.4vh)}
body.ov[data-ratio="9x16"] .ov-win-name.len-m{font-size:min(10vw,5.6vh)}
body.ov[data-ratio="9x16"] .ov-win-name.len-l{font-size:min(7vw,4vh)}
body.ov[data-ratio="9x16"] .ov-win-coin{font-size:min(11vw,6.2vh)}
body.ov[data-ratio="9x16"].fin #sub{font-size:min(3.6vw,2vh)}
body.ov[data-ratio="9x16"].fin .ov-stat small{font-size:min(2.6vw,1.5vh)}
body.ov[data-ratio="9x16"].fin .ov-stat b{font-size:min(4.2vw,2.4vh)}
body.ov[data-ratio="9x16"] .ov-win.none .ov-win-label{font-size:min(6vw,3.4vh)}
body.ov[data-ratio="9x16"] .ov-win.none .ov-win-trophy{font-size:min(18vw,10vh)}
/* animasi berurutan +-2.8 dtk, hanya saat overlay MELIHAT transisi ke FINISHED */
@keyframes wFade{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes wPop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.16)}100%{opacity:1;transform:scale(1)}}
@keyframes wName{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes wUp{from{opacity:0;transform:translateY(2vmin)}to{opacity:1;transform:none}}
@keyframes wGlow{0%,100%{filter:drop-shadow(0 0 2vmin #ffd32e88)}50%{filter:drop-shadow(0 0 4.2vmin #ffd32ed0)}}
.ov-win.celebrate .ov-win-flag{animation:wFade .6s ease both}
.ov-win.celebrate .ov-win-card{animation:wFade .6s ease .3s both}
.ov-win.celebrate .ov-win-trophy{animation:wPop .7s cubic-bezier(.2,1.4,.4,1) .6s both,wGlow 2.6s ease-in-out 1.4s 2}
.ov-win.celebrate .ov-win-label{animation:wUp .5s ease .9s both}
.ov-win.celebrate .ov-win-medal{animation:wPop .6s cubic-bezier(.2,1.4,.4,1) 1.1s both}
.ov-win.celebrate .ov-win-name{animation:wName .7s ease 1.5s both}
.ov-win.celebrate .ov-win-coin{animation:wUp .6s ease 2.1s both}
body.fin .ov-win.celebrate ~ .ov-stats{animation:wUp .6s ease 2.5s both}
@media(prefers-reduced-motion:reduce){.ov-win.celebrate,.ov-win.celebrate *,body.fin .ov-win.celebrate ~ .ov-stats{animation:none!important}}

/* ===== PHASE 2: GIVEAWAY / SPIN WHEEL / MYSTERY BOX (overlay). Dibatasi body.mm (mode non-leaderboard) -> Leaderboard tidak terpengaruh. ===== */
body.ov{--u:1vmin}
body.ov[data-ratio="9x16"]{--u:min(1vw,.5625vh)}   /* 1u = 1% lebar panel */
.ov-mode{display:none;flex-direction:column;align-items:center;gap:calc(var(--u)*2);width:100%;min-width:0;position:relative}
body.mm .ov-mode{display:flex}
body.mm .ov-stats,body.mm #list,body.mm #dur,body.mm #title{display:none!important}
body.mm #sub{font-size:calc(var(--u)*3.2);letter-spacing:.12em;text-transform:uppercase}
body.mm .ov-stage{align-items:center}
.ov-mode .ov-win{display:flex}
/* --- Giveaway --- */
.gv{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2.4);text-align:center;width:100%;padding:calc(var(--u)*2) 0}
.gv-title{font-weight:900;font-size:calc(var(--u)*7);letter-spacing:.06em}
.gv-prize{display:flex;flex-direction:column;gap:calc(var(--u)*.6);padding:calc(var(--u)*2.4) calc(var(--u)*4);border:2px solid #ffd32e88;border-radius:calc(var(--u)*3);background:radial-gradient(120% 90% at 50% 0,#3d3107 0,#0b2035 75%);max-width:100%}
.gv-prize small{color:#ffd32e;font-weight:900;letter-spacing:.2em;font-size:calc(var(--u)*3)}
.gv-prize b{font-size:calc(var(--u)*7.5);font-weight:900;color:#fff;overflow-wrap:anywhere}
.gv-status{font-weight:900;font-size:calc(var(--u)*7);letter-spacing:.05em;color:#9db6cc;padding:calc(var(--u)*1.6) calc(var(--u)*5);border-radius:99px;border:2px solid #1d496b;background:#0b2035}
.gv-status.open{color:#06101d;background:linear-gradient(135deg,#12b862,#19d878);border-color:transparent;box-shadow:0 0 calc(var(--u)*5) #19d87866;animation:gvPulse 1.6s ease-in-out infinite}
@keyframes gvPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.gv-cd{display:flex;flex-direction:column;align-items:center}
.gv-cd small{color:#9db6cc;font-weight:800;letter-spacing:.14em;font-size:calc(var(--u)*3)}
.gv-cd b{font-size:calc(var(--u)*14);line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.gv-cd b.warn{color:#ff8792;animation:ovWarn 1s ease-in-out infinite}
.gv-sub{font-weight:800;color:#9db6cc;font-size:calc(var(--u)*4);letter-spacing:.06em}
.gv-sub b{color:#62dcff;font-size:calc(var(--u)*6)}
.gv-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2);justify-content:center;max-width:100%}
.gv-chip{background:#0b2035;border:1px solid #1d496b;border-radius:99px;padding:calc(var(--u)*.8) calc(var(--u)*2.4);font-weight:800;font-size:calc(var(--u)*3.2);color:#fff}
.gv-drawing{font-weight:900;font-size:calc(var(--u)*7);color:#ffd32e;letter-spacing:.08em}
.gv-count b{display:block;font-size:calc(var(--u)*34);line-height:1;font-weight:900;color:#62dcff;text-shadow:0 0 calc(var(--u)*6) #11a9ff88;animation:ovCd 1s ease-out infinite}
.gv-prize-line{font-size:calc(var(--u)*6)!important;color:#ffd32e}
.gv-prize-s{font-weight:900;font-size:calc(var(--u)*4.4);overflow-wrap:anywhere}
.ov-win.celebrate .gv-prize-line{animation:wUp .6s ease 2.1s both}
.gv-multi{gap:calc(var(--u)*1.6)}
.gv-trophy-s{font-size:calc(var(--u)*13)}
.gv-winners{display:flex;flex-direction:column;gap:calc(var(--u)*1.4);width:100%;max-height:calc(var(--u)*92);overflow:hidden}
.gv-w{display:flex;align-items:center;gap:calc(var(--u)*3);background:#0b2035;border:1px solid #ffd32e77;border-radius:calc(var(--u)*2.4);padding:calc(var(--u)*1.6) calc(var(--u)*3);min-width:0}
.gv-rank{flex:0 0 auto;width:calc(var(--u)*8);height:calc(var(--u)*8);display:grid;place-items:center;border-radius:50%;background:#ffd32e;color:#06101d;font-weight:900;font-size:calc(var(--u)*5)}
.gv-wname{font-weight:900;font-size:calc(var(--u)*6.4);color:#fff;overflow-wrap:anywhere;min-width:0;text-align:left}
.gv-winners.anim .gv-w{animation:wName .6s ease both;animation-delay:calc(1.4s + var(--i)*.45s)}
/* --- Spin Wheel --- */
.sp{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.8);width:100%;text-align:center}
.sp-title{font-weight:900;font-size:calc(var(--u)*6.4);letter-spacing:.06em}
.sp-meta{color:#9db6cc;font-weight:800;font-size:calc(var(--u)*3.2);letter-spacing:.1em}
.sp-stage{position:relative;width:calc(var(--u)*80);max-width:100%}
body.ov[data-ratio="16x9"] .sp-stage{width:calc(var(--u)*56)}
.sp-rot{width:100%;aspect-ratio:1;will-change:transform;filter:drop-shadow(0 0 calc(var(--u)*3) #11a9ff55)}
.sp-svg{width:100%;height:100%;display:block}
.sp-pointer{position:absolute;left:50%;top:calc(var(--u)*-2.4);transform:translateX(-50%);width:0;height:0;border-left:calc(var(--u)*4) solid transparent;border-right:calc(var(--u)*4) solid transparent;border-top:calc(var(--u)*7) solid #ffd32e;z-index:2;filter:drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*.8) #000a)}
.sp-win{stroke:#fff;stroke-width:6;animation:spWin 1s ease-in-out infinite}
@keyframes spWin{0%,100%{opacity:1}50%{opacity:.6}}
.sp-result{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*2) calc(var(--u)*4);border:2px solid #ffd32e99;border-radius:calc(var(--u)*3);background:radial-gradient(120% 90% at 50% 0,#3d3107 0,#0b2035 75%);max-width:100%;min-width:calc(var(--u)*50)}
.sp-result small{color:#ffd32e;font-weight:900;letter-spacing:.2em;font-size:calc(var(--u)*3)}
.sp-result b{font-size:calc(var(--u)*9);font-weight:900;color:#fff;overflow-wrap:anywhere;line-height:1.1}
.sp-result b.len{font-size:calc(var(--u)*6)}
.sp-result.idle,.sp-result.spinning{border-color:#1d496b;background:#0b2035}
.sp-result.idle small,.sp-result.spinning small{color:#9db6cc}
.sp-result.idle b,.sp-result.spinning b{font-size:calc(var(--u)*5)}
.sp-hist{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2);justify-content:center;max-width:100%}
.sp-h{display:inline-flex;align-items:center;gap:calc(var(--u)*1.2);background:#0b2035;border:1px solid #1d496b;border-radius:99px;padding:calc(var(--u)*.6) calc(var(--u)*2.2);font-weight:800;font-size:calc(var(--u)*3)}
.sp-h i{font-style:normal;background:#ffd32e;color:#06101d;border-radius:50%;width:calc(var(--u)*4);height:calc(var(--u)*4);display:grid;place-items:center;font-size:calc(var(--u)*2.6);font-weight:900}
/* --- Mystery Box --- */
.mb{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);width:100%;text-align:center;position:relative}
.mb-title{font-weight:900;font-size:calc(var(--u)*6.4);letter-spacing:.06em}
.mb-hint{color:#9db6cc;font-weight:800;font-size:calc(var(--u)*3.2);letter-spacing:.1em}
.mb-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:calc(var(--u)*1.6);width:100%}
.mb-box{perspective:calc(var(--u)*120);aspect-ratio:1/1;min-width:0}
.mb-in{position:relative;width:100%;height:100%;transition:transform .9s cubic-bezier(.3,1.2,.4,1);transform-style:preserve-3d}
.mb-box.opened .mb-in{transform:rotateY(180deg)}
.mb-box.flip .mb-in{animation:mbFlip 1s cubic-bezier(.3,1.2,.4,1) both}
@keyframes mbFlip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.mb-front,.mb-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.4);border-radius:calc(var(--u)*2.2);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;padding:calc(var(--u)*.8)}
.mb-front{background:linear-gradient(160deg,#0f3a63,#0b2035);border:2px solid #35d7ff88;box-shadow:0 0 calc(var(--u)*2.5) #11a9ff33}
.mb-front span{font-size:calc(var(--u)*7)}
.mb-front b{font-size:calc(var(--u)*5);font-weight:900;color:#62dcff}
.mb-back{transform:rotateY(180deg);background:radial-gradient(120% 90% at 50% 0,#3d3107 0,#0b2035 80%);border:2px solid #ffd32e99}
.mb-back small{color:#ffd32e;font-weight:900;font-size:calc(var(--u)*2.2);letter-spacing:.1em}
.mb-back b{font-size:calc(var(--u)*3.4);font-weight:900;color:#fff;line-height:1.1;overflow-wrap:anywhere;max-height:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mb-box.last .mb-back{box-shadow:0 0 calc(var(--u)*3) #ffd32e99}
.mb-last{padding:calc(var(--u)*1.6) calc(var(--u)*3);border:1px solid #ffd32e77;border-radius:calc(var(--u)*2.4);background:#0b2035;max-width:100%}
.mb-last small{display:block;color:#ffd32e;font-weight:900;letter-spacing:.08em;font-size:calc(var(--u)*2.6)}
.mb-last b{font-size:calc(var(--u)*5);font-weight:900;overflow-wrap:anywhere}
.mb-reveal{position:absolute;inset:calc(var(--u)*-3);display:grid;place-items:center;background:#06101df2;border-radius:calc(var(--u)*3);z-index:3;animation:wFade .5s ease both}
.mb-reveal-card{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*5);border:3px solid #ffd32e;border-radius:calc(var(--u)*4);background:radial-gradient(120% 90% at 50% 0,#4a3a08 0,#0b2035 75%);box-shadow:0 0 calc(var(--u)*8) #ffd32e55;max-width:92%;animation:wPop .7s cubic-bezier(.2,1.4,.4,1) both}
.mb-reveal-card small{color:#ffd32e;font-weight:900;letter-spacing:.14em;font-size:calc(var(--u)*3.6)}
.mb-reveal-card b{font-size:calc(var(--u)*13);line-height:1.08;font-weight:900;color:#fff;overflow-wrap:anywhere;text-shadow:0 0 calc(var(--u)*4) #11a9ff66}
.mb-reveal-card b.len{font-size:calc(var(--u)*8)}
@media(prefers-reduced-motion:reduce){.gv-status.open,.gv-count b,.sp-win,.mb-box.flip .mb-in,.mb-reveal,.mb-reveal-card,.gv-winners.anim .gv-w{animation:none!important}.sp-rot{transition:none!important}}

/* ===== PHASE 2 admin panel ===== */
.mp-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.mp-box{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);font-weight:800;min-width:0}
.mp-box.opened span{color:var(--green)}
.mp-items{display:flex;flex-direction:column;gap:8px}
.mp-item{display:flex;gap:6px;flex-wrap:wrap}.mp-item input{flex:1 1 140px}
#modePanel .lv-row .lv-btn{min-height:46px}
#modePanel p{margin:8px 0;overflow-wrap:anywhere}
#modePanel .pill{margin:2px 2px 2px 0}

/* grid Mystery Box padat: font mengikuti jumlah box, tidak patah di tengah kata */
.mb-back b{overflow-wrap:break-word;word-break:normal;hyphens:none}
.mb-grid.n6 .mb-back b{font-size:calc(var(--u)*4.2)}
.mb-grid.n12 .mb-back b{font-size:calc(var(--u)*3.2)}
.mb-grid.n24 .mb-back b{font-size:calc(var(--u)*2.3);-webkit-line-clamp:2}
.mb-grid.n24 .mb-back small{font-size:calc(var(--u)*1.7)}
.mb-grid.n24 .mb-front span{font-size:calc(var(--u)*5)}
.mb-grid.n24 .mb-front b{font-size:calc(var(--u)*3.6)}

/* ===== PHASE 2: layar lebar (16:9) & kotak (1:1) — tinggi terbatas, jadi satuan ukuran diperkecil dan elemen dibatasi lebarnya ===== */
body.ov[data-ratio="16x9"]{--u:.5vmin}
body.ov[data-ratio="1x1"]{--u:.58vmin}
body.ov[data-ratio="16x9"] .sp-stage{width:calc(var(--u)*104)}
body.ov[data-ratio="1x1"] .sp-stage{width:calc(var(--u)*86)}
body.ov[data-ratio="16x9"] .mb-grid,body.ov[data-ratio="1x1"] .mb-grid{max-width:calc(var(--u)*118);margin:0 auto}
body.ov[data-ratio="16x9"] .mb-grid.n24,body.ov[data-ratio="1x1"] .mb-grid.n24{max-width:calc(var(--u)*150)}
body.ov[data-ratio="16x9"] .gv-winners,body.ov[data-ratio="1x1"] .gv-winners{max-width:calc(var(--u)*100);margin:0 auto}
body.mm #sub{font-size:max(calc(var(--u)*3.2),11px)}
body.ov[data-ratio="16x9"] .mb-back small,body.ov[data-ratio="1x1"] .mb-back small{font-size:max(calc(var(--u)*2.2),8px)}

.sp-stage{margin-top:calc(var(--u)*4)}

.mp-box .lv-in{flex:none;width:100%}
#modePanel table .lv-btn{min-height:34px;padding:0 10px;font-size:12px}
#modePanel td{white-space:nowrap}