.friends-panel{position:fixed;z-index:90;top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:24px;background:var(--banner);border:1px solid var(--keyline);box-shadow:0 24px 80px #000b;color:var(--rink);font:14px/1.5 var(--text)}
.friends-panel[hidden],.friends-panel [hidden]{display:none!important}
.friends-heading>span{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700}
.friends-heading h2{margin:4px 0 20px;font:800 23px/1.2 var(--display);text-transform:uppercase}
.friends-panel label{display:block;color:var(--steel);font-size:12px}
.friends-panel input{display:block;box-sizing:border-box;width:100%;margin:6px 0 12px;padding:11px;border:1px solid var(--keyline);background:var(--night);color:var(--rink);border-radius:0;font:13px/1.4 var(--mono)}
.friends-panel button{cursor:pointer;min-height:40px;padding:10px 15px;background:var(--gold);border:1px solid var(--gold);color:var(--night);font:600 12px/1.3 var(--text);border-radius:0}
.friends-panel button:disabled{cursor:default;opacity:.55}
.friends-panel button:focus-visible,.friends-panel input:focus-visible{outline:2px solid var(--rink);outline-offset:3px}
.friends-entry>button:first-child{width:100%;margin-bottom:16px}
.friends-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.friends-actions [data-friend=leave]{background:transparent;color:var(--steel);border-color:var(--keyline)}
.friends-status{margin:18px 0 0;min-height:42px;color:var(--rink)}
.friends-note{margin:16px 0 0;font-size:11px;color:var(--steel)}
.friends-result{font:600 18px/1.5 var(--text);color:var(--gold);margin:0 0 16px}
.friends-panel.is-playing{top:auto;bottom:52px;left:20px;transform:none;width:min(340px,calc(100vw - 40px));padding:12px 16px;pointer-events:none}
.friends-panel.is-playing .friends-heading,.friends-panel.is-playing .friends-note{display:none}
.friends-panel.is-playing .friends-status{margin:0;min-height:0;font-size:12px}
.friends-panel.is-playing .friends-actions{margin:8px 0 0;pointer-events:auto}
.friends-panel.is-playing [data-friend=leave]{font-size:10px;min-height:30px;padding:6px 10px}
@media(max-width:700px){.friends-panel{padding:18px}.friends-panel.is-playing{bottom:48px;left:8px;width:min(300px,calc(100vw - 16px))}}