/* clanpage.css — the full-screen clan page (Discord-style 3 columns). Render-only; matches the dark "command" lobby.
   Left = identity + channels + functions · Centre = channel chat + pinned MOTD · Right = role-grouped roster. */

#clanPage {
  --cp-bg: #0a0f1a; --cp-rail: #0c1422; --cp-center: #0e1626; --cp-panel: #101b2e;
  --cp-line: #1d2c45; --cp-line2: #28395a; --cp-ink: #e8eef7; --cp-muted: #8da2be; --cp-faint: #5f6f88;
  --cp-cyan: #5cc8ff; --cp-blue: #2f86d6; --cp-good: #46c08a; --cp-danger: #e0533d;
  --cp-font: 'Chakra Petch', 'Twemoji Mozilla', 'Segoe UI', system-ui, sans-serif;   /* Twemoji before the system font -> emoji render Discord-style everywhere on the clan page */
  position: fixed; inset: 0; z-index: 75; display: none; flex-direction: column;
  background: var(--cp-bg); color: var(--cp-ink); font-family: var(--cp-font); -webkit-font-smoothing: antialiased;
}
#clanPage.show { display: flex; }

/* ---- top bar ---- */
#clanPage .cp-top { display: flex; align-items: center; gap: 16px; padding: 11px clamp(14px, 2.5vw, 26px); background: rgba(8, 12, 20, .85); border-bottom: 1px solid var(--cp-line); }
#clanPage .cp-back { background: none; border: 1px solid var(--cp-line2); color: var(--cp-muted); border-radius: 8px; padding: 7px 13px; font: 600 12px var(--cp-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
#clanPage .cp-back:hover { color: #fff; border-color: var(--cp-cyan); background: rgba(92, 200, 255, .1); }
#clanPage .cp-brand { display: flex; align-items: baseline; gap: 8px; }
#clanPage .lb-logo { font: 700 22px var(--cp-font); letter-spacing: .04em; color: var(--cp-cyan); text-shadow: 0 0 18px rgba(92, 200, 255, .5); }
#clanPage .cp-brandsub { font: 600 11px var(--cp-font); letter-spacing: .22em; text-transform: uppercase; color: var(--cp-muted); }
#clanPage .cp-acct { margin-left: auto; font: 600 12px var(--cp-font); color: var(--cp-muted); }

/* ---- 3-column grid (in-clan) ---- */
#clanPage[data-view="clan"] .cp-grid { display: grid; }
#clanPage[data-view="discover"] .cp-grid { display: none; }
#clanPage .cp-grid { flex: 1; min-height: 0; grid-template-columns: 232px 1fr 208px; }
#clanPage .cp-left { background: var(--cp-rail); border-right: 1px solid var(--cp-line); padding: 16px 12px; overflow-y: auto; }
#clanPage .cp-center { background: var(--cp-center); display: flex; flex-direction: column; min-height: 0; }
#clanPage .cp-right { background: var(--cp-rail); border-left: 1px solid var(--cp-line); padding: 14px 10px; overflow-y: auto; }
#clanPage ::-webkit-scrollbar { width: 8px; } #clanPage ::-webkit-scrollbar-thumb { background: #ffffff1a; border-radius: 4px; }

/* ---- left: identity + channels + functions ---- */
#clanPage .cp-id { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
#clanPage .cp-emblem { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font: 800 16px var(--cp-font); color: #07121f; box-shadow: 0 0 0 1px #ffffff22 inset; background: var(--cp-accent, var(--cp-cyan)); }
#clanPage .cp-idname { font: 700 15px var(--cp-font); color: #fff; line-height: 1.15; }
#clanPage .cp-idsub { font: 500 11px var(--cp-font); color: var(--cp-muted); margin-top: 2px; }
#clanPage .cp-bio { margin: 0 0 14px; font: 400 12px/1.5 var(--cp-font); color: #b9c7dc; }
#clanPage .cp-sect { font: 700 10px var(--cp-font); letter-spacing: .16em; text-transform: uppercase; color: var(--cp-faint); margin: 14px 4px 7px; }
#clanPage .cp-channels { display: flex; flex-direction: column; gap: 3px; }
#clanPage .cp-chan { text-align: left; background: none; border: none; border-radius: 7px; padding: 8px 10px; color: var(--cp-muted); font: 600 13px var(--cp-font); letter-spacing: .02em; cursor: pointer; }
#clanPage .cp-chan:hover { background: #ffffff0a; color: var(--cp-ink); }
#clanPage .cp-chan.on { background: #1b2c49; color: #fff; }
#clanPage .cp-funcs { display: flex; flex-direction: column; gap: 3px; }
#clanPage .cp-func { position: relative; text-align: left; background: none; border: none; border-radius: 7px; padding: 9px 10px; color: var(--cp-muted); font: 600 13px var(--cp-font); cursor: pointer; display: flex; align-items: center; gap: 8px; }
#clanPage .cp-func:hover { background: #ffffff0a; color: var(--cp-ink); }
#clanPage .cp-func.cp-danger { color: #d98a7e; } #clanPage .cp-func.cp-danger:hover { background: rgba(224, 83, 61, .12); color: #ffb4a6; }
#clanPage .cp-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cp-danger); color: #fff; font: 700 11px var(--cp-font); display: flex; align-items: center; justify-content: center; }

/* ---- centre: chat ---- */
/* the chat wrapper FILLS the centre column and is itself a flex column, so .cp-msgs (flex:1) takes the middle and the
   composer stays PINNED to the bottom — it never rides up/down with the message count (Discord-style). */
#clanPage .cp-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#clanPage .cp-chathead { flex: none; padding: 12px 18px; border-bottom: 1px solid var(--cp-line); }
#clanPage #cpChanName { font: 700 15px var(--cp-font); color: #fff; }
#clanPage .cp-motd { margin-top: 7px; font: 500 12.5px var(--cp-font); color: #c9b27a; background: rgba(201, 178, 122, .08); border: 1px solid rgba(201, 178, 122, .2); border-radius: 8px; padding: 7px 11px; }
#clanPage .cp-motd:empty { display: none; }
#clanPage .cp-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 11px; }
#clanPage .cp-cmsg { display: flex; gap: 11px; padding: 1px 2px; margin-top: 9px; border-radius: 5px; }
#clanPage .cp-cmsg.cont { margin-top: 0; }   /* grouped continuation rows tighten up under the header */
#clanPage .cp-cmsg:hover { background: #ffffff08; }
#clanPage .cp-av { width: 27px; height: 27px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font: 700 12px var(--cp-font); color: #fff; background: #4a6fa5; }
#clanPage .cp-cmsg.me .cp-av { background: var(--cp-cyan); }
#clanPage .cp-av.sp { background: none !important; align-items: flex-start; }
#clanPage .cp-av.sp .cp-hts { display: none; font-size: 10px; color: var(--cp-faint); line-height: 1.7; }
#clanPage .cp-cmsg.cont:hover .cp-av.sp .cp-hts { display: block; }   /* grouped rows reveal a tiny timestamp on hover */
#clanPage .cp-cmeta { display: flex; align-items: baseline; gap: 8px; }
#clanPage .cp-cwho { font: 700 13px var(--cp-font); color: #cdd9ea; }
#clanPage .cp-cmsg.me .cp-cwho { color: var(--cp-cyan); }
#clanPage .cp-cts { font: 500 10px var(--cp-font); color: var(--cp-faint); }
#clanPage .cp-ctxt { font: 400 13.5px/1.45 var(--cp-font); color: var(--cp-ink); word-break: break-word; }   /* emoji enlarged via the shared .em spans */
#clanPage .cp-empty { margin: auto; }
#clanPage .cp-compose { position: relative; flex: none; display: flex; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--cp-line); }
#clanPage .cp-compose input { flex: 1; min-width: 0; background: var(--cp-panel); border: 1px solid var(--cp-line2); border-radius: 9px; color: var(--cp-ink); font: 500 13px var(--cp-font); padding: 10px 12px; outline: none; }
#clanPage .cp-compose input:focus { border-color: var(--cp-cyan); }
#clanPage .cp-compose #cpEmojiBtn { flex: none; background: var(--cp-panel); border: 1px solid var(--cp-line2); border-radius: 9px; color: var(--cp-ink); font-size: 16px; cursor: pointer; padding: 0 10px; }
#clanPage .cp-compose #cpEmojiBtn:hover { border-color: var(--cp-cyan); }
#clanPage #cpEmojiPop { display: none; position: absolute; left: 16px; bottom: 56px; z-index: 5; flex-wrap: wrap; width: min(250px, 80%); gap: 3px; padding: 8px; background: var(--cp-panel); border: 1px solid var(--cp-line2); border-radius: 12px; box-shadow: 0 8px 24px #000b; }
#clanPage #cpEmojiPop.show { display: flex; }
#clanPage #cpEmojiPop button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cp-line2); background: var(--cp-center); font-size: 19px; line-height: 1; cursor: pointer; padding: 0; }
#clanPage #cpEmojiPop button:hover { background: #ffffff14; }
/* clickable links + @mentions inside clan-page messages */
#clanPage .cp-ctxt a { color: var(--cp-cyan); text-decoration: underline; word-break: break-all; }
#clanPage .cp-ctxt .mtag { color: #ffd16b; font-weight: 700; }
/* "↩ Replying to …" bar above the clan-page composer */
#clanPage #cpReplyBar { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 7px 11px; background: var(--cp-panel); border: 1px solid var(--cp-line2); border-left: 3px solid var(--cp-blue); border-radius: 8px; }
#clanPage #cpReplyBar[hidden] { display: none; }
#clanPage #cpReplyBar .rt { flex: 1; min-width: 0; color: var(--cp-muted); font: 600 12px var(--cp-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clanPage #cpReplyBar #cpReplyX { background: none; border: none; color: var(--cp-muted); cursor: pointer; font-size: 13px; }
#clanPage #cpReplyBar #cpReplyX:hover { color: #fff; }

/* ---- right: roster ---- */
#clanPage .cp-rtop { font: 700 11px var(--cp-font); letter-spacing: .1em; text-transform: uppercase; color: var(--cp-muted); padding: 4px 8px 12px; border-bottom: 1px solid var(--cp-line); margin-bottom: 8px; }
#clanPage .cp-rtop b { color: #fff; } #clanPage .cp-on { color: var(--cp-good); }
#clanPage .cp-rgroup { margin-bottom: 12px; }
#clanPage .cp-rhead { font: 700 10px var(--cp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--cp-faint); padding: 4px 8px; }
#clanPage .cp-rhead i { font-style: normal; }
#clanPage .cp-mrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; opacity: .5; }
#clanPage .cp-mrow.on { opacity: 1; }
#clanPage .cp-mrow:hover { background: #ffffff0a; }
#clanPage .cp-dot { width: 9px; height: 9px; border-radius: 50%; background: #41506b; flex: none; }
#clanPage .cp-mrow.on .cp-dot, #clanPage .cp-dot.on { background: var(--cp-good); box-shadow: 0 0 7px var(--cp-good); }
#clanPage button:disabled { opacity: .55; cursor: default; }
#clanPage .cp-mname { flex: 1; font: 600 12.5px var(--cp-font); color: var(--cp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clanPage .cp-mname i { color: var(--cp-faint); font-weight: 400; }
#clanPage .cp-mctrl { display: none; gap: 3px; }
#clanPage .cp-mrow:hover .cp-mctrl { display: flex; }
#clanPage .cp-mini { background: #ffffff12; border: none; border-radius: 5px; color: #cdd9ea; width: 22px; height: 22px; font-size: 11px; cursor: pointer; padding: 0; }
#clanPage .cp-mini:hover { background: var(--cp-cyan); color: #07121f; }
#clanPage .cp-mini.cp-muted { background: rgba(224, 83, 61, .25); color: #ffb3a6; }   /* this member's in-game signals are muted */

/* ---- shared small controls ---- */
#clanPage .cp-ok, #clanPage .cp-ghost { border: none; border-radius: 8px; padding: 9px 15px; font: 700 12.5px var(--cp-font); letter-spacing: .03em; cursor: pointer; }
#clanPage .cp-ok { background: var(--cp-blue); color: #fff; } #clanPage .cp-ok:hover { background: #3a97ea; }
#clanPage .cp-ghost { background: #ffffff12; color: #cdd9ea; } #clanPage .cp-ghost:hover { background: #ffffff20; }
#clanPage .cp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--cp-line); font: 500 13px var(--cp-font); }
#clanPage .cp-row:first-child { border-top: none; }
#clanPage .cp-ctrl { display: flex; gap: 6px; }
#clanPage .cp-hint { color: var(--cp-muted); font: 500 13px var(--cp-font); padding: 6px 2px; }
#clanPage .cp-msg { color: var(--cp-cyan); font: 600 12px var(--cp-font); min-height: 16px; margin-top: 6px; }
#clanPage .cp-lock { color: var(--cp-faint); }

/* ---- discover (signed-out / no-clan) ---- */
#clanPage[data-view="discover"] .cp-discover { display: block; }
#clanPage .cp-discover { display: none; flex: 1; overflow-y: auto; padding: clamp(20px, 4vw, 48px); }
#clanPage .cp-discover > * { max-width: 620px; margin-left: auto; margin-right: auto; }
#clanPage .cp-panel { background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
#clanPage .cp-panel h2 { margin: 0 0 12px; font: 700 19px var(--cp-font); }
#clanPage .cp-panel h3 { margin: 0 0 10px; font: 700 14px var(--cp-font); color: var(--cp-muted); }
#clanPage .cp-create { display: flex; gap: 8px; flex-wrap: wrap; }
#clanPage .cp-create input { flex: 1; min-width: 120px; background: var(--cp-bg); border: 1px solid var(--cp-line2); border-radius: 8px; color: var(--cp-ink); font: 500 14px var(--cp-font); padding: 10px 12px; outline: none; }
#clanPage .cp-create input:focus { border-color: var(--cp-cyan); }
#clanPage .cp-search { width: 100%; box-sizing: border-box; background: var(--cp-bg); border: 1px solid var(--cp-line2); border-radius: 8px; color: var(--cp-ink); font: 500 14px var(--cp-font); padding: 10px 12px; outline: none; margin-bottom: 10px; }
#clanPage .cp-search:focus { border-color: var(--cp-cyan); }

/* ---- overlay sub-panel (settings / party / requests / invite) ---- */
#clanPage #cpOverlay { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; background: #05080faa; padding: 24px; }
#clanPage #cpOverlay.show { display: flex; }
#clanPage .cp-ovcard { width: min(440px, 100%); max-height: 86%; overflow-y: auto; background: var(--cp-panel); border: 1px solid var(--cp-line2); border-radius: 14px; }
#clanPage .cp-ovhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cp-line); }
#clanPage .cp-ovhead h3 { margin: 0; font: 700 16px var(--cp-font); }
#clanPage .cp-ovx { background: none; border: none; color: var(--cp-muted); font-size: 22px; line-height: 1; cursor: pointer; }
#clanPage .cp-ovx:hover { color: #fff; }
#clanPage .cp-ovbody { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
#clanPage .cp-list { display: flex; flex-direction: column; }
#clanPage .cp-field { display: flex; flex-direction: column; gap: 5px; font: 700 11px var(--cp-font); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); }
#clanPage .cp-field i { color: var(--cp-faint); text-transform: none; letter-spacing: 0; }
#clanPage .cp-field textarea { background: var(--cp-bg); border: 1px solid var(--cp-line2); border-radius: 8px; color: var(--cp-ink); font: 400 13px var(--cp-font); padding: 9px 11px; outline: none; resize: vertical; min-height: 56px; }
#clanPage .cp-field textarea:focus { border-color: var(--cp-cyan); }
/* Discord bridge section in clan settings (blurple accent, separated from the fields above) */
#clanPage .cp-discord { gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--cp-line2); }
#clanPage .cp-discord button { align-self: flex-start; }
#clanPage .cp-discord > span { color: #7b83ec; }
#clanPage .cp-discord .cp-hint b { color: var(--cp-ink); }
/* easy-flow: "Add bot to Discord" (blurple) + the type-in-Discord code */
#clanPage .cp-dlink { align-self: flex-start; display: inline-block; text-decoration: none; background: #5865F2; color: #fff; border-radius: 8px; padding: 9px 13px; font: 700 13px var(--cp-font); }
#clanPage .cp-dlink:hover { filter: brightness(1.1); }
#clanPage .cp-dcode { font: 800 22px ui-monospace, monospace; letter-spacing: 3px; color: #fff; background: var(--cp-bg); border: 1px dashed #7b83ec; border-radius: 8px; padding: 10px 14px; text-align: center; margin: 4px 0; user-select: all; }
#clanPage .cp-copy { align-self: flex-start; font-size: 12px; padding: 6px 10px; }
/* roster member avatar (Discord image or coloured initial), small circle next to the online dot */
#clanPage .cp-mav { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font: 800 11px var(--cp-font); color: #fff; }
#clanPage .cp-adv { margin-top: 6px; }
#clanPage .cp-adv summary { cursor: pointer; color: var(--cp-muted); font: 600 12px var(--cp-font); }
#clanPage .cp-adv input { margin-top: 8px; }
#clanPage .cp-colour input { width: 54px; height: 34px; padding: 2px; background: var(--cp-bg); border: 1px solid var(--cp-line2); border-radius: 8px; cursor: pointer; }
#clanPage .cp-chk { display: flex; align-items: flex-start; gap: 9px; font: 500 13px/1.4 var(--cp-font); color: var(--cp-ink); cursor: pointer; }
#clanPage .cp-chk input { margin-top: 2px; }

/* ---- role chips (roster) + roles & permissions editor ---- */
#clanPage .cp-mbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#clanPage .cp-mbody .cp-mname { flex: none; }
#clanPage .cp-mchips { display: flex; flex-wrap: wrap; gap: 3px; }
#clanPage .cp-rchip { display: inline-block; padding: 1px 7px; border-radius: 10px; font: 700 9px var(--cp-font); letter-spacing: .04em; text-transform: uppercase; color: var(--rc, var(--cp-cyan)); border: 1px solid var(--rc, var(--cp-cyan)); }
#clanPage .cp-rdot { width: 11px; height: 11px; border-radius: 3px; background: var(--rc, var(--cp-cyan)); flex: none; display: inline-block; vertical-align: middle; }
#clanPage .cp-rrow { gap: 10px; }
#clanPage .cp-rname { flex: 1; font: 600 13px var(--cp-font); }
#clanPage .cp-rname i { color: var(--cp-faint); font-weight: 400; font-style: normal; font-size: 11px; }
#clanPage .cp-rname small { color: var(--cp-muted); font-size: 11px; }
#clanPage .cp-perms { display: flex; flex-direction: column; gap: 8px; }
#clanPage .cp-perm { display: flex; align-items: center; gap: 8px; font: 500 13px var(--cp-font); color: var(--cp-ink); cursor: pointer; }
#clanPage .cp-perm i { color: var(--cp-faint); font-style: normal; }
#clanPage .cp-perm input[disabled] { opacity: .4; }
#clanPage .cp-frow { display: flex; gap: 10px; align-items: flex-end; }
#clanPage .cp-frow .cp-field { flex: 1; }
#clanPage .cp-frow input[type=number] { width: 100%; box-sizing: border-box; background: var(--cp-bg); border: 1px solid var(--cp-line2); border-radius: 8px; color: var(--cp-ink); font: 600 14px var(--cp-font); padding: 9px 11px; outline: none; }
#clanPage .cp-field input[type=text], #clanPage .cp-field > input:not([type]) { background: var(--cp-bg); border: 1px solid var(--cp-line2); border-radius: 8px; color: var(--cp-ink); font: 500 14px var(--cp-font); padding: 9px 11px; outline: none; }
#clanPage .cp-field input:focus { border-color: var(--cp-cyan); }
#clanPage .cp-sect2 { font: 700 10px var(--cp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--cp-faint); margin-top: 2px; }

/* ---- announcements ---- */
#clanPage .cp-annin { width: 100%; box-sizing: border-box; background: var(--cp-bg); border: 1px solid var(--cp-line2); border-radius: 8px; color: var(--cp-ink); font: 500 14px var(--cp-font); padding: 9px 11px; outline: none; }
#clanPage textarea.cp-annin { min-height: 64px; resize: vertical; }
#clanPage .cp-annin:focus { border-color: var(--cp-cyan); }
#clanPage .cp-iconpick { display: flex; gap: 8px; flex: 1; align-items: center; }
#clanPage .cp-ic { display: inline-flex; align-items: center; font-size: 17px; cursor: pointer; opacity: .5; }
#clanPage .cp-ic input { display: none; }
#clanPage .cp-ic:has(input:checked) { opacity: 1; transform: scale(1.15); }
#clanPage .cp-anns { display: flex; flex-direction: column; gap: 9px; }
#clanPage .cp-ann { background: var(--cp-bg); border: 1px solid var(--cp-line); border-left: 3px solid var(--cp-cyan); border-radius: 9px; padding: 9px 12px; }
#clanPage .cp-annhead { font: 600 12px var(--cp-font); color: #cdd9ea; }
#clanPage .cp-annhead b { color: var(--cp-cyan); }
#clanPage .cp-anntime { color: var(--cp-faint); font-weight: 400; float: right; }
#clanPage .cp-anntext { margin-top: 4px; font: 500 13px/1.45 var(--cp-font); color: var(--cp-ink); word-break: break-word; }

/* ---- chat polish: load-older, day separators, edited marker, hover edit/delete ---- */
#clanPage .cp-loadold { display: block; margin: 0 auto 8px; background: none; border: 1px solid var(--cp-line2); color: var(--cp-muted); border-radius: 8px; padding: 5px 14px; font: 600 11px var(--cp-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
#clanPage .cp-loadold:hover { color: var(--cp-ink); border-color: var(--cp-cyan); }
#clanPage .cp-sys { text-align: center; color: var(--cp-faint); font: italic 500 12px var(--cp-font); margin: 3px 0; }
#clanPage .cp-daysep { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--cp-faint); font: 700 9px var(--cp-font); letter-spacing: .14em; text-transform: uppercase; }
#clanPage .cp-daysep::before, #clanPage .cp-daysep::after { content: ""; flex: 1; height: 1px; background: var(--cp-line); }
#clanPage .cp-cedit { color: var(--cp-faint); font-size: 10px; font-style: italic; margin-left: 5px; }
#clanPage .cp-cmsg { position: relative; }
#clanPage .cp-cmenu { display: none; position: absolute; top: -2px; right: 0; background: var(--cp-center); border: 1px solid var(--cp-line2); border-radius: 6px; color: var(--cp-muted); font-size: 15px; line-height: 1; padding: 1px 7px; cursor: pointer; }
#clanPage .cp-cmsg:hover .cp-cmenu { display: block; }
#clanPage .cp-cmenu:hover { color: var(--cp-cyan); }
@media (hover: none) { #clanPage .cp-cmenu { display: block; opacity: .5; } }
#clanPage .cp-rquote { font-size: 12px; color: var(--cp-muted); margin: 1px 0 3px; padding-left: 8px; border-left: 2px solid var(--cp-line2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clanPage .cp-rquote b { color: var(--cp-cyan); }
#clanPage .cp-rquote a { color: var(--cp-cyan); }
#clanPage .cp-reacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
#clanPage .cp-react { display: inline-flex; align-items: center; gap: 3px; background: var(--cp-panel); border: 1px solid var(--cp-line2); border-radius: 10px; padding: 1px 7px; color: var(--cp-ink); font: 600 11px var(--cp-font); cursor: pointer; }
#clanPage .cp-react .re { font-size: 12px; }
#clanPage .cp-react:hover { border-color: var(--cp-cyan); }
#clanPage .cp-react.mine { background: #12324a; border-color: var(--cp-cyan); color: #bfe4ff; }

/* (the party banner + member-list popup moved to the GLOBAL public/styles/party.css) */

/* ---- responsive ---- */
@media (max-width: 760px) {
  #clanPage .cp-grid { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }
  #clanPage .cp-left { border-right: none; border-bottom: 1px solid var(--cp-line); max-height: 50vh; }    /* keep independent scroll so bottom functions stay reachable */
  #clanPage .cp-center { min-height: 60vh; }
  #clanPage .cp-right { border-left: none; border-top: 1px solid var(--cp-line); max-height: 40vh; }
}