/* ===== жидкое стекло (соц. интерфейс), рыжий акцент ===== */
:root{--acc:#ff8a1e;--acc2:#ffb35a;--gline:rgba(255,255,255,.28)}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--gline);box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08);border-radius:22px}
.gbtn{font-family:T;font-weight:800;font-size:15px;padding:11px 20px;border-radius:14px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s cubic-bezier(.3,1.6,.5,1),background .2s,opacity .2s;white-space:nowrap}
.gbtn:active{transform:scale(.94)}
.gbtn.accent{background:linear-gradient(180deg,var(--acc2),var(--acc));border-color:#ffd2a0;box-shadow:0 6px 18px rgba(255,138,30,.45),inset 0 1px 0 rgba(255,255,255,.6);color:#2a1300}
.gbtn.ghost{background:transparent;border-color:transparent;color:#ffffffb0}
.gbtn.sm{padding:7px 12px;font-size:13px;border-radius:11px}
.gbtn:disabled{opacity:.45}
.gbtn.busy{opacity:.7;pointer-events:none}
.social{position:absolute;inset:0;pointer-events:none}
.social>*{pointer-events:auto}
.social>.toasts{pointer-events:none}
/* регистрация */
.reg{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .45s}
.reg.out{opacity:0}
.reg-bg{position:absolute;inset:0;background:url(./assets/cover.jpg) center/cover;filter:blur(6px) brightness(.55) saturate(1.2);transform:scale(1.08)}
.reg-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,138,30,.25),transparent 60%)}
.reg-card{position:relative;width:min(400px,90vw);padding:26px 26px 18px;text-align:center;display:flex;flex-direction:column;gap:10px;animation:cardIn .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes cardIn{from{transform:translateY(30px) scale(.94);opacity:0}}
.reg-logo{font-family:G;font-weight:900;font-size:28px;line-height:.9;transform:skewX(-6deg)}.reg-logo span{display:block;color:var(--acc);font-size:1.25em}
.reg-card h3{margin:6px 0 0;font-family:G;font-weight:900;font-size:22px}
.reg-card p{margin:0;font-size:13px;color:#ffffffb0}
.field{position:relative}
.field input{width:100%;font:800 18px T,sans-serif;color:#fff;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:13px 44px 13px 16px;outline:none;
  user-select:text;-webkit-user-select:text;transition:border-color .2s,box-shadow .2s}
.field input:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(255,138,30,.25)}
.field.sm input{font-size:15px;padding:10px 14px;margin-bottom:6px}
.field .st{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%}
.field .st.load{border:3px solid #ffffff44;border-top-color:var(--acc);animation:sp .7s linear infinite}
.field .st.ok{background:#3ddc84;box-shadow:0 0 12px #3ddc84}.field .st.bad{background:#ff4a5a;box-shadow:0 0 12px #ff4a5a}
.hint{font-size:12.5px;color:#ffffff99;min-height:16px;transition:color .2s}.hint.good{color:#6dff9a}.hint.bad{color:#ff8a8a}
/* панель друзей */
.sp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.spanel{position:absolute;top:12px;right:12px;bottom:12px;width:min(380px,calc(100vw - 24px));padding:16px;display:flex;flex-direction:column;gap:10px;
  transform:translateX(110%);transition:transform .38s cubic-bezier(.2,1,.3,1)}
.spanel.in{transform:none}
.sp-head{display:flex;align-items:center}.sp-head h3{margin:0;font-family:G;font-weight:900;font-size:24px;flex:1}
.x{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);font-size:16px}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;background:rgba(0,0,0,.25);border-radius:13px;padding:3px}
.seg button{position:relative;z-index:1;padding:8px 4px;font-weight:800;font-size:13px;color:#ffffffc0;transition:color .2s}
.seg button.on{color:#2a1300}
.seg em{font-style:normal;font-size:11px;background:rgba(255,255,255,.2);border-radius:8px;padding:1px 6px;margin-left:2px}.seg em.red{background:#ff4a5a;color:#fff}
.seg-ind{position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/3);border-radius:10px;background:linear-gradient(180deg,var(--acc2),var(--acc));transition:transform .3s cubic-bezier(.3,1.3,.5,1);box-shadow:0 4px 12px rgba(255,138,30,.4)}
.sp-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:2px}
.frow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:rgba(255,255,255,.07);animation:rowIn .35s ease-out backwards;animation-delay:var(--d)}
@keyframes rowIn{from{transform:translateX(20px);opacity:0}}
.frow .av{width:44px;height:44px;border-radius:12px;background:rgba(255,138,30,.25);object-fit:cover}
.fi{flex:1;min-width:0}.fi b{display:block;font-family:G;font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{font-size:12px;color:#ffffff90;display:flex;align-items:center;gap:5px}
.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#888}.dot.on::before{background:#3ddc84;box-shadow:0 0 8px #3ddc84}.dot.busy::before{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.tag{font-size:12px;font-weight:800;color:var(--acc2);padding:4px 8px;border-radius:9px;background:rgba(255,138,30,.15)}
.more{width:30px;height:30px;border-radius:9px;color:#ffffff80;font-size:18px}
.sp-empty{text-align:center;color:#ffffffa0;font-size:14px;padding:30px 10px;line-height:1.5}
/* уведомления */
.toasts{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;width:min(460px,92vw)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:18px;width:100%;animation:toastIn .45s cubic-bezier(.2,1.4,.4,1)}
.toast.out{animation:toastOut .3s ease-in forwards}
@keyframes toastIn{from{transform:translateY(-30px) scale(.9);opacity:0}}@keyframes toastOut{to{transform:translateY(-20px) scale(.95);opacity:0}}
.toast .tt{flex:1;display:flex;align-items:center;gap:8px;font-size:14px}.toast .tav{width:36px;height:36px;border-radius:10px;object-fit:cover}
/* лобби: друзья, онлайн, команда */
.rcol{position:absolute;right:max(14px,env(safe-area-inset-right));top:27%;display:flex;flex-direction:column;gap:14px}
.side .mico.fr{width:46px;height:46px}
.side em.green{background:#3ddc84;color:#0d2a14}
.onl{position:absolute;top:max(14px,env(safe-area-inset-top));right:84px;display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;padding:7px 12px;border-radius:12px;background:rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.onl .dot{width:8px;height:8px;border-radius:50%;background:#888}.onl .dot::before{display:none}.onl .dot.on{background:#3ddc84;box-shadow:0 0 8px #3ddc84}.onl .dot.off{background:#ff4a5a}
.pslot{position:absolute;top:31%;width:min(14vw,130px);height:min(36vh,210px);display:flex;align-items:center;justify-content:center}
.pslot.l{left:calc(50% - min(16vw,150px) - min(22vw,210px))}.pslot.r{right:calc(50% - min(16vw,150px) - min(22vw,210px))}
.plus{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;font-size:40px;font-weight:900;color:#fff;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.plus:hover{transform:scale(1.08)}.plus:active{transform:scale(.92)}
.plus span{line-height:1;margin-top:-4px;text-shadow:0 2px 0 #0004}
.pcard{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px;border-radius:20px;animation:cardIn .5s cubic-bezier(.2,1.3,.4,1)}
.pcard img{width:120%;margin-bottom:-6px}
.pcard b{font-family:G;font-weight:900;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 10px;border-radius:10px;background:rgba(0,0,0,.35)}
.pcard .crown{position:absolute;top:6px;left:8px;font-size:18px}
.pcard .kick{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.35);font-size:12px}
.leavep{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 104px)}
.playbtn.searching{background:linear-gradient(#ffd8a8 0 45%,#ff9a3a 55%);animation:qpulse 1.6s ease-in-out infinite}
@keyframes qpulse{50%{filter:brightness(1.1)}}
.playbtn .q{display:block;font-size:.62em}.playbtn small{display:block;font-family:T;font-weight:800;font-size:12px;opacity:.75}
@media (max-width:760px){.pslot{display:none}.rcol{top:20%}}