*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:radial-gradient(circle at top,#1b2a4a,#0a0f1e 70%);color:#f3f3f3;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 24px;background:rgba(0,0,0,.45);border-bottom:2px solid #d4af37;position:sticky;top:0;z-index:10}
.logo{font-size:1.5rem;font-weight:bold;color:#d4af37}
nav{display:flex;gap:6px;flex-wrap:wrap}
.nav-btn{background:transparent;border:1px solid transparent;color:#ddd;padding:8px 14px;border-radius:20px;cursor:pointer;font-size:1rem}
.nav-btn:hover,.nav-btn.active{border-color:#d4af37;color:#d4af37}
.wallet{display:flex;align-items:center;gap:8px;background:#111a2e;padding:6px 14px;border-radius:24px;border:1px solid #d4af37}
.wallet strong{color:#ffd700;font-size:1.2rem}
main{flex:1;padding:28px 20px;max-width:1100px;width:100%;margin:0 auto}
.view{display:none;animation:fade .3s}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
h2{color:#d4af37;margin-bottom:20px;text-align:center;font-size:2rem}
.hero{text-align:center;padding:40px 20px;background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(128,0,32,.2));border-radius:18px;margin-bottom:30px;border:1px solid rgba(212,175,55,.4)}
.hero h1{font-size:2.4rem;color:#ffd700;margin-bottom:12px}
.hero p{font-size:1.1rem;color:#ccc}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:30px}
.game-card{background:#131d33;border-radius:16px;padding:26px;text-align:center;border:1px solid #2a3a5e;cursor:pointer;transition:.25s}
.game-card:hover{transform:translateY(-6px);border-color:#d4af37;box-shadow:0 10px 30px rgba(212,175,55,.25)}
.game-card .icon{font-size:3.5rem;margin-bottom:10px}
.game-card h3{color:#ffd700;margin-bottom:8px}
.game-card p{color:#aaa;margin-bottom:16px;min-height:40px}
.stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.stats div{background:#131d33;padding:14px 24px;border-radius:12px;text-align:center;min-width:160px}
.stats span{display:block;color:#999;font-size:.9rem}
.stats strong{font-size:1.4rem;color:#ffd700}
#resetBtn{display:block;margin:0 auto}
.btn{background:#2a3a5e;color:#fff;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:bold;transition:.2s}
.btn:hover:not(:disabled){filter:brightness(1.2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.gold{background:linear-gradient(135deg,#ffd700,#b8860b);color:#1a1a1a}
.btn.big{padding:14px 40px;font-size:1.2rem}
.btn.small{padding:5px 10px;font-size:.8rem}
.btn.outline{background:transparent;border:1px solid #888;color:#aaa}
select,input{background:#0d1528;color:#fff;border:1px solid #d4af37;border-radius:8px;padding:8px;font-size:1rem;margin-inline-start:6px}
.msg{text-align:center;margin:14px 0;font-size:1.15rem;min-height:1.5em}
.msg.win{color:#4cff7a;font-weight:bold}
.msg.lose{color:#ff5c5c}
.controls{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:16px}
/* slots */
.slot-machine{max-width:560px;margin:0 auto;background:linear-gradient(#5a0d1c,#2b0610);border:4px solid #d4af37;border-radius:24px;padding:28px}
.reels{display:flex;justify-content:center;gap:14px}
.reel{width:120px;height:130px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:4rem;box-shadow:inset 0 0 18px rgba(0,0,0,.5)}
.reel.spinning{animation:blur .1s infinite}
@keyframes blur{0%{transform:translateY(-4px)}50%{transform:translateY(4px)}100%{transform:translateY(-4px)}}
.paytable{width:100%;margin-top:18px;border-collapse:collapse;font-size:.95rem}
.paytable th,.paytable td{padding:6px;border-bottom:1px solid rgba(212,175,55,.3);text-align:center}
.paytable th{color:#ffd700}
/* roulette */
.roulette-wrap{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.wheel-area{position:relative;text-align:center}
.pointer{color:#ffd700;font-size:2rem;line-height:1;margin-bottom:-6px;position:relative;z-index:2}
#wheel{border-radius:50%;border:6px solid #d4af37;box-shadow:0 0 30px rgba(212,175,55,.4)}
.result-ball{margin:14px auto 0;width:70px;height:70px;border-radius:50%;background:#222;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:bold;border:3px solid #d4af37}
.bet-panel{background:#131d33;padding:22px;border-radius:16px;max-width:380px;width:100%;display:flex;flex-direction:column;gap:12px}
.bet-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bet-opt{padding:10px;border-radius:8px;border:2px solid transparent;background:#2a3a5e;color:#fff;cursor:pointer;font-weight:bold}
.bet-opt.red{background:#b3001b}.bet-opt.black{background:#111}.bet-opt.green{background:#0a7d34}
.bet-opt.selected{border-color:#ffd700;box-shadow:0 0 10px #ffd700}
/* blackjack */
.table{background:radial-gradient(#0f6b3a,#063d20);border:8px solid #5a3a1a;border-radius:120px/60px;padding:30px 40px;max-width:800px;margin:0 auto}
.hand-area{margin-bottom:18px;text-align:center}
.hand-area h4{margin-bottom:8px;color:#ffd700}
.hand{display:flex;justify-content:center;gap:8px;min-height:110px;flex-wrap:wrap}
.card{width:72px;height:104px;background:#fff;color:#111;border-radius:8px;padding:6px;display:flex;flex-direction:column;justify-content:space-between;font-weight:bold;font-size:1.2rem;box-shadow:0 4px 10px rgba(0,0,0,.4);animation:deal .3s}
.card.red{color:#c00}
.card .mid{text-align:center;font-size:2rem}
.card .bot{align-self:flex-end;transform:rotate(180deg)}
.card.back{background:repeating-linear-gradient(45deg,#8b0000,#8b0000 6px,#b22222 6px,#b22222 12px);border:3px solid #fff}
@keyframes deal{from{transform:translateY(-30px) scale(.8);opacity:0}}
.toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;max-width:min(88vw,420px);text-align:center;transform:translateX(-50%) translateY(calc(100% + 120px));opacity:0;visibility:hidden;pointer-events:none;background:#ffd700;color:#111;padding:10px 20px;border-radius:24px;font-weight:bold;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .45s ease-in,opacity .45s ease-in,visibility 0s .45s;z-index:99}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;transition:transform .35s ease-out,opacity .35s ease-out}
footer{text-align:center;padding:16px;color:#777;font-size:.85rem;border-top:1px solid #222}
@media(max-width:600px){.reel{width:80px;height:90px;font-size:2.6rem}.table{border-radius:30px;padding:20px}.hero h1{font-size:1.7rem}}
/* video slots */
.vs-game{max-width:720px;margin:0 auto;background:linear-gradient(#24124a,#0d0820);border:4px solid #d4af37;border-radius:24px;padding:20px}
.vs-game{background:linear-gradient(rgba(10,6,25,.35),rgba(10,6,25,.75)),var(--vs-bg,none) center/cover,#140b2a;position:relative}
.vs-game[data-key=sweet]{border-color:#ff7ac8}
.vs-game[data-key=zeus]{border-color:#7fb4ff}
.vs-game[data-key=pharaoh]{border-color:#e6b450}
.vs-game[data-key=bass]{border-color:#3fd0c9}
.vs-game.free{box-shadow:0 0 0 3px #ffd700,0 0 40px rgba(255,215,0,.6)}
.vs-head h3{display:flex;align-items:center;justify-content:center;gap:10px}
.vs-head h3 img{width:48px;height:48px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 2px #ffd700}
.vs-lobby{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.vs-card{background:#131d33;border-radius:18px;overflow:hidden;border:2px solid #2a3a5e;cursor:pointer;transition:.25s;display:flex;flex-direction:column}
.vs-card:hover{transform:translateY(-6px);border-color:#ffd700;box-shadow:0 12px 34px rgba(255,215,0,.3)}
.vs-cover{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.vs-card-body{padding:14px;text-align:center;display:flex;flex-direction:column;gap:6px;flex:1}
.vs-card-body h3{color:#ffd700;font-size:1.3rem}
.vs-card-body small{color:#9fb3d9;letter-spacing:1px;text-transform:uppercase}
.vs-card-body p{color:#bbb;font-size:.9rem;flex:1}
.vs-sym{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));pointer-events:none}
.vs-ic{width:30px;height:30px;object-fit:contain;vertical-align:middle}
.vs-cell{position:relative}
.vs-fish{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#ffd700;font-size:clamp(.55rem,2.4vw,.8rem);padding:1px 6px;border-radius:8px;white-space:nowrap}
.vs-mult{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.vs-mult .vs-sym{position:absolute;inset:4%}
.vs-mult b{position:relative;font-size:clamp(.8rem,3.6vw,1.3rem)!important;color:#fff!important;text-shadow:0 0 4px #000,0 0 8px #ff2d87}
.vs-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.vs-head h3{color:#ffd700;font-size:1.5rem;flex:1;text-align:center}
.vs-status{text-align:center;color:#ffd700;font-weight:bold;min-height:1.4em;margin-bottom:8px}
.vs-grid{direction:ltr;display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:6px;background:rgba(0,0,0,.35);padding:10px;border-radius:14px}
.vs-cell{aspect-ratio:1;background:rgba(255,255,255,.14);backdrop-filter:blur(2px);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:clamp(1.4rem,6vw,2.6rem);transition:transform .2s,box-shadow .2s;overflow:hidden}
.vs-game[data-kind=lines] .vs-cell{font-size:clamp(1.8rem,8vw,3.2rem)}
.vs-grid.spinning .vs-cell{filter:blur(1.5px)}
.vs-cell.hit{background:rgba(255,215,0,.35);box-shadow:0 0 0 3px #ffd700,0 0 16px #ffd700;transform:scale(1.06)}
.vs-cell.mult{background:rgba(255,79,216,.35);box-shadow:0 0 0 3px #ff4fd8,0 0 18px #ff4fd8;transform:scale(1.1)}
.vs-cell.expand{background:rgba(255,152,0,.4);box-shadow:0 0 0 3px #ff9800}
.vs-mult{display:flex;flex-direction:column;align-items:center;line-height:1}
.vs-mult b{font-size:.45em;color:#b0006d}
.vs-info{margin-top:10px;background:rgba(0,0,0,.3);border-radius:12px;padding:10px}
.vs-info summary{cursor:pointer;color:#ffd700;font-weight:bold}
.vs-rules{margin:12px 20px 0;color:#ccc;line-height:1.7}
@media(max-width:600px){.vs-game{padding:10px;border-width:3px}.vs-grid{gap:4px;padding:6px}.vs-cell{border-radius:7px}}
.hidden{display:none!important}
.uname{color:#fff;font-weight:bold;margin-inline-end:6px}
.auth-screen{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at top,#1b2a4a,#0a0f1e 70%);display:flex;align-items:center;justify-content:center;padding:20px}
.auth-box{background:#131d33;border:2px solid #d4af37;border-radius:20px;padding:30px;width:100%;max-width:380px;text-align:center;display:flex;flex-direction:column;gap:14px}
.logo.big{font-size:2rem;margin-bottom:6px}
.tabs{display:flex;gap:6px}
.tab{flex:1;padding:10px;border:1px solid #2a3a5e;background:transparent;color:#ccc;border-radius:10px;cursor:pointer;font-size:1rem}
.tab.active{border-color:#d4af37;color:#ffd700;background:rgba(212,175,55,.1)}
#authForm{display:flex;flex-direction:column;gap:10px}
#authForm input{margin:0;padding:12px}
.hint{color:#aaa;font-size:.9rem}
.history{background:#131d33;border-radius:16px;padding:20px;margin-top:10px;overflow-x:auto}
.history h3{color:#ffd700;margin-bottom:10px}
.pos{color:#4cff7a}.neg{color:#ff5c5c}
/* ===== social platform ===== */
body.app{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
body.app .topbar{padding:10px 16px}
body.app .logo{font-size:1.25rem}
body.app main{padding:16px 12px}
.wallet{cursor:pointer}
.center{text-align:center}
.gold-t{color:#ffd700}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:rgba(8,12,26,.97);border-top:1px solid #d4af37;padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border:0;border-radius:0;font-size:.78rem;position:relative;color:#aaa}
.bottom-nav .nav-btn i{font-style:normal;font-size:1.35rem}
.bottom-nav .nav-btn.active{color:#ffd700;border:0;background:rgba(212,175,55,.08)}
.badge-n{background:#e0245e;color:#fff;border-radius:10px;padding:1px 7px;font-size:.72rem;font-weight:bold}
.bottom-nav .badge-n{position:absolute;top:4px;left:calc(50% - 22px)}
.back-games{margin-bottom:6px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.page-head h2{margin:0}
.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border-radius:50%;background:#2a3a5e;font-size:1.5rem;border:2px solid #3a4d78;overflow:visible}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar.m{border-color:#3b82f6}.avatar.f{border-color:#ec4899}
.avatar.sup{background:#0a7d34;border-color:#4cff7a}
.avatar.empty{background:rgba(255,255,255,.06);border:2px dashed #555;font-size:1.2rem}
.avatar.lg{width:72px;height:72px;font-size:2.4rem}
.avatar.xl{width:96px;height:96px;font-size:3.2rem}
.avatar .dot{position:absolute;bottom:1px;left:1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #0a0f1e}
.lv{display:inline-block;font-size:.72rem;font-weight:bold;padding:1px 7px;border-radius:10px;margin:0 3px;background:#374151;color:#ddd;vertical-align:middle}
.lv.t1{background:#1e6f5c;color:#fff}.lv.t2{background:#2563eb;color:#fff}.lv.t3{background:#9333ea;color:#fff}.lv.t4{background:linear-gradient(90deg,#ffd700,#ff8c00);color:#111}
.lv.c.t1,.lv.c.t2,.lv.c.t3{background:#be185d}
.chip{display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:10px;background:rgba(255,255,255,.08);margin:0 2px;color:#ccc}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:6px 0}
/* rooms list */
.room-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.room-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#1a2544,#131d33);border:1px solid #2a3a5e;border-radius:14px;padding:12px;cursor:pointer}
.room-card:hover{border-color:#d4af37}
.r-icon{font-size:2rem;width:56px;height:56px;min-width:56px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(212,175,55,.15)}
.r-body{flex:1;display:flex;flex-direction:column;min-width:0}
.r-body b{color:#ffd700}
.r-body small{color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-online{font-size:.85rem;white-space:nowrap}
/* room view */
body.in-room .bottom-nav{display:none}
body.in-room{padding-bottom:0}
body.in-room .topbar{display:none}
body.in-room main{padding:0;max-width:760px}
.room-view.active{display:flex;flex-direction:column;height:100vh;height:100dvh}
#room.room-view{background:radial-gradient(circle at top,#3b1a5a,#0a0f1e 75%)}
.room-top{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(212,175,55,.4)}
.room-title{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;cursor:pointer}
.room-title b{color:#ffd700}
.room-title small{color:#aaa;font-size:.78rem;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-status{text-align:center;font-size:.8rem;color:#bbb;padding:4px}
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;padding:10px 12px}
.seat{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative}
.seat .avatar{width:58px;height:58px;min-width:58px;font-size:1.9rem;transition:box-shadow .15s}
.seat b{font-size:.75rem;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ddd;font-weight:normal}
.seat.speaking .avatar{box-shadow:0 0 0 3px #4cff7a,0 0 16px #4cff7a}
.seat.muted .avatar::after{content:"🔇";position:absolute;bottom:-4px;right:-4px;font-size:.9rem}
.seat .crown{position:absolute;top:-10px;font-style:normal;font-size:1rem}
.listeners{grid-column:1/-1;text-align:center;font-size:.8rem;color:#aaa}
.chat-box{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.chat-box .line{background:rgba(0,0,0,.35);padding:6px 10px;border-radius:12px;align-self:flex-start;max-width:92%;word-break:break-word}
.chat-box .line .n{color:#7dd3fc;cursor:pointer}
.chat-box .gift-line{background:linear-gradient(90deg,rgba(212,175,55,.35),rgba(236,72,153,.25));border:1px solid #d4af37}
.chat-box .big{font-size:1.4rem}
.chat-box .sys{align-self:center;color:#aaa;font-size:.8rem;background:rgba(255,255,255,.05);padding:4px 10px;border-radius:10px;text-align:center}
.chat-input{display:flex;gap:6px;align-items:center;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(0,0,0,.5);border-top:1px solid #2a3a5e}
.chat-input input{flex:1;margin:0;border-radius:20px;padding:10px 14px;min-width:0}
.round{width:42px;height:42px;min-width:42px;border-radius:50%;border:1px solid #3a4d78;background:#1a2544;color:#fff;font-size:1.2rem;cursor:pointer}
.round.gold{background:linear-gradient(135deg,#ffd700,#b8860b);color:#111;border:0}
.gift-fx{position:fixed;inset:0;pointer-events:none;z-index:40;display:flex;align-items:center;justify-content:center}
.gift-fx .fx{position:absolute;display:flex;flex-direction:column;align-items:center;animation:giftpop 2.6s ease-out forwards}
.gift-fx .fx span{font-size:7rem;filter:drop-shadow(0 0 20px #ffd700)}
.gift-fx .fx small{color:#ffd700;font-size:2rem;font-weight:bold}
@keyframes giftpop{0%{transform:scale(.2);opacity:0}15%{transform:scale(1.2);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-160px) scale(.6);opacity:0}}
/* dm */
.chat-box.dm .bubble{max-width:80%;padding:8px 12px;border-radius:14px;background:#1f2b48;align-self:flex-start;word-break:break-word;white-space:pre-wrap}
.chat-box.dm .bubble.mine{align-self:flex-end;background:#6b4f0a}
.chat-box.dm .bubble b{display:block;color:#4cff7a;font-size:.8rem}
.chat-box.dm .bubble small{display:block;font-size:.68rem;color:#aaa;margin-top:2px}
#chat.room-view{background:#0d1426}
.thread{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #1f2b48;cursor:pointer}
.thread:hover{background:rgba(255,255,255,.03)}
.t-body{flex:1;min-width:0;display:flex;flex-direction:column}
.t-body small{color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-time{font-size:.72rem;color:#888}
.support-thread{background:rgba(10,125,52,.12);border:1px solid rgba(76,255,122,.3);border-radius:12px;margin-bottom:8px}
/* discover */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters input{flex:1;min-width:160px;margin:0}
.seg{display:flex;border:1px solid #d4af37;border-radius:10px;overflow:hidden}
.seg-btn{background:transparent;border:0;color:#ccc;padding:8px 14px;cursor:pointer}
.seg-btn.active{background:#d4af37;color:#111;font-weight:bold}
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.user-card{background:#131d33;border:1px solid #2a3a5e;border-radius:14px;padding:12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.user-card:hover{border-color:#d4af37}
.user-card small{color:#999;font-size:.75rem;max-height:2.6em;overflow:hidden}
/* profile */
.profile-card{background:linear-gradient(160deg,#2a1a4a,#131d33);border:1px solid #d4af37;border-radius:18px;padding:20px;text-align:center;margin-bottom:16px}
.profile-card h2{margin:8px 0 0;font-size:1.5rem}
.avatar-edit{position:relative;display:inline-block;cursor:pointer}
.avatar-edit i{position:absolute;bottom:0;right:0;font-style:normal;background:#d4af37;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.counts{display:flex;justify-content:center;gap:10px;margin:12px 0;flex-wrap:wrap}
.counts div{display:flex;flex-direction:column;min-width:70px}
.counts b{color:#ffd700;font-size:1.15rem}
.counts span{font-size:.75rem;color:#aaa}
.me-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.profile-mini{text-align:center}
.profile-mini p{margin:8px 0}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-box{position:relative;background:#131d33;border:2px solid #d4af37;border-radius:16px;padding:20px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto}
.modal-box h3{color:#ffd700;margin-bottom:12px;padding-left:28px}
.modal-box label{display:block;margin-bottom:10px}
.modal-box input,.modal-box select,.modal-box textarea{width:100%;margin:6px 0 0;background:#0d1528;color:#fff;border:1px solid #d4af37;border-radius:8px;padding:8px;font-size:1rem;font-family:inherit}
.modal-box label.chk input{width:auto}
.modal-x{position:absolute;top:10px;left:10px;background:transparent;border:0;color:#aaa;font-size:1.2rem;cursor:pointer}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end;margin-top:14px}
.btn.green{background:#0a7d34}.btn.red{background:#b3001b}
.gift-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px}
.gift{background:#0d1528;border:2px solid #2a3a5e;border-radius:10px;padding:6px 2px;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.gift i{font-style:normal;font-size:1.7rem}
.gift span{font-size:.7rem}.gift b{font-size:.68rem;color:#ffd700}
.gift.sel{border-color:#ffd700;box-shadow:0 0 10px #ffd700}
.icon-pick{display:flex;flex-wrap:wrap;gap:6px}
.ip{font-size:1.5rem;background:#0d1528;border:2px solid #2a3a5e;border-radius:10px;padding:4px 8px;cursor:pointer}
.ip.sel{border-color:#ffd700}
.price-box{text-align:center;font-size:1.3rem;font-weight:bold;color:#ffd700;background:rgba(212,175,55,.12);border:1px solid #d4af37;border-radius:12px;padding:12px;margin-bottom:12px}
.price-box small{display:block;font-size:.85rem;color:#ccc;font-weight:normal}
.agency{display:flex;align-items:center;gap:8px;background:#0d1528;border-radius:10px;padding:8px 10px;margin:6px 0}
.agency b{flex:1}.agency span{color:#aaa;font-size:.85rem}
.agency .btn{text-decoration:none}
label.chk{display:flex;align-items:center;gap:8px;justify-content:center;color:#ccc}
label.chk input{margin:0}
@media(max-width:420px){.seats .avatar{width:50px;height:50px;min-width:50px}.gift-grid{grid-template-columns:repeat(4,1fr)}}

/* ===== Boom Boom brand ===== */
body{background:radial-gradient(circle at top,#3a1060,#14081f 70%)}
.topbar{border-bottom-color:#ff2d87}
.logo{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#ffd700,#ff2d87);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-img{width:38px;height:38px;border-radius:50%}
.auth-logo{width:110px;height:110px;border-radius:50%;display:block;margin:0 auto 8px;box-shadow:0 0 30px rgba(255,45,135,.6)}
.tagline{text-align:center;color:#ffd700;font-weight:bold;letter-spacing:1px;margin:4px 0}
.lang-btn{padding:4px 10px}
.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.seg.wrap{flex-wrap:wrap}
.avatar.sup{background:#fff;border-color:#ff2d87;overflow:hidden;padding:0}
.avatar.sup img{width:100%;height:100%;object-fit:cover}
.support-thread.official{background:linear-gradient(90deg,rgba(255,45,135,.18),rgba(255,215,0,.1));border:1px solid rgba(255,45,135,.5)}
#supportPin{margin:0 0 12px}
.official-badge{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;padding:1px 7px;border-radius:10px;background:linear-gradient(90deg,#1d9bf0,#0a6bc4);color:#fff;margin:0 3px;font-weight:bold;vertical-align:middle}
.agency-badge{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;padding:1px 7px;border-radius:10px;background:linear-gradient(90deg,#ffb300,#ff6f00);color:#1a0b2e;margin:0 3px;font-weight:bold;vertical-align:middle}
.room-card.agency{border-color:#ffb300;background:linear-gradient(135deg,#3a2a10,#1d1530)}
.pk-chip{background:linear-gradient(90deg,#ff2d55,#2d7dff);color:#fff;font-size:.75rem;font-weight:bold;padding:2px 8px;border-radius:10px;margin:0 4px}
.earn-card{background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,45,135,.12));border:1px solid rgba(255,215,0,.4);border-radius:14px;padding:14px;margin:14px 0}
.earn-head{display:flex;justify-content:space-between;align-items:center;font-weight:bold}
.earn-head strong{color:#ffd700;font-size:1.4rem}
.round.on{background:#ff2d87;color:#fff}
/* camera seats */
.seat.cam .seat-vid{width:72px;height:72px;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 2px #ff2d87}
.seat-vid video{object-fit:cover}
/* PK bar */
.pk-bar{margin:6px 12px;padding:10px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12)}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:bold}
.pk-head b{font-size:1.2rem;color:#ffd700;font-variant-numeric:tabular-nums}
.pk-result{text-align:center;font-size:1.3rem;font-weight:bold;color:#ffd700;animation:pkpulse 1s ease-in-out infinite alternate}
.pk-wait{text-align:center}
.pk-sides{display:flex;align-items:stretch;gap:6px;margin:8px 0}
.pk-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:10px}
.pk-side.us{background:rgba(255,45,85,.25)}
.pk-side.them{background:rgba(45,125,255,.25)}
.pk-side strong{font-size:1.3rem}
.pk-vs{align-self:center;font-weight:900;font-style:italic;color:#ffd700;font-size:1.2rem}
.pk-vid{width:100%;max-width:160px;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#000}
.pk-vid:empty{display:none}
.pk-progress{height:12px;border-radius:6px;background:#2d7dff;overflow:hidden}
.pk-progress i{display:block;height:100%;background:linear-gradient(90deg,#ff2d55,#ff7a90);transition:width .5s}
[dir=rtl] .pk-progress i{margin-right:0}
.pk-tops{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:.72rem}
.pk-tops>div{display:flex;flex-direction:column;gap:2px}
.pk-sys{color:#ffd700}
@keyframes pkpulse{from{transform:scale(1)}to{transform:scale(1.08)}}
/* TikTok-style gift effects */
.gift-fx .combo{position:absolute;bottom:22%;inset-inline-start:8px;display:flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:24px;background:linear-gradient(90deg,rgba(255,45,135,.85),rgba(255,45,135,0));animation:comboIn 3s ease-out forwards}
.gift-fx .combo b{font-size:.85rem}
.gift-fx .combo small{font-size:.75rem;color:#ffe}
.gift-fx .combo span{font-size:2rem}
.gift-fx .combo i{font-style:italic;font-weight:900;font-size:1.6rem;color:#ffd700;text-shadow:0 0 6px #ff2d87}
@keyframes comboIn{0%{transform:translateX(-120%);opacity:0}12%{transform:none;opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
.gift-stage{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.gfx{position:absolute;inset:0}
.gfx .gi{position:absolute;font-size:8rem;filter:drop-shadow(0 0 24px #ffd700)}
.gfx-name{position:absolute;top:18%;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(0,0,0,.55);padding:6px 16px;border-radius:20px;color:#ffd700;font-weight:bold;animation:fadeName 3.4s forwards}
@keyframes fadeName{0%{opacity:0;transform:translateX(-50%) translateY(-24px)}10%,70%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(70vh)}}
@keyframes fadeBg{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
.gfx.pop .gi{left:50%;top:45%;animation:gPop 3s ease-out forwards}
@keyframes gPop{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}20%{transform:translate(-50%,-50%) scale(1.3);opacity:1}35%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
.gfx.rain span{position:absolute;top:-10%;font-size:2.6rem;animation:gRain 2.4s linear forwards}
@keyframes gRain{to{transform:translateY(115vh) rotate(360deg)}}
.gfx.fly .gi{left:-20%;top:80%;animation:gFly 3.2s ease-in-out forwards}
@keyframes gFly{0%{left:-20%;top:85%;transform:rotate(0)}100%{left:110%;top:-10%;transform:rotate(-20deg)}}
.gfx.drive .gi{top:55%;right:-30%;animation:gDrive 3.2s ease-in-out forwards}
@keyframes gDrive{0%{right:-30%}40%,60%{right:35%}100%{right:130%}}
.gfx.zoom{background:radial-gradient(circle,rgba(255,45,135,.3),rgba(0,0,0,.45));animation:fadeBg 4.2s forwards}
.gfx.zoom .gi{left:50%;top:48%;font-size:12rem;animation:gZoom 4s ease-out forwards}
@keyframes gZoom{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg)}25%{transform:translate(-50%,-50%) scale(1.2) rotate(5deg)}40%,85%{transform:translate(-50%,-50%) scale(1) rotate(0)}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
.auth-screen{background:radial-gradient(circle at top,#3a1060,#14081f 70%)}
.auth-box{background:#1f0f35;border-color:#ff2d87}
.logo.big{justify-content:center}

/* room tiers */
.tier-badge{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;padding:1px 8px;border-radius:10px;margin-inline-start:6px;font-weight:bold;vertical-align:middle;background:#2a3a5e;color:#cfd8ea}
.tier-badge.t-family{background:linear-gradient(90deg,#1e8f5a,#36c47f);color:#fff}
.tier-badge.t-royal{background:linear-gradient(90deg,#6a1fb0,#c08b2c);color:#fff3c4}
.tier-badge.t-diamond{background:linear-gradient(90deg,#00b4ff,#9b5cff,#00e0ff);background-size:200% 100%;color:#fff;animation:tierShine 3s linear infinite;box-shadow:0 0 10px rgba(0,200,255,.6)}
@keyframes tierShine{to{background-position:200% 0}}
.room-card.tier-family{border-color:#36c47f}
.room-card.tier-royal{border-color:#c08b2c;background:linear-gradient(135deg,#3a1a5a,#1a1330)}
.room-card.tier-diamond{border-color:#00d4ff;background:linear-gradient(135deg,#0b3550,#241050);box-shadow:0 0 16px rgba(0,212,255,.35)}
.room-view[data-tier=family] .room-top{background:linear-gradient(90deg,#123d2a,#131d33)}
.room-view[data-tier=royal] .room-top{background:linear-gradient(90deg,#3a1a5a,#4a3510)}
.room-view[data-tier=diamond] .room-top{background:linear-gradient(90deg,#0b3550,#3a1070)}
.tier-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px}
.tp{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border-radius:12px;border:2px solid #2a3a5e;background:#131d33;color:#eee;cursor:pointer;font-family:inherit}
.tp i{font-style:normal;font-size:1.6rem}.tp small{color:#aaa}
.tp.sel{border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,.4)}
.tp:disabled{opacity:.45;cursor:not-allowed}
.tp.t-diamond.sel{border-color:#00d4ff;box-shadow:0 0 14px rgba(0,212,255,.6)}
.earn-split{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:6px 0;color:#ccc;font-size:.9rem}
.earn-split b{color:#ffd700}
.ad-banner{margin:10px 0;min-height:60px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04)}
.ad-card{background:linear-gradient(135deg,rgba(0,200,255,.12),rgba(140,80,255,.14));border-color:rgba(120,170,255,.45)}
.house-ad{text-align:center;padding:16px;border-radius:14px;background:radial-gradient(circle at top,rgba(255,215,0,.25),rgba(255,45,135,.15));margin-bottom:10px}
.house-ad img{width:84px;height:84px;object-fit:contain}
.house-ad h3{margin:6px 0}
.btn.block{display:block;width:100%}
/* Ludo */
.ludo-bar{margin:6px 12px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid #d4af37;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem}
.ludo-bar button{margin-inline-start:auto}
.ludo-sys{color:#7dd3fc}
.ludo-panel{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:55;padding:10px}
.ludo-box{position:relative;background:#131d33;border:2px solid #d4af37;border-radius:16px;padding:12px;width:100%;max-width:440px;max-height:96vh;overflow-y:auto}
.ludo-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-left:28px}
.ludo-top b{color:#ffd700;font-size:1.1rem}
.ludo-top span{font-size:.8rem;color:#ccc}
.ludo-board{position:relative;width:100%;aspect-ratio:1;direction:ltr;background:#f5f0e1;border-radius:8px;overflow:hidden}
.ludo-board .lbg,.ludo-board .ltk{position:absolute;inset:0}
.ludo-board .lc{position:absolute;width:6.6667%;height:6.6667%;box-sizing:border-box;border:1px solid #999;background:#fff}
.ludo-board .lc.safe::after{content:"★";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#888;font-size:.75rem;font-style:normal}
.ludo-board .ly{position:absolute;width:40%;height:40%;box-sizing:border-box;border:6px solid rgba(255,255,255,.55);border-radius:6px}
.ludo-board .ly::after{content:"";position:absolute;inset:18%;background:#fff;border-radius:50%;opacity:.85}
.ludo-board .lcenter{position:absolute;top:40%;left:40%;width:20%;height:20%;background:conic-gradient(from 45deg,#43a047 0 25%,#fdd835 0 50%,#1e88e5 0 75%,#e53935 0)}
.ludo-board .lt{position:absolute;width:5.2%;height:5.2%;margin:-2.6% 0 0 -2.6%;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.6);transition:top .35s,left .35s;z-index:2}
.ludo-board .lt.last{box-shadow:0 0 0 2px #111,0 2px 4px rgba(0,0,0,.6)}
.ludo-board .lt.mv{cursor:pointer;z-index:3;animation:ludoPulse .7s ease-in-out infinite alternate}
@keyframes ludoPulse{from{transform:scale(1)}to{transform:scale(1.35);box-shadow:0 0 10px 3px #fff}}
.ludo-status{margin:8px 0;min-height:28px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ludo-status #ludoTime{margin-inline-start:auto;color:#ffd700}
.ludo-status .ldice{font-size:1.8rem;line-height:1}
.ludo-players{display:flex;flex-wrap:wrap;gap:6px}
.ludo-players .chip{border:1px solid #555}
.ludo-players .chip i{font-style:normal}
.ludo-actions{margin-top:8px}
/* gift catalog: tabs + original premium art */
.gift-tabs{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto}
.gtab{flex:1;padding:6px 10px;border-radius:16px;border:1px solid #2a3a5e;background:#131d33;color:#ccc;font-family:inherit;cursor:pointer;white-space:nowrap}
.gtab.sel{background:linear-gradient(90deg,#ff2d87,#9b5cff);color:#fff;border-color:transparent}
.gift-grid{max-height:46vh;overflow-y:auto}
.gift .gimg{width:44px;height:44px;object-fit:contain;mix-blend-mode:screen}
.gift.lux{background:radial-gradient(circle at 50% 30%,rgba(255,215,0,.18),#0d1528 70%);border-color:#6b4fa0}
.gfx.lux{background:radial-gradient(circle,rgba(155,92,255,.3),rgba(0,0,0,.4));animation:luxFade 5.2s forwards}
@keyframes luxFade{0%{opacity:0}8%,88%{opacity:1}100%{opacity:0}}
.gfx.lux img.gi{width:min(80vw,440px);height:auto;mix-blend-mode:screen;filter:drop-shadow(0 0 30px rgba(255,215,0,.6))}
.gfx.lux.zoom img.gi{animation:gZoom 5s ease-out forwards}
.gfx.lux.fly img.gi{animation:gFly 4.6s ease-in-out forwards}
.gfx.lux.drive img.gi{right:auto;left:110%;top:40%;animation:luxDrive 4.8s ease-in-out forwards}
@keyframes luxDrive{0%{left:110%}35%,65%{left:50%;transform:translateX(-50%)}100%{left:-120%;transform:none}}
.gfx.lux .gfx-name{top:12%;font-size:1.1rem;background:linear-gradient(90deg,rgba(255,45,135,.8),rgba(155,92,255,.8));color:#fff;animation:fadeName 5.2s forwards}
.sparks{position:absolute;inset:0}
.sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe27a;box-shadow:0 0 10px 3px #ffd700;opacity:0;animation:spark 1.6s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.4)}}
.priv-box{margin:8px 0;padding:10px 12px;border-radius:12px;background:rgba(155,92,255,.12);border:1px solid #6b4fa0}
.priv-box ul{list-style:none;padding:0;margin:6px 0}
.priv-box li{margin:3px 0}.priv-box li.no{color:#ffb4c8}.priv-box li.ok{color:#9ff0c0}
/* table & instant games */
.cg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0 18px}
.cg-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:14px;border:1px solid #3a3150;background:linear-gradient(160deg,#1c1530,#0e1426);color:#eee;cursor:pointer;font-family:inherit;text-align:center}
.cg-card:hover{border-color:#d4af37;transform:translateY(-2px)}
.cg-ic{font-size:2.4rem}.cg-card small{color:#aaa;font-size:.72rem;line-height:1.3}
.cg-game{max-width:760px;margin:0 auto}
.cg-board{margin:10px 0;min-height:120px}
.cg-opts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:8px 0}
.cg-opts input[type=range]{width:180px;vertical-align:middle}.cg-opts input[type=number]{width:90px}
.seg{display:flex;gap:4px}
#cgBtns{display:inline-flex;gap:8px;flex-wrap:wrap}
.spot{position:relative;border:1px solid #3a4a70;background:#14203a;color:#fff;border-radius:8px;padding:8px 4px;cursor:pointer;font-family:inherit;font-weight:bold}
.spot.red{background:#8e1b1b}.spot.black{background:#111}.spot.green{background:#156b3a}
.spot.bet{box-shadow:0 0 0 2px #d4af37 inset}
.spot em{position:absolute;top:-8px;left:-6px;font-style:normal;font-size:.62rem;background:#d4af37;color:#000;border-radius:10px;padding:1px 5px}
.spot em:empty{display:none}
.spot.won{animation:cgWon 1s ease-in-out 3;box-shadow:0 0 14px 4px #ffd700}
@keyframes cgWon{50%{transform:scale(1.08)}}
.spot.big{flex:1;padding:16px 4px;font-size:1rem}
.spots3{display:flex;gap:8px;margin-top:10px}
.rl-res{width:70px;height:70px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:bold;background:#26304a;border:3px solid #d4af37}
.rl-res.red{background:#a31f1f}.rl-res.black{background:#111}.rl-res.green{background:#156b3a}.rl-res.spin{opacity:.8}
.rl-table{display:flex;gap:3px;direction:ltr}.rl-zero .spot{height:100%;width:36px}
.rl-nums{flex:1;display:grid;grid-template-columns:repeat(12,1fr);gap:3px}.rl-nums .spot{padding:7px 0;font-size:.78rem}
.rl-out{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}.rl-out .spot{font-size:.8rem}
.hands{display:flex;flex-direction:column;gap:10px}
.hand{padding:8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid #2a3a5e}.hand.win{border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,.5)}
.hv{background:#d4af37;color:#000;border-radius:10px;padding:0 8px;margin-right:4px}
.cards{display:flex;gap:6px;justify-content:center;margin-top:6px;direction:ltr}
.pcard{width:46px;height:66px;border-radius:7px;background:#fff;color:#111;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-weight:bold;font-size:1.1rem;box-shadow:0 2px 6px rgba(0,0,0,.5);animation:cgDeal .3s ease-out}
.pcard i{font-style:normal;font-size:1.3rem}.pcard.red{color:#c0392b}
.pcard.back{background:repeating-linear-gradient(45deg,#7a1f5c,#7a1f5c 5px,#4a1370 5px,#4a1370 10px);border:2px solid #fff}
@keyframes cgDeal{from{transform:translateY(-20px) rotate(-8deg);opacity:0}}
.bj-res{text-align:center;font-size:1.3rem;font-weight:bold;color:#ffd700;margin-top:8px}
.fruit-ring{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:330px;margin:0 auto}
.spot.fr{display:flex;flex-direction:column;align-items:center;padding:10px 2px}.spot.fr span{font-size:2rem}.spot.fr small{color:#ffd700}
.spot.fr.lit{background:#d4af37;color:#000}.spot.fr.lit small{color:#000}
.fr-center{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.4rem;border-radius:12px;background:radial-gradient(#3a2a60,#120d22);border:2px solid #d4af37}
.fr-center small{font-size:.9rem;color:#ffd700}
.big-num{text-align:center;font-size:2.6rem;font-weight:bold;letter-spacing:1px;color:#fff;direction:ltr}
.big-num.win{color:#4cd964}.big-num.lose{color:#ff5a5a}
.dc-bar{position:relative;height:14px;border-radius:7px;background:#5a1f2a;margin:12px 6px;direction:ltr;overflow:visible}
.dc-bar div{position:absolute;top:0;bottom:0;background:#2e8b57;border-radius:7px}
.dc-bar i{position:absolute;top:-6px;width:4px;height:26px;background:#fff;left:50%;transition:left .3s}
.crash-sky{position:relative;height:220px;border-radius:14px;overflow:hidden;background:linear-gradient(#0b1030,#25124a);direction:ltr}
.crash-sky .big-num{position:absolute;top:40%;left:0;right:0}
.cr-rocket{position:absolute;bottom:10%;left:8%;font-size:2.2rem;transform:rotate(45deg)}
.cr-rocket.boom{filter:hue-rotate(160deg) brightness(1.5);transform:scale(1.6)}
.plinko{max-width:420px;margin:0 auto;direction:ltr}
.pegs{position:relative;height:260px}
.pegs i{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:#bbb}
.pegs b{display:none;position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;background:#ffd700;box-shadow:0 0 10px #ffd700;transition:top .11s linear,left .11s linear}
.pl-slots{display:flex;gap:2px}.pl-slots span{flex:1;text-align:center;font-size:.62rem;padding:4px 0;border-radius:4px;background:#5a1f2a}
.pl-slots span.mid{background:#7a5a10}.pl-slots span.hot{background:#a31f1f}.pl-slots span.won{background:#ffd700;color:#000;transform:scale(1.15)}
.keno{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;direction:ltr}
.kn{padding:9px 0;border-radius:8px;border:1px solid #2a3a5e;background:#14203a;color:#ddd;cursor:pointer;font-family:inherit}
.kn.pick{background:#4a1370;color:#fff;border-color:#9b5cff}.kn.drawn{background:#3a3a3a;color:#fff}.kn.hit{background:#d4af37;color:#000;font-weight:bold}
.wheel-wrap{position:relative;width:min(80vw,300px);margin:0 auto}
.wheel{width:100%;aspect-ratio:1;border-radius:50%;border:5px solid #d4af37;position:relative;transition:transform 4s cubic-bezier(.15,.85,.25,1)}
.wheel span{position:absolute;left:50%;top:0;height:50%;transform-origin:bottom center;margin-left:-8px;width:16px;text-align:center}
.wheel span b{display:block;font-size:.62rem;color:#fff;padding-top:6px}
.wheel-ptr{position:absolute;top:-16px;left:50%;transform:translateX(-50%);color:#ffd700;font-size:1.6rem;z-index:2}
.wh-res{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:#0a0f1e;border:3px solid #d4af37;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.2rem}
.mines{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:340px;margin:0 auto}
.mn{aspect-ratio:1;border-radius:10px;border:1px solid #2a3a5e;background:#1a2744;font-size:1.5rem;cursor:pointer}
.mn.safe{background:#155a3a}.mn.mine{background:#3a1a1a}.mn.boom{background:#c0392b;animation:cgWon .4s 3}
.vp td{padding:3px 8px}.vp tr.won{background:#d4af37;color:#000}
.vp-hand{margin-top:10px}.vp-c{background:none;border:2px solid transparent;border-radius:9px;padding:2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:#ffd700}
.vp-c.held{border-color:#ffd700}.vp-c small{font-size:.6rem}

/* ===== 2026-10 update: animated gifts, sounds, chests, families, discover ===== */
.gfx-name{max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.gfx .rays{position:absolute;left:50%;top:48%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:repeating-conic-gradient(from 0deg,rgba(255,215,0,.16) 0 8deg,transparent 8deg 22deg);border-radius:50%;animation:raysSpin 5s linear forwards;-webkit-mask:radial-gradient(circle,#000 0,#000 18%,transparent 60%);mask:radial-gradient(circle,#000 0,#000 18%,transparent 60%)}
@keyframes raysSpin{0%{transform:rotate(0) scale(.3);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:rotate(140deg) scale(1.1);opacity:0}}
.gfx .burst{position:absolute;left:50%;top:48%}
.gfx .burst i{position:absolute;font-style:normal;font-size:1.8rem;opacity:0;animation:burstOut 1.6s ease-out forwards}
@keyframes burstOut{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}70%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(var(--r));opacity:0}}
.gfx .confetti i{position:absolute;top:-6%;width:8px;height:14px;border-radius:2px;opacity:.95;animation:confFall 3s linear forwards}
@keyframes confFall{to{transform:translateY(112vh) rotate(720deg)}}
.gfx .ring{position:absolute;left:50%;top:48%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:4px solid rgba(255,215,0,.85);box-shadow:0 0 30px #ffd700;animation:ringOut 1.4s ease-out forwards}
.gfx .ring.r2{animation-delay:.35s;border-color:rgba(255,45,135,.85);box-shadow:0 0 30px #ff2d87}
@keyframes ringOut{0%{transform:scale(.2);opacity:1}100%{transform:scale(9);opacity:0}}
.gfx.lux .gwrap{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);animation:luxIn 5s ease-out forwards}
.gfx.lux .gwrap img.gi,.gfx.lux.zoom .gwrap img.gi,.gfx.lux.fly .gwrap img.gi,.gfx.lux.drive .gwrap img.gi{position:static;display:block;right:auto;left:auto;top:auto;animation:gFloat 1.6s ease-in-out infinite,gGlow 1.2s ease-in-out infinite alternate}
.gfx.lux.fly .gwrap{animation:luxFly 5s ease-in-out forwards}
.gfx.lux.drive .gwrap{animation:luxDrive2 5s ease-in-out forwards}
@keyframes luxIn{0%{transform:translate(-50%,-50%) scale(.1) rotate(-25deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1.15) rotate(4deg);opacity:1}30%,82%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes luxFly{0%{transform:translate(-160%,60%) rotate(-12deg) scale(.6);opacity:0}15%{opacity:1}35%,70%{transform:translate(-50%,-50%) rotate(0) scale(1)}100%{transform:translate(80%,-160%) rotate(-18deg) scale(.7);opacity:0}}
@keyframes luxDrive2{0%{transform:translate(90%,-50%);opacity:0}12%{opacity:1}35%,68%{transform:translate(-50%,-50%)}100%{transform:translate(-210%,-50%);opacity:0}}
@keyframes gFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.04)}}
@keyframes gGlow{from{filter:drop-shadow(0 0 18px rgba(255,215,0,.5)) brightness(1)}to{filter:drop-shadow(0 0 42px rgba(255,120,220,.95)) brightness(1.18) saturate(1.2)}}
.gfx .gi.wob{animation:gPop 3s ease-out forwards}
.gfx.pop .gi,.gfx.zoom .gi{text-shadow:0 0 30px #ffd700}
.gift-fx .combo{box-shadow:0 0 18px rgba(255,45,135,.5)}
.gift-fx .combo span{display:inline-block;animation:comboBounce .5s ease-in-out infinite alternate}
.gift-fx .combo i{display:inline-block;animation:comboHit .6s ease-out}
@keyframes comboBounce{from{transform:scale(1) rotate(-8deg)}to{transform:scale(1.25) rotate(8deg)}}
@keyframes comboHit{0%{transform:scale(2.4);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
/* gift catalog: animated */
.gift i,.gift .gimg{display:inline-block;animation:gFloat 2.2s ease-in-out infinite}
.gift:nth-child(3n) i,.gift:nth-child(3n) .gimg{animation-delay:-.7s}
.gift:nth-child(3n+1) i,.gift:nth-child(3n+1) .gimg{animation-delay:-1.4s}
.gift.lux .gimg{animation:gFloat 2.2s ease-in-out infinite,gGlow 1.4s ease-in-out infinite alternate}
.gift.sel i,.gift.sel .gimg{animation:comboBounce .45s ease-in-out infinite alternate}
.gift{position:relative;overflow:hidden}
.gift.lux::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);background-size:250% 100%;animation:shine 2.6s linear infinite;pointer-events:none}
@keyframes shine{from{background-position:150% 0}to{background-position:-100% 0}}
.sound-row{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#ccc;margin:6px 0}
/* top-5 gifts under the profile */
.top-gifts{margin:10px 0 4px}
.tg-title{font-size:.85rem;color:#ffd700;margin-bottom:6px;font-weight:bold}
.tg-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.tg{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(255,215,0,.25),rgba(20,10,40,.9) 70%);border:1px solid rgba(255,215,0,.45);box-shadow:0 0 12px rgba(255,45,135,.25);overflow:hidden}
.tg i{font-style:normal;font-size:2rem;display:inline-block;animation:gFloat 2s ease-in-out infinite}
.tg .tg-img{width:52px;height:52px;object-fit:contain;mix-blend-mode:screen;animation:gFloat 2s ease-in-out infinite,gGlow 1.4s ease-in-out infinite alternate}
.tg:nth-child(2) i,.tg:nth-child(2) .tg-img{animation-delay:-.4s}.tg:nth-child(3) i,.tg:nth-child(3) .tg-img{animation-delay:-.8s}.tg:nth-child(4) i,.tg:nth-child(4) .tg-img{animation-delay:-1.2s}
.tg-empty{font-size:.8rem;color:#999}
.fam-chip{background:linear-gradient(90deg,#1e8f5a,#36c47f)!important;color:#fff!important}
/* customer service logo */
.support-fab{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:22px;border:1px solid rgba(255,140,80,.7);background:linear-gradient(90deg,rgba(255,45,135,.25),rgba(255,170,40,.25));color:#fff;font-family:inherit;font-size:.78rem;font-weight:bold;cursor:pointer}
.support-fab img{width:30px;height:30px;border-radius:50%;animation:supPulse 2s ease-in-out infinite}
@keyframes supPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,120,80,.6)}50%{box-shadow:0 0 0 6px rgba(255,120,80,0)}}
.support-mini{width:36px;height:36px;min-width:36px;border-radius:50%;border:0;padding:0;background:none;cursor:pointer}
.support-mini img{width:36px;height:36px;border-radius:50%;animation:supPulse 2s ease-in-out infinite}
@media (max-width:420px){.support-fab span{display:none}.support-fab{padding:3px}}
/* challenges hub buttons */
.hub-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.hub-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;border:1px solid #c08b2c;background:linear-gradient(135deg,#3a1a5a,#4a3510);color:#fff;font-family:inherit;cursor:pointer}
.hub-btn i{font-style:normal;font-size:1.7rem;animation:gFloat 2.4s ease-in-out infinite}
.hub-btn small{color:#ddd;font-size:.72rem}
.hub-sec{margin:10px 0}
.hub-sec h4{color:#ffd700;margin:0 0 6px}
.hub-list{display:flex;flex-direction:column;gap:6px}
.hub-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#131d33;border:1px solid #2a3a5e;cursor:pointer}
.hub-item b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-item .rk{width:26px;text-align:center;font-weight:bold;color:#ffd700}
.hub-item small{color:#aaa;font-size:.75rem}
.vs-line{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;background:linear-gradient(90deg,rgba(255,45,85,.25),rgba(45,125,255,.25));font-size:.85rem}
.vs-line span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-line b{color:#ffd700;font-variant-numeric:tabular-nums}
.fam-head{text-align:center;margin-bottom:8px}
.fam-head .fb{font-size:2.6rem;display:block;animation:gFloat 2.4s ease-in-out infinite}
.fam-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;max-height:34vh;overflow-y:auto}
.fam-m{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;cursor:pointer;position:relative}
.fam-m small{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam-m .x{position:absolute;top:-4px;left:2px;background:#e53935;color:#fff;border-radius:50%;width:18px;height:18px;font-size:.7rem;line-height:18px;text-align:center}
/* reward chests in rooms */
.chest-bar{display:flex;align-items:center;gap:6px;margin:4px 12px 0;padding:6px 8px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,215,0,.25)}
.chest-bar:empty{display:none}
.chest-prog{flex:1;min-width:0;font-size:.72rem;color:#ddd}
.chest-prog .pbar{height:5px;border-radius:4px;background:#2a3a5e;overflow:hidden;margin-top:3px}
.chest-prog .pbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd700,#ff2d87)}
.chest{position:relative;width:38px;height:42px;border:0;border-radius:10px;background:rgba(255,255,255,.05);font-size:1.4rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;color:#fff;font-family:inherit}
.chest small{font-size:.55rem;color:#ccc;line-height:1}
.chest.locked{filter:grayscale(1) brightness(.7)}
.chest.open{background:radial-gradient(circle,rgba(255,215,0,.45),rgba(255,45,135,.15));box-shadow:0 0 12px rgba(255,215,0,.7);animation:chestShake 1.2s ease-in-out infinite}
.chest.taken,.chest.empty{opacity:.55;animation:none;box-shadow:none}
@keyframes chestShake{0%,100%{transform:rotate(0)}10%{transform:rotate(-10deg) scale(1.08)}20%{transform:rotate(10deg) scale(1.08)}30%{transform:rotate(0)}}
.chest-win{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;animation:luxIn 3.4s ease-out forwards}
.chest-win span{font-size:6rem;filter:drop-shadow(0 0 26px #ffd700)}
.chest-win b{font-size:2rem;color:#ffd700;text-shadow:0 0 10px #ff2d87}
/* discover tabs */
.d-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.d-tab{white-space:nowrap;padding:7px 12px;border-radius:18px;border:1px solid #2a3a5e;background:#131d33;color:#ccc;font-family:inherit;cursor:pointer}
.d-tab.active{background:linear-gradient(90deg,#ff2d87,#9b5cff);color:#fff;border-color:transparent}
.random-btn{margin:0 0 10px}
.gfx.lux .gwrap{mix-blend-mode:screen}
.gfx.lux .gwrap img.gi{mix-blend-mode:normal}
.gfx.lux .gwrap img.gi,.gfx.lux.zoom .gwrap img.gi,.gfx.lux.fly .gwrap img.gi,.gfx.lux.drive .gwrap img.gi{animation:gFloat 1.6s ease-in-out infinite;filter:none}
.tg .tg-img,.gift.lux .gimg{animation:gFloat 2s ease-in-out infinite;filter:none}
.gfx.lux .gwrap img.gi{-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%)}

/* ===== v10 premium look: rooms, mics, profile ===== */
.room-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.room-list>.hint{grid-column:1/-1}
.room-card.rc{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#1d1233;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s}
.room-card.rc:active{transform:scale(.97)}
.rc-cover{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 80% 90%,rgba(255,45,135,.55),transparent 55%),linear-gradient(145deg,#5b2a9c,#2a1458)}
.rc-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 40% 75%,#fff,transparent),radial-gradient(1px 1px at 60% 45%,#fff,transparent);opacity:.7}
.rc-icon{font-size:3.4rem;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));animation:rcFloat 3.5s ease-in-out infinite}
@keyframes rcFloat{50%{transform:translateY(-6px) scale(1.05)}}
.rc-cover .tier-badge{position:absolute;top:8px;inset-inline-start:8px;margin:0;font-size:.66rem;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rc-live{position:absolute;bottom:8px;inset-inline-end:8px;display:flex;align-items:center;gap:4px;font-size:.75rem;font-weight:bold;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:2px 8px;border-radius:12px}
.rc-cover .pk-chip{position:absolute;bottom:8px;inset-inline-start:8px;margin:0}
.rc-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px;min-width:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35))}
.rc-info b{color:#fff;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-info small{color:#c9b8e8;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-info .rc-own{color:#ffd76a}
.room-card.rc.tier-family .rc-cover{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 80% 90%,rgba(255,230,90,.45),transparent 55%),linear-gradient(145deg,#139a63,#0c4a5a)}
.room-card.rc.tier-royal{border-color:rgba(255,200,80,.7)}
.room-card.rc.tier-royal .rc-cover{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.4),transparent 40%),radial-gradient(circle at 80% 90%,rgba(255,190,40,.6),transparent 55%),linear-gradient(145deg,#7b2cc9,#3d1470 60%,#8a5a12)}
.room-card.rc.tier-diamond{border-color:#4fe3ff;box-shadow:0 0 18px rgba(0,212,255,.45)}
.room-card.rc.tier-diamond .rc-cover{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 40%),radial-gradient(circle at 80% 90%,rgba(155,92,255,.7),transparent 55%),linear-gradient(145deg,#00a8e8,#2a3bd6 55%,#7a1fd1)}
.room-card.rc.agency .rc-cover{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 40%),linear-gradient(145deg,#ff9800,#c2185b)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:3px;background:#4cff7a;border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.6s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
/* support room */
.room-card.support-room{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 14px;border-radius:18px;border:1px solid rgba(255,120,190,.7);
  background:radial-gradient(circle at 90% 0,rgba(255,215,0,.35),transparent 45%),linear-gradient(120deg,#ff2d87,#8a2be2 60%,#3b1a8a);box-shadow:0 8px 22px rgba(255,45,135,.35)}
.sr-icon{width:62px;height:62px;min-width:62px;border-radius:50%;padding:3px;background:conic-gradient(#ffd700,#fff,#ff2d87,#ffd700);animation:spinRing 4s linear infinite}
.sr-icon img{width:100%;height:100%;border-radius:50%;background:#fff;animation:spinRing 4s linear infinite reverse}
.support-room .r-body b{color:#fff;font-size:1.05rem}
.support-room .r-body small{color:#ffe9f5;white-space:normal}
.support-room .eq i{background:#fff}
.support-room #supportInbox{position:absolute;top:8px;inset-inline-end:10px;font-size:.85rem;padding:2px 9px;box-shadow:0 0 0 2px #fff}
@keyframes spinRing{to{transform:rotate(360deg)}}
.sup-inbox{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.sup-t{cursor:pointer;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.sup-t.st-new{border-color:#ff2d87;background:rgba(255,45,135,.12)}
.sup-t.st-answered{opacity:.75}
.sup-st{display:block;font-size:.7rem;color:#ffd76a;margin-top:2px}
.warn-box{background:rgba(179,0,27,.18);border:1px solid #ff4d6d;border-radius:12px;padding:10px;line-height:1.6}
.btn.danger{border-color:#ff4d6d;color:#ff8095;margin:14px 0 6px}
.btn.block{display:block;width:100%}
/* room stage & mics */
#room.room-view{background:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 78% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 34%,#fff,transparent),radial-gradient(1px 1px at 30% 52%,#fff,transparent),radial-gradient(1px 1px at 88% 44%,#fff,transparent),
  radial-gradient(ellipse at 50% 0,rgba(255,45,135,.45),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(80,40,200,.5),transparent 60%),linear-gradient(180deg,#2a0f4f,#120826)}
#room.room-view[data-tier=royal]{background:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 78% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 34%,#fff,transparent),
  radial-gradient(ellipse at 50% 0,rgba(255,190,40,.45),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(140,40,200,.55),transparent 60%),linear-gradient(180deg,#3a1460,#160a2a)}
#room.room-view[data-tier=diamond]{background:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 78% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 34%,#fff,transparent),
  radial-gradient(ellipse at 50% 0,rgba(0,212,255,.45),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(155,92,255,.55),transparent 60%),linear-gradient(180deg,#0b2a5a,#120a35)}
#room.room-view[data-tier=family]{background:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 78% 12%,#fff,transparent),
  radial-gradient(ellipse at 50% 0,rgba(54,196,127,.45),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(0,140,160,.5),transparent 60%),linear-gradient(180deg,#0e3a35,#0a1424)}
.seats{gap:16px 6px;padding:14px 12px 6px}
.seat .avatar{width:62px;height:62px;min-width:62px;border:0;padding:3px;background:linear-gradient(135deg,#ff6ec4,#7873f5);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.seat .avatar.m{background:linear-gradient(135deg,#4facfe,#7873f5)}
.seat .avatar.f{background:linear-gradient(135deg,#ff6ec4,#f7797d)}
.seat .avatar img{border:2px solid #1a0b2e}
.seat .avatar.empty{border:0;padding:0;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,.06) 60%),linear-gradient(145deg,rgba(255,110,196,.35),rgba(120,115,245,.3));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),0 4px 14px rgba(0,0,0,.35)}
.mic-ico{width:28px;height:28px;filter:drop-shadow(0 2px 4px rgba(255,45,135,.6))}
.seat.host .avatar{width:70px;height:70px;min-width:70px;background:conic-gradient(#ffd700,#fff3b0,#ff9f1c,#ffd700);box-shadow:0 0 18px rgba(255,215,0,.6)}
.seat.host .avatar.empty{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(255,255,255,.06) 60%),linear-gradient(145deg,rgba(255,215,0,.45),rgba(255,140,0,.3));box-shadow:inset 0 0 0 2px rgba(255,215,0,.8),0 0 18px rgba(255,215,0,.45)}
.seat .crown{top:-14px;font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:2}
.seat b{font-size:.72rem;color:#f1e6ff;background:rgba(0,0,0,.35);padding:1px 8px;border-radius:10px}
.seat.host b{color:#ffd76a}
.seat.speaking .avatar{box-shadow:0 0 0 3px #4cff7a,0 0 18px #4cff7a}
.seat.speaking .avatar::before,.seat.speaking .avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(76,255,122,.8);animation:ripple 1.4s ease-out infinite}
.seat.speaking .avatar::after{animation-delay:.7s}
.seat.muted .avatar::after{content:"🔇";border:0;inset:auto;bottom:-4px;right:-4px;animation:none}
@keyframes ripple{to{transform:scale(1.45);opacity:0}}
.listeners{margin-top:2px}
.chat-box .line{background:rgba(20,8,40,.55);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(4px)}
@media(max-width:420px){.seats .avatar{width:56px;height:56px;min-width:56px}.seats .seat.host .avatar{width:64px;height:64px;min-width:64px}}
/* profile */
.profile-card{position:relative;overflow:hidden;padding:0 16px 18px;border:1px solid rgba(255,215,0,.55);border-radius:22px;background:linear-gradient(180deg,#2c1352,#160b2b)}
.profile-card::before{content:"";display:block;height:110px;margin:0 -16px -62px;
  background:radial-gradient(1.5px 1.5px at 15% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 25%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 70%,#fff,transparent),radial-gradient(circle at 80% 0,rgba(255,215,0,.55),transparent 45%),linear-gradient(120deg,#ff2d87,#8a2be2 55%,#2d7dff)}
.profile-card .avatar-edit{position:relative;z-index:1;padding:4px;border-radius:50%}
.profile-card .avatar-edit::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ffd700,#ff2d87,#8a2be2,#2d7dff,#ffd700);animation:spinRing 6s linear infinite;z-index:-1}
.profile-card .avatar-edit i{z-index:2}
.profile-card .avatar.xl{border:3px solid #160b2b;width:100px;height:100px}
.profile-card h2{color:#fff;text-shadow:0 2px 10px rgba(255,45,135,.6)}
.profile-card .counts{gap:10px}
.profile-card .counts div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px 18px}
.profile-card .me-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.profile-card .me-actions .btn{border-radius:14px;padding:10px 4px;font-size:.82rem;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);color:#fff}
.profile-card .me-actions .btn.gold{background:linear-gradient(135deg,#ffd700,#ff9f1c);color:#2a1300;border:0}
.profile-card .me-actions .btn.outline{color:#ffb3c6}

.room-card.support-room.sr-off .eq{display:none}
.room-card.support-room.sr-off{filter:saturate(.75)}
#room.room-view[data-support="1"] .seat.host b{color:#7fe3ff}

/* chest opening show */
.chest-fx{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(40,10,70,.55),rgba(0,0,0,.25) 60%,transparent)}
.cbx{position:relative;width:230px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:auto;animation:cbxIn .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes cbxIn{from{transform:scale(.2);opacity:0}}
.cbx-x{position:absolute;top:-6px;inset-inline-end:-4px;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.5);color:#fff;font-size:.9rem}
.cbx-title{font-weight:bold;color:#ffd76a;text-shadow:0 2px 8px #000;font-size:1rem}
.cbx-glow{position:absolute;top:30px;left:50%;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.55),rgba(255,45,135,.25) 45%,transparent 70%);animation:cbxPulse 1.4s ease-in-out infinite;z-index:-1}
@keyframes cbxPulse{50%{transform:scale(1.15);opacity:.75}}
.cbx-rays{position:absolute;top:-10px;left:50%;width:340px;height:340px;margin-left:-170px;border-radius:50%;opacity:0;z-index:-1;
  background:repeating-conic-gradient(rgba(255,230,120,.55) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%)}
.cbx.opened .cbx-rays{opacity:1;animation:spinRing 6s linear infinite}
.cbx-box{position:relative;width:150px;height:130px;cursor:pointer;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));animation:cbxBob 1.6s ease-in-out infinite}
@keyframes cbxBob{50%{transform:translateY(-8px)}}
.cbx[data-n="3"] .cbx-box{animation:cbxShake .25s linear infinite}
.cbx[data-n="2"] .cbx-box{animation:cbxShake .16s linear infinite}
.cbx[data-n="1"] .cbx-box{animation:cbxShake .09s linear infinite;filter:drop-shadow(0 0 22px #ffd700)}
@keyframes cbxShake{25%{transform:rotate(-5deg) scale(1.04)}75%{transform:rotate(5deg) scale(1.04)}}
.cbx.opened .cbx-box{animation:none}
.cbx-body{position:absolute;bottom:0;left:0;right:0;height:82px;border-radius:8px 8px 16px 16px;border:3px solid #ffcf40;
  background:linear-gradient(90deg,transparent 42%,#ffcf40 42% 58%,transparent 58%),linear-gradient(180deg,#9b3cf0,#5a17a8 70%,#3a0d75)}
.cbx-body i{position:absolute;inset:6px;border-radius:6px 6px 12px 12px;border:2px dashed rgba(255,215,0,.35)}
.cbx-lock{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8,#ffcf40 45%,#c48a00);display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.cbx-lid{position:absolute;top:8px;left:-6px;right:-6px;height:50px;border-radius:40px 40px 8px 8px;border:3px solid #ffcf40;transform-origin:10% 100%;transition:transform .6s cubic-bezier(.3,1.5,.5,1);
  background:linear-gradient(90deg,transparent 42%,#ffcf40 42% 58%,transparent 58%),linear-gradient(180deg,#c06bff,#7a24d0)}
.cbx-lid i{position:absolute;left:12px;right:12px;top:8px;height:6px;border-radius:6px;background:rgba(255,255,255,.35)}
.cbx.opened .cbx-lid{transform:translateY(-40px) rotate(-38deg)}
.cbx.opened .cbx-body::after{content:"";position:absolute;left:8px;right:8px;top:-14px;height:30px;border-radius:50%;background:radial-gradient(ellipse,#fff 0,#fff2a0 30%,rgba(255,215,0,0) 70%);animation:cbxPulse .8s ease-in-out infinite}
.cbx-count{position:absolute;top:58px;left:50%;transform:translateX(-50%);font-size:5rem;font-weight:900;color:#fff;-webkit-text-stroke:3px #ff2d87;text-shadow:0 0 24px #ffd700,0 6px 0 #7a1fd1;pointer-events:none;z-index:2}
.cbx-count.pop{animation:cbxPop .85s ease-out}
@keyframes cbxPop{0%{transform:translateX(-50%) scale(2.6);opacity:0}25%{transform:translateX(-50%) scale(1);opacity:1}80%{opacity:1}100%{transform:translateX(-50%) scale(.6);opacity:0}}
.cbx-msg{min-height:44px;color:#fff;font-weight:bold;text-shadow:0 2px 6px #000;text-align:center}
.cbx-win{display:block;font-size:2.4rem;color:#ffd700;-webkit-text-stroke:1px #a0005a;text-shadow:0 0 16px #ff2d87,0 4px 0 #6a1aa8;animation:cbxIn .5s cubic-bezier(.3,1.8,.5,1)}
.cbx-burst{position:absolute;top:95px;left:50%;width:0;height:0}
.cbx-burst i{position:absolute;font-style:normal;transform:translate(-50%,-50%);animation:cbxFly 1.6s cubic-bezier(.15,.8,.35,1) forwards}
@keyframes cbxFly{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}15%{opacity:1}75%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 120px)) rotate(var(--r)) scale(1);opacity:0}}
.chest-fx .cf{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:cbxFall linear forwards}
@keyframes cbxFall{to{transform:translateY(105vh) rotate(720deg)}}
.cbx.lvl4 .cbx-body,.cbx.lvl5 .cbx-body{background:linear-gradient(90deg,transparent 42%,#ffcf40 42% 58%,transparent 58%),linear-gradient(180deg,#ff4fa3,#c2185b 70%,#7a0d3a)}
.cbx.lvl4 .cbx-lid,.cbx.lvl5 .cbx-lid{background:linear-gradient(90deg,transparent 42%,#ffcf40 42% 58%,transparent 58%),linear-gradient(180deg,#ff8cc6,#e0237a)}
.cbx-title{position:relative;z-index:3}
.cbx.opened .cbx-lid{transform:translate(18px,-26px) rotate(-24deg)}

.support-badge{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;padding:1px 7px 1px 2px;border-radius:10px;background:linear-gradient(90deg,#ff2d87,#ffaa28);color:#fff;margin:0 3px;font-weight:bold;vertical-align:middle}
.support-badge img{width:16px;height:16px;border-radius:50%}
.agency-badge.mine{cursor:pointer;box-shadow:0 0 0 2px rgba(255,215,0,.6);animation:supPulse 2s ease-in-out infinite}
.agency-fab{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:22px;border:1px solid #ffb300;background:linear-gradient(90deg,rgba(255,179,0,.25),rgba(255,111,0,.25));color:#ffd700;font-family:inherit;font-weight:bold;cursor:pointer}
.agency-fab i{font-style:normal;font-size:1.1rem}
.agency-card{border-color:#ffb300}
.ag-bal{text-align:center;padding:12px;border-radius:14px;background:linear-gradient(135deg,#3a2300,#1a0b2e);border:1px solid #ffb300;margin-bottom:10px;display:flex;flex-direction:column;gap:2px}
.ag-bal b{font-size:1.8rem;color:#ffd700}
.ag-how{font-size:.85rem;background:rgba(255,255,255,.05);border-radius:12px;padding:8px 12px;margin-bottom:10px}
.ag-how ol{margin:6px 0;padding-inline-start:18px}
.ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ag-grid .btn{width:100%}

.exit-btn{background:linear-gradient(90deg,#ff2d55,#c2185b);color:#fff;border:0;font-weight:bold;box-shadow:0 2px 8px rgba(0,0,0,.45);padding:7px 14px}
.snd-btn{min-width:42px}
.vs-cell.pop{background:rgba(255,215,0,.5);box-shadow:0 0 18px #ffd700}
.vs-cell.pop>*{animation:vsPop .38s ease-in forwards}
@keyframes vsPop{0%{transform:scale(1.2);opacity:1;filter:brightness(2)}100%{transform:scale(0) rotate(25deg);opacity:0}}
.vs-cell.drop>*{animation:vsDrop .42s cubic-bezier(.3,1.4,.6,1) both}
@keyframes vsDrop{0%{transform:translateY(-150%);opacity:0}50%{opacity:1}100%{transform:none}}
.vs-game:not([data-kind=cluster]){min-height:calc(100dvh - 150px);display:flex;flex-direction:column;justify-content:space-around}
.vs-game:not([data-kind=cluster]) .vs-cell{aspect-ratio:3/4}
.vs-game:not([data-kind=cluster]) .vs-grid{gap:8px;padding:12px}

/* per-game effects */
.vs-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6;border-radius:inherit}
.fx-p{position:absolute;display:block;width:calc(12px*var(--s,1));height:calc(12px*var(--s,1));animation:fxFall 2s ease-in both}
.fx-sweet{border-radius:40% 60% 50% 50%;top:-20px;box-shadow:inset -2px -3px 0 rgba(0,0,0,.18)}
.fx-zeus{width:3px;height:calc(26px*var(--s,1));top:-30px;background:linear-gradient(#fff,#7fb4ff);box-shadow:0 0 8px #9cf;animation:fxFall 1s linear both}
.fx-pharaoh{border-radius:50%;width:calc(7px*var(--s,1));height:calc(7px*var(--s,1));bottom:-10px;background:#ffd76a;box-shadow:0 0 10px #ffb300;animation:fxRise 2.2s ease-out both}
.fx-bass{border-radius:50%;bottom:-20px;border:2px solid rgba(220,250,255,.85);background:rgba(160,230,255,.12);width:calc(16px*var(--s,1));height:calc(16px*var(--s,1));animation:fxRise 2.4s ease-in both}
@keyframes fxFall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),720px) rotate(540deg);opacity:.2}}
@keyframes fxRise{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),-720px);opacity:0}}
.fx-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,#fff,rgba(150,200,255,.6) 40%,transparent 75%);animation:fxFlash .7s ease-out both}
@keyframes fxFlash{0%,30%{opacity:1}10%{opacity:.3}100%{opacity:0}}
.vs-game.shake{animation:vsShake .5s}
@keyframes vsShake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.vs-grid.falling .vs-cell>*{animation:vsFall .3s ease-in forwards}
@keyframes vsFall{to{transform:translateY(180%);opacity:0}}
.vs-cell.drop>*{animation:vsDrop .42s cubic-bezier(.3,1.4,.6,1) var(--dl,0ms) both}
.vs-cell.blur>*{filter:blur(2px) brightness(.85);transform:translateY(8%)}
.vs-banner,.vs-bigwin{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(5,3,15,.72);border-radius:inherit;animation:vsBnIn .35s ease-out both;cursor:pointer;text-align:center;padding:10px}
.vs-banner.out,.vs-bigwin.out{animation:vsBnOut .35s ease-in forwards}
@keyframes vsBnIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes vsBnOut{to{opacity:0;transform:scale(1.1)}}
.vs-bn-imgs{display:flex;gap:14px}
.vs-bn-img{width:min(34vw,170px);max-height:42vh;object-fit:contain;border-radius:16px;filter:drop-shadow(0 0 18px rgba(255,215,0,.75));animation:vsBnImg 1.4s ease-in-out infinite alternate}
@keyframes vsBnImg{from{transform:scale(.95) rotate(-3deg)}to{transform:scale(1.06) rotate(3deg)}}
.vs-banner b{font-size:clamp(1.3rem,6vw,2rem);color:#ffd700;text-shadow:0 2px 0 #000,0 0 16px rgba(255,200,0,.8)}
.vs-bigwin b{font-size:clamp(2rem,10vw,3.6rem);color:#ffd700;text-shadow:0 3px 0 #7a4b00,0 0 24px #ffb300;animation:vsBnImg .6s ease-in-out infinite alternate}
.vs-bigwin span{font-size:clamp(1.8rem,9vw,3rem);font-weight:bold;color:#fff;text-shadow:0 0 12px #ffd700}
.vs-bigwin small{color:#ffe9a0;font-size:1.1rem}
.vs-game[data-key=sweet] .vs-bigwin b{color:#ff8ad8;text-shadow:0 3px 0 #8a1a5c,0 0 24px #ff5fc8}
.vs-game[data-key=zeus] .vs-bigwin b{color:#bfe0ff;text-shadow:0 3px 0 #1a3a8a,0 0 24px #6fb0ff}
.vs-game[data-key=bass] .vs-bigwin b{color:#8ff5ee;text-shadow:0 3px 0 #0b5a56,0 0 24px #3fd0c9}
/* per-game frames and symbols */
.vs-game[data-key=sweet] .vs-grid{background:linear-gradient(160deg,rgba(255,170,220,.35),rgba(140,90,255,.3));box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.vs-game[data-key=sweet] .vs-cell{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,190,230,.22) 60%);border-radius:50%}
.vs-game[data-key=zeus] .vs-grid{background:linear-gradient(180deg,rgba(25,45,110,.65),rgba(10,15,45,.75));box-shadow:inset 0 0 0 3px #c9a646,0 0 22px rgba(110,170,255,.35)}
.vs-game[data-key=zeus] .vs-cell{background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(120,160,255,.1));box-shadow:inset 0 0 0 1px rgba(201,166,70,.6)}
.vs-game[data-key=pharaoh] .vs-grid{background:linear-gradient(180deg,rgba(70,40,10,.75),rgba(30,15,5,.85));box-shadow:inset 0 0 0 3px #e6b450,inset 0 0 0 7px rgba(0,0,0,.45),inset 0 0 0 9px #a8792a}
.vs-game[data-key=pharaoh] .vs-cell{background:linear-gradient(180deg,rgba(255,225,150,.2),rgba(120,80,20,.25));box-shadow:inset 0 0 0 1px rgba(230,180,80,.55)}
.vs-game[data-key=bass] .vs-grid{background:linear-gradient(180deg,rgba(20,110,140,.55),rgba(5,40,70,.75));box-shadow:inset 0 0 0 3px #3fd0c9}
.vs-game[data-key=bass] .vs-cell{background:linear-gradient(180deg,rgba(200,250,255,.22),rgba(40,140,180,.15));box-shadow:inset 0 0 0 1px rgba(160,240,255,.5)}
.vs-sym{transition:transform .2s}
.vs-cell.hit .vs-sym{animation:vsGlow .7s ease-in-out infinite alternate}
@keyframes vsGlow{from{filter:drop-shadow(0 0 4px #fff) brightness(1.1);transform:scale(1)}to{filter:drop-shadow(0 0 14px #ffd700) brightness(1.35);transform:scale(1.1)}}
.vs-game[data-key=zeus] .vs-cell.mult{box-shadow:0 0 0 3px #9cf,0 0 26px #6fb0ff;background:rgba(120,180,255,.45)}
.vs-game[data-key=bass] .vs-cell.mult{box-shadow:0 0 0 3px #8ff5ee,0 0 22px #3fd0c9;background:rgba(80,220,220,.4)}
.vs-game[data-key=pharaoh] .vs-cell.expand{box-shadow:0 0 0 3px #ffd76a,0 0 26px #ffb300;background:rgba(255,200,80,.45)}
.vs-game.free[data-key=zeus]{box-shadow:0 0 30px #6fb0ff}
.vs-game.free[data-key=pharaoh]{box-shadow:0 0 30px #ffb300}
.vs-game.free[data-key=bass]{box-shadow:0 0 30px #3fd0c9}
.vs-game.free[data-key=sweet]{box-shadow:0 0 30px #ff5fc8}

.gift-bal{margin-inline-start:6px;font-size:.8rem;color:#ffb3d9;font-weight:bold}
.gift-line{color:#ffb3d9;font-size:.9rem;margin:6px 0}
.pay-box{background:rgba(0,0,0,.25);border:1px dashed #d4af37;border-radius:12px;padding:12px;margin:10px 0;word-break:break-all}
.pay-box .amt{font-size:1.6rem;font-weight:bold;color:#ffd700;text-align:center;direction:ltr}
.pay-box code{display:block;direction:ltr;text-align:center;font-size:.85rem;margin:6px 0;color:#fff}
.pay-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.pay-steps{padding-inline-start:18px;margin:6px 0;font-size:.9rem}
.pay-net{display:flex;gap:8px;justify-content:center;margin:8px 0}
.pay-net label{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.06);padding:6px 10px;border-radius:10px}
.pay-ord{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:8px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.85rem}