/* ---------- community window: players + leaderboard ----------
   Every class starts with .co- ; it builds on style.css (variables, .modal, .panel, .btn, .tabs/.tab, .seg, .check, .lv,
   .stat, .pg-row, [data-mq]). Load this file after style.css. */

.modal-card.co-card {
  width: min(860px, 100%); height: min(840px, 94vh); max-height: none; overflow: hidden;
  display: flex; flex-direction: column; background: rgba(20, 15, 54, .985);
}
.co-card .modal-head { flex: none; }
.co-tabs { flex: none; margin-bottom: 12px; }
.co-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.co-pane { min-width: 0; }

/* ----- states: loading / empty / error / logged out ----- */
.co-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; color: var(--muted); font-weight: 700; }
.co-state-ic { font-size: 34px; line-height: 1; }
.co-state-t { color: var(--text); font-weight: 800; }
.co-state-s { font-size: 13px; line-height: 1.45; max-width: 380px; }
.co-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .12); border-top-color: var(--accent); animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.co-auth { padding-top: 60px; }

/* ----- avatar ----- */
.co-av { border-radius: 50%; background: linear-gradient(160deg, #4b3d99, #2b2260); display: grid; place-items: center; overflow: hidden; flex: none; font-weight: 900; border: 2px solid var(--line); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.co-av.big { border: 3px solid var(--accent2); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.co-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- players: toolbar, count, rows ----- */
.co-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.co-search { flex: 1 1 200px; min-width: 0; padding: 10px 14px; font-size: 15px; }
.co-sortl { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.co-select { background: rgba(8, 5, 28, .6); border: 2px solid var(--line); color: var(--text); border-radius: 12px; padding: 9px 12px; font: 700 14px var(--font); outline: none; cursor: pointer; text-transform: none; letter-spacing: 0; }
.co-select:focus { border-color: var(--accent); }
.co-select option { background: #1c1646; color: var(--text); }
.co-count { margin: 12px 2px 8px; font-size: 13px; font-weight: 800; color: var(--muted); min-height: 18px; }
.co-list { display: flex; flex-direction: column; gap: 8px; transition: opacity .15s; }
.co-list.busy, .co-table.busy { opacity: .45; pointer-events: none; }
.co-foot { display: flex; justify-content: center; padding: 14px 0 6px; }

.co-row, .co-brow {
  background: rgba(8, 5, 28, .5); border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.co-row:hover, .co-brow:hover, .co-row:focus-visible, .co-brow:focus-visible { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .07); outline: none; }
.co-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.co-row.self { border-color: rgba(255, 209, 102, .6); background: rgba(255, 209, 102, .07); }
.co-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.co-name { flex: 0 1 auto; font-weight: 800; font-size: 15px; }
.co-nm .lv { flex: none; }
.co-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.co-sub.big { font-size: 14px; }
.co-dot { width: 9px; height: 9px; border-radius: 50%; background: #5b5780; flex: none; }
.co-sub.big .co-dot { width: 11px; height: 11px; }
.co-dot.home { background: #8ab4ff; }
.co-dot.lobby { background: #06d6a0; box-shadow: 0 0 8px #06d6a0; }
.co-dot.playing { background: #ff5470; }
.co-st { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-st.home { color: #8ab4ff; }
.co-st.lobby { color: #06d6a0; font-weight: 800; }
.co-st.playing { color: #ff8a9a; }
.co-mini { font-size: 12px; color: var(--muted); }

/* friend buttons */
.co-fa { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: none; }
.co-fb { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 7px 12px; font: 800 12px var(--font); white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.co-fb:hover:not(:disabled) { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); }
.co-fb:active:not(:disabled) { transform: translateY(1px); }
.co-fb:disabled { cursor: default; }
.co-fb.add { border-color: rgba(255, 84, 112, .7); background: rgba(255, 84, 112, .18); }
.co-fb.add:hover:not(:disabled) { border-color: var(--accent); background: rgba(255, 84, 112, .32); }
.co-fb.go { border-color: rgba(6, 214, 160, .6); background: rgba(6, 214, 160, .2); }
.co-fb.go:hover:not(:disabled) { border-color: var(--ok); background: rgba(6, 214, 160, .32); }
.co-fb.del { padding: 7px 10px; }
.co-fb.del:hover:not(:disabled) { border-color: #ff5470; color: #ff8a9a; }
.co-fb.on { color: var(--ok); border-color: rgba(6, 214, 160, .45); background: rgba(6, 214, 160, .1); }
.co-fb.wait { color: var(--accent2); border-color: rgba(255, 209, 102, .4); background: rgba(255, 209, 102, .08); }
.co-out { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.co-link { background: none; border: 0; padding: 0; color: var(--muted); font: 700 11px var(--font); text-decoration: underline; cursor: pointer; }
.co-link:hover { color: var(--text); }
.co-you { padding: 0 10px; font-size: 12px; font-weight: 900; letter-spacing: 1px; color: var(--accent2); }
.co-fa.big { justify-content: flex-start; margin-top: 4px; }
.co-fa.big .co-fb { padding: 10px 16px; font-size: 14px; }
.co-fa.big .co-fb.del { padding: 10px 14px; }

/* ----- detail view ----- */
.co-dbar { margin-bottom: 14px; }
.co-dhead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.co-dinfo { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.co-dname { font-family: var(--display); font-size: clamp(22px, 4vw, 30px); letter-spacing: 1px; overflow-wrap: anywhere; }
.co-dlv { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.co-dlv b { color: var(--accent2); white-space: nowrap; }
.co-xp { flex: 1; min-width: 110px; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.co-xp > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #06d6a0, #ffd166); }
.co-since { font-size: 13px; }
.co-sec { margin-bottom: 22px; }
.co-sec h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent2); }
.co-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }

/* ----- leaderboard ----- */
.co-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.co-chip {
  --gc: #ffd166;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--gc) 45%, transparent); background: color-mix(in srgb, var(--gc) 10%, rgba(8, 5, 28, .55));
  color: var(--text); font: 800 13px var(--font); transition: border-color .15s, background .15s, box-shadow .15s;
}
.co-chip:hover { border-color: var(--gc); }
.co-chip.on { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 32%, #140f36); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 30%, transparent); }
.co-chip-ic { font-size: 16px; line-height: 1; }
.co-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.co-fl { min-width: 72px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.co-hints { margin: 4px 0 8px; }
.co-hint { margin: 2px 2px 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.co-hint.warn { color: var(--accent2); }
.co-table { display: flex; flex-direction: column; gap: 6px; transition: opacity .15s; }

.co-brow { display: grid; grid-template-columns: 46px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; }
.co-brow.top1 { border-color: rgba(255, 209, 102, .55); background: linear-gradient(90deg, rgba(255, 209, 102, .16), rgba(8, 5, 28, .5)); }
.co-brow.top2 { border-color: rgba(200, 210, 235, .45); background: linear-gradient(90deg, rgba(200, 210, 235, .12), rgba(8, 5, 28, .5)); }
.co-brow.top3 { border-color: rgba(214, 140, 80, .5); background: linear-gradient(90deg, rgba(214, 140, 80, .14), rgba(8, 5, 28, .5)); }
.co-brow.me { border-color: var(--accent2); background: rgba(255, 209, 102, .1); box-shadow: 0 0 0 2px rgba(255, 209, 102, .25); }
.co-rank { text-align: center; font-family: var(--display); font-size: 15px; color: var(--muted); }
.co-brow.top1 .co-rank, .co-brow.top2 .co-rank, .co-brow.top3 .co-rank { font-size: 24px; line-height: 1; }
.co-val { text-align: right; font-family: var(--display); font-size: 16px; color: var(--accent2); white-space: nowrap; }
.co-sep { color: var(--muted); }
.co-v2 { font-size: 14px; }
.co-me {
  position: sticky; bottom: 0; margin-top: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--accent2);
  background: rgba(44, 34, 92, .98); box-shadow: 0 -10px 22px rgba(0, 0, 0, .4); font-size: 14px; font-weight: 800;
}
.co-me.none { border-color: var(--line); color: var(--muted); font-weight: 700; }

/* ----- phones ----- */
@media (max-width: 560px) {
  .modal.co-modal { padding: 8px; }
  .modal-card.co-card { height: min(840px, 96vh); padding: 14px 12px; }
  .co-sortl { flex: 1 1 auto; justify-content: space-between; }
  .co-select { flex: 1; min-width: 0; }
  /* row: avatar + info on the first line, the friend buttons on a line of their own */
  .co-row { flex-wrap: wrap; gap: 8px 12px; }
  .co-row .co-info { flex: 1 1 0; }
  .co-row .co-fa { flex: 1 0 100%; }
  /* the segmented controls become wrapping pills so they never push the page sideways */
  .seg.co-seg { display: flex; flex-wrap: wrap; gap: 6px; border: 0; border-radius: 0; background: none; overflow: visible; }
  .seg.co-seg > .seg-btn, .seg.co-seg > .seg-btn:last-child { border: 2px solid var(--line); border-radius: 999px; background: rgba(8, 5, 28, .55); padding: 6px 12px; }
  .seg.co-seg > .seg-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .co-fl { flex: 1 0 100%; }
  .co-brow { grid-template-columns: 34px 36px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .co-val { font-size: 15px; }
  .co-val.xp .co-sep { display: none; }
  .co-val.xp .co-v2 { display: block; font: 800 11px var(--font); color: var(--muted); }
  .co-dhead { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .co-dhead .co-dinfo { width: 100%; min-width: 0; align-items: center; }
  .co-dhead .co-dlv, .co-dhead .co-sub, .co-dhead .co-fa { justify-content: center; }
}