:root{--bg:#090b10;--panel:#10151d;--panel2:#171e29;--panel3:#202a38;--line:rgba(255,255,255,.09);--text:#f4f7fb;--muted:#8d99aa;--accent:#7254ff;--green:#19d27c;--red:#ef5350;--gold:#ffcf47;--shadow:0 30px 90px rgba(0,0,0,.42)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}body{background:radial-gradient(circle at 12% -6%,rgba(114,84,255,.2),transparent 26%),var(--bg)}
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 8%,rgba(114,84,255,.24),transparent 28%),#080b11}.loginCard{width:min(430px,100%);padding:30px;border:1px solid var(--line);background:#101722;border-radius:25px;box-shadow:var(--shadow)}.brandMark{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#3b25bc);display:grid;place-items:center;font-weight:900}.loginCard h1{margin:15px 0 4px}.loginCard>p{margin:0 0 18px;color:var(--muted);font-size:12px}.loginCard label{display:block;font-size:10px;color:#b8c4d4;margin:11px 0 5px}.loginCard input{width:100%;border:1px solid var(--line);background:#0a1019;border-radius:11px;color:white;padding:11px}.checkRow{display:flex!important;gap:8px;align-items:center}.checkRow input{width:auto}.authTabs{display:flex;gap:5px}.authTabs button{flex:1;border:1px solid var(--line);background:#0c121b;color:#99a8bd;border-radius:9px;padding:8px;cursor:pointer}.authTabs button.active{background:var(--accent);color:white}.googleBtn{display:block;margin-top:9px;text-align:center;text-decoration:none;color:#fff;border:1px solid var(--line);border-radius:11px;padding:10px;background:#121925}.hint{margin-top:12px;color:#75869d;font-size:9px}
.btn,.iconRound{border:1px solid var(--line);background:var(--panel2);color:white;border-radius:11px;cursor:pointer}.btn{padding:9px 13px;font-weight:700}.btn.primary,.btn.accent{background:linear-gradient(135deg,var(--accent),#563ae6);border-color:transparent}.btn.ghost:hover{background:var(--panel3)}.btn.danger{background:rgba(239,83,80,.13);color:#ffc0be}.btn.reward{background:rgba(142,74,255,.14);border-color:rgba(142,74,255,.35);color:#e7dbff}.wide{width:100%;margin-top:16px}.app{min-height:100vh;display:grid;grid-template-columns:235px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:17px 12px;border-right:1px solid var(--line);background:rgba(8,11,17,.96);display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:5px 7px 20px;cursor:pointer}.brand b,.brand small{display:block}.brand small{font-size:9px;color:var(--muted)}.mainNav{display:grid;gap:4px}.navBtn{position:relative;border:0;background:transparent;color:#dce4f1;border-radius:10px;padding:10px 11px;text-align:left;cursor:pointer;font-weight:700}.navBtn:hover,.navBtn.active{background:var(--panel2)}.navBtn i{position:absolute;right:8px;top:8px;min-width:15px;height:15px;border-radius:999px;background:var(--red);font-size:8px;font-style:normal;display:none;place-items:center}.navBtn i.show{display:grid}.walletMini{margin:20px 0 7px;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;justify-content:space-between;font-size:10px}.walletMini span{color:var(--muted)}.walletMini b span{color:#ffe07a}.health{border:1px solid var(--line);border-radius:13px;padding:9px}.health div{display:flex;justify-content:space-between;padding:5px;font-size:9px}.health span{color:var(--muted)}.profile{margin-top:auto;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:9px;cursor:pointer}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#169ad5,#6547d7);font-size:10px;font-weight:850;box-shadow:0 0 0 2px rgba(255,255,255,.06);background-size:cover;background-position:center}.avatar.xl{width:45px;height:45px}.profile>div:nth-child(2){flex:1}.profile b,.profile small{display:block}.profile b{font-size:11px}.profile small{font-size:8px;color:var(--muted)}.profile button{border:0;background:transparent;color:#98a7bc;cursor:pointer}.topbar{height:76px;padding:14px 23px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;background:rgba(8,11,17,.76);backdrop-filter:blur(16px)}.topbar h1{font-size:18px;margin:0}.topbar p{font-size:10px;color:var(--muted);margin:4px 0}.topActions{display:flex;gap:7px}.page{display:none;padding:24px}.page.active{display:block}.roomPage.active{padding:0}.hero{min-height:240px;border:1px solid var(--line);border-radius:22px;padding:30px;display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:center;background:linear-gradient(135deg,rgba(114,84,255,.15),rgba(16,23,34,.8) 50%,rgba(32,200,118,.05))}.hero>div>span{font-size:9px;color:#b8aaff;font-weight:850}.hero h2{font-size:30px;line-height:1.1;margin:9px 0 10px}.hero p{color:#a7b4c7;font-size:12px}.heroStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.heroStats div{border:1px solid var(--line);border-radius:15px;padding:17px;text-align:center}.heroStats strong,.heroStats small{display:block}.heroStats strong{font-size:22px}.heroStats small{font-size:8px;color:var(--muted)}.sectionHead{margin:27px 0 12px;display:flex;justify-content:space-between;align-items:center}.sectionHead h3{font-size:15px;margin:0}.sectionHead p{font-size:9px;color:var(--muted);margin:4px 0}.searchRow{display:flex;gap:7px}.search{width:240px;background:var(--panel);border:1px solid var(--line);color:white;border-radius:10px;padding:9px 11px}.roomGrid{display:grid;grid-template-columns:repeat(4,minmax(185px,1fr));gap:12px}.roomCard{position:relative;min-height:190px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,var(--panel2),#0f1621);padding:16px;cursor:pointer;transition:.2s;overflow:hidden}.roomCard:hover{transform:translateY(-3px);border-color:rgba(114,84,255,.38)}.roomCard.favorite{box-shadow:inset 0 0 0 1px rgba(255,207,71,.22)}.roomCardTop{display:flex;justify-content:space-between}.roomIcon{width:42px;height:42px;border-radius:13px;background:rgba(114,84,255,.14);display:grid;place-items:center;font-size:18px}.pill{padding:5px 8px;border-radius:999px;background:rgba(114,84,255,.12);border:1px solid rgba(114,84,255,.2);color:#c8beff;font-size:8px;font-weight:850}.roomCard h4{margin:16px 0 5px;font-size:14px}.roomCard p{margin:0;color:var(--muted);font-size:9px}.roomOwner{font-size:8px;color:#b8c3d4;margin-top:8px}.roomFoot{position:absolute;bottom:14px;left:16px;right:16px;display:flex;justify-content:space-between;font-size:8px;color:#9cabc0}.live{color:#6ce0a3}.eventList{display:grid;gap:10px}.eventRow{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;display:grid;grid-template-columns:1.5fr 1fr .8fr auto;gap:11px;align-items:center}.eventRow h4{margin:0 0 3px;font-size:12px}.eventRow p,.eventRow span{margin:0;color:var(--muted);font-size:9px}
.panelTabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px;flex-wrap:wrap}.panelTabs button{border:1px solid var(--line);background:var(--panel);color:#aebbd0;border-radius:9px;padding:8px 10px;cursor:pointer;font-size:10px}.panelTabs button.active{background:var(--accent);color:white}.panelContent{padding-top:15px;overflow:auto}.dataTable{width:100%;border-collapse:collapse;background:var(--panel)}.dataTable th,.dataTable td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:9px;white-space:nowrap}.dataTable th{color:#8292aa}.dataTable select,.dataTable input{background:#0b111a;color:white;border:1px solid var(--line);border-radius:7px;padding:5px}.statusGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.statusCard{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:16px}.statusCard b,.statusCard small{display:block}.statusCard b{font-size:16px}.statusCard small{font-size:8px;color:var(--muted)}
body.room-open .sidebar,body.room-open .topbar{display:none}body.room-open .app{display:block}body.room-open main{height:100vh}.roomPage.active{height:100vh}.socialRoomShell{height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr);background:#0a0d13}.roomPeople{height:100vh;background:linear-gradient(180deg,rgba(240,242,246,.15),rgba(255,255,255,.06)),#1b2028;border-right:1px solid rgba(255,255,255,.11);display:flex;flex-direction:column;backdrop-filter:blur(18px)}.roomPeopleTop{padding:13px 11px 8px;border-bottom:1px solid rgba(255,255,255,.08)}.roomMiniProfile{display:flex;align-items:center;gap:9px;margin-bottom:10px}.roomMiniProfile b,.roomMiniProfile small{display:block}.roomMiniProfile b{font-size:11px}.roomMiniProfile small{font-size:8px;color:#aab2bd}.peopleTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.peopleTabs button{position:relative;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.07);color:#d8dde6;border-radius:10px;padding:7px 4px;font-size:8px;cursor:pointer}.peopleTabs button.active{background:rgba(25,210,124,.18);color:#72f0b0}.peopleTabs i{position:absolute;right:3px;top:2px;color:#ffde73;font-style:normal}.socialList{flex:1;overflow:auto;padding:7px}.person{display:flex;align-items:center;gap:8px;padding:7px;border-radius:10px;cursor:context-menu}.person:hover{background:rgba(255,255,255,.08)}.person .avatar{width:35px;height:35px}.personInfo{flex:1;min-width:0}.personInfo b{font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.personInfo small{display:block;font-size:8px;color:#e6e8ed;opacity:.7;margin-top:2px}.personRole{font-size:7px;border-radius:999px;padding:3px 5px;background:rgba(114,84,255,.25);color:#ddd5ff}.roomControlsTitle{padding:10px 10px 5px;color:#d6dce6;font-size:9px;border-top:1px solid rgba(255,255,255,.08)}.leftControls{padding:8px 10px 14px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.squareCtl{height:38px;border:1px solid rgba(255,255,255,.1);background:rgba(15,19,26,.52);color:white;border-radius:10px;cursor:pointer}.squareCtl.active{background:rgba(25,210,124,.16);border-color:rgba(25,210,124,.25)}.roomCanvas{height:100vh;position:relative;overflow:hidden;background-color:#3a393a;background-size:cover;background-position:center}.canvasShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,17,.18),rgba(18,17,19,.04) 50%,rgba(5,7,11,.38));pointer-events:none}.roomHeaderFloating{height:58px;position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 14px}.roomOwnerStrip{display:flex;align-items:center;gap:7px}.roomOwnerStrip b,.roomOwnerStrip small{display:block}.roomOwnerStrip b{font-size:10px}.roomOwnerStrip small{font-size:8px;color:#e0e3e7}.roomHeaderCenter{text-align:center}.roomHeaderCenter strong{display:block;font-size:12px;text-shadow:0 2px 10px rgba(0,0,0,.45)}.roomHeaderActions{display:flex;justify-content:flex-end;gap:7px}.iconRound{width:35px;height:35px;border-radius:50%;display:grid;place-items:center}.iconRound.danger{background:rgba(28,30,34,.55);font-size:18px}.connBadge{display:inline-block;margin-top:3px;font-size:7px;border-radius:999px;padding:3px 6px;background:rgba(14,17,22,.44)}.connBadge.good{color:#68e0a1}.connBadge.wait{color:#ffd16e}.connBadge.bad{color:#ff8581}.speakerZone{position:absolute;z-index:4;left:50%;top:68px;transform:translateX(-50%);width:min(720px,66vw)}.speakerZoneHead{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:9px;text-shadow:0 2px 8px rgba(0,0,0,.5)}.speakerZoneHead b{background:rgba(25,210,124,.25);color:#87f6bd;padding:3px 6px;border-radius:999px;font-size:7px}.speakerLine{display:flex;justify-content:center;gap:23px;min-height:72px;flex-wrap:wrap}.speakerPod{width:68px;text-align:center}.speakerAvatar{width:43px;height:43px;border-radius:50%;margin:auto;display:grid;place-items:center;background:linear-gradient(135deg,#168dc9,#6547d7);font-weight:800;font-size:11px;border:2px solid rgba(255,255,255,.7);background-size:cover;background-position:center}.speakerPod.speaking .speakerAvatar{box-shadow:0 0 0 4px rgba(25,210,124,.2),0 0 22px rgba(25,210,124,.5);border-color:#55e99f}.speakerPod b{display:block;font-size:8px;margin-top:4px;text-shadow:0 2px 6px #000}.speakerPod small{display:block;font-size:6px;color:#eff2f6;text-shadow:0 2px 6px #000}.speakerPod.empty{opacity:.62}.speakerPod.empty .speakerAvatar{background:rgba(23,29,39,.74);border-style:dashed}.videoDock{position:absolute;z-index:4;right:62px;top:80px;width:min(510px,42vw);display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:8px}.videoTile{position:relative;aspect-ratio:16/10;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:#0e1117;box-shadow:0 10px 35px rgba(0,0,0,.22)}.videoTile video{width:100%;height:100%;object-fit:cover}.videoTile label{position:absolute;left:7px;bottom:6px;background:rgba(0,0,0,.58);padding:3px 6px;border-radius:999px;font-size:7px}.roomFeed{position:absolute;z-index:4;left:18px;top:170px;width:min(440px,45vw);display:flex;flex-direction:column;gap:7px}.feedCard{align-self:flex-start;max-width:100%;padding:9px 12px;border-radius:12px;background:rgba(91,73,176,.68);border:1px solid rgba(207,198,255,.32);backdrop-filter:blur(10px);font-size:9px}.feedJoin{align-self:center;background:rgba(18,22,28,.62)}.feedGift{background:linear-gradient(135deg,rgba(140,57,230,.75),rgba(215,84,157,.65))}.feedGame{background:rgba(17,104,88,.72)}.roomWatermark{position:absolute;z-index:2;left:50%;top:54%;transform:translate(-50%,-50%);text-align:center;color:rgba(255,255,255,.15);pointer-events:none}.roomWatermark div{font-size:clamp(54px,8vw,128px);font-weight:1000;letter-spacing:-.06em}.roomWatermark small{font-size:12px;color:rgba(255,255,255,.35)}.rightRail{position:absolute;right:13px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:2px;padding:7px;border-radius:15px;background:rgba(17,20,26,.72);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}.rightRail button{width:34px;height:34px;border:0;background:transparent;color:white;border-radius:9px;cursor:pointer}.rightRail button:hover,.rightRail button.active{background:rgba(114,84,255,.32)}.bottomComposer{position:absolute;z-index:6;left:13px;right:13px;bottom:12px;height:49px;border-radius:13px;background:rgba(18,20,25,.72);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(15px);display:flex;align-items:center;padding:6px 8px;gap:8px}.composerTools{display:flex;gap:3px}.composerTools button{width:30px;height:30px;border:0;background:transparent;color:white;cursor:pointer;border-radius:8px}.composerTools button:hover{background:rgba(255,255,255,.07)}.chatPreview{flex:1;min-width:120px;max-width:42%;font-size:8px;color:#dce1e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composerInput{min-width:300px;display:flex;gap:5px;align-items:center;background:rgba(0,0,0,.16);border-radius:9px;padding:2px}.composerInput input{width:100%;border:0;background:transparent;color:white;padding:8px 9px;font-size:9px;outline:none}.composerInput button{width:32px;height:30px;border:0;border-radius:8px;background:var(--accent);color:white;cursor:pointer}.floatingMic{position:absolute;z-index:7;right:22px;bottom:78px;display:flex;flex-direction:column;align-items:center;gap:4px}.micMain{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:#f3f4f6;color:#111827;font-size:21px;cursor:pointer}.micMain.active{background:var(--green);color:white;border-color:#8effc2}.floatingMic span{background:rgba(18,20,25,.75);border-radius:999px;padding:3px 7px;font-size:7px}.networkBadge{position:absolute;right:14px;top:65px;z-index:4;font-size:7px;color:#d5dae1;background:rgba(18,20,25,.48);padding:4px 7px;border-radius:999px}
.drawer{position:fixed;z-index:90;top:0;right:-390px;width:380px;height:100vh;background:#111720;border-left:1px solid var(--line);box-shadow:-25px 0 70px rgba(0,0,0,.36);transition:.25s;display:flex;flex-direction:column}.drawer.open{right:0}.drawerShade{position:fixed;z-index:89;inset:0;background:rgba(0,0,0,.48);opacity:0;pointer-events:none;transition:.2s}.drawerShade.open{opacity:1;pointer-events:auto}.drawerHead{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 14px}.drawerHead b,.drawerHead small{display:block}.drawerHead small{color:var(--muted);font-size:8px}.drawerHead button{border:0;background:transparent;color:white;font-size:20px;cursor:pointer}.drawerBody{padding:10px;overflow:auto}.drawerRoom,.socialRow{display:flex;gap:9px;align-items:center;padding:10px;border-radius:11px;cursor:pointer}.drawerRoom:hover,.socialRow:hover{background:var(--panel2)}.drawerRoom b,.drawerRoom small,.socialRow b,.socialRow small{display:block}.drawerRoom b,.socialRow b{font-size:10px}.drawerRoom small,.socialRow small{font-size:8px;color:var(--muted)}.socialRow .rowBody{flex:1}.rowActions{display:flex;gap:4px}.rowActions button{border:1px solid var(--line);background:#182130;color:#fff;border-radius:7px;padding:5px 7px;font-size:8px;cursor:pointer}.pmThread{display:flex;flex-direction:column;height:calc(100vh - 85px)}.pmMessages{flex:1;overflow:auto;padding:10px}.pmBubble{max-width:82%;margin:5px 0;padding:8px 10px;border-radius:12px;background:#1a2330;font-size:9px}.pmBubble.mine{margin-left:auto;background:#4e3ab2}.pmComposer{display:flex;gap:5px;padding:9px;border-top:1px solid var(--line)}.pmComposer input{flex:1;background:#0b111a;color:white;border:1px solid var(--line);border-radius:9px;padding:9px}.pmComposer button{border:0;background:var(--accent);color:#fff;border-radius:9px;width:38px}.notifyItem{padding:11px;border-bottom:1px solid var(--line)}.notifyItem.unread{background:rgba(114,84,255,.07)}.notifyItem b{font-size:10px}.notifyItem p{font-size:8px;color:var(--muted);margin:4px 0}.contextMenu{position:fixed;width:225px;display:none;z-index:95;background:#141c29;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow)}.ctxHead{display:flex;gap:8px;align-items:center;padding:7px}.ctxHead b,.ctxHead small{display:block}.ctxHead b{font-size:9px}.ctxHead small{font-size:7px;color:var(--muted)}.contextMenu button{width:100%;border:0;background:transparent;color:#dce5f4;text-align:left;border-radius:7px;padding:8px;font-size:9px;cursor:pointer}.contextMenu button:hover{background:var(--panel3)}.ctxSep{height:1px;background:var(--line);margin:4px}.dangerText{color:#ffaaa7!important}
.toolPanel{position:fixed;z-index:96;right:18px;bottom:-720px;width:390px;max-height:75vh;background:#160d27;border:1px solid rgba(160,99,255,.35);border-radius:20px;box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column;overflow:hidden}.toolPanel.open{bottom:18px}.toolShade{position:fixed;z-index:94;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none}.toolShade.open{opacity:1;pointer-events:auto}.toolHead{height:52px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;padding:0 13px}.toolHead>div{display:flex;gap:8px;align-items:center}.toolHead b{font-size:12px}.toolHead button{border:0;background:transparent;color:white;font-size:19px}.toolSearch{padding:8px}.toolSearch input{width:100%;background:#0e0b18;color:white;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px}.chipRow{display:flex;gap:5px;overflow:auto;padding:0 8px 7px}.chipRow button{white-space:nowrap;border:1px solid rgba(255,255,255,.1);background:#211436;color:#cfc5df;border-radius:999px;padding:5px 8px;font-size:8px}.chipRow button.active{background:var(--accent);color:#fff}.tileGrid{padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;overflow:auto}.tile{min-height:66px;border:1px solid rgba(255,255,255,.13);background:#120b21;border-radius:12px;display:grid;place-items:center;text-align:center;padding:5px;cursor:pointer}.tile:hover{border-color:#8d67ff}.tile .asset{font-size:30px;line-height:1}.tile img{max-width:44px;max-height:44px;object-fit:contain}.tile b{display:block;font-size:7px;margin-top:3px}.tile small{display:block;color:#ab9fba;font-size:6px}.toolFoot,.toolBalance,.giftTarget{padding:8px 12px;border-top:1px solid rgba(255,255,255,.1);font-size:8px;color:#b9aec9}.giftTarget{border-top:0;background:rgba(255,255,255,.04)}.animationStage{position:fixed;z-index:120;inset:0;pointer-events:none;overflow:hidden}.animObj{position:absolute;left:50%;top:50%;font-size:90px;transform:translate(-50%,-50%);animation:animPop 2.4s ease forwards}.animObj img{max-width:220px;max-height:220px}.animObj.float{animation:animFloat 3s ease forwards}.animObj.spin{animation:animSpin 2.5s ease forwards}.animObj.bounce{animation:animBounce 2.3s ease forwards}.animObj.burst{animation:animBurst 2.2s ease forwards}.animObj.rocket{animation:animRocket 3s ease forwards}.animObj.shake{animation:animShake 2.2s ease forwards}@keyframes animPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(.9)}}@keyframes animFloat{0%{opacity:0;transform:translate(-50%,20%) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-180%) scale(1.15)}}@keyframes animSpin{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(720deg) scale(1.2)}}@keyframes animBounce{0%{opacity:0;transform:translate(-50%,-40%) scale(.3)}25%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}45%{transform:translate(-50%,-48%) scale(.95)}70%{transform:translate(-50%,-55%) scale(1.05)}100%{opacity:0}}@keyframes animBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}25%{opacity:1;filter:drop-shadow(0 0 35px #fff)}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}@keyframes animRocket{0%{opacity:0;transform:translate(-90%,100%) rotate(-35deg)}15%{opacity:1}100%{opacity:0;transform:translate(120%,-190%) rotate(-35deg)}}@keyframes animShake{0%,100%{opacity:0}10%,80%{opacity:1}20%,40%,60%{transform:translate(-56%,-50%) rotate(-8deg)}30%,50%,70%{transform:translate(-44%,-50%) rotate(8deg)}}
.modalBack{position:fixed;inset:0;display:none;z-index:100;align-items:center;justify-content:center;padding:17px;background:rgba(0,0,0,.66)}.modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:#111824;border:1px solid var(--line);border-radius:17px}.modalHead{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.modalHead h3{font-size:13px;margin:0}.modalBody{padding:16px}.field{margin-bottom:10px}.field label{display:block;color:#a9b7c9;font-size:8px;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;background:#0b111a;border:1px solid var(--line);color:white;border-radius:8px;padding:9px;font-size:9px}.field textarea{min-height:68px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.modalFoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:6px}.profileCard{overflow:hidden;border-radius:14px;background:#0d131d}.profileCover{height:140px;background:linear-gradient(135deg,#5035bb,#122640);background-size:cover;background-position:center}.profileMain{padding:0 16px 16px;margin-top:-35px}.profileMain .avatar{width:70px;height:70px;border:3px solid #111824}.profileMain h3{margin:8px 0 2px}.profileMain p{font-size:9px;color:var(--muted)}.profileStats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.profileStats div{background:#151d29;border-radius:9px;padding:8px;text-align:center}.profileStats b,.profileStats small{display:block}.profileStats small{font-size:7px;color:var(--muted)}.profileActions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.sysMsg{padding:10px;border:1px solid var(--line);border-radius:10px;color:#bdb1ee;background:rgba(114,84,255,.07);font-size:9px}.toast{position:fixed;right:17px;bottom:17px;z-index:130;background:#172131;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:9px;opacity:0;transform:translateY(8px);transition:.2s}.toast.show{opacity:1;transform:none}#audioSink{position:absolute;width:1px;height:1px;overflow:hidden;opacity:.001}
@media(max-width:1150px){.app{grid-template-columns:78px 1fr}.brand>div:last-child,.navBtn span,.walletMini,.health,.profile>div:nth-child(2){display:none}.brand,.profile{justify-content:center}.navBtn{text-align:center}.roomGrid{grid-template-columns:repeat(3,1fr)}.socialRoomShell{grid-template-columns:205px 1fr}.speakerZone{width:70vw}.composerInput{min-width:220px}.chatPreview{display:none}.videoDock{width:38vw}}
@media(max-width:760px){.app{display:block}.sidebar{display:none}.topbar{height:66px;padding:11px}.topbar p,.topActions .ghost,.topActions .reward{display:none}.page{padding:12px}.hero{grid-template-columns:1fr;padding:20px}.hero h2{font-size:24px}.roomGrid{grid-template-columns:repeat(2,1fr)}.search{width:140px}.socialRoomShell{display:block}.roomPeople{display:none}.roomCanvas{height:100vh}.speakerZone{width:94vw;top:70px}.speakerLine{gap:12px}.speakerPod{width:58px}.roomFeed{top:165px;width:78vw}.roomHeaderCenter{display:none}.roomHeaderFloating{grid-template-columns:1fr 1fr}.videoDock{right:48px;top:145px;width:50vw;grid-template-columns:1fr}.composerInput{min-width:0;flex:1}.bottomComposer{right:8px;left:8px}.composerTools button:nth-child(4){display:none}.rightRail{right:7px}.floatingMic{right:12px}.drawer{width:min(90vw,380px)}.toolPanel{right:5vw;width:90vw}.tileGrid{grid-template-columns:repeat(4,1fr)}.statusGrid{grid-template-columns:repeat(2,1fr)}}

/* V3.1 FULL ANIMATION EFFECTS */
.animObj.pulse{animation:animPulse 2.5s ease forwards}.animObj.flash{animation:animFlash 2.2s ease forwards}.animObj.dance{animation:animDance 2.8s ease forwards}.animObj.fly{animation:animFly 3s ease forwards}.animObj.shine{animation:animShine 2.7s ease forwards}.animObj.wave{animation:animWave 2.5s ease forwards}.animObj.snow{animation:animSnow 3s ease forwards}.animObj.steam{animation:animSteam 3s ease forwards}
@keyframes animPulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1}35%,60%{transform:translate(-50%,-50%) scale(1.17)}48%,72%{transform:translate(-50%,-50%) scale(.94)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes animFlash{0%,100%{opacity:0}10%,30%,50%,70%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}20%,40%,60%{opacity:.15;transform:translate(-50%,-50%) scale(.9)}}
@keyframes animDance{0%{opacity:0;transform:translate(-50%,-50%) rotate(-15deg) scale(.5)}15%{opacity:1}25%,55%,85%{transform:translate(calc(-50% - 30px),-55%) rotate(-16deg) scale(1.05)}40%,70%{transform:translate(calc(-50% + 30px),-45%) rotate(16deg) scale(1.05)}100%{opacity:0}}
@keyframes animFly{0%{opacity:0;transform:translate(-160%,20%) rotate(-10deg) scale(.55)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(80%,-140%) rotate(12deg) scale(1.05)}}
@keyframes animShine{0%{opacity:0;filter:drop-shadow(0 0 0 rgba(255,255,255,0));transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}40%,65%{filter:drop-shadow(0 0 34px rgba(255,255,255,.95));transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.1))}}
@keyframes animWave{0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.5)}15%{opacity:1}25%,55%{transform:translate(-50%,-50%) rotate(-16deg) scale(1.05)}40%,70%{transform:translate(-50%,-50%) rotate(16deg) scale(1.05)}100%{opacity:0}}
@keyframes animSnow{0%{opacity:0;transform:translate(-50%,-120%) rotate(0) scale(.7)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-50%,75%) rotate(400deg) scale(1.1)}}
@keyframes animSteam{0%{opacity:0;transform:translate(-50%,-35%) scale(.65)}20%{opacity:1}60%{transform:translate(-50%,-60%) scale(1.06)}100%{opacity:0;transform:translate(-50%,-100%) scale(1.12)}}

/* V3.1.2 stable room fixes */
.videoDock{position:absolute!important;z-index:8!important;inset:58px 52px 66px 0!important;width:auto!important;height:auto!important;display:block!important;pointer-events:none!important;overflow:visible!important}
.videoTile{position:absolute!important;width:260px!important;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:#0d1118;box-shadow:0 14px 38px rgba(0,0,0,.34);pointer-events:auto!important;touch-action:none;user-select:none;transition:box-shadow .15s,transform .15s}
.videoTile.dragging{box-shadow:0 18px 55px rgba(0,0,0,.52),0 0 0 2px var(--accent);transform:scale(1.015);z-index:30}
.videoTile video{width:100%;height:100%;object-fit:cover;display:block}
.videoDragBar{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:6px;padding:0 8px;background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.38),transparent);cursor:grab;color:#fff}
.videoDragBar:active{cursor:grabbing}.videoDragBar span{font-size:14px}.videoDragBar b{font-size:8px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.videoDragBar small{font-size:6px;opacity:.72}
.videoTile>label{display:none!important}
#animationGrid.tileGrid{grid-template-columns:repeat(4,minmax(70px,1fr));gap:9px;padding:10px}
#animationGrid .tile{min-height:92px;border-radius:14px;background:#120b21}
#animationGrid .tile img{width:68px;height:68px;max-width:68px;max-height:68px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.24))}
#animationGrid .tile b{font-size:8px;line-height:1.1}
.animObj img{max-width:280px!important;max-height:280px!important;filter:drop-shadow(0 14px 30px rgba(0,0,0,.32))}
@media(max-width:760px){
 .videoDock{inset:58px 42px 66px 0!important}
 .videoTile{width:205px!important}
 #animationGrid.tileGrid{grid-template-columns:repeat(3,minmax(72px,1fr))}
 #animationGrid .tile img{width:64px;height:64px}
}

/* ==========================================================
   V3.2.5 MOBILE PRO - global responsive layer
   ========================================================== */
.mobileBottomNav,.roomPeopleMobileBtn,.roomPeopleMobileClose{display:none}

@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  body.room-open,body.game-room-open{padding-bottom:0}
  .app{width:100%;min-width:0}
  main{width:100%;min-width:0}
  .topbar{height:58px;padding:8px 10px;top:0;z-index:40}
  .topbar h1{font-size:15px;max-width:48vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar p{display:none}
  .topActions{gap:4px}
  .topActions .btn{padding:7px 9px;font-size:8px;border-radius:9px}
  .topActions .ghost,.topActions .reward{display:none!important}
  .page{padding:10px 10px calc(82px + env(safe-area-inset-bottom));min-width:0}
  .roomPage,.gameRoomPage{padding-bottom:0!important}
  .hero{min-height:0;padding:17px;border-radius:16px}
  .hero h2{font-size:21px}
  .hero p{font-size:10px;line-height:1.5}
  .heroStats{gap:5px}
  .heroStats div{padding:10px 5px}
  .heroStats strong{font-size:17px}
  .sectionHead{gap:8px;align-items:flex-start;flex-wrap:wrap;margin:18px 0 9px}
  .sectionHead>div{min-width:0;flex:1}
  .sectionHead h3{font-size:13px}
  .searchRow{width:100%;display:flex;gap:5px}
  .searchRow .search{flex:1;width:auto;min-width:0}
  .roomGrid{grid-template-columns:1fr 1fr;gap:8px}
  .roomCard{min-height:150px;padding:12px;border-radius:14px}
  .roomCard h4{font-size:12px;margin-top:12px}
  .eventRow{grid-template-columns:1fr;gap:6px}
  .formGrid{grid-template-columns:1fr}
  .modalBack{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .modalBody{padding:13px}
  .modalHead,.modalFoot{padding:11px 13px}
  .panelTabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-bottom:8px}
  .panelTabs::-webkit-scrollbar{display:none}
  .panelTabs button{flex:0 0 auto}
  .panelContent{overflow:auto;-webkit-overflow-scrolling:touch}
  .dataTable{min-width:720px}
  .statusGrid{grid-template-columns:1fr 1fr}
  .drawer{width:100vw;max-width:100vw}
  .toolPanel{position:fixed;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100vw!important;max-width:none!important;max-height:78dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .tileGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .toolSearch input{font-size:16px} /* iOS zoom prevention */
  input,select,textarea{font-size:16px!important}
  .toast{left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom));text-align:center}
  body.room-open .toast,body.game-room-open .toast{bottom:10px}

  .mobileBottomNav{position:fixed;z-index:120;left:8px;right:8px;bottom:calc(7px + env(safe-area-inset-bottom));height:58px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:4px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(12,16,23,.94);box-shadow:0 14px 40px rgba(0,0,0,.42);backdrop-filter:blur(18px)}
  .mobileBottomNav button{position:relative;border:0;background:transparent;color:#8998ad;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0}
  .mobileBottomNav button>span{font-size:18px;line-height:1}
  .mobileBottomNav button>b{font-size:7px;font-weight:800}
  .mobileBottomNav button.active{color:#fff;background:rgba(114,84,255,.18)}
  .mobileBottomNav button.active>span{transform:translateY(-1px)}
  .mobileBottomNav i{position:absolute;right:17%;top:3px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#ef5350;color:#fff;font-style:normal;font-size:7px;display:none;place-items:center}
  .mobileBottomNav i.show{display:grid}
  body.room-open .mobileBottomNav,body.game-room-open .mobileBottomNav{display:none}

  /* social room on mobile */
  body.room-open{overflow:hidden}
  .roomPage.active,.socialRoomShell,.roomCanvas{height:100dvh!important;min-height:100dvh}
  .roomPeople{display:flex!important;position:fixed;z-index:150;left:0;top:0;bottom:0;width:min(86vw,340px);height:100dvh;transform:translateX(-105%);transition:transform .22s ease;box-shadow:20px 0 55px rgba(0,0,0,.42)}
  body.mobile-room-people-open .roomPeople{transform:translateX(0)}
  body.mobile-room-people-open:after{content:"";position:fixed;z-index:149;inset:0;background:rgba(0,0,0,.48)}
  .roomPeopleMobileClose{display:grid;position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;border-radius:50%;place-items:center;background:rgba(0,0,0,.22);color:#fff;font-size:18px;z-index:3}
  .roomPeopleMobileBtn{display:inline-flex!important;align-items:center;gap:3px}
  .roomPeopleMobileBtn span,#allRoomsBtn span{display:none}
  .roomHeaderFloating{height:54px;grid-template-columns:minmax(0,1fr) auto;padding:5px 7px}
  .roomOwnerStrip{min-width:0}
  .roomOwnerStrip>div:last-child{min-width:0}
  .roomOwnerStrip b{max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .roomHeaderActions{gap:4px}
  .roomHeaderActions .btn{padding:7px 8px}
  .speakerZone{top:60px;width:96vw}
  .speakerZoneHead{margin-left:4px}
  .speakerLine{gap:8px;max-height:126px;overflow-y:auto}
  .speakerPod{width:50px}
  .speakerAvatar{width:38px;height:38px}
  .roomFeed{left:7px;top:150px;width:74vw}
  .feedCard{font-size:8px;padding:7px 9px}
  .rightRail{right:5px;top:48%;padding:4px}
  .rightRail button{width:31px;height:31px}
  .bottomComposer{height:auto;min-height:47px;left:6px;right:6px;bottom:calc(6px + env(safe-area-inset-bottom));gap:4px;padding:5px}
  .composerTools{gap:1px}
  .composerTools button{width:27px;height:30px}
  .composerTools button:nth-child(4),.composerTools button:nth-child(5){display:none}
  .composerInput input{font-size:16px!important;padding:7px}
  .floatingMic{right:8px;bottom:calc(64px + env(safe-area-inset-bottom))}
  .micMain{width:50px;height:50px}
  .networkBadge{right:5px;top:57px}
  .videoDock{inset:58px 40px 64px 0!important}
  .videoTile{width:min(54vw,220px)!important}
  .videoDragBar{height:28px}
}

@media(max-width:430px){
  .roomGrid{grid-template-columns:1fr}
  .heroStats{grid-template-columns:repeat(3,1fr)}
  .statusGrid{grid-template-columns:1fr}
  .tileGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mobileBottomNav{left:5px;right:5px}
}

@media(max-width:760px) and (orientation:landscape){
  body:not(.room-open):not(.game-room-open){padding-bottom:58px}
  .mobileBottomNav{height:48px}
  .mobileBottomNav button{flex-direction:row;gap:5px}
  .mobileBottomNav button>span{font-size:16px}
  .roomFeed{top:105px}
  .speakerZone{top:54px}
}

/* V3.2.6 MOBILE PANEL STABLE HOTFIX */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body.tool-open{overflow:hidden!important;touch-action:none}
  body.tool-open .mobileBottomNav{display:none!important}

  .app,main,.page,.page.active,.hero,.sectionHead,.searchRow,.roomGrid,.eventList,.panelContent,.socialRoomShell,.roomCanvas{
    max-width:100%!important;min-width:0!important
  }
  .page>*{max-width:100%}
  img,video,canvas,svg{max-width:100%}

  .toolPanel{
    display:flex!important;
    position:fixed!important;
    z-index:136!important;
    left:8px!important;
    right:8px!important;
    top:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(82dvh - env(safe-area-inset-bottom))!important;
    min-height:0!important;
    border-radius:20px!important;
    padding-bottom:0!important;
    transform:translateY(calc(100% + 40px))!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .24s cubic-bezier(.22,.8,.26,1),opacity .16s ease,visibility .24s!important;
    contain:layout paint;
  }
  .toolPanel.open{
    transform:translateY(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .toolPanel:not(.open){transform:translateY(calc(100% + 40px))!important}
  #animationPanel{height:min(74dvh,690px)}
  #giftPanel{height:min(67dvh,620px)}
  #gamePanel{height:min(52dvh,470px)}

  .toolShade{
    z-index:134!important;
    background:rgba(0,0,0,.58)!important;
    backdrop-filter:blur(2px);
    transition:opacity .18s ease!important;
  }
  .toolShade.open{opacity:1!important;pointer-events:auto!important}

  .toolHead{flex:0 0 50px;height:50px;padding:0 12px}
  .toolHead b{font-size:14px}
  .toolHead button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;cursor:pointer}
  .toolSearch{flex:0 0 auto;padding:8px 10px}
  .toolSearch input{height:44px;border-radius:12px}
  .chipRow{flex:0 0 auto;padding:0 10px 8px;scrollbar-width:none}
  .chipRow::-webkit-scrollbar{display:none}
  .chipRow button{font-size:9px;padding:6px 10px}
  .toolBalance,.giftTarget,.toolFoot{flex:0 0 auto;font-size:9px;padding:9px 12px}

  .toolPanel .tileGrid{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    padding:9px 10px 12px!important;
  }
  .toolPanel .tile{min-width:0!important;min-height:92px!important;border-radius:15px!important;padding:7px 4px!important}
  .toolPanel .tile img{width:62px!important;height:62px!important;max-width:62px!important;max-height:62px!important;object-fit:contain!important}
  .toolPanel .tile .asset{font-size:34px}
  .toolPanel .tile b{font-size:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toolPanel .tile small{font-size:7px}

  .searchRow{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;width:100%!important}
  .searchRow .btn{white-space:nowrap;max-width:46vw}
  .searchRow .search{width:100%!important;max-width:100%!important}
  .sectionHead{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .roomGrid{width:100%!important}
  .drawer{max-width:100vw!important}
  .modal{max-width:100vw!important}
  .mobileBottomNav{max-width:calc(100vw - 10px)!important}
  .toast{max-width:calc(100vw - 20px)!important}
}
@media(max-width:390px){
  .toolPanel{left:5px!important;right:5px!important;bottom:calc(5px + env(safe-area-inset-bottom))!important}
  .toolPanel .tileGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;padding-left:7px!important;padding-right:7px!important}
  .toolPanel .tile{min-height:86px!important}
  .toolPanel .tile img{width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important}
}
@media(max-width:340px){
  .toolPanel .tileGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}