:root{--bg:#0d0f1a;--card:#161a2b;--line:#262b42;--txt:#eef1ff;--muted:#8b91b0;--p:#6c7cff;--p2:#8a5cff;--ok:#22c55e;--off:#1a1a1a;--warn:#f5a524;--danger:#ff5d7a;--bar:72px;--safe:env(safe-area-inset-bottom,0px);--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--txt);font:15px/1.4 var(--font);overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.hidden{display:none!important}
.screen{min-height:100%;min-height:100dvh}.center{display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 16px 50px #0008}.card.narrow{width:min(420px,100%)}
.logo{font-weight:800;font-size:1.15rem}.logo .pill{font-size:.65rem;background:#f5a52433;color:var(--warn);border:1px solid #f5a52455;border-radius:999px;padding:.1em .5em;margin-left:4px}
.muted{color:var(--muted)}.small{font-size:.82rem}.err{color:var(--danger);min-height:1.1em}
label{display:block;margin:.65rem 0 .2rem;font-size:.9rem;color:var(--muted)}
input,select,textarea{width:100%;background:#0e1222;border:1px solid var(--line);border-radius:12px;padding:11px 12px;outline:none}
.btn{background:#222743;border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--txt)}.btn.primary{background:linear-gradient(135deg,var(--p),var(--p2));border:0;font-weight:700}.btn.warn{background:#3a2a12;border-color:#6a4a1a;color:#ffd48a}.btn.danger{background:#3a1520;border-color:#6a2035;color:#ffb0c0}.btn.wide{width:100%;margin-top:8px}.btn:disabled{opacity:.45}
.check{display:flex;gap:10px;align-items:flex-start;margin:.5rem 0;color:var(--txt)}.check input{width:auto;margin-top:3px}
.rules{background:#0e1222;border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;font-size:.9rem}.rules ul{margin:.3rem 0 0;padding-left:1.1rem}
#v-app{display:flex;flex-direction:column;height:100%;height:100dvh;padding:0}
.top{display:flex;align-items:center;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));border-bottom:1px solid var(--line);background:#12162aee;backdrop-filter:blur(8px);z-index:20;flex-wrap:wrap}
.tabs{display:flex;gap:2px;flex:1}.tab{background:transparent;border:0;color:var(--muted);padding:8px 10px;border-radius:10px}.tab.active{background:#222743;color:var(--txt)}
.badge{background:var(--danger);color:#fff;border-radius:999px;padding:0 6px;font-size:.7rem;margin-left:2px}
.online{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.85rem;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#333;display:inline-block;flex:0 0 auto}
.dot.live,.dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.off{background:#111;border:1px solid #333}

/* Call layout — mobile first */
.call-pane{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.videos{position:relative;flex:1;min-height:0;background:#05070f;overflow:hidden}
.remote,.remote video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#05070f}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0d0f1acc,#0d0f1aee);text-align:center;padding:20px;z-index:2}
.peer-tag{position:absolute;left:10px;top:10px;background:#000a;padding:6px 10px;border-radius:999px;font-size:.85rem;border:1px solid #fff2;z-index:3}
.local{position:absolute;right:10px;top:10px;width:min(30vw,120px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:2px solid #fff3;box-shadow:0 8px 24px #000a;background:#111;z-index:4}
.local-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.local-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camoff{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#111;font-size:.75rem;color:var(--muted)}

.call-bar{display:flex;align-items:stretch;justify-content:space-around;gap:2px;padding:6px 4px calc(6px + var(--safe));background:#0e1222f2;border-top:1px solid var(--line);z-index:30;min-height:var(--bar)}
.ibar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;color:var(--txt);padding:6px 2px;border-radius:12px}
.ibar:disabled{opacity:.35}.ibar .ico{font-size:1.15rem;line-height:1}.ibar .ilab{font-size:.62rem;color:var(--muted)}
.ibar:active{background:#222743}
#btn-start.ibar{color:#a8b4ff}#btn-start.ibar .ico{color:#8fa0ff}

.desk-only{display:none}.match-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px}.match-filters select{width:auto;min-width:120px}.match-filters.stacked{flex-direction:column;align-items:stretch}.match-filters.stacked select{width:100%}

/* Chat slide-up on mobile */
.chatbox{position:fixed;left:0;right:0;bottom:0;height:min(55dvh,420px);display:flex;flex-direction:column;background:#12162af8;border-top:1px solid var(--line);border-radius:18px 18px 0 0;transform:translateY(105%);transition:transform .25s ease;z-index:40;padding-bottom:var(--safe)}
.chatbox.open{transform:translateY(0)}.chat-close{background:transparent;border:0;color:var(--muted);margin-right:8px}
.chat-head{padding:12px 14px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center}
.chat-log{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:8px 11px;border-radius:14px;background:#222743;word-break:break-word}.msg.me{align-self:flex-end;background:linear-gradient(135deg,#3a45a0,#5a3aa0)}.sys{align-self:center;color:var(--muted);font-size:.85rem}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}.chat-form input{flex:1}

/* Friends / profile */
#tab-friends,#tab-profile{flex:1;min-height:0;overflow:auto}
#tab-profile{padding:16px}
.friends-wrap{display:flex;flex-direction:column;min-height:0;height:100%}
.friends-side{padding:12px;overflow:auto;flex:0 0 45%}
.friend-chat{flex:1;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--line);background:#12162a}
.list{display:flex;flex-direction:column;gap:6px}
.list .row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#161a2b;border:1px solid var(--line);cursor:pointer}
.list .row.active{border-color:var(--p)}.list .meta{flex:1;min-width:0}.list .name{font-weight:600;display:flex;align-items:center;gap:6px}.list .sub{color:var(--muted);font-size:.8rem}
.limit{background:#1a2040;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px;font-size:.9rem}

.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#2a3160;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto;overflow:hidden}
.avatar.lg{width:72px;height:72px;font-size:1.4rem}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.letter{color:#cfd5ff}
.avatar-edit{display:flex;gap:14px;align-items:center;margin:10px 0 16px}

/* Sheets */
.sheet{position:fixed;inset:0;background:#000a;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-card{width:min(480px,100%);background:var(--card);border-radius:20px 20px 0 0;padding:12px 16px calc(16px + var(--safe));border:1px solid var(--line);border-bottom:0}
.sheet-handle{width:40px;height:4px;border-radius:4px;background:#fff3;margin:4px auto 12px}
.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.fpick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:14px;background:#0e1222;border:1px solid var(--line);color:var(--txt)}
.fpick span{font-size:1.4rem}.fpick.active{border-color:var(--p);background:#222743}
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:70;padding:16px}.row{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 24px + var(--safe));transform:translateX(-50%);background:#222743;border:1px solid var(--line);padding:10px 16px;border-radius:999px;z-index:80;box-shadow:0 10px 30px #0008;max-width:90vw}

@media(min-width:860px){
  .top .logo{display:block}
  .call-pane{flex-direction:row}
  .stage{flex:1.4}
  .chatbox{position:relative;transform:none;height:auto;width:min(360px,34%);border-radius:0;border-top:0;border-left:1px solid var(--line);padding-bottom:0}
  .chat-close{display:none}
  .desk-only{display:flex}
  .local{width:160px;right:14px;bottom:14px;top:auto}
  .friends-wrap{flex-direction:row;height:100%}
  .friends-side{flex:0 0 340px;border-right:1px solid var(--line)}
  .friend-chat{border-top:0}
  .filter-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:430px){
  .top .logo{display:none}
  .ibar .ilab{font-size:.58rem}
  .local{width:28vw;right:8px;top:8px}
}