/* ===== performance: lighter effects, no heavy blur on lists ===== */
:root{--s1:rgba(255,255,255,.07);--s2:rgba(255,255,255,.13);--ln:rgba(255,255,255,.1);--ok:#30d158;--bad:#ff453a}
html[data-mode=light]{--s1:rgba(0,0,0,.045);--s2:rgba(0,0,0,.08);--ln:rgba(0,0,0,.1)}
.view{filter:none!important}
.blob{filter:blur(56px);will-change:transform}
.card,.soc,.arena,.g48,.opt,.tile,.ig{-webkit-backdrop-filter:none;backdrop-filter:none}
button,.btn{touch-action:manipulation}
.ic{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
#nav button{position:relative}
.badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:17px;height:17px;border-radius:9px;background:#ff3b5c;color:#fff;font:800 10px/17px system-ui;text-align:center;padding:0 4px;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.badge.on{transform:scale(1)}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--s1);color:var(--t);flex:none;transition:transform .15s,background .2s}
.iconbtn:active{transform:scale(.9)}.iconbtn.pri{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}.iconbtn.red{background:#ff3b5c;color:#fff}.iconbtn.on{background:var(--ac);color:#fff}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--s1);font-size:12px;font-weight:600}
.botav{display:inline-grid;place-items:center;background:linear-gradient(135deg,#475569,#94a3b8);color:#fff;border-radius:50%;width:var(--s);height:var(--s)}
#iv{position:absolute;inset:0;z-index:120;background:rgba(0,0,0,.92);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s;overflow:auto}
#iv.on{opacity:1;visibility:visible}#iv img{max-width:100%;max-height:100%;border-radius:8px;transition:transform .3s}#iv.zoom img{transform:scale(1.9)}
.ivx{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;color:#fff;font-size:22px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);z-index:2}

/* ===== chat list ===== */
#v-chat .chhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cvl{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.cvi{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:20px;cursor:pointer;transition:background .2s,transform .15s;position:relative}
.cvi:hover{background:var(--s1)}.cvi:active{transform:scale(.98)}.cvi.on{background:var(--s2)}
.cvi .mid{flex:1;min-width:0}.cvi h3{font-size:16px;margin:0 0 2px;display:flex;gap:6px;align-items:center}
.cvi .pv{font-size:13px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvi .tm{font-size:11px;opacity:.55;align-self:flex-start;margin-top:3px}
.cvi.hasun .pv{opacity:1;font-weight:700}.cvi .un-b{min-width:20px;height:20px;border-radius:10px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;font:800 11px/20px system-ui;text-align:center;padding:0 6px}
.grpav{width:var(--s,48px);height:var(--s,48px);border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;color:#fff;flex:none}
.sec{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin:14px 6px 2px}
@media(min-width:900px){#v-chat>*{max-width:330px}#v-chat.on::after{content:"Pick a conversation to start talking";position:absolute;left:calc(372px + 24px);right:24px;top:50%;text-align:center;opacity:.35;font-size:18px;pointer-events:none}}

/* ===== thread (conversation) ===== */
#thread{position:absolute;inset:0;z-index:36;background:var(--bg);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .42s var(--e);visibility:hidden}
#thread.open{transform:none;visibility:visible}
@media(min-width:900px){#thread{left:calc(268px + 372px);transform:translateX(30px);opacity:0;transition:.3s}#thread.open{transform:none;opacity:1}}
.thh{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid var(--ln);background:var(--bg)}
.thh .mid{flex:1;min-width:0}.thh h3{font-size:16px;margin:0}.thh .sub{margin:0;font-size:12px}
.cp{display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
.msgs{flex:1;overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.day{align-self:center;font-size:11px;font-weight:700;opacity:.55;padding:4px 12px;border-radius:99px;background:var(--s1);margin:10px 0 6px}
.mrow{display:flex;gap:8px;align-items:flex-end;margin-top:6px;animation:mIn .28s var(--e)}
.mrow.g{margin-top:1px}.mrow.me{flex-direction:row-reverse}
@keyframes mIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.mrow .avs0{width:28px;flex:none}
.mcol{display:flex;flex-direction:column;max-width:78%;gap:2px}.mrow.me .mcol{align-items:flex-end}
.mn{font-size:11px;opacity:.6;margin:0 0 1px 8px}
.bub{padding:8px 12px;border-radius:19px;background:var(--s2);line-height:1.38;font-size:15px;word-break:break-word;white-space:pre-wrap;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}
.mrow:not(.me) .bub{border-bottom-left-radius:6px}.mrow.me .bub{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border-bottom-right-radius:6px}
.mrow.g:not(.me) .bub{border-top-left-radius:6px}.mrow.g.me .bub{border-top-right-radius:6px}
.bub.img{padding:3px;background:var(--s2)}.bub.img img{display:block;max-width:min(260px,64vw);max-height:340px;border-radius:16px;min-width:120px;min-height:80px;background:var(--s1)}
.bub .tt{font-size:10px;opacity:.6;margin-left:8px;float:right;margin-top:6px}
.bub.img .tt{position:absolute;right:10px;bottom:8px;background:rgba(0,0,0,.45);color:#fff;border-radius:99px;padding:1px 7px;margin:0;opacity:1}
.bub.del{opacity:.5;font-style:italic;background:transparent;border:1px dashed var(--ln)}
.rpl{border-left:3px solid var(--ac);background:rgba(0,0,0,.14);border-radius:8px;padding:4px 8px;margin-bottom:5px;font-size:12px;opacity:.9;max-width:100%}
.rpl b{display:block;font-size:11px}.rpl span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.rxs{display:flex;gap:4px;margin:-8px 8px 0;position:relative;z-index:1}
.rxs span{background:var(--bg);border:1px solid var(--ln);border-radius:99px;padding:1px 7px;font-size:12px;box-shadow:0 2px 6px #0003}
.seen{font-size:10px;opacity:.55;align-self:flex-end;margin:1px 4px 0}
.tpl{height:22px;padding:0 16px;font-size:12px;opacity:.7;display:flex;align-items:center;gap:6px}
.dots3 i{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:2px;animation:d3 1s infinite}.dots3 i:nth-child(2){animation-delay:.15s}.dots3 i:nth-child(3){animation-delay:.3s}
@keyframes d3{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.jump{position:absolute;right:14px;bottom:84px;width:40px;height:40px;border-radius:50%;background:var(--bg);box-shadow:0 6px 18px #0005;display:grid;place-items:center;transform:scale(0);transition:.25s;z-index:3}.jump.on{transform:scale(1)}
.cmp{display:flex;gap:8px;align-items:flex-end;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--ln);background:var(--bg)}
.cmp textarea{flex:1;resize:none;max-height:120px;min-height:42px;border-radius:21px;padding:11px 16px;background:var(--s1);color:var(--t);border:1px solid var(--ln);line-height:1.3;font:inherit;font-size:15px;outline:none}
.cmp textarea:focus{border-color:var(--ac)}
.rbar{display:none;align-items:center;gap:12px;flex:1;padding:0 6px;height:42px}.cmp.rec .rbar{display:flex}.cmp.rec textarea,.cmp.rec .hid{display:none}
.rbar .dot{width:12px;height:12px;border-radius:50%;background:#ff3b5c;animation:pul 1s infinite}@keyframes pul{50%{opacity:.3;transform:scale(.8)}}
.rbar .lv{flex:1;height:26px;display:flex;gap:2px;align-items:center}.rbar .lv i{flex:1;background:var(--ac);border-radius:2px;min-height:3px;transition:height .1s}
.rplbar{display:none;padding:8px 14px;border-top:1px solid var(--ln);background:var(--s1);font-size:13px;align-items:center;gap:10px}.rplbar.on{display:flex}.rplbar div{flex:1;min-width:0}.rplbar b{display:block;font-size:12px;color:var(--ac)}.rplbar span{display:block;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emo{display:none;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;border-top:1px solid var(--ln);background:var(--bg);max-height:190px;overflow-y:auto}.emo.on{display:grid}.emo button{font-size:24px;padding:5px 0;border-radius:10px}.emo button:active{background:var(--s2)}
.vmsg{display:flex;align-items:center;gap:10px;min-width:200px}
.vmsg button{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;color:inherit;flex:none}
.mrow:not(.me) .vmsg button{background:var(--ac);color:#fff}
.vmsg .wv{display:flex;align-items:center;gap:2px;height:30px;flex:1;position:relative}.vmsg .wv i{flex:1;border-radius:2px;background:currentColor;opacity:.35;min-height:3px}.vmsg .wv i.on{opacity:1}
.vmsg small{font-size:11px;opacity:.75;min-width:30px}
.actsheet{display:flex;flex-direction:column;gap:6px}.actsheet .qr{display:flex;justify-content:space-around;background:var(--s1);border-radius:99px;padding:6px}.actsheet .qr button{font-size:26px;padding:4px 8px;border-radius:50%;transition:transform .15s}.actsheet .qr button:active{transform:scale(1.4)}
.actsheet .ab{display:flex;gap:12px;align-items:center;padding:13px 16px;border-radius:16px;background:var(--s1);font-weight:600;text-align:left}.actsheet .ab.red{color:#ff6b7f}

/* ===== calls ===== */
#callpill{position:absolute;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-140%);z-index:90;display:flex;gap:10px;align-items:center;padding:7px 8px 7px 16px;border-radius:99px;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-size:13px;font-weight:700;box-shadow:0 10px 30px #0007;transition:transform .45s var(--e);cursor:pointer;max-width:94vw}
#callpill.on{transform:translate(-50%,0)}#callpill .iconbtn{width:34px;height:34px;background:rgba(255,255,255,.22);color:#fff}#callpill .iconbtn.red{background:#ff3b5c}
.cstat{font-size:11px;opacity:.85;font-weight:600}
#callsheet{position:absolute;inset:0;z-index:95;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--ac) 40%,#0b0b14),#07070d);color:#fff;display:flex;flex-direction:column;align-items:center;padding:calc(30px + env(safe-area-inset-top)) 20px calc(26px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .5s var(--e);visibility:hidden}
#callsheet.on{transform:none;visibility:visible}
#callsheet h2{margin:0;font-size:22px}#callsheet .cstat{margin-top:4px}
.cgrid{flex:1;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-content:center;max-width:520px;overflow-y:auto;padding:10px}
.cpar{display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;position:relative}
.cpar .onw{position:relative}.cpar .onw::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid #4ade80;opacity:0;transform:scale(.9);transition:.2s}
.cpar.spk .onw::before,.onw.spk::before{opacity:1;transform:scale(1);animation:ring 1.2s infinite}
@keyframes ring{50%{box-shadow:0 0 0 8px rgba(74,222,128,.25)}}
.cpar p{margin:0;font-size:13px;font-weight:600}.cpar .mu{position:absolute;top:0;right:12px;width:24px;height:24px;border-radius:50%;background:#ef4444;display:grid;place-items:center}
.cctl{display:flex;gap:18px;align-items:center}.cctl .iconbtn{width:60px;height:60px;background:rgba(255,255,255,.16);color:#fff}.cctl .iconbtn.red{width:68px;height:68px;background:#ff3b5c}.cctl .iconbtn.on{background:#fff;color:#111}
#incoming{position:absolute;inset:0;z-index:110;background:radial-gradient(110% 80% at 50% 20%,color-mix(in srgb,var(--ac) 45%,#0b0b14),#050509);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(70px + env(safe-area-inset-top)) 24px calc(60px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:.35s}
#incoming.on{opacity:1;visibility:visible}#incoming .who{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
#incoming .who .onw{animation:rg 1.6s infinite}@keyframes rg{0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}100%{box-shadow:0 0 0 38px rgba(255,255,255,0)}}
#incoming h1{margin:0;font-size:28px}#incoming p{margin:0;opacity:.7}
.inc-b{display:flex;gap:70px}.inc-b button{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:600}.inc-b .iconbtn{width:72px;height:72px}.inc-b .acc .iconbtn{background:#22c55e;animation:bn 1.2s infinite}@keyframes bn{50%{transform:scale(1.1)}}
#invbar{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;z-index:105;display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
.invc{pointer-events:auto;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:22px;background:var(--bg);box-shadow:0 14px 40px #000a;border:1px solid var(--ln);max-width:420px;width:100%;animation:inv .5s var(--e)}
@keyframes inv{from{transform:translateY(-120%);opacity:0}}
.invc .mid{flex:1;min-width:0;font-size:14px}.invc b{display:block}.invc .btn{padding:9px 14px;flex:none}

/* ===== Facebook-style profile ===== */
#profile.fbp{padding:0}
.fbw{max-width:960px;margin:0 auto;padding-bottom:40px}
.pcover{height:210px;background:linear-gradient(135deg,var(--ac),var(--ac2));background-size:cover;background-position:center;position:relative;border-radius:0 0 26px 26px;overflow:hidden}
.pcover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.35))}
.pcover .iconbtn{position:absolute;z-index:2;background:rgba(0,0,0,.45);color:#fff;width:40px;height:40px}
.pcover .cb{right:12px;bottom:12px}.pcover .bk{left:12px;top:calc(12px + env(safe-area-inset-top))}
.phead{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-66px;padding:0 16px;position:relative;z-index:3}
.pavw{position:relative}.pavw .av{--s:132px;border:5px solid var(--bg);box-shadow:0 8px 30px #0006}
.pavw .iconbtn{position:absolute;right:2px;bottom:6px;width:36px;height:36px;border:3px solid var(--bg)}
.pavw .od{width:20px;height:20px;border-width:4px;right:10px;bottom:10px}
.phead h1{font-size:26px;margin:10px 0 0;line-height:1.1}.phead .nick{opacity:.6;font-size:14px;margin-top:2px}
.phead .stl{margin-top:8px;padding:6px 14px;border-radius:99px;background:var(--s1);font-size:13px}
.phead .bio{margin:10px 0 0;max-width:460px;line-height:1.45;opacity:.9}
.pstat{display:flex;gap:26px;margin:14px 0 4px;justify-content:center}.pstat div{text-align:center}.pstat b{display:block;font-size:19px}.pstat span{font-size:11px;opacity:.6;text-transform:uppercase;letter-spacing:.06em}
.pact{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center}.pact .btn{padding:11px 18px;display:inline-flex;align-items:center;gap:8px;flex:none}
.ptabs{display:flex;gap:2px;overflow-x:auto;position:sticky;top:0;z-index:6;background:var(--bg);padding:8px 10px 0;margin-top:16px;border-bottom:1px solid var(--ln);scrollbar-width:none}.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex:none;padding:11px 16px 13px;font-weight:700;font-size:14px;opacity:.55;position:relative;transition:opacity .2s;display:flex;gap:7px;align-items:center}
.ptabs button.on{opacity:1}.ptabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ac),var(--ac2));transform:scaleX(0);transition:transform .3s var(--e)}.ptabs button.on::after{transform:scaleX(1)}
.pbody{padding:14px 12px 0;display:grid;gap:12px}
@media(min-width:900px){.pcover{height:300px;border-radius:0 0 30px 30px}.phead{flex-direction:row;text-align:left;align-items:flex-end;gap:22px;margin-top:-80px;padding:0 28px}.pavw .av{--s:168px}.phead .info{flex:1;padding-bottom:6px}.phead .pact{justify-content:flex-start}.pstat{justify-content:flex-start}.pbody.two{grid-template-columns:340px 1fr;align-items:start}}
.irow{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--ln)}.irow:last-child{border:0}.irow .k{opacity:.6;font-size:13px;min-width:92px}.irow b{font-weight:600;flex:1;text-align:right;word-break:break-word}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;cursor:pointer;transition:transform .2s}.pgrid img:active{transform:scale(.96)}
.frg{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.frg .fc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:20px;background:var(--s1);cursor:pointer;text-align:center}.frg .fc b{font-size:14px}
.gstat{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ln)}.gstat:last-child{border:0}.gstat .gi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--s1)}.gstat .mid{flex:1}.gstat .mid b{display:block}.gstat .mid span{font-size:12px;opacity:.6}
.wl{display:flex;gap:6px;font-size:12px;font-weight:700}.wl i{font-style:normal;padding:3px 8px;border-radius:99px;background:var(--s1)}.wl .w{color:var(--ok)}.wl .l{color:var(--bad)}
/* posts */
.post{padding:14px;border-radius:24px;background:var(--s1);border:1px solid var(--ln);animation:mIn .35s var(--e)}
.post .ph{display:flex;gap:10px;align-items:center;margin-bottom:10px}.post .ph .mid{flex:1}.post .ph b{font-size:15px}.post .ph small{opacity:.55;font-size:12px;display:block}
.post .pt{white-space:pre-wrap;word-break:break-word;line-height:1.45;margin-bottom:10px}
.post .pi{width:100%;border-radius:18px;display:block;max-height:520px;object-fit:cover;background:var(--s2);min-height:120px;cursor:pointer}
.post .pa{display:flex;gap:6px;margin-top:10px;border-top:1px solid var(--ln);padding-top:8px}.post .pa button{flex:1;display:flex;gap:7px;align-items:center;justify-content:center;padding:9px;border-radius:12px;font-weight:700;font-size:13px;opacity:.75}.post .pa button.lk{color:#ff4d6d;opacity:1}.post .pa button:active{background:var(--s2)}
.post .cms{margin-top:8px;display:flex;flex-direction:column;gap:6px}.post .cm{display:flex;gap:8px;font-size:14px}.post .cm .cb2{background:var(--s2);padding:7px 12px;border-radius:16px}.post .cm b{font-size:12px;display:block;opacity:.7}
.post .ci{width:100%;margin-top:8px;padding:10px 14px;border-radius:99px;background:var(--s2);border:0;color:var(--t);outline:none}
.compose{padding:14px;border-radius:24px;background:var(--s1);border:1px solid var(--ln)}.compose textarea{width:100%;min-height:70px;background:transparent;border:0;color:var(--t);resize:none;outline:none;font:inherit;font-size:16px}.compose .row{display:flex;gap:8px;justify-content:space-between;align-items:center}.compose img.pv{width:100%;border-radius:16px;margin-bottom:8px}
.ed .in{margin-bottom:8px}.ed label{font-size:12px;opacity:.6;font-weight:700;display:block;margin:8px 0 4px}.ed .kv{display:flex;gap:6px;margin-bottom:6px}.ed .kv input:first-child{max-width:38%}

/* ===== online game rooms ===== */
#room{position:absolute;inset:0;z-index:38;background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .5s var(--e);visibility:hidden}
#room.open{transform:none;visibility:visible}
@media(min-width:900px){#room{left:268px}}
.rtop{display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;border-bottom:1px solid var(--ln);z-index:4}
.rtop .mid{flex:1;min-width:0}.rtop h3{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rtop .sub{margin:0;font-size:12px}
.rbody{flex:1;display:flex;min-height:0;position:relative}
.rmain{flex:1;min-width:0;position:relative;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.rchat{position:absolute;left:0;right:0;bottom:0;height:min(70dvh,560px);background:var(--bg);border-radius:26px 26px 0 0;box-shadow:0 -14px 50px #000a;transform:translateY(105%);transition:transform .4s var(--e);z-index:30;display:flex;flex-direction:column;border:1px solid var(--ln)}
.rchat.open{transform:none}.rchat .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px;font-weight:700}
@media(min-width:1100px){.rchat{position:relative;transform:none!important;width:340px;height:auto;border-radius:0;box-shadow:none;border:0;border-left:1px solid var(--ln)}.rchat .hd button{display:none}#rchatbtn{display:none}}
.lobby{max-width:560px;margin:0 auto;padding:16px 14px 30px;display:flex;flex-direction:column;gap:14px}
.lhero{display:flex;gap:14px;align-items:center;padding:16px;border-radius:26px;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 14px 40px color-mix(in srgb,var(--g1) 45%,transparent)}
.lhero .gi{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}.lhero h2{margin:0;font-size:22px}.lhero p{margin:2px 0 0;opacity:.85;font-size:13px}
.seats{display:grid;gap:8px}.seat{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;background:var(--s1);border:1px solid var(--ln);animation:mIn .3s var(--e)}
.seat .mid{flex:1;min-width:0}.seat .mid b{display:block}.seat .mid span{font-size:12px;opacity:.6}.seat.empty{border-style:dashed;opacity:.6}
.seat .tag{font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;background:var(--ac);color:#fff;letter-spacing:.04em}
.opts2{display:flex;flex-direction:column;gap:10px}.opts2 .og{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.opts2 .og>span{font-size:12px;font-weight:700;opacity:.6;min-width:70px}
.opts2 .og button{padding:8px 14px;border-radius:99px;background:var(--s1);font-weight:700;font-size:13px;border:1px solid transparent}.opts2 .og button.on{background:var(--ac);color:#fff}
.invl{display:flex;gap:10px;overflow-x:auto;padding:4px 2px}.invl .it{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;flex:none;width:64px;cursor:pointer}.invl .it.sent{opacity:.45}
.rres{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(0,0,0,.55);animation:fade .4s}@keyframes fade{from{opacity:0}}
.rres .box{background:var(--bg);border-radius:30px;padding:26px 24px;text-align:center;max-width:340px;width:88%;box-shadow:0 30px 80px #000c;animation:pop .5s var(--e);border:1px solid var(--ln)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.rres h2{margin:6px 0 4px;font-size:26px}.rres .row{margin-top:16px}
.conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:25}.conf i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:cf 2.6s linear forwards}
@keyframes cf{to{transform:translate3d(var(--dx),110vh,0) rotate(720deg)}}
.rulesbox{font-size:14px;line-height:1.55}.rulesbox h3{margin:12px 0 4px}.rulesbox li{margin:3px 0 3px 18px}
.olist .ir{align-items:center}.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.oc{position:relative;border-radius:26px;padding:16px 14px 14px;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));cursor:pointer;overflow:hidden;min-height:132px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 12px 30px color-mix(in srgb,var(--g1) 40%,transparent);transition:transform .25s var(--e)}
.oc:active{transform:scale(.96)}.oc .gi{position:absolute;top:12px;right:12px;opacity:.95}.oc b{font-size:18px;display:block}.oc span{font-size:12px;opacity:.85}.oc em{font-style:normal;position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;background:rgba(0,0,0,.28);padding:3px 8px;border-radius:99px}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff3b5c;margin-right:6px;animation:pul 1.2s infinite}
.pav{position:relative;display:inline-flex}.pav.turn::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--tc,#fbbf24);animation:ring 1.2s infinite}
[data-uid].spk .av{box-shadow:0 0 0 3px #4ade80,0 0 18px #4ade80}

/* never let overlays that sit off-screen scroll the app sideways */
#app{overflow:hidden;overflow:clip}
.uhand{justify-content:safe center}

@media(min-width:900px){#thb{display:none}}
.crw{margin-bottom:6px}