/* the community panel (src/ui/community.js): Discord inside the game, bottom left over the board, above the start screen too */
.commPanel{position:fixed;left:.75rem;bottom:calc(var(--shopH, 0px) + .875rem);width:min(24rem,calc(100% - 1.5rem));height:min(32rem,calc(100vh - var(--topH, 0px) - var(--shopH, 0px) - 2rem));z-index:25;display:flex;flex-direction:column;padding:0;overflow:hidden;outline:none}   /* (fixed, with fallbacks: the start screen has no shop strip or top bar) */
.commHead{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-bottom:1px solid var(--line)}
.commIcon{width:2rem;height:2rem;border-radius:50%;flex:none;background:#2b2d31}
.commTitle{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.commTitle b{font-family:var(--disp);font-weight:400;font-size:.9375rem;letter-spacing:.06em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.commSub{font-size:.6875rem;color:var(--dim)}
.commJoin{margin-left:auto;flex:none;padding:.3rem .75rem;border-radius:.5rem;background:#5865f2;color:#fff;font-family:var(--disp);font-size:.75rem;letter-spacing:.1em;text-decoration:none}
.commJoin:hover{background:#4752c4}
.commX{flex:none;width:1.75rem;height:1.75rem;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:1.125rem;line-height:1;cursor:pointer}
.commTabs{display:flex;border-bottom:1px solid var(--line)}
.commTabs button{flex:1;padding:.4rem;background:none;border:0;color:var(--dim);font:inherit;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.commTabs button.on{color:#fff;box-shadow:inset 0 -2px 0 var(--acc)}
.commBody{flex:1;min-height:0;overflow:auto;padding:.5rem .625rem}
.commPane{height:100%;display:flex;flex-direction:column;gap:.5rem}
.commPane iframe{width:100%;flex:1;min-height:20rem;border:0;border-radius:.5rem;background:#1e1f22}
.commPanel.tabChat{height:min(38rem,calc(100vh - var(--topH, 0px) - var(--shopH, 0px) - 2rem))}   /* the lobby chat: more lines on show */
/* the lobby chat (src/ui/lobbychat.js): the head, the lines scrolling, the box; a name a button with its menu; the unread dot on FRIENDS and 💬 */
.commPane.lcPane{position:relative;gap:.375rem}
.lcHead{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .5rem}
.lcHead b{font-family:var(--disp);font-weight:400;font-size:.75rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.lcHead small{font-size:.6875rem;color:var(--dim)}
.lcHead .commBtn{margin-left:auto}
.lcLog{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.125rem;padding-right:.125rem}
.lcRow{font-size:.8125rem;line-height:1.4;color:#e8ecf7;overflow-wrap:anywhere}
.lcRow time{font-size:.625rem;color:var(--dim);margin-right:.375rem;font-variant-numeric:tabular-nums}
.lcName{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--acc);cursor:pointer}
.lcName.me{color:#ffd166}
.lcName::after{content:":";color:var(--dim);font-weight:400;margin-right:.25rem}
.lcGuest{font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:.25rem;padding:0 .2rem;margin-right:.3rem;vertical-align:.1em}
.lcNote{margin:0;font-size:.75rem;color:#ffb37a}
.lcLine{display:flex;gap:.375rem}
.lcIn{flex:1;min-width:0;padding:.45rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(8,10,20,.7);color:#fff;font:inherit;font-size:.8125rem}
.lcIn:focus{outline:none;border-color:var(--acc)}
.lcMenu{position:absolute;z-index:2;background:rgba(14,16,30,.97);display:flex;flex-direction:column;min-width:9rem;padding:.25rem}
.lcMenu button{padding:.4rem .6rem;border:0;background:none;color:#fff;font:inherit;font-size:.75rem;text-align:left;cursor:pointer;border-radius:.375rem}
.lcMenu button:hover,.lcMenu button:focus-visible{background:rgba(255,255,255,.08)}
#commStart.lcUnread,#commBtn.lcUnread{position:relative}
#commStart.lcUnread::after,#commBtn.lcUnread::after{content:"";position:absolute;top:.15rem;right:.15rem;width:.5rem;height:.5rem;border-radius:50%;background:#23a55a;box-shadow:0 0 0 2px rgba(8,10,20,.9);pointer-events:none}
.commRowBtns{display:flex;flex-wrap:wrap;gap:.375rem}
.commBtn{display:inline-block;padding:.35rem .625rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(8,10,20,.6);color:#fff;font-size:.75rem;text-decoration:none;cursor:pointer}
.commBtn:hover{border-color:var(--acc)}
.commBtn.sm{padding:.2rem .5rem;font-size:.6875rem}
.commNote{margin:0;font-size:.75rem;line-height:1.45;color:var(--dim)}
.commPane h4{margin:.25rem 0 0;font-family:var(--disp);font-weight:400;font-size:.75rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.commRow{display:flex;align-items:center;gap:.5rem;padding:.3rem .125rem;border-bottom:1px solid rgba(255,255,255,.05)}
.commRow.off{opacity:.55}
.commRow .av{flex:none;width:1.625rem;height:1.625rem;border-radius:50%;background:#2b2d31;display:grid;place-items:center;font-size:.75rem;color:#fff;overflow:hidden}
.commRow .av img{width:100%;height:100%;object-fit:cover}
.commDot{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#23a55a}
.commDot.idle{background:#f0b232}.commDot.dnd{background:#f23f43}.commDot.off{background:#80848e}
.commRow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;color:#fff}
.commRow .tag{flex:none;font-size:.625rem;letter-spacing:.08em;color:var(--acc)}
.commRules{margin:0;padding-left:1.125rem}
.commRules li{font-size:.75rem;line-height:1.45;margin:.25rem 0;color:#e8ecf7}
@media (max-width:760px){.commPanel{left:.5rem;right:.5rem;width:auto;height:min(26rem,60vh)}.commPanel.tabChat{height:min(34rem,78vh)}}