/* ==========================================================================
   v3-base.css — base do design novo ("Placa de Petri") em TODAS as telas.

   O pc-redesign.css define o tema só no PC com mouse. Aqui os mesmos tokens
   valem em qualquer tela (PC, celular, tablet), e um kit de componentes .v3-*
   serve às telas novas. Os arquivos por área (v3-perfil, v3-cla, v3-admin,
   v3-social, v3-diversos, v3-mobile) vêm depois deste e repintam a marcação
   que já existe usando estes tokens.

   Regras do tema:
   - fundo quase preto esverdeado; painéis em camadas (ink → ink-2 → panel);
   - linhas finas claras (--pc-line / --pc-line-2), cantos retos (2px);
   - destaque verde-ácido só no que é ação/ativo (--pc-acid), vermelho para
     perigo (--pc-hot), dourado para moedas/prêmios (--pc-gold);
   - títulos em Unbounded maiúsculo, texto em Bricolage Grotesque, números,
     rótulos e botões em JetBrains Mono maiúsculo com espaçamento.
   ========================================================================== */

:root {
    --pc-ink: #0b0d0c;
    --pc-ink-2: #111412;
    --pc-panel: #131715;
    --pc-panel-2: #1a1f1c;
    --pc-line: rgba(233, 239, 228, .10);
    --pc-line-2: rgba(233, 239, 228, .20);
    --pc-text: #e9efe4;
    --pc-dim: #8b958c;
    --pc-faint: #59625a;
    --pc-acid: #d4ff3a;
    --pc-acid-ink: #121a00;
    --pc-acid-soft: rgba(212, 255, 58, .12);
    --pc-hot: #ff5470;
    --pc-hot-soft: rgba(255, 84, 112, .12);
    --pc-gold: #ffc94a;
    --pc-gold-soft: rgba(255, 201, 74, .12);
    --pc-ok: #4be38a;
    --pc-ok-soft: rgba(75, 227, 138, .12);
    --pc-info: #5ee0ff;
    --pc-info-soft: rgba(94, 224, 255, .12);
    --pc-silver: #cdd5cc;
    --pc-bronze: #e08b4c;
    --pc-display: 'Unbounded', 'Inter', sans-serif;
    --pc-body: 'Bricolage Grotesque', 'Inter', sans-serif;
    --pc-mono: 'JetBrains Mono', ui-monospace, monospace;
    --pc-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9);
    --pc-backdrop: rgba(6, 8, 7, .78);
    /* "crop marks" nos quatro cantos, sem usar pseudo-elementos */
    --pc-corners:
        linear-gradient(var(--pc-acid), var(--pc-acid)) top left / 10px 1px no-repeat,
        linear-gradient(var(--pc-acid), var(--pc-acid)) top left / 1px 10px no-repeat,
        linear-gradient(var(--pc-acid), var(--pc-acid)) top right / 10px 1px no-repeat,
        linear-gradient(var(--pc-acid), var(--pc-acid)) top right / 1px 10px no-repeat,
        linear-gradient(var(--pc-acid), var(--pc-acid)) bottom left / 10px 1px no-repeat,
        linear-gradient(var(--pc-acid), var(--pc-acid)) bottom left / 1px 10px no-repeat,
        linear-gradient(var(--pc-acid), var(--pc-acid)) bottom right / 10px 1px no-repeat,
        linear-gradient(var(--pc-acid), var(--pc-acid)) bottom right / 1px 10px no-repeat;
}

html body ::selection { background: var(--pc-acid); color: var(--pc-acid-ink); }

/* ---------- Kit de componentes (telas novas) ------------------------------- */

/* Fundo + janela */
.v3-back {
    position: fixed; inset: 0; z-index: 100000;
    background: var(--pc-backdrop);
    -webkit-backdrop-filter: blur(4px) saturate(.5);
    backdrop-filter: blur(4px) saturate(.5);
}
.v3-modal {
    position: fixed; z-index: 100001;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: var(--pc-corners), var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    border-radius: 2px;
    box-shadow: var(--pc-shadow);
    color: var(--pc-text);
    font-family: var(--pc-body);
}
.v3-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--pc-line);
}
.v3-head h2, .v3-title {
    margin: 0;
    font: 800 20px/1.1 var(--pc-display);
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--pc-text);
}
.v3-head h2 i, .v3-title i { color: var(--pc-acid); margin-right: 6px; }
.v3-kicker, .v3-label {
    font: 500 10px/1.4 var(--pc-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pc-faint);
}
.v3-kicker { color: var(--pc-acid); }
.v3-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.v3-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--pc-line);
    font-size: 12px; color: var(--pc-dim);
}
.v3-x {
    margin-left: auto; flex: 0 0 auto;
    width: 34px; height: 34px; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--pc-line-2); border-radius: 2px;
    color: var(--pc-dim); cursor: pointer;
}
.v3-x:hover { color: var(--pc-hot); border-color: var(--pc-hot); }

/* Abas (sublinhado ácido na ativa) */
.v3-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--pc-line); overflow-x: auto; scrollbar-width: none; }
.v3-tabs::-webkit-scrollbar { display: none; }
.v3-tab {
    position: relative; flex: 0 0 auto;
    padding: 10px 14px;
    background: transparent; border: 0; border-radius: 0;
    color: var(--pc-dim); cursor: pointer;
    font: 500 11px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}
.v3-tab i { margin-right: 6px; color: var(--pc-faint); }
.v3-tab:hover { color: var(--pc-text); }
.v3-tab.is-on, .v3-tab.active { color: var(--pc-text); }
.v3-tab.is-on i, .v3-tab.active i { color: var(--pc-acid); }
.v3-tab.is-on::after, .v3-tab.active::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--pc-acid);
}

/* Botões */
.v3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 36px; padding: 0 14px;
    background: transparent; border: 1px solid var(--pc-line-2); border-radius: 2px;
    color: var(--pc-text); cursor: pointer;
    font: 600 11px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase;
    transition: border-color .12s, background .12s, color .12s;
}
.v3-btn:hover:not(:disabled) { border-color: var(--pc-text); }
.v3-btn:disabled { opacity: .4; cursor: default; }
.v3-btn.is-primary { background: var(--pc-acid); border-color: var(--pc-acid); color: var(--pc-acid-ink); }
.v3-btn.is-primary:hover:not(:disabled) { box-shadow: 0 0 0 4px var(--pc-acid-soft); }
.v3-btn.is-danger { border-color: rgba(255, 84, 112, .5); color: var(--pc-hot); }
.v3-btn.is-danger:hover:not(:disabled) { background: var(--pc-hot-soft); border-color: var(--pc-hot); }
.v3-btn.is-gold { border-color: rgba(255, 201, 74, .5); color: var(--pc-gold); }
.v3-btn.is-ghost { border-color: transparent; color: var(--pc-dim); }
.v3-btn.is-ghost:hover:not(:disabled) { color: var(--pc-text); border-color: var(--pc-line-2); }
.v3-btn.is-sm { min-height: 28px; padding: 0 10px; font-size: 10px; }
.v3-btn.is-block { width: 100%; }

/* Campos */
.v3-input, .v3-select, .v3-textarea {
    width: 100%; box-sizing: border-box;
    min-height: 38px; padding: 8px 12px;
    background: var(--pc-ink); border: 1px solid var(--pc-line-2); border-radius: 2px;
    color: var(--pc-text); font: 500 14px var(--pc-body);
    outline: none;
}
.v3-textarea { min-height: 80px; resize: vertical; line-height: 1.45; }
.v3-input::placeholder, .v3-textarea::placeholder { color: var(--pc-faint); }
.v3-input:focus, .v3-select:focus, .v3-textarea:focus { border-color: var(--pc-acid); box-shadow: inset 3px 0 0 var(--pc-acid); }
.v3-select option { background: var(--pc-panel); color: var(--pc-text); }
.v3-field { display: flex; flex-direction: column; gap: 6px; }

/* Chips, selos, contadores */
.v3-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--pc-line-2); border-radius: 2px;
    font: 500 10.5px var(--pc-mono); letter-spacing: .04em;
    color: var(--pc-dim); white-space: nowrap;
}
.v3-chip.is-acid { color: var(--pc-acid); border-color: rgba(212, 255, 58, .45); background: var(--pc-acid-soft); }
.v3-chip.is-gold { color: var(--pc-gold); border-color: rgba(255, 201, 74, .45); background: var(--pc-gold-soft); }
.v3-chip.is-hot { color: var(--pc-hot); border-color: rgba(255, 84, 112, .45); background: var(--pc-hot-soft); }
.v3-chip.is-ok { color: var(--pc-ok); border-color: rgba(75, 227, 138, .45); background: var(--pc-ok-soft); }
.v3-chip.is-info { color: var(--pc-info); border-color: rgba(94, 224, 255, .45); background: var(--pc-info-soft); }

/* Cartões, linhas de lista, números */
.v3-card { background: var(--pc-ink-2); border: 1px solid var(--pc-line); border-radius: 2px; padding: 14px; }
.v3-card-h {
    display: flex; align-items: center; gap: 8px;
    margin: -14px -14px 12px; padding: 10px 14px;
    border-bottom: 1px solid var(--pc-line);
    font: 500 10px var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-acid);
}
.v3-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px;
    transition: border-color .12s, background .12s;
}
.v3-row + .v3-row { margin-top: 6px; }
.v3-row:hover { border-color: var(--pc-line-2); }
.v3-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--pc-line-2); background: var(--pc-panel-2); }
.v3-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--pc-ink); border: 1px solid var(--pc-line); border-radius: 2px; }
.v3-stat b { font: 700 20px/1 var(--pc-mono); color: var(--pc-text); font-variant-numeric: tabular-nums; }
.v3-stat span { font: 500 10px var(--pc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-faint); }
.v3-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.v3-bar { height: 6px; background: var(--pc-line); overflow: hidden; }
.v3-bar > i { display: block; height: 100%; background: var(--pc-acid); }

/* Lista vazia / carregando */
.v3-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 120px; padding: 20px;
    border: 1px dashed var(--pc-line-2);
    background: radial-gradient(rgba(233, 239, 228, .05) 1px, transparent 1.2px) 0 0 / 14px 14px;
    text-align: center;
    font: 500 11px var(--pc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-dim);
}
.v3-empty > i { font-size: 20px; color: var(--pc-acid); }

/* Celular: janela vira folha de tela cheia */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    .v3-modal {
        left: 0; top: 0; transform: none;
        width: 100vw; height: 100vh; height: 100dvh; max-height: none;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        box-sizing: border-box;
        border: 0;
    }
    .v3-head { padding: 14px 14px 12px; }
    .v3-head h2, .v3-title { font-size: 17px; }
    .v3-body { padding: 12px 14px; }
    .v3-foot { padding: 10px 14px; }
    .v3-btn { min-height: 40px; }
    .v3-x { width: 40px; height: 40px; }
}

/* Avisos (toasts do ui.js) por cima de qualquer janela: as janelas novas
   usam z-index ~100000 e o container antigo ficava atrás (10000). */
html body #notification-container { z-index: 100200 !important; }

/* Aviso de desconexão (outra aba, kick, limite, desatualizado): o estilo
   embutido no main_out.js era azul e arredondado. */
html body #px-disconnect-banner {
    border-radius: 2px !important;
    background: var(--pc-corners), var(--pc-panel) !important;
    border: 1px solid rgba(255, 84, 112, .55) !important;
    box-shadow: var(--pc-shadow) !important;
    font-family: var(--pc-body) !important;
}
html body #px-disconnect-banner .pxdb-text { font: 600 14px/1.45 var(--pc-body) !important; color: var(--pc-text) !important; }
html body #px-disconnect-banner .pxdb-btn {
    border-radius: 2px !important;
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-text) !important;
    font: 600 11px var(--pc-mono) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body #px-disconnect-banner .pxdb-primary { background: var(--pc-acid) !important; border-color: var(--pc-acid) !important; color: var(--pc-acid-ink) !important; }

/* Tela "Conectando" (index.html, #connecting) */
html body #connecting { background: rgba(6, 8, 7, .9) !important; }
.px-connecting-card {
    width: min(320px, calc(100vw - 32px));
    margin: 0;
    padding: 22px 24px;
    box-sizing: border-box;
    text-align: center;
    background: var(--pc-corners), var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    border-radius: 2px;
    box-shadow: var(--pc-shadow);
    color: var(--pc-text);
    font-family: var(--pc-body);
}
.px-connecting-card h2 { margin: 10px 0 6px; font: 800 18px var(--pc-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--pc-text); }
.px-connecting-card p { margin: 0; font-size: 13px; color: var(--pc-dim); }
.px-connecting-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--pc-acid); box-shadow: 0 0 0 4px var(--pc-acid-soft);
    animation: pxConnPulse 1.2s ease-in-out infinite;
}
@keyframes pxConnPulse { 50% { transform: scale(.6); opacity: .5; } }

/* Classificação: você e o seu P2 fora do top, separados por uma linha. */
html body #eps-leaderboard .eps-lb-sep {
    list-style: none;
    height: 0;
    margin: 4px 14px;
    border-top: 1px dashed var(--pc-line-2);
}
html body #eps-leaderboard .eps-lb-row.eps-lb-self .eps-lb-rank { color: var(--pc-dim) !important; }