/* ==========================================================================
   v3-cla.css — design novo: Central do Clã (clanhub.js) e tudo de clã fora do admin.
   Usa os tokens de v3-base.css. Vale em todas as telas (PC e celular).

   A central usa o kit (.v3-modal, .v3-tabs, .v3-btn…) e as classes .cla-*
   abaixo. O selo (.pxch-crest) também aparece fora dela (painel social,
   conta), então as regras dele são genéricas.
   ========================================================================== */

/* ---------- Janela ------------------------------------------------------- */
html body .cla-back { z-index: 100000; }
html body .cla-modal {
    width: min(880px, calc(100vw - 24px));
    height: min(780px, calc(100vh - 40px));
    max-height: none;
}
.cla-head { padding: 16px 20px 12px; }
.cla-head-txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cla-head-txt .v3-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-tabs { flex: 0 0 auto; padding: 0 12px; }
.cla-tabs .v3-tab { display: inline-flex; align-items: center; }
.cla-badge {
    display: inline-grid; place-items: center;
    min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px;
    background: var(--pc-hot); color: #fff;
    font: 700 9.5px/1 var(--pc-mono); letter-spacing: 0;
}
.cla-body { padding: 16px 20px 22px; scrollbar-width: thin; scrollbar-color: var(--pc-line-2) transparent; }
.cla-body::-webkit-scrollbar { width: 8px; }
.cla-body::-webkit-scrollbar-thumb { background: var(--pc-line-2); }

/* Recado de sucesso/erro dentro da janela (os toasts ficam atrás do fundo) */
.cla-flash {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    margin: 12px 20px 0; padding: 9px 12px;
    border: 1px solid; border-radius: 2px;
    font: 500 12.5px/1.35 var(--pc-body);
}
.cla-flash[hidden] { display: none; }
.cla-flash.is-ok { color: var(--pc-acid); border-color: rgba(212, 255, 58, .4); background: var(--pc-acid-soft); }
.cla-flash.is-err { color: var(--pc-hot); border-color: rgba(255, 84, 112, .45); background: var(--pc-hot-soft); }
.cla-flash span { color: var(--pc-text); }

/* ---------- Selo / emblema (central, painel social, conta) ---------------- */
html body .pxch-crest {
    position: relative; flex: 0 0 auto;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 1px solid var(--pc-line-2);
    border-radius: 2px;
    background: var(--pc-ink);
    box-shadow: none;
    color: var(--cc, var(--pc-dim));
}
html body .pxch-crest img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .pxch-crest.is-empty {
    background:
        radial-gradient(rgba(233, 239, 228, .07) 1px, transparent 1.2px) 0 0 / 6px 6px,
        var(--pc-ink);
}
html body .pxch-crest.is-empty i { position: absolute; font-size: 58%; opacity: .22; color: var(--cc, var(--pc-dim)); }
html body .pxch-crest.is-empty b {
    position: relative;
    font: 700 max(8px, 26%) / 1 var(--pc-mono);
    letter-spacing: .02em;
    color: var(--cc, var(--pc-text));
}
html body .pxch-crest.cla-crest-big { border-color: var(--pc-line-2); box-shadow: inset 0 0 0 3px var(--pc-ink-2); }

.cla-tag { font-family: var(--pc-mono); font-weight: 700; letter-spacing: .02em; color: var(--pc-dim); }

/* ---------- Blocos comuns ------------------------------------------------ */
.cla-sec {
    display: flex; align-items: center; gap: 10px;
    margin: 22px 0 10px;
}
.cla-sec:first-child { margin-top: 0; }
.cla-sec > span { font: 500 10px var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-acid); white-space: nowrap; }
.cla-sec > b { font: 600 10px var(--pc-mono); color: var(--pc-dim); padding: 1px 6px; border: 1px solid var(--pc-line-2); }
.cla-sec > i { flex: 1 1 auto; height: 1px; background: var(--pc-line); }
.cla-sec .v3-btn i { margin: 0; }
.cla-sec-note, .cla-note { font: 400 12px/1.45 var(--pc-body); color: var(--pc-dim); }
.cla-note > i { color: var(--pc-gold); margin-right: 6px; }
p.cla-note { margin: 8px 0 0; }

.cla-list { display: flex; flex-direction: column; gap: 6px; }
.cla-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 8px 12px;
    background: var(--pc-ink);
    border: 1px solid var(--pc-line);
    border-radius: 2px;
    transition: border-color .12s, background .12s;
}
.cla-row:hover { border-color: var(--pc-line-2); }
.cla-row[data-act="open-clan"] { cursor: pointer; }
.cla-row[data-act="open-clan"]:hover { background: var(--pc-ink-2); }
.cla-row.is-me { border-color: rgba(212, 255, 58, .35); box-shadow: inset 2px 0 0 var(--pc-acid); }
.cla-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cla-main > b {
    font: 600 14px/1.25 var(--pc-body); color: var(--pc-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cla-main > b em {
    margin-left: 6px; padding: 1px 5px;
    font: 500 9px var(--pc-mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal;
    color: var(--pc-acid); border: 1px solid rgba(212, 255, 58, .4);
    vertical-align: 2px;
}
.cla-main > span { font: 400 11px/1.3 var(--pc-mono); letter-spacing: .02em; color: var(--pc-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-main > q {
    display: block; margin-top: 3px; quotes: none;
    font: 400 italic 12.5px/1.4 var(--pc-body); color: var(--pc-text);
    border-left: 2px solid var(--pc-line-2); padding-left: 8px;
}
.cla-pos { flex: 0 0 22px; text-align: right; font: 600 12px var(--pc-mono); color: var(--pc-faint); font-variant-numeric: tabular-nums; }
.cla-pos.top1 { color: var(--pc-gold); }
.cla-pos.top2 { color: var(--pc-silver); }
.cla-pos.top3 { color: var(--pc-bronze); }
.cla-pts { flex: 0 0 auto; min-width: 72px; text-align: right; font: 600 13px var(--pc-mono); color: var(--pc-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cla-pts small { margin-left: 4px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-faint); }
.cla-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.cla-rec { flex: 0 0 auto; display: flex; gap: 4px; }
.cla-icon { min-width: 30px; padding: 0 8px !important; }
.cla-icon i { margin: 0; }
.v3-btn.is-armed { background: var(--pc-hot-soft); border-color: var(--pc-hot); color: var(--pc-hot); }
.v3-btn.is-gold:hover:not(:disabled) { border-color: var(--pc-gold); background: var(--pc-gold-soft); }

/* Avatar redondo com bolinha de online */
.cla-av {
    position: relative; flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: var(--pc-panel-2);
    border: 1px solid var(--pc-line-2);
    color: var(--pc-faint); font-size: 13px;
}
.cla-av > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 1; }
.cla-dot {
    position: absolute; right: -2px; bottom: -2px; z-index: 2;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--pc-faint); border: 2px solid var(--pc-ink);
}
.cla-dot.on { background: var(--pc-ok); }

/* Cargo */
.cla-role {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px;
    border: 1px solid var(--pc-line-2); border-radius: 2px;
    font: 500 10px var(--pc-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--pc-dim); white-space: nowrap;
}
.cla-role.r-lead   { color: var(--pc-gold); border-color: rgba(255, 201, 74, .45); background: var(--pc-gold-soft); }
.cla-role.r-colead { color: var(--pc-info); border-color: rgba(94, 224, 255, .4); background: var(--pc-info-soft); }
.cla-role.r-mod    { color: var(--pc-ok); border-color: rgba(75, 227, 138, .4); background: var(--pc-ok-soft); }
html body .cla-rolesel {
    width: auto; min-height: 30px; padding: 2px 8px;
    font: 500 10.5px var(--pc-mono); letter-spacing: .06em; text-transform: uppercase;
}

/* Ferramentas: busca, ordem, filtro */
.cla-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.cla-search { position: relative; flex: 1 1 220px; min-width: 180px; display: block; }
.cla-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pc-faint); font-size: 12px; pointer-events: none; }
html body .cla-search .v3-input { padding-left: 34px; }
.cla-seg { display: inline-flex; border: 1px solid var(--pc-line-2); border-radius: 2px; }
.cla-seg button {
    min-height: 36px; padding: 0 11px;
    background: transparent; border: 0; border-right: 1px solid var(--pc-line);
    color: var(--pc-dim); cursor: pointer;
    font: 500 10.5px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase;
}
.cla-seg button:last-child { border-right: 0; }
.cla-seg button:hover { color: var(--pc-text); }
.cla-seg button.is-on { color: var(--pc-acid); background: var(--pc-acid-soft); }
.cla-toggle.is-on { color: var(--pc-acid); border-color: rgba(212, 255, 58, .5); }

.cla-banner {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; padding: 10px 12px;
    border: 1px dashed var(--pc-line-2); border-radius: 2px;
    font: 400 13px/1.4 var(--pc-body); color: var(--pc-text);
}
.cla-banner > i { color: var(--pc-gold); }
.cla-banner > span { flex: 1 1 auto; min-width: 0; }
.cla-banner.is-acid { border-color: rgba(212, 255, 58, .4); }
.cla-banner.is-acid > i { color: var(--pc-acid); }

.cla-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cla-chips .v3-chip i, .cla-rec .v3-chip i { font-size: 10px; }
.cla-inline { display: flex; align-items: center; gap: 8px; }
.cla-inline > .v3-input { flex: 1 1 auto; min-width: 0; }
.cla-more { display: flex; justify-content: center; margin-top: 12px; }
.cla-count { align-self: flex-end; font: 500 10px var(--pc-mono); color: var(--pc-faint); }

/* ---------- Cabeçalho do clã, nível e números ---------------------------- */
.cla-hero { display: flex; align-items: center; gap: 18px; }
.cla-hero-main { flex: 1 1 auto; min-width: 0; }
.cla-hero-name {
    margin: 6px 0 0;
    font: 800 22px/1.15 var(--pc-display); letter-spacing: -.02em; text-transform: uppercase;
    color: var(--pc-text); word-break: break-word;
}
.cla-hero-name .cla-tag { font-family: var(--pc-display); letter-spacing: -.02em; }
.cla-hero-desc { margin: 6px 0 0; font: 400 13.5px/1.5 var(--pc-body); color: var(--pc-dim); }

.cla-level {
    display: flex; align-items: stretch; gap: 14px;
    margin-top: 18px; padding: 12px 14px;
    background: var(--pc-ink-2); border: 1px solid var(--pc-line); border-radius: 2px;
}
.cla-level-n {
    flex: 0 0 72px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border-right: 1px solid var(--pc-line); padding-right: 14px;
}
.cla-level-n span { font: 500 9.5px var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-faint); }
.cla-level-n b { font: 800 30px/1 var(--pc-display); color: var(--pc-acid); }
.cla-level-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.cla-level-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cla-level-xp { font: 500 11px var(--pc-mono); color: var(--pc-dim); }
.cla-level-xp b { color: var(--pc-text); font-weight: 600; }
.cla-level .v3-bar { height: 8px; }
.cla-level-hint { font: 400 11.5px/1.4 var(--pc-body); color: var(--pc-faint); }
.cla-level-hint b { color: var(--pc-dim); font-weight: 600; }

.cla-stats { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; }
.cla-stats .v3-stat b { font-size: 18px; white-space: nowrap; }
.cla-stats .v3-stat b.is-gold { color: var(--pc-gold); }
.cla-stats .v3-stat em { font-style: normal; }
.cla-stats .v3-stat em.is-ok { color: var(--pc-ok); }
.cla-stats .v3-stat em.is-hot { color: var(--pc-hot); }

/* Aviso fixado */
.cla-motd {
    display: flex; gap: 12px;
    padding: 12px 14px;
    background: var(--pc-ink-2);
    border: 1px solid var(--pc-line); border-left: 2px solid var(--pc-gold);
    border-radius: 2px;
}
.cla-motd > i { color: var(--pc-gold); margin-top: 3px; }
.cla-motd p { margin: 0; font: 500 14.5px/1.5 var(--pc-body); color: var(--pc-text); word-break: break-word; }
.cla-motd span { display: block; margin-top: 4px; font: 400 10.5px var(--pc-mono); color: var(--pc-faint); }
.cla-motd.is-edit { flex-direction: column; border-left-color: var(--pc-acid); }

/* Comando do clã */
.cla-staff { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cla-staff-card {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 8px 10px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
}
.cla-staff-card > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cla-staff-card b { max-width: 100%; font: 600 13px var(--pc-body); color: var(--pc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Registro de atividades */
.cla-log { border: 1px solid var(--pc-line); border-radius: 2px; background: var(--pc-ink); }
.cla-log-row {
    display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; gap: 10px;
    padding: 9px 12px; border-top: 1px solid var(--pc-line);
}
.cla-log-row:first-child { border-top: 0; }
.cla-log-row > i { text-align: center; font-size: 12px; color: var(--pc-faint); }
.cla-log-row > i.is-ok { color: var(--pc-ok); }
.cla-log-row > i.is-hot { color: var(--pc-hot); }
.cla-log-row > i.is-gold { color: var(--pc-gold); }
.cla-log-row > i.is-acid { color: var(--pc-acid); }
.cla-log-row p { margin: 0; font: 400 13px/1.45 var(--pc-body); color: var(--pc-dim); word-break: break-word; }
.cla-log-row p b { color: var(--pc-text); font-weight: 600; }
.cla-log-row time { font: 400 10.5px var(--pc-mono); color: var(--pc-faint); white-space: nowrap; }

/* ---------- Pedidos e recrutamento -------------------------------------- */
.cla-recruit-now {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--pc-ink-2); border: 1px solid var(--pc-line); border-radius: 2px;
}
.cla-recruit-now > span:not(.v3-chip) { flex: 1 1 200px; font: 400 12.5px var(--pc-body); color: var(--pc-dim); }
.cla-req { align-items: flex-start; }
.cla-req .cla-acts { align-self: center; }

/* ---------- Chat do clã -------------------------------------------------- */
.cla-body[data-view="chat"] { display: flex; flex-direction: column; overflow: hidden; }
.cla-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.cla-chat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.cla-chat-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
    scrollbar-width: thin; scrollbar-color: var(--pc-line-2) transparent;
}
.cla-chat-list > .v3-empty { flex: 1 1 auto; border: 0; }
.cla-msg { padding: 5px 10px; border-left: 2px solid var(--pc-line-2); }
.cla-msg.is-me { border-left-color: var(--pc-acid); background: rgba(212, 255, 58, .04); }
.cla-msg-h { display: flex; align-items: baseline; gap: 8px; }
.cla-msg-h b { font: 700 12.5px var(--pc-body); color: var(--pc-text); }
.cla-msg.is-me .cla-msg-h b { color: var(--pc-acid); }
.cla-msg-h time { font: 400 10px var(--pc-mono); color: var(--pc-faint); }
.cla-msg p { margin: 1px 0 0; font: 400 13.5px/1.45 var(--pc-body); color: var(--pc-text); word-break: break-word; }
.cla-chat-send { flex: 0 0 auto; }

/* ---------- Guerras ------------------------------------------------------ */
.cla-war {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    padding: 14px;
    background: var(--pc-ink); border: 1px solid var(--pc-line-2); border-radius: 2px;
}
.cla-war + .cla-war { margin-top: 8px; }
.cla-war.win { box-shadow: inset 2px 0 0 var(--pc-ok); }
.cla-war.loss { box-shadow: inset 2px 0 0 var(--pc-hot); }
.cla-war-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cla-war-side[data-act] { cursor: pointer; }
.cla-war-side b { font-size: 13px; }
.cla-war-score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cla-war-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--pc-line); }
.cla-score { flex: 0 0 auto; font: 800 30px/1 var(--pc-display); color: var(--pc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cla-score i { font: 400 14px var(--pc-mono); font-style: normal; color: var(--pc-faint); margin: 0 8px; vertical-align: 5px; }
.cla-score.win { color: var(--pc-ok); }
.cla-score.loss { color: var(--pc-hot); }
.cla-score.sm { font: 600 14px var(--pc-mono); }
.cla-score.sm i { font-size: 11px; margin: 0 4px; vertical-align: 0; }
.cla-result {
    flex: 0 0 78px; text-align: center; padding: 4px 0;
    border: 1px solid var(--pc-line-2); border-radius: 2px;
    font: 600 10px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-dim);
}
.cla-result.win { color: var(--pc-ok); border-color: rgba(75, 227, 138, .45); background: var(--pc-ok-soft); }
.cla-result.loss { color: var(--pc-hot); border-color: rgba(255, 84, 112, .45); background: var(--pc-hot-soft); }
.cla-result.declined { color: var(--pc-faint); }
.cla-incoming { border-color: rgba(255, 84, 112, .35); }
.cla-warpick { max-height: 260px; overflow-y: auto; margin-bottom: 8px; }

/* ---------- Formulários (criar clã / ajustes) ---------------------------- */
.cla-form { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cla-span { grid-column: 1 / -1; }
.cla-form .v3-field { min-width: 0; }
.cla-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.cla-form-foot > .cla-note, .cla-form-foot > .cla-count { margin-right: auto; }
.cla-motd .cla-form-foot { margin-top: 8px; }
html body .cla-tag-input { font-family: var(--pc-mono); letter-spacing: .14em; text-transform: uppercase; }
.cla-hint-field { justify-content: flex-end; }

.cla-radio { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cla-radio-opt {
    position: relative;
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px;
    padding: 11px 12px;
    background: var(--pc-ink); border: 1px solid var(--pc-line-2); border-radius: 2px;
    cursor: pointer;
}
.cla-radio-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cla-radio-opt i { color: var(--pc-faint); }
.cla-radio-opt b { font: 600 11px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-text); }
.cla-radio-opt span { grid-column: 1 / -1; font: 400 12px/1.4 var(--pc-body); color: var(--pc-dim); }
.cla-radio-opt:hover { border-color: var(--pc-text); }
.cla-radio-opt.is-on { border-color: var(--pc-acid); background: var(--pc-acid-soft); box-shadow: inset 3px 0 0 var(--pc-acid); }
.cla-radio-opt.is-on i { color: var(--pc-acid); }
.cla-radio-opt:has(input:focus-visible) { outline: 1px solid var(--pc-acid); outline-offset: 2px; }
.cla-radio-opt.is-off { cursor: default; opacity: .55; }
.cla-radio-opt.is-off:hover { border-color: var(--pc-line-2); }

.cla-preview {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px; padding: 14px;
    border: 1px dashed var(--pc-line-2); border-radius: 2px;
    background: radial-gradient(rgba(233, 239, 228, .05) 1px, transparent 1.2px) 0 0 / 14px 14px;
}
.cla-preview > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cla-preview .cla-hero-name { margin: 0; font-size: 18px; }
.cla-preview-nick { font: 500 13px var(--pc-body); color: var(--pc-dim); }

.cla-card { padding: 4px 14px; background: var(--pc-ink-2); border: 1px solid var(--pc-line); border-radius: 2px; }
.cla-card.cla-form { padding: 14px; }
.cla-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.cla-set-row + .cla-set-row { border-top: 1px solid var(--pc-line); }
.cla-set-row > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cla-set-row > div > b { font: 600 14px var(--pc-body); color: var(--pc-text); }
.cla-set-row > div > span { font: 400 12px/1.45 var(--pc-body); color: var(--pc-dim); }
.cla-set-row .cla-acts { flex-wrap: wrap; justify-content: flex-end; }
.cla-set-row .v3-select { width: auto; min-width: 180px; max-width: 240px; min-height: 30px; padding: 4px 8px; font-size: 13px; }
.cla-danger { border-color: rgba(255, 84, 112, .3); }

.cla-switch {
    position: relative; flex: 0 0 auto;
    width: 44px; height: 24px;
    background: transparent; border: 1px solid var(--pc-line-2); border-radius: 2px;
    cursor: pointer;
}
.cla-switch i {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 1px;
    background: var(--pc-faint);
    transition: transform .14s;
}
.cla-switch.is-on { background: var(--pc-acid); border-color: var(--pc-acid); }
.cla-switch.is-on i { transform: translateX(20px); background: var(--pc-acid-ink); }

.cla-photo { display: flex; align-items: center; gap: 16px; padding: 14px; }
.cla-photo-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cla-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Barra de entrar na ficha de outro clã */
.cla-joinbar {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 16px; padding: 12px 14px;
    background: var(--pc-ink-2); border: 1px solid var(--pc-line-2); border-radius: 2px;
}

/* ---------- Escudo do clã nos painéis sociais ---------------------------- */
/* Painel social flutuante (social.js): o visual do botão é do v3-social.css;
   aqui só a estrutura (selo + tag lado a lado). */
.spx-clan-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    line-height: 1; cursor: pointer; white-space: nowrap;
}
html body .spx-clan-chip .pxch-crest,
html body .social-clan-chip .pxch-crest { width: 18px; height: 18px; border: 0; }
/* No chip pequeno o selo sem foto mostra só o escudo (a tag já vem ao lado). */
html body .spx-clan-chip .pxch-crest.is-empty b,
html body .social-clan-chip .pxch-crest.is-empty b { display: none; }
html body .spx-clan-chip .pxch-crest.is-empty i,
html body .social-clan-chip .pxch-crest.is-empty i { position: static; font-size: 10px; opacity: .9; }
/* Menu principal fora do tema do PC (o menu-v3.css cuida do tema do PC). */
html body .social-clan-chip {
    display: inline-flex; align-items: center; gap: 5px;
    max-width: 100%; height: 22px; padding: 0 8px 0 3px;
    border: 1px solid var(--pc-line-2); border-radius: 2px;
    background: transparent; color: var(--pc-dim);
    font: 600 10.5px var(--pc-mono); letter-spacing: .06em;
    cursor: pointer;
}
html body .social-clan-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .social-clan-chip:hover { border-color: var(--pc-acid); color: var(--pc-acid); }
html body .social-clan-chip.is-none { padding: 0 9px; }
#social-sidebar .social-login-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* O apelido é quem cede espaço (com reticências); escudo e ícones não encolhem. */
#spx-user-bar .spx-user-nick { flex: 1 1 auto; min-width: 0; }
#spx-user-bar .spx-lang-btn, #spx-user-bar .spx-user-lvl { flex: 0 0 auto; }
#social-sidebar .social-profile-head { min-width: 0; }
#social-sidebar .social-profile-head .social-login-name { flex: 1 1 auto; min-width: 0; }
#social-sidebar .social-profile-head .social-logout-icon,
#social-sidebar .social-profile-head .language-picker,
#social-sidebar .social-profile-head .social-avatar { flex: 0 0 auto; }

/* Tag do clã clicável (chat, ranking, menu do jogador) */
.px-clantag-link { cursor: pointer; transition: filter .14s; }
.px-clantag-link:hover { filter: brightness(1.2); }

/* ---------- Telas médias ------------------------------------------------- */
@media (max-width: 860px) {
    .cla-rec { display: none; }
    .cla-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Celular (folha de tela cheia do kit) -------------------------- */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    html body .cla-modal { width: 100vw; height: 100vh; height: 100dvh; }
    .cla-head { padding: 12px 14px 10px; }
    .cla-tabs { padding: 0 4px; }
    .cla-tabs .v3-tab { padding: 12px 11px; }
    .cla-flash { margin: 10px 14px 0; }
    .cla-body { padding: 14px 14px 22px; }

    .cla-hero { gap: 12px; align-items: flex-start; }
    .cla-hero .pxch-crest.cla-crest-big { width: 64px !important; height: 64px !important; }
    .cla-hero-name { font-size: 17px; }
    .cla-level { gap: 10px; padding: 10px 12px; }
    .cla-level-n { flex-basis: 56px; padding-right: 10px; }
    .cla-level-n b { font-size: 24px; }
    .cla-stats .v3-stat { padding: 10px; }
    .cla-stats .v3-stat b { font-size: 16px; }

    .cla-toolbar { gap: 6px; }
    .cla-search { flex-basis: 100%; }
    .cla-seg { flex: 1 1 auto; }
    .cla-seg button { flex: 1 1 auto; min-height: 40px; padding: 0 6px; }

    .cla-row { flex-wrap: wrap; gap: 8px 10px; padding: 10px; }
    .cla-main { flex-basis: calc(100% - 120px); }
    .cla-mem .cla-role, .cla-clan .cla-pts { margin-left: auto; }
    .cla-acts { flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .cla-acts .v3-btn.is-sm { min-height: 36px; }
    .cla-pts { min-width: 0; }
    .cla-pos { flex-basis: 18px; }
    .cla-req .cla-acts { align-self: auto; }
    .cla-hist .cla-score.sm { margin-left: auto; }

    .cla-staff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cla-log-row { grid-template-columns: 18px 1fr; }
    .cla-log-row time { grid-column: 2; }

    .cla-form { grid-template-columns: minmax(0, 1fr); }
    .cla-radio { grid-template-columns: minmax(0, 1fr); }
    .cla-set-row { flex-wrap: wrap; }
    .cla-set-row > div { flex: 1 1 200px; }
    .cla-clan .cla-acts { flex-basis: auto; }
    .cla-set-row .cla-acts { flex-basis: 100%; }
    .cla-set-row .v3-select { flex: 1 1 auto; max-width: none; min-height: 40px; }
    .cla-hint-field .v3-label { display: none; }
    .cla-photo { align-items: flex-start; }
    .cla-war { padding: 12px 10px; gap: 8px; }
    .cla-score { font-size: 24px; }
    .cla-inline { flex-wrap: wrap; }
    .cla-joinbar .cla-inline > .v3-btn, .cla-joinbar .cla-inline > .v3-input { flex: 1 1 100%; }
    .cla-chat-send { flex-wrap: nowrap; }
    .cla-chat-send .v3-btn span { display: none; }
    .cla-banner { flex-wrap: wrap; }
}
/* Celular deitado: pouca altura, cabeçalho e selo menores. */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    .cla-head .v3-kicker { display: none; }
    .cla-head { padding: 8px 14px; }
    .cla-tabs .v3-tab { padding: 9px 11px; }
    .cla-body { padding-top: 10px; }
    .cla-row { flex-wrap: nowrap; }
    .cla-acts { flex-basis: auto; }
    .cla-main { flex-basis: auto; }
    .cla-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cla-radio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cla-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cla-search { flex-basis: 240px; }
}