/* ==========================================================================
   pc-redesign.css — tema "Placa de Petri" (telas largas)
   Carregado por último no index.html. Tudo fica dentro de um @media de
   tela larga OU com mouse (desde a 3.8.0: notebook com toque, tablet deitado
   e janela estreita no PC também), então o celular não é afetado; ele recebe
   o mesmo tema pelo v3-mobile.css.
   Para desligar: remover a <link> deste arquivo no index.html.
   ========================================================================== */

@media (min-width: 1025px), (hover: hover) and (pointer: fine), (min-width: 821px) and (orientation: landscape) and (min-height: 541px) {

: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-gold: #ffc94a;
    --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;
    /* "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;
}

/* ---------- Base ---------------------------------------------------------- */

html body { background: var(--pc-ink) !important; font-family: var(--pc-body) !important; }

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

html body ::-webkit-scrollbar { width: 6px; height: 6px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb { background: var(--pc-line-2); border-radius: 0; }

/* ---------- Menu: fundo ---------------------------------------------------- */

html body #overlays {
    background:
        radial-gradient(circle at 50% 52%, transparent 0 34vmin, rgba(11, 13, 12, .55) 60vmin, rgba(11, 13, 12, .92) 100vmin),
        radial-gradient(rgba(233, 239, 228, .07) 1px, transparent 1.2px) 0 0 / 22px 22px,
        rgba(11, 13, 12, .72) !important;
    backdrop-filter: blur(3px) saturate(.6) !important;
    -webkit-backdrop-filter: blur(3px) saturate(.6) !important;
}

/* Card central acima do fundo (o anel decorativo giratório foi removido) */
html body #menu-center-stack { position: relative !important; z-index: 3; }
html body #menu-center-stack::before,
html body #menu-center-stack::after { content: none !important; display: none !important; }

/* ---------- Painéis do menu (social / centro / ranking) ------------------- */

html body #helloDialog,
html body #social-sidebar,
html body #settings-sidebar {
    background: var(--pc-corners), var(--pc-panel) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--pc-text) !important;
}
html body #helloDialog::before,
html body #helloDialog::after,
html body #social-sidebar::before,
html body #settings-sidebar::before { display: none !important; }

/* Rótulos de seção com índice, estilo ficha técnica */
html body #social-sidebar .social-panel-title {
    font: 500 11px/1 var(--pc-mono) !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--pc-dim) !important;
    border-bottom: 1px solid var(--pc-line) !important;
    padding-bottom: 12px !important;
}
html body #social-sidebar .social-panel-title span::before { content: none !important; }

/* ---------- Card central --------------------------------------------------- */

html body #helloDialog { padding: 28px 30px 20px !important; }

html body #pxm-head { text-align: left !important; padding: 0 0 18px !important; border-bottom: 1px solid var(--pc-line) !important; margin-bottom: 16px !important; background: none !important; }
html body #pxm-head #title,
html body #helloDialog h2#title {
    font: 900 44px/0.95 var(--pc-display) !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase !important;
    color: var(--pc-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    text-align: left !important;
    margin: 0 !important;
    filter: none !important;
}
html body #pxm-head #title::after {
    content: '';
    display: inline-block;
    width: .36em; height: .36em;
    margin-left: .12em;
    border-radius: 50%;
    background: var(--pc-acid);
    vertical-align: .08em;
    animation: pc-pulse 2.4s ease-in-out infinite;
}
@keyframes pc-pulse { 50% { transform: scale(.7); opacity: .6; } }
html body #pxm-tag {
    display: block !important;
    margin-top: 10px !important;
    font: 500 11px/1 var(--pc-mono) !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--pc-dim) !important;
    text-align: left !important;
}

/* Status do servidor vira uma linha de leitura de instrumento */
html body #pxm-status {
    justify-content: flex-start !important;
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 0 14px !important;
    font: 500 11px/1 var(--pc-mono) !important;
    letter-spacing: .06em !important;
    color: var(--pc-dim) !important;
    text-transform: uppercase !important;
}
html body #pxm-status b { color: var(--pc-text) !important; font-weight: 600 !important; }
html body #pxm-status .pxm-sep { color: var(--pc-faint) !important; }
html body #pxm-status .pxm-dot { background: var(--pc-acid) !important; box-shadow: 0 0 0 3px var(--pc-acid-soft) !important; }
html body #pxm-status i { color: var(--pc-faint) !important; }

/* Campos */
html body #helloDialog .form-control,
html body #helloDialog #nick,
html body #helloDialog #nick2,
html body #helloDialog select#gamemode {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    font: 600 15px var(--pc-body) !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s !important;
}
html body #helloDialog #nick { font: 700 18px var(--pc-body) !important; letter-spacing: .01em !important; }
html body #helloDialog .form-control::placeholder { color: var(--pc-faint) !important; font-weight: 500 !important; }
html body #helloDialog .form-control:hover { border-color: rgba(233, 239, 228, .32) !important; }
html body #helloDialog .form-control:focus {
    border-color: var(--pc-acid) !important;
    background: #0d100e !important;
    outline: none !important;
    box-shadow: inset 3px 0 0 var(--pc-acid) !important;
}
html body #helloDialog select#gamemode {
    font: 600 13px var(--pc-mono) !important;
    letter-spacing: .02em !important;
    cursor: pointer !important;
}
html body #helloDialog select#gamemode option { background: var(--pc-panel) !important; color: var(--pc-text) !important; }

html body #helloDialog .dual-toggle-btn,
html body #helloDialog .skin-preview-trigger {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    box-shadow: none !important;
    font-family: var(--pc-mono) !important;
}
html body #helloDialog .dual-toggle-btn:hover,
html body #helloDialog .skin-preview-trigger:hover { border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
html body #helloDialog .skin-preview-cell {
    border-radius: 50% !important;
    border: 1px dashed var(--pc-line-2) !important;
    background: radial-gradient(circle at 35% 30%, #262c28, var(--pc-ink)) !important;
    box-shadow: none !important;
}

/* Botão JOGAR: bloco sólido ácido, sem gradiente */
html body #play-btn {
    position: relative !important;
    background: var(--pc-acid) !important;
    color: var(--pc-acid-ink) !important;
    border: 0 !important;
    border-radius: 2px !important;
    font: 800 17px/1 var(--pc-display) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 0 0 var(--pc-acid-soft) !important;
    text-shadow: none !important;
    overflow: hidden !important;
    transition: transform .12s ease, box-shadow .2s ease !important;
}
html body #play-btn { font-size: 0 !important; }
html body #play-btn > span { font: 800 17px/1 var(--pc-display) !important; letter-spacing: .06em !important; }
html body #play-btn::after {
    content: '→';
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    font: 700 20px var(--pc-mono);
    transition: transform .2s ease;
}
html body #play-btn:hover { box-shadow: 0 0 0 6px var(--pc-acid-soft) !important; filter: none !important; }
html body #play-btn:hover::after { transform: translate(5px, -50%); }
html body #play-btn:active { transform: translateY(1px) scale(.995) !important; }

html body #spectate-btn {
    background: transparent !important;
    color: var(--pc-text) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    font: 600 12px var(--pc-mono) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
html body #spectate-btn:hover { border-color: var(--pc-text) !important; background: rgba(233, 239, 228, .04) !important; }

html body #helloDialog .menu-controls-hint {
    border-color: var(--pc-line) !important;
    font: 500 11px var(--pc-mono) !important;
    color: var(--pc-faint) !important;
    letter-spacing: 0 !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: space-between !important;
    font-size: 10px !important;
}
html body #helloDialog .menu-controls-hint span { color: var(--pc-faint) !important; font-family: var(--pc-mono) !important; font-size: 10px !important; white-space: nowrap !important; }
html body #helloDialog form,
html body #helloDialog #pxm-status,
html body #helloDialog .menu-controls-hint { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html body #helloDialog kbd {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-bottom-width: 2px !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    font: 600 10px var(--pc-mono) !important;
    box-shadow: none !important;
}

/* ---------- Social (deslogado) -------------------------------------------- */

html body #social-sidebar .social-gate-icon {
    background: transparent !important;
    border: 1px dashed var(--pc-line-2) !important;
    border-radius: 50% !important;
    color: var(--pc-acid) !important;
    box-shadow: none !important;
}
html body #social-sidebar .social-gate-title { font: 700 17px var(--pc-body) !important; color: var(--pc-text) !important; }
html body #social-sidebar .social-gate-text { font: 400 13px/1.5 var(--pc-body) !important; color: var(--pc-dim) !important; }
html body #social-sidebar .social-auth-actions button {
    border-radius: 2px !important;
    font: 600 11px var(--pc-mono) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
html body #social-sidebar .social-auth-actions .auth-text-action {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-text) !important;
}
html body #social-sidebar .social-auth-actions .auth-text-action:first-child {
    background: var(--pc-text) !important;
    border-color: var(--pc-text) !important;
    color: var(--pc-ink) !important;
}
html body #social-sidebar .social-auth-actions .discord { background: #5865f2 !important; border: 0 !important; }

/* ---------- Barra superior (Configurações / Loja) ------------------------- */

html body .top-settings-button,
html body #main-store-button {
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 2px 2px !important;
    color: var(--pc-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body .top-settings-button strong,
html body #main-store-button strong {
    font: 500 11px var(--pc-mono) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: inherit !important;
}
html body .top-settings-button > span,
html body #main-store-button > span { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--pc-dim) !important; }
html body #main-store-button { color: var(--pc-gold) !important; }
html body #main-store-button > span { color: var(--pc-gold) !important; }
html body .top-settings-button:hover,
html body #main-store-button:hover { background: var(--pc-panel-2) !important; border-color: var(--pc-line-2) !important; }

/* ---------- HUD dentro do jogo -------------------------------------------- */

html body .eps-glass,
html body #px-chat,
html body #px-mbar .pxmb-head,
html body #eps-minimap,
html body #eps-status {
    background: rgba(13, 16, 14, .82) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* Score: número grande em mono, como leitura de instrumento */
html body #px-score {
    background: var(--pc-corners), rgba(13, 16, 14, .82) !important;
    padding: 8px 14px 10px !important;
    min-width: 150px !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}
html body #px-score .px-score-label {
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--pc-dim) !important;
}
html body #px-score .px-score-value {
    margin: 0 !important;
    font: 800 28px/1 var(--pc-display) !important;
    letter-spacing: -.02em !important;
    color: var(--pc-acid) !important;
    text-shadow: none !important;
    font-variant-numeric: tabular-nums;
}

/* Rádio */
html body #px-radio .px-radio-btn {
    background: var(--pc-acid) !important;
    color: var(--pc-acid-ink) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}
html body #px-radio .px-radio-name { font: 600 12px var(--pc-body) !important; color: var(--pc-text) !important; }
html body #px-radio .px-radio-state { font: 500 10px var(--pc-mono) !important; color: var(--pc-dim) !important; text-transform: uppercase !important; letter-spacing: .1em !important; }
html body #px-radio .px-radio-range { accent-color: var(--pc-acid) !important; }

/* Leaderboard */
html body #eps-leaderboard .eps-lb-head {
    padding: 12px 14px 10px !important;
    border-bottom: 1px solid var(--pc-line) !important;
    text-align: left !important;
}
html body #eps-leaderboard .eps-lb-title {
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--pc-dim) !important;
}
html body #eps-leaderboard .eps-lb-title::before { content: '● '; color: var(--pc-hot); animation: pc-pulse 1.6s ease-in-out infinite; }
html body #eps-leaderboard .eps-lb-list { padding: 6px 0 !important; margin: 0 !important; display: block !important; }
html body #eps-leaderboard .eps-lb-row + .eps-lb-row { margin-top: 0 !important; }
html body #eps-leaderboard .eps-lb-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 1px 14px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 19px !important;
    font: 600 13px/19px var(--pc-body) !important;
    color: var(--pc-text) !important;
    border-left: 2px solid transparent !important;
}
html body #eps-leaderboard .eps-lb-row:hover { background: rgba(233, 239, 228, .04) !important; }
html body #eps-leaderboard .eps-lb-rank {
    width: 20px !important;
    font: 500 11px var(--pc-mono) !important;
    color: var(--pc-faint) !important;
    text-align: right !important;
}
html body #eps-leaderboard .eps-lb-row:nth-child(1) .eps-lb-rank { color: var(--pc-gold) !important; }
html body #eps-leaderboard .eps-lb-row:nth-child(1) { border-left-color: var(--pc-gold) !important; }
html body #eps-leaderboard .eps-lb-row.me,
html body #eps-leaderboard .eps-lb-row.is-me,
html body #eps-leaderboard .eps-lb-row.self {
    background: var(--pc-acid-soft) !important;
    border-left-color: var(--pc-acid) !important;
    color: var(--pc-acid) !important;
}
html body #eps-leaderboard .eps-lb-footer {
    border-top: 1px solid var(--pc-line) !important;
    background: transparent !important;
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .06em !important;
    color: var(--pc-faint) !important;
    text-transform: uppercase !important;
}

/* Status + minimapa: retícula de microscópio */
html body #eps-status .eps-st { font: 600 11px var(--pc-mono) !important; color: var(--pc-text) !important; }
html body #eps-status .eps-st i { color: var(--pc-faint) !important; }
html body #eps-minimap {
    background:
        linear-gradient(var(--pc-line), var(--pc-line)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(var(--pc-line), var(--pc-line)) 0 50% / 100% 1px no-repeat,
        var(--pc-corners),
        rgba(13, 16, 14, .82) !important;
}

/* Chat */
html body #px-chat .pxc-tabs { border-bottom: 1px solid var(--pc-line) !important; padding-bottom: 8px !important; }
html body #px-chat .pxc-tab {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    color: var(--pc-dim) !important;
    font: 500 11px var(--pc-mono) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
html body #px-chat .pxc-tab:hover { color: var(--pc-text) !important; }
html body #px-chat .pxc-tab.active { color: var(--pc-acid-ink) !important; background: var(--pc-acid) !important; border-color: var(--pc-acid) !important; }
html body #px-chat .pxc-min,
html body #px-chat .pxc-clear { background: transparent !important; border: 1px solid var(--pc-line) !important; border-radius: 2px !important; color: var(--pc-dim) !important; }
html body #px-chat .pxc-msg { font: 500 13px/1.45 var(--pc-body) !important; }
html body #px-chat .pxc-text { color: var(--pc-text) !important; }
html body #px-chat #pxc-input {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    font: 500 13px var(--pc-body) !important;
    box-shadow: none !important;
}
html body #px-chat #pxc-input:focus { border-color: var(--pc-acid) !important; outline: none !important; }
html body #px-chat .pxc-counter { font: 500 10px var(--pc-mono) !important; color: var(--pc-faint) !important; }
html body #px-chat .pxc-send { background: var(--pc-acid) !important; color: var(--pc-acid-ink) !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; }

/* Barra de nível / missões */
html body #px-mbar { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body #px-mbar .pxmb-nv b { font: 800 18px var(--pc-display) !important; color: var(--pc-acid) !important; }
html body #px-mbar .pxmb-nv span,
html body #px-mbar .pxmb-mtxt,
html body #px-mbar .pxmb-mcount { font: 500 10px var(--pc-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--pc-dim) !important; }
html body #px-mbar .pxmb-xp,
html body #px-mbar .pxmb-mbarwrap { background: var(--pc-line) !important; border-radius: 0 !important; height: 3px !important; }
html body #px-mbar #pxmb-xp-fill,
html body #px-mbar #pxmb-mbar-fill { background: var(--pc-acid) !important; border-radius: 0 !important; box-shadow: none !important; }
html body #px-mbar .pxmb-toggle { background: transparent !important; border: 1px solid var(--pc-line) !important; border-radius: 2px !important; color: var(--pc-dim) !important; }

/* Botões de canto (social / votação / ticket / ajuda) */
html body #spx-corner-bar button,
html body #tut-help-btn {
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    color: var(--pc-dim) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html body #spx-corner-bar button:hover,
html body #tut-help-btn:hover { color: var(--pc-acid) !important; border-color: var(--pc-acid) !important; }
html body #tut-help-btn { font: 700 16px var(--pc-mono) !important; }

/* Botão de tela cheia */
html body #fullscreen-btn {
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    color: var(--pc-dim) !important;
    box-shadow: none !important;
}

/* ---------- Modais: base comum --------------------------------------------- */

html body #pxs-modal,
html body #pxg-modal,
html body .coin-store-card,
html body .auth-modal-card {
    background: var(--pc-corners), var(--pc-panel) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9) !important;
    backdrop-filter: none !important;
    color: var(--pc-text) !important;
    font-family: var(--pc-body) !important;
}
html body #pxs-modal::before, html body #pxs-modal::after,
html body #pxg-modal::before, html body #pxg-modal::after,
html body .coin-store-card::before, html body .auth-modal-card::before { display: none !important; }

html body #coin-store-modal,
html body #auth-modal { background: rgba(6, 8, 7, .78) !important; backdrop-filter: blur(4px) saturate(.5) !important; }

/* Cabeçalhos */
html body #pxs-modal .pxs-head,
html body #pxg-modal .pxg-head,
html body .coin-store-header,
html body .auth-modal-header { border-bottom: 1px solid var(--pc-line) !important; background: transparent !important; }
html body #pxs-modal .pxs-head h2,
html body #pxg-modal .pxg-head h2,
html body .coin-store-header h3,
html body #auth-modal-title {
    font: 800 20px var(--pc-display) !important;
    letter-spacing: -.02em !important;
    text-transform: uppercase !important;
    color: var(--pc-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
html body #pxs-modal .pxs-head h2 i,
html body #pxg-modal .pxg-head h2 i { color: var(--pc-acid) !important; }
html body .coin-store-header span { font: 500 11px var(--pc-mono) !important; color: var(--pc-dim) !important; letter-spacing: .06em !important; }

/* Botão fechar */
html body #pxs-modal .pxs-x,
html body #pxg-modal .pxg-x,
html body .coin-store-close,
html body .auth-modal-close {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-dim) !important;
    box-shadow: none !important;
}
html body #pxs-modal .pxs-x:hover,
html body #pxg-modal .pxg-x:hover,
html body .coin-store-close:hover,
html body .auth-modal-close:hover { color: var(--pc-hot) !important; border-color: var(--pc-hot) !important; }

/* Busca */
html body #pxs-q,
html body #pxg-q {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    font: 500 12px var(--pc-mono) !important;
    box-shadow: none !important;
}
html body #pxs-q:focus,
html body #pxg-q:focus { border-color: var(--pc-acid) !important; outline: none !important; }

/* Navegação lateral */
html body #pxs-nav,
html body #pxg-nav { background: var(--pc-ink-2) !important; border-right: 1px solid var(--pc-line) !important; }
html body #pxs-nav .pxs-nav-group { font: 500 10px var(--pc-mono) !important; letter-spacing: .16em !important; color: var(--pc-faint) !important; }
html body #pxs-nav button,
html body #pxg-nav button {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--pc-dim) !important;
    font: 600 14px var(--pc-body) !important;
    box-shadow: none !important;
}
html body #pxs-nav button i,
html body #pxg-nav button i { color: var(--pc-faint) !important; }
html body #pxs-nav button:hover,
html body #pxg-nav button:hover { color: var(--pc-text) !important; background: rgba(233, 239, 228, .03) !important; }
html body #pxs-nav button.on,
html body #pxg-nav button.on {
    color: var(--pc-text) !important;
    background: var(--pc-acid-soft) !important;
    border-left-color: var(--pc-acid) !important;
}
html body #pxs-nav button.on i,
html body #pxg-nav button.on i { color: var(--pc-acid) !important; }
html body #pxg-nav .pxg-count { background: transparent !important; border: 1px solid var(--pc-line-2) !important; border-radius: 2px !important; color: var(--pc-dim) !important; font: 500 10px var(--pc-mono) !important; }

/* Conteúdo */
html body #pxs-modal .pxs-sec-title,
html body #pxg-modal .pxg-sec-title { font: 800 18px var(--pc-display) !important; text-transform: uppercase !important; letter-spacing: -.01em !important; color: var(--pc-text) !important; }
html body #pxs-modal .pxs-sec-desc,
html body #pxg-modal .pxg-sec-desc { font: 400 13px var(--pc-body) !important; color: var(--pc-dim) !important; }
html body #pxs-modal .pxs-card { background: var(--pc-ink-2) !important; border: 1px solid var(--pc-line) !important; border-radius: 2px !important; box-shadow: none !important; }
html body #pxs-modal .pxs-card-head,
html body #pxg-modal .pxg-group {
    background: transparent !important;
    border-bottom: 1px solid var(--pc-line) !important;
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--pc-acid) !important;
}
html body #pxs-modal .pxs-card-head i { color: var(--pc-acid) !important; }
html body #pxs-modal .pxs-row { border-color: var(--pc-line) !important; }
html body #pxs-modal .pxs-row:hover { background: rgba(233, 239, 228, .02) !important; }
html body #pxs-modal .pxs-row-lab { font: 600 14px var(--pc-body) !important; color: var(--pc-text) !important; }
html body #pxs-modal .pxs-row-desc { font: 400 12px var(--pc-body) !important; color: var(--pc-dim) !important; }

/* Interruptores: trilho reto, bolinha quadrada */
html body #pxs-modal .pxs-sw {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
html body #pxs-modal .pxs-sw::after,
html body #pxs-modal .pxs-sw::before { border-radius: 1px !important; background: var(--pc-faint) !important; box-shadow: none !important; }
html body #pxs-modal .pxs-sw.on { background: var(--pc-acid) !important; border-color: var(--pc-acid) !important; }
html body #pxs-modal .pxs-sw.on::after,
html body #pxs-modal .pxs-sw.on::before { background: var(--pc-acid-ink) !important; }

/* Botões genéricos dos modais */
html body #pxs-modal .pxs-btn,
html body #pxg-modal .pxg-btn {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    font: 600 11px var(--pc-mono) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
html body #pxs-modal .pxs-btn:hover,
html body #pxg-modal .pxg-btn:hover { border-color: var(--pc-text) !important; }
html body #pxs-modal .pxs-btn.accent,
html body #pxs-done,
html body #pxg-done { background: var(--pc-acid) !important; border-color: var(--pc-acid) !important; color: var(--pc-acid-ink) !important; }
html body #pxs-modal .pxs-foot,
html body #pxg-modal .pxg-foot { border-top: 1px solid var(--pc-line) !important; background: transparent !important; font: 400 12px var(--pc-body) !important; color: var(--pc-dim) !important; }

/* Galeria de skins */
html body #pxg-modal .pxg-preview { background: var(--pc-ink) !important; border: 1px solid var(--pc-line-2) !important; border-radius: 2px !important; }
html body #pxg-modal .pxg-item {
    background: var(--pc-ink-2) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    transition: border-color .12s, transform .12s !important;
}
html body #pxg-modal .pxg-item:hover { border-color: var(--pc-line-2) !important; transform: translateY(-2px) !important; }
html body #pxg-modal .pxg-item.on { border-color: var(--pc-acid) !important; background: var(--pc-acid-soft) !important; }
html body #pxg-modal .pxg-thumb { background: var(--pc-ink) !important; border: 1px dashed var(--pc-line-2) !important; }
html body #pxg-modal .pxg-name { font: 600 12px var(--pc-body) !important; color: var(--pc-text) !important; }

/* Loja */
html body .coin-store-tab,
html body .auth-mode-tabs button {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-dim) !important;
    font: 600 11px var(--pc-mono) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
html body .coin-store-tab.active,
html body .auth-mode-tabs button.active { background: var(--pc-text) !important; border-color: var(--pc-text) !important; color: var(--pc-ink) !important; }
html body .coin-store-slots { background: transparent !important; border: 1px dashed rgba(255, 201, 74, .4) !important; border-radius: 2px !important; font: 500 12px var(--pc-mono) !important; }
html body .modal-ad-slot { background: var(--pc-ink) !important; border: 1px dashed var(--pc-line-2) !important; border-radius: 2px !important; color: var(--pc-faint) !important; font-family: var(--pc-mono) !important; }
html body .modal-ad-slot * { border-color: transparent !important; color: var(--pc-faint) !important; }

/* Login */
html body #auth-modal .form-control {
    background: var(--pc-ink) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-text) !important;
    font: 600 15px var(--pc-body) !important;
    box-shadow: none !important;
}
html body #auth-modal .form-control:focus { border-color: var(--pc-acid) !important; box-shadow: inset 3px 0 0 var(--pc-acid) !important; outline: none !important; }
html body #auth-modal .auth-submit {
    background: var(--pc-acid) !important;
    border: 0 !important;
    border-radius: 2px !important;
    color: var(--pc-acid-ink) !important;
    font: 800 14px var(--pc-display) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
html body #auth-modal .auth-separator,
html body #auth-modal .auth-separator span { font: 500 10px var(--pc-mono) !important; letter-spacing: .2em !important; color: var(--pc-faint) !important; }
html body #auth-modal .auth-discord-btn { border-radius: 2px !important; box-shadow: none !important; font-family: var(--pc-body) !important; }

} /* fim @media PC */

/* ---------- Ranking (todas as telas desde a 3.8.0) -------------------------- */

/* Abas: estilo ficha técnica, sublinhado na ativa */
html body #settings-sidebar .ranking-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--pc-line) !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
}
html body #settings-sidebar .ranking-tabs button {
    height: 40px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -1px !important;
    color: var(--pc-dim) !important;
    font: 500 11px var(--pc-mono) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}
html body #settings-sidebar .ranking-tabs button::before { content: none !important; display: none !important; }
html body #settings-sidebar .ranking-tabs button:hover { color: var(--pc-text) !important; }
html body #settings-sidebar .ranking-tabs button.active { color: var(--pc-text) !important; border-bottom-color: var(--pc-acid) !important; background: transparent !important; }
html body #settings-sidebar .ranking-tabs button i,
html body #settings-sidebar .ranking-tabs button svg { display: none !important; }

/* Pódio: três colunas que terminam numa base comum, cada uma com sua cor */
html body #settings-sidebar .ranking-podium {
    gap: 6px !important;
    padding-top: 6px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid var(--pc-line-2);
}
html body #settings-sidebar .podium-item { --pc-place: var(--pc-silver); animation: none !important; }
html body #settings-sidebar .podium-item.first { --pc-place: var(--pc-gold); }
html body #settings-sidebar .podium-item.third { --pc-place: var(--pc-bronze); }

html body #settings-sidebar .podium-card {
    justify-content: flex-start !important;
    padding: 12px 6px 10px !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pc-place) 9%, transparent), transparent 70%),
        var(--pc-ink) !important;
    border: 1px solid var(--pc-line) !important;
    border-top: 2px solid var(--pc-place) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
html body #settings-sidebar .podium-card::before,
html body #settings-sidebar .podium-card::after { display: none !important; }
html body #settings-sidebar .podium-item.first .podium-card { height: 176px !important; border-color: var(--pc-line-2) !important; border-top-color: var(--pc-place) !important; }
html body #settings-sidebar .podium-item.second .podium-card { height: 150px !important; }
html body #settings-sidebar .podium-item.third .podium-card { height: 136px !important; }

/* Posição: número grande acima da coluna */
html body #settings-sidebar .podium-rank {
    width: auto !important;
    height: auto !important;
    margin: 0 0 6px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--pc-place) !important;
    font: 800 15px/1 var(--pc-display) !important;
    letter-spacing: -.02em !important;
    text-shadow: none !important;
}
html body #settings-sidebar .podium-item.first .podium-rank { font-size: 20px !important; }

html body #settings-sidebar .podium-avatar-wrapper {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--pc-place) !important;
    border-radius: 50% !important;
    padding: 2px !important;
    background: var(--pc-ink) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
html body #settings-sidebar .podium-item.first .podium-avatar-wrapper { width: 54px !important; height: 54px !important; }
html body #settings-sidebar .podium-avatar { border-radius: 50% !important; width: 100% !important; height: 100% !important; object-fit: cover; }

html body #settings-sidebar .podium-name {
    max-width: 100%;
    font: 700 12.5px var(--pc-body) !important;
    color: var(--pc-text) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #settings-sidebar .podium-item.first .podium-name { font-size: 13.5px !important; }
html body #settings-sidebar .podium-xp {
    max-width: 100%;
    margin-top: 2px;
    font: 500 9.5px var(--pc-mono) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--pc-faint) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #settings-sidebar .podium-xp-value {
    margin-top: 4px;
    font: 600 11px var(--pc-mono) !important;
    color: var(--pc-place) !important;
    letter-spacing: .02em !important;
    font-variant-numeric: tabular-nums;
    text-shadow: none !important;
}
html body #settings-sidebar .podium-medal { margin-top: auto; }
html body #settings-sidebar .podium-medal img { filter: none !important; }

/* Lista: linhas de tabela, sem caixas */
html body #settings-sidebar .ranking-list { display: block !important; }
html body #settings-sidebar .ranking-list-row {
    grid-template-columns: 30px 32px 1fr auto !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 6px 10px 6px 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pc-line) !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
    transition: background .12s, border-color .12s !important;
}
html body #settings-sidebar .ranking-list-row:hover {
    background: rgba(233, 239, 228, .035) !important;
    border-left-color: var(--pc-line-2) !important;
}
html body #settings-sidebar .row-pos {
    width: auto !important; height: auto !important;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    font: 500 12px var(--pc-mono) !important;
    color: var(--pc-faint) !important;
    font-variant-numeric: tabular-nums;
    text-align: left !important;
}
html body #settings-sidebar .row-avatar {
    width: 32px !important; height: 32px !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 50% !important;
    background: var(--pc-ink) !important;
}
html body #settings-sidebar .row-name { font: 700 13px var(--pc-body) !important; color: var(--pc-text) !important; }
html body #settings-sidebar .row-meta {
    font: 500 10px var(--pc-mono) !important;
    color: var(--pc-dim) !important;
    letter-spacing: .04em !important;
    font-variant-numeric: tabular-nums;
}
html body #settings-sidebar .row-badge { color: var(--pc-dim) !important; }

/* Linha do jogador logado */
html body #settings-sidebar .ranking-list-row.is-current-user {
    background: var(--pc-acid-soft) !important;
    border-left-color: var(--pc-acid) !important;
    border-bottom-color: rgba(212, 255, 58, .25) !important;
}
html body #settings-sidebar .ranking-list-row.is-current-user .row-pos { color: var(--pc-acid) !important; background: none !important; }
html body #settings-sidebar .ranking-list-row.is-current-user .row-avatar { border-color: var(--pc-acid) !important; }

html body #settings-sidebar .ranking-divider { margin: 14px 0 6px !important; }
html body #settings-sidebar .ranking-divider::before,
html body #settings-sidebar .ranking-divider::after { background: var(--pc-line) !important; }
html body #settings-sidebar .ranking-divider span {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font: 500 10px var(--pc-mono) !important;
    letter-spacing: .16em !important;
    color: var(--pc-acid) !important;
}

/* Estados vazio / carregando */
html body #settings-sidebar .ranking-loading,
html body #settings-sidebar .ranking-empty-state {
    background: radial-gradient(rgba(233, 239, 228, .06) 1px, transparent 1.2px) 0 0 / 14px 14px !important;
    border: 1px dashed var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-dim) !important;
    font: 500 11px var(--pc-mono) !important;
    letter-spacing: .06em !important;
}
html body #settings-sidebar .ranking-empty-state strong {
    font: 800 15px var(--pc-display) !important;
    text-transform: uppercase !important;
    letter-spacing: -.01em !important;
    color: var(--pc-text) !important;
}

html body #settings-sidebar .ranking-body::-webkit-scrollbar-track { background: transparent !important; }
html body #settings-sidebar .ranking-body::-webkit-scrollbar-thumb { background: var(--pc-line-2) !important; border-radius: 0 !important; }

html body #settings-sidebar .ranking-footer-action { border-top: 1px solid var(--pc-line) !important; }
html body #settings-sidebar .ranking-footer-action button {
    background: transparent !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px !important;
    color: var(--pc-dim) !important;
    font: 500 11px var(--pc-mono) !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}
html body #settings-sidebar .ranking-footer-action button:hover { color: var(--pc-acid) !important; border-color: var(--pc-acid) !important; }

/* ---------- HUD discreto durante a partida ---------------------------------
   Com o menu fechado, os painéis viram quase só texto: fundo bem translúcido,
   sem desfoque (o blur "embaça" a arena atrás) e opacidade baixa. Voltam ao
   normal ao passar o mouse / focar. Fundo claro mantém o vidro escuro opaco. */
html body:not(.game-menu-open):not(.game-bg-light) .eps-glass,
html body:not(.game-menu-open):not(.game-bg-light) #px-chat,
html body:not(.game-menu-open):not(.game-bg-light) #px-mbar .pxmb-head,
html body:not(.game-menu-open):not(.game-bg-light) #eps-status,
html body:not(.game-menu-open):not(.game-bg-light) #px-score {
    background: rgba(13, 16, 14, .22) !important;
    border-color: rgba(233, 239, 228, .06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html body:not(.game-menu-open):not(.game-bg-light) #eps-minimap {
    background: rgba(13, 16, 14, .22) !important;
    border-color: rgba(233, 239, 228, .06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Sem fundo, o texto precisa de sombra para continuar legível sobre as células */
html body:not(.game-menu-open) #eps-leaderboard,
html body:not(.game-menu-open) #eps-status,
html body:not(.game-menu-open) #px-score,
html body:not(.game-menu-open) #px-mbar,
html body:not(.game-menu-open) #px-chat .pxc-msg { text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }

html body:not(.game-menu-open) #eps-leaderboard { opacity: .5; }
html body:not(.game-menu-open) #eps-mm-wrap     { opacity: .55; transition: opacity .18s ease; }
html body:not(.game-menu-open) #px-score        { opacity: .65; }
html body:not(.game-menu-open) #px-radio        { opacity: .3; }
html body:not(.game-menu-open) #px-mbar         { opacity: .4; }
html body:not(.game-menu-open) #spx-team-hud,
html body:not(.game-menu-open) .team-hud-panel  { opacity: .5; }
html body:not(.game-menu-open) #spx-corner-bar,
html body:not(.game-menu-open) #tut-help-btn    { opacity: .35; transition: opacity .18s ease; }
html body:not(.game-menu-open) #px-chat         { opacity: .38; }
html body:not(.game-menu-open) #px-chat .pxc-tab:not(.active):not(.pxc-unseen) { opacity: .7; }

/* Interagiu → nítido de novo */
html body:not(.game-menu-open) #px-chat:hover,
html body:not(.game-menu-open) #px-chat:focus-within,
html body:not(.game-menu-open) #px-chat.pxc-has-new,
html body:not(.game-menu-open) #px-radio:hover,
html body:not(.game-menu-open) #px-radio.has-menu,
html body:not(.game-menu-open) #px-mbar:hover,
html body:not(.game-menu-open) #px-mbar.open,
html body:not(.game-menu-open) #spx-team-hud:hover,
html body:not(.game-menu-open) .team-hud-panel:hover,
html body:not(.game-menu-open) #spx-corner-bar:hover,
html body:not(.game-menu-open) #tut-help-btn:hover { opacity: 1; }
html body:not(.game-menu-open) #px-chat:hover,
html body:not(.game-menu-open) #px-chat:focus-within {
    background: rgba(13, 16, 14, .82) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ---------- Barra de ícones ao lado do minimapa ---------------------------
   Social / Votações / Relatar bug / Admin: ícones Font Awesome do mesmo
   peso, botão arredondado, cor própria no hover e etiqueta com o nome
   (data-tip) saindo para a esquerda. */
html body #spx-corner-bar { gap: 6px; }
html body #spx-corner-bar button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: rgba(19, 23, 21, .9) !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-text) !important;
    position: relative;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
html body #spx-corner-bar button > i { font-size: 16px; line-height: 1; pointer-events: none; }
html body #spx-corner-bar button:hover { background: var(--pc-panel-2) !important; transform: translateX(-2px); }
html body #spx-corner-bar button:active { transform: scale(.93); }
html body #spx-corner-bar #spx-fab:hover,
html body #spx-corner-bar #spx-fab.is-open { color: #5ee0ff !important; border-color: rgba(94, 224, 255, .7) !important; }
html body #spx-corner-bar #spx-vote-btn:hover,
html body #spx-corner-bar #spx-vote-btn.is-open { color: #ffd166 !important; border-color: rgba(255, 209, 102, .7) !important; }
html body #spx-corner-bar #spx-ticket-btn:hover,
html body #spx-corner-bar #spx-ticket-btn.is-open { color: #ff7a90 !important; border-color: rgba(255, 122, 144, .7) !important; }
html body #spx-corner-bar .spx-admin-btn:hover,
html body #spx-corner-bar .spx-admin-btn.is-open { color: var(--pc-acid) !important; border-color: var(--pc-acid) !important; }

html body #spx-corner-bar button[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translate(4px, -50%);
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(10, 12, 11, .95);
    border: 1px solid var(--pc-line-2);
    color: var(--pc-text);
    font: 500 11px var(--pc-mono);
    letter-spacing: .06em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
html body #spx-corner-bar button[data-tip]:hover::after { opacity: 1; transform: translate(0, -50%); }
@media (pointer: coarse) {
    html body #spx-corner-bar button[data-tip]::after { display: none; }
}
/* Parada, a barra fica legível (antes .35 sumia na arena); hover = nítida. */
html body:not(.game-menu-open) #spx-corner-bar { opacity: .6; }