/* Friends, the party and invites (src/friendsui.js), and the TAB board's rows and actions in a match
   (hud.js scoreboard): the lobby's dark painted look (br-ui.css tokens). */

/* ---- the FRIENDS view: the painted panel of the create / join views ---- */
#m #vfriends{position:absolute;z-index:3;top:122px;left:170px;right:24px;bottom:22px;display:none;flex-direction:column;gap:14px;
 background:rgba(14,14,21,.93);border:1px solid rgba(255,255,255,.08);color:#eceef6;padding:20px 24px;box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden}
#m #vfriends .vhead{flex:none;display:flex;align-items:baseline;gap:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
#m #vfriends .vbody.frbody{flex:1;display:flex;gap:16px;min-height:0}
#m #vfriends .frcol{flex:0 0 340px;display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto}
#m #vfriends .frcol.wide{flex:1;min-width:0}
#m #vfriends .vpanel{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:#171821;border:1px solid #2b2d39;border-radius:0;min-height:0}
#m #vfriends .vpanel[hidden]{display:none}
#m #vfriends .vpt{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);
 color:#fff;font:900 18px/1 var(--br-ui);letter-spacing:.08em}
#m #vfriends .frcount{color:var(--br-dim);font:800 13px/1 var(--br-ui);letter-spacing:.1em}
#m #vfriends .vpt .frbtn{margin-left:auto}
#m #vfriends .frlist{flex:1;min-height:120px}
#m #vfriends #frList{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:6px}
.frnote{color:var(--br-dim);font:700 13px/1.35 var(--br-ui);letter-spacing:.06em}
.frhandle{display:flex;align-items:baseline;gap:2px;min-width:0}
.frhandle b{font:900 30px/1 var(--br-ui);color:#fff;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frhandle span{font:800 20px/1 var(--br-ui);color:var(--br-yellow);letter-spacing:.04em;margin-right:auto;padding-right:10px}
.frrow{display:flex;gap:8px}
#frAddInput{flex:1;min-width:0;height:38px;padding:0 10px;background:#22242f;color:#fff;border:1px solid #373a49;border-radius:0;outline:none;
 font:800 17px/1 var(--br-ui);letter-spacing:.06em}
#frAddInput:focus{border-color:var(--br-pink)}
.frmsg{min-height:16px;color:var(--br-lime);font:800 13px/1.3 var(--br-ui);letter-spacing:.06em}
.frmsg.err{color:#ff5a6a}

/* buttons: plain, go (yellow), danger (hover red) */
.frbtn{flex:none;height:32px;padding:0 12px;background:#22242f;color:#fff;border:1px solid #373a49;border-radius:0;cursor:pointer;
 font:800 14px/1 var(--br-ui);letter-spacing:.08em;transition:border-color .12s,background .12s,color .12s}
.frbtn:hover{border-color:#fff}
.frbtn:disabled{opacity:.45;cursor:default;border-color:#373a49}
.frbtn.go{background:var(--br-yellow);color:#141419;border-color:var(--br-yellow)}
.frbtn.go:hover{background:#ffe24a}
.frbtn.big{height:42px;font-size:17px}
.frbtn.x{width:32px;padding:0;color:var(--br-dim)}
.frbtn.x:hover,.frbtn.danger:hover{border-color:#ff5a6a;color:#ff5a6a}
.frbtn.done{background:none;border-color:transparent;color:var(--br-dim);cursor:default}

/* a person: dot, name#tag, what they do, the actions */
.frp{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;background:#1c1d27;border:1px solid #2b2d39}
.frp.off{opacity:.55}
.frp .dot{flex:none;width:10px;height:10px;border-radius:50%;background:#4a4d5c}
.frp .dot.on{background:var(--br-lime);box-shadow:0 0 8px rgba(168,241,56,.6)}
.frp .dot.play{background:var(--br-pink);box-shadow:0 0 8px rgba(255,64,219,.6)}
.frp .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.frp .who b{font:900 19px/1 var(--br-ui);color:#fff;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frp .who b small{font:800 14px/1 var(--br-ui);color:var(--br-dim);margin-left:2px}
.frp .who span{font:800 12px/1.2 var(--br-ui);letter-spacing:.08em;color:var(--br-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frp .who span.play{color:var(--br-pink)}
.frp .who span.on{color:var(--br-lime)}
.frp .crown{display:inline-block;vertical-align:1px;margin-right:6px;width:18px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath d='M5 14 21 47 50 5 79 47 95 14 91 59H9Z' fill='%23ffd000'/%3E%3C/svg%3E") no-repeat center/contain}
.frp .acts{flex:none;display:flex;gap:6px}
.frempty{color:var(--br-dim);font:800 14px/1.4 var(--br-ui);letter-spacing:.06em;padding:4px 2px}

/* the badge on FRIENDS: requests and invites waiting */
.frbadge{position:absolute;top:6px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--br-pink);color:#141419;
 font:900 12px/18px var(--br-ui);font-style:normal;text-align:center;pointer-events:none;z-index:2}
.frbadge[hidden]{display:none}
#navFriends,#lbFriends{position:relative}

/* the invite toast, over the menu */
#frToast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;
 background:#14151d;border:2px solid var(--br-pink);box-shadow:0 18px 50px rgba(0,0,0,.55);color:#fff;font:800 16px/1.2 var(--br-ui);letter-spacing:.04em;
 max-width:min(640px,94vw)}
#frToast[hidden]{display:none}
#frToast b{color:var(--br-yellow)}
#frToast .acts{display:flex;gap:6px;flex:none}

/* the handle's tag beside the name: the player card, the name tag over the operator */
#m .pcname{display:flex;align-items:baseline;gap:2px;min-width:0}
#pcTag{font:800 17px/1 var(--br-ui);color:var(--br-dim);letter-spacing:.02em;white-space:nowrap}

/* ---- the TAB board in a match ---- */
#sb{min-width:520px}
#sb .sbt{width:100%}
#sb td.n{min-width:170px}
#sb td.n small{color:#8b90a6;margin-left:3px;font-size:.85em}
#sb td.act{display:none;text-align:right;white-space:nowrap;padding-left:14px}
#sb.mouse td.act{display:table-cell}
#sb tr.dead td{opacity:.45}
#sb td.n i.dd{margin-left:8px;font:800 10px/1 var(--br-ui,sans-serif);font-style:normal;letter-spacing:.12em;color:#8b90a6;opacity:1}
#sb .sbhint{margin-top:8px;color:#8b90a6;font:800 11px/1 var(--br-ui,sans-serif);letter-spacing:.12em;text-align:center}
#sb .sbhint:empty{display:none}
#sb.mouse{pointer-events:auto}
#sb .sbb,#endBoard .sbb{margin-left:5px;padding:4px 8px;background:#22242f;color:#fff;border:1px solid #3a3d4c;cursor:pointer;
 font:800 11px/1 var(--br-ui,sans-serif);letter-spacing:.08em}
#sb .sbb:hover,#endBoard .sbb:hover{border-color:#fff}
#sb .sbb.bad:hover,#endBoard .sbb.bad:hover{border-color:#ff5a6a;color:#ff5a6a}
#endBoard td.act{text-align:right;white-space:nowrap}
#endBoard td.n small{color:#8b90a6;margin-left:3px;font-size:.85em}
#sb .sbdone,#endBoard .sbdone{margin-left:8px;color:#8b90a6;font:800 11px/1 var(--br-ui,sans-serif);letter-spacing:.08em}