/* A separate, compact row keeps statistics out of the map controls. */
.app{grid-template-rows:76px 28px minmax(0,1fr)}
.communityStats{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 0;padding:6px 16px;background:#fff;border-bottom:1px solid #e9edf2;color:#64748b;font-size:11px;line-height:1.2;white-space:nowrap;min-width:0}
.communityStats>span{position:relative;display:inline-flex;align-items:center;gap:5px}
.communityStats>span+span{margin-left:14px;padding-left:14px}
.communityStats>span+span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:#e2e8f0;pointer-events:none}
.communityStats b{color:#334155;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.communityStats small{font-size:10px;margin-left:-3px;color:#94a3b8}
.onlineDot{width:6px;height:6px;border-radius:50%;background:#94a3b8;flex:none}
.onlineStat[data-status="online"] .onlineDot{background:#078966}
.onlineStat[data-status="online"] b{color:#087f5b}
@media(max-width:900px){
  .app{grid-template-rows:72px 28px minmax(0,1fr)!important}
  .communityStats{justify-content:center;padding:0 6px;font-size:10px}
  .communityStats>span{gap:4px}
  .communityStats>span+span{margin-left:10px;padding-left:10px}
  .communityStats b{font-size:11px}
}
@media(max-width:480px){.app{grid-template-rows:68px 28px minmax(0,1fr)!important}}
@media(max-width:900px) and (max-height:600px){.app{grid-template-rows:56px 24px minmax(0,1fr)!important}}
@media(max-width:599px){
  .mapUtilityBar .communityStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:100%;box-sizing:border-box;padding:2px 8px;font-size:11px}
  .mapUtilityBar .communityStats>span{justify-content:center;min-height:30px;margin:0;padding:0 4px;gap:4px}
  .mapUtilityBar .communityStats>span:nth-child(odd)::before{display:none}
}