:root {
    --bg: #0f1115;
    --bg-alt: #171a21;
    --card: #1c2028;
    --border: #2a2f3a;
    --text: #e8e8e8;
    --text-dim: #9aa0ab;
    --accent: #ff9d2f;
    --accent-dark: #d97e17;
    --danger: #e5484d;
    --success: #34c759;
    --info: #4da8ff;
    --radius: 10px;
}

* { box-sizing: border-box; }

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(15,17,21,0.94) 0%, rgba(15,17,21,0.98) 300px, var(--bg) 700px),
        url('/assets/img/bg.jpg');
    background-size: 100% auto, 900px auto;
    background-repeat: no-repeat, repeat;
    background-attachment: scroll, fixed;
    color: var(--text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Painel de amigos fica aberto por padrao em tela larga (ver
   .friends-panel) -- encolhe o espaco disponivel do body, pra o
   .content recentralizar sozinho (margin:auto) na area que sobrou, em
   vez de so cobrir por cima. .topbar e .footer "escapam" desse encolhe
   com margin-right negativo (classico full-bleed dentro de container
   com padding) - sem isso o menu do topo nao cabia mais numa linha so
   e quebrava feio. Fecha com a classe friends-closed (via JS). */
@media (min-width: 1241px) {
    body.has-friends:not(.friends-closed) { padding-right: 300px; }
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 12px 40px;
    background: rgba(23, 26, 33, 0.9);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text);
    text-decoration: none;
}
.brand span { color: var(--accent); }

.topnav {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 36px;
}
.topnav a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    transition: color .15s;
}
.topnav a:hover { color: var(--accent); }

.nav-dropdown { position: relative; display: flex; align-items: center; height: 100%; }
.nav-dropdown-trigger {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.95rem;
    font-family: inherit;
    line-height: normal;
    vertical-align: middle;
    padding: 0;
    transition: color .15s;
}
.nav-dropdown-trigger:hover { color: var(--accent); }
.nav-dropdown.nav-dropdown-open .nav-dropdown-trigger { color: var(--accent); }
.nav-dropdown-menu {
    display: none;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    min-width: 200px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 50;
}
.nav-dropdown.nav-dropdown-open .nav-dropdown-menu { display: flex; }

/* Mesmo estilo "pill" do botão Histórico de partidas (.history-trigger),
   só que em lista (um embaixo do outro) em vez de inline. */
.nav-dropdown-item {
    display: block;
    text-align: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-dropdown-item:hover { border-color: var(--accent); color: var(--accent); }

/* Ícone de conta (substitui o antigo "Meus Personagens ▾" por texto) --
   avatar genérico + nome da conta embaixo, clica pra abrir o mesmo
   dropdown de sempre (Meus personagens/Negociações/Vendas/Armazém/
   Trocar senha). Fica fora do .topnav (sibling dentro do .topbar) pra
   grudar na borda direita, perto da divisa com o painel de amigos. */
.nav-account { margin-left: 28px; }
.nav-account-trigger {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 30px; /* mesma altura do ícone -- o nome da conta fica posicionado embaixo (absolute) sem esticar o menu */
    font-family: inherit;
    color: var(--text-dim);
    transition: color .15s;
}
.nav-account-trigger:hover { color: var(--accent); }
.nav-account.nav-dropdown-open .nav-account-trigger { color: var(--accent); }
.nav-account-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
}
.nav-account-icon svg { width: 20px; height: 20px; }
.nav-account.nav-dropdown-open .nav-account-icon,
.nav-account-trigger:hover .nav-account-icon { border-color: var(--accent); }
.nav-account-name {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    font-size: 0.9rem;
    font-weight: 600;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

/* Botão Sair -- fica no cabeçalho do painel de Amigos, ao lado do
   título, acima do botão "Adicionar". Borda vermelha pra deixar claro
   que é uma ação "de saída" (destrutiva/final), igual padrão de logout
   em botão de perigo. */
.nav-logout {
    padding: 6px 16px;
    border: 1px solid var(--danger);
    border-radius: 999px;
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-logout:hover { background: rgba(229,72,77,0.12); color: var(--danger); }

.content {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}
.content-wide { max-width: 1900px; }

.footer {
    text-align: center;
    padding: 20px;
    color: var(--text-dim);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
}

/* --- Cards --- */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 24px;
}

.card h1, .card h2 { margin-top: 0; }

/* --- Login / hero --- */
.hero {
    text-align: center;
    padding: 60px 20px 40px;
}
.hero h1 {
    font-size: 2.4rem;
    margin-bottom: 8px;
}
.hero p {
    color: var(--text-dim);
    font-size: 1.1rem;
}

.login-wrap {
    max-width: 400px;
    margin: 0 auto;
}

/* --- Forms --- */
label {
    display: block;
    margin: 14px 0 6px;
    font-size: 0.9rem;
    color: var(--text-dim);
}
input[type=text], input[type=password], input[type=email] {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
}
input:focus { outline: none; border-color: var(--accent); }

button, .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none;
    border-radius: 8px;
    color: #1a1200;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .1s, opacity .15s;
}
button:hover, .btn:hover { opacity: 0.9; }
button:active, .btn:active { transform: scale(0.98); }
button:disabled, .btn:disabled {
    background: var(--bg-alt);
    color: var(--text-dim);
    border: 1px solid var(--border);
    cursor: not-allowed;
    opacity: 0.6;
}
button:disabled:hover, .btn:disabled:hover { opacity: 0.6; }

.btn-danger { background: linear-gradient(135deg, #ff6b6b, var(--danger)); color: #fff; }
.btn-secondary { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); }

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 0.95rem;
}
.alert-error { background: rgba(229,72,77,0.15); border: 1px solid var(--danger); color: #ffb3b5; }
.alert-success { background: rgba(52,199,89,0.15); border: 1px solid var(--success); color: #b7f3c4; }

/* --- Feature grid (home) --- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-top: 8px;
}
.feature {
    display: block;
    background: linear-gradient(160deg, rgba(255,157,47,0.05), transparent 60%), var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 26px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.feature:hover {
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.feature .icon {
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--accent);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a2c18, #1c1108);
    border: 2px solid var(--accent-dark);
    box-shadow: 0 0 0 3px rgba(255,157,47,0.08), inset 0 0 10px rgba(0,0,0,0.5);
    overflow: visible;
}
.feature .icon img {
    max-width: 84%;
    max-height: 84%;
    object-fit: contain;
    image-rendering: pixelated;
}
.feature h3 { margin: 0 0 10px; font-size: 1.2rem; color: #f2e2bd; }
.feature p { color: var(--text-dim); font-size: 0.95rem; margin: 0; line-height: 1.6; }

/* --- Character grid --- */
.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.char-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.char-card h3 { margin: 0 0 6px; }
.char-meta { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 12px; }
.char-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.char-head h3 { margin: 0; }
.char-head .job-name { color: var(--text-dim); font-size: 0.8rem; }
.job-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(160deg, rgba(255,157,47,0.08), transparent 70%), var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 4px;
    overflow: visible;
}
.job-badge-sprite {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.job-badge-generated {
    align-items: center;
    font-size: 1.6rem;
    line-height: 1;
}
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-online { background: var(--success); }
.status-offline { background: #555; }

.char-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.char-actions .btn { margin-top: 0; padding: 8px 14px; font-size: 0.85rem; }

/* --- Inventory table --- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table.inventory {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.9rem;
}
table.inventory th, table.inventory td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
table.inventory th { color: var(--text-dim); font-weight: 600; }
table.inventory tr:hover { background: rgba(255,255,255,0.02); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text-dim);
}

.back-link {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--text-dim);
    text-decoration: none;
}
.back-link:hover { color: var(--accent); }

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.page-toolbar .back-link { margin-bottom: 0; }
.history-trigger {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    margin-bottom: 18px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.history-trigger:hover { border-color: var(--accent); color: var(--accent); }

/* --- Modal de histórico de partidas --- */
.history-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.history-modal.is-open { display: flex; }
.history-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 12, 0.72);
    backdrop-filter: blur(3px);
    animation: mmFadeIn 0.2s ease;
}
.history-modal-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: min(640px, 82vh);
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    animation: historyPanelIn 0.22s cubic-bezier(.16,1,.3,1);
}
@keyframes historyPanelIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.history-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.history-modal-header h2 { margin: 0; font-size: 1.05rem; }
.history-modal-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.history-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.history-modal-body {
    padding: 18px 20px 22px;
    overflow-y: auto;
}
.history-modal-char + .history-modal-char {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.history-modal-char h3 { margin: 0 0 12px; font-size: 0.95rem; color: var(--text-dim); }

/* --- Modal de confirmação (substitui o confirm() nativo do navegador) --- */
.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.confirm-modal.is-open { display: flex; }
.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 12, 0.72);
    backdrop-filter: blur(3px);
    animation: mmFadeIn 0.2s ease;
}
.confirm-modal-panel {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    padding: 22px 22px 18px;
    animation: historyPanelIn 0.22s cubic-bezier(.16,1,.3,1);
}
.confirm-modal-text { margin: 0 0 20px; font-size: 0.95rem; color: var(--text); line-height: 1.5; }
.confirm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-modal-actions .btn, .confirm-modal-actions .btn-secondary { margin: 0; padding: 9px 18px; font-size: 0.88rem; }

/* --- Negociações --- */
/* .trade-card reaproveita o mesmo .item-cell/.item-grid do Armazém e da
   Wiki — mesmo tamanho de ícone (68x90) em toda a área de itens do site. */
.trade-card { gap: 6px; }
.trade-card > a { color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.trade-card > a:hover { color: var(--accent); text-decoration: underline; }
.trade-zeny-icon-big {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-dark); color: #1a1206; font-weight: 700; font-size: 1.3rem;
}
.trade-flow {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 4px; font-size: 0.72rem; line-height: 1.4; margin-top: 2px;
}
.trade-name-mine { color: var(--accent); font-weight: 700; }
.trade-name-other { color: #7fc4ff; font-weight: 700; }
.trade-verb-in { color: var(--success); }
.trade-verb-out { color: var(--danger); }

/* ================= Home estilo site de RO antigo ================= */

.ro-banner-outer {
    background: #0a0704;
    border-top: 4px solid var(--accent);
    border-bottom: 4px double var(--accent);
    margin: 0 calc(50% - 50vw);
}
.ro-banner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    background:
        linear-gradient(180deg, rgba(10,8,4,0.15) 0%, rgba(12,9,5,0.35) 65%, rgba(15,17,21,1) 100%),
        url('/assets/img/banner.jpg') center top / cover no-repeat;
    box-shadow: inset 0 0 60px 10px rgba(0,0,0,0.5);
    text-align: center;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 20px 30px;
}
.ro-banner-inner h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.2rem;
    letter-spacing: 6px;
    margin: 0;
    color: #fff6e5;
    text-shadow: 0 0 22px rgba(255,157,47,0.65), 0 2px 4px #000, 0 0 2px #000;
}
.ro-banner-inner h1 span { color: var(--accent); }
.ro-banner-inner .tagline {
    margin-top: 12px;
    color: #f2e2bd;
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px #000;
}
.ro-banner-inner .tagline::before,
.ro-banner-inner .tagline::after {
    content: "✦";
    color: var(--accent);
    margin: 0 12px;
}

.ro-nav {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, #1c1108 0%, var(--bg-alt) 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
    padding: 0 20px;
    margin: 0 calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 20px);
    padding-right: calc(50vw - 50% + 20px);
    position: relative;
    z-index: 5;
}
.ro-nav a {
    color: var(--text-dim);
    text-decoration: none;
    padding: 15px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
    border-left: 1px solid rgba(255,255,255,0.04);
    transition: color .15s, border-color .15s, background .15s;
}
.ro-nav a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(255,157,47,0.06);
}

.ro-ticker {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    font-size: 0.82rem;
    color: var(--text-dim);
}
.ro-ticker span {
    padding: 0 16px;
    border-left: 1px solid var(--border);
}
.ro-ticker span:first-child { border-left: none; }

.ro-divider {
    text-align: center;
    color: var(--accent);
    font-size: 1.3rem;
    margin: -8px 0 24px;
    position: relative;
}
.ro-divider::before, .ro-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border));
}
.ro-divider::before { left: 0; }
.ro-divider::after { right: 0; background: linear-gradient(90deg, var(--border), transparent); }

.howto-list {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.9;
}

.ro-layout {
    max-width: 1900px;
    margin: 32px auto 0;
    padding: 0 24px 40px;
    display: flex;
    gap: 24px;
    align-items: start;
}
.ro-main { flex: 1; min-width: 0; }
.ro-main-centered { max-width: 680px; margin: 0 auto; }
.ro-sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.ro-sidebar-left { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }

.ro-panel {
    background: linear-gradient(180deg, #1f232c 0%, var(--card) 100%);
    border: 1px solid var(--accent-dark);
    outline: 1px solid rgba(0,0,0,0.6);
    outline-offset: -5px;
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.ro-panel:last-child { margin-bottom: 0; }
.ro-panel-title {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f2e2bd;
}
.ro-panel-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.news-post {
    padding: 16px 18px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.015);
    border-left: 3px solid var(--accent-dark);
    border-radius: 0 6px 6px 0;
    transition: border-color .15s, background .15s;
}
.news-post:hover { border-left-color: var(--accent); background: rgba(255,157,47,0.04); }
.news-post:last-child { margin-bottom: 0; }
.news-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.news-post h3 { margin: 0 0 8px; font-size: 1.02rem; color: #f2e2bd; }
.news-post p { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }
.news-date { font-size: 0.75rem; color: var(--text-dim); }
.news-tag {
    display: inline-block;
    font-size: 0.7rem;
    color: #1a1200;
    background: var(--accent);
    padding: 3px 11px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.news-tag-evento { background: #ff6b6b; color: #2a0000; }
.news-tag-atualização { background: #34c759; color: #002a0a; }
.news-tag-sistema { background: var(--accent); color: #1a1200; }

.server-stats { list-style: none; margin: 0; padding: 0; }
.server-stats li {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.server-stats li:last-child { border-bottom: none; }
.server-stats li span { color: var(--text-dim); }
.stat-online { color: var(--success); }
.mob-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mob-notes li {
    background: var(--bg-alt);
    border-left: 3px solid var(--accent-dark);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.mob-notes li strong { color: var(--text); }
.mob-notes li a { color: var(--accent); }

/* --- Horários WoE (index) --- */
.woe-version { padding-top: 14px; border-top: 1px dashed var(--border); }
.woe-version:first-of-type { padding-top: 0; border-top: none; }
.woe-version-title {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.woe-status { margin: 0 0 10px; font-size: 0.85rem; color: var(--text-dim); }
.woe-status-active { color: var(--success); font-weight: 600; }
.woe-session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.woe-session-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    background: var(--bg-alt);
    border-left: 2px solid var(--accent-dark);
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
}
.woe-session-day { font-weight: 600; color: var(--text); font-size: 0.88rem; }
.woe-session-time { color: var(--accent); font-size: 0.85rem; }
.woe-session-castles { color: var(--text-dim); font-size: 0.78rem; width: 100%; }

@media (max-width: 1100px) {
    .ro-layout { flex-direction: column; }
    .ro-sidebar-left, .ro-sidebar, .ro-main { width: 100%; }
}
@media (max-width: 800px) {
    .ro-banner-inner h1 { font-size: 2.1rem; }
}
@media (max-width: 700px) {
    .topbar { flex-wrap: wrap; justify-content: center; gap: 10px 0; padding: 14px 16px; }
    .topnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; width: 100%; }
    .topnav a { margin-left: 0; }
}

/* --- Item detail page --- */
.item-hero {
    display: flex;
    gap: 28px;
    background: var(--card);
    border: 1px solid var(--accent-dark);
    outline: 1px solid rgba(0,0,0,0.6);
    outline-offset: -5px;
    border-radius: 6px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.item-hero-thumb {
    width: 160px;
    height: 210px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.08);
    overflow: hidden;
}
.item-hero-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.item-hero-thumb.card-illustration {
    width: 220px;
    height: 293px;
    background: none;
    box-shadow: 0 10px 26px rgba(0,0,0,0.5);
    overflow: visible;
}
.item-hero-info { flex: 1; min-width: 0; }
.item-hero-info h1 { margin: 0 0 12px; }
.item-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.item-desc {
    background: var(--bg-alt);
    border-left: 3px solid var(--accent-dark);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    font-size: 0.96rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 2;
}
.item-desc div { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
@media (max-width: 700px) {
    .item-hero { flex-direction: column; align-items: center; text-align: center; }
    .item-hero-badges { justify-content: center; }
}

/* --- Linha de boss (Instâncias) --- */
.boss-row { display: flex; gap: 16px; align-items: flex-start; }
.boss-info { flex: 1; min-width: 0; }
.boss-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 140px;
    flex-shrink: 0;
    margin: 2px 0 0;
    border-radius: 8px;
    background: radial-gradient(circle at 35% 25%, #2a2016, #17110b);
    border: 1px solid var(--accent-dark);
    font-size: 2rem;
    color: var(--accent);
    text-decoration: none;
}
@media (max-width: 600px) {
    .boss-row { flex-direction: column; align-items: center; text-align: center; }
    .boss-info { width: 100%; }
}

.drop-list { display: flex; flex-direction: column; gap: 14px; }
.drop-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}
.drop-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mob-portrait {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background: radial-gradient(circle at 35% 30%, #2a2016, #17110b);
    border: 1px solid var(--accent-dark);
    border-radius: 50%;
    padding: 3px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.mob-link { color: inherit; text-decoration: none; }
.mob-link:hover strong { color: var(--accent); text-decoration: underline; }
.drop-maps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.drop-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 130px;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
a.drop-map:hover { background: var(--bg-alt); }
.drop-map img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 2px;
}
.drop-map-name { font-size: 0.85rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.drop-map-code { font-size: 0.68rem; color: #6b7280; font-family: monospace; }
.drop-map-stat { font-size: 0.75rem; color: var(--text-dim); }
.drop-map-stat.respawn { color: var(--accent); }

/* --- NPC cards (Sala VIP / Sala de Eventos) --- */
.npc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 18px;
}
.npc-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.npc-card-portrait {
    width: 64px;
    height: 96px;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    background: radial-gradient(circle at 35% 25%, #2a2016, #17110b);
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    padding: 4px;
}
.npc-card-body h3 { margin: 0 0 4px; font-size: 1rem; color: #f2e2bd; }
.npc-card-role {
    display: inline-block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    background: rgba(255,157,47,0.1);
    border: 1px solid var(--accent-dark);
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 8px;
}
.npc-card-body p { margin: 0; color: var(--text-dim); font-size: 0.84rem; line-height: 1.5; }
.npc-card-body p + p { margin-top: 6px; }

.benefit-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.benefit-list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 0.9rem;
    color: var(--text-dim);
    border-bottom: 1px dashed var(--border);
    padding-bottom: 10px;
}
.benefit-list li:last-child { border-bottom: none; padding-bottom: 0; }
.benefit-list .benefit-ico { color: var(--success); flex-shrink: 0; }
.benefit-list .benefit-off .benefit-ico { color: #6b7280; }
.benefit-list strong { color: var(--text); }
.cmd-pill {
    display: inline-block;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 7px;
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--accent);
}

/* --- NPC accordion (clica pra abrir os detalhes) --- */
.npc-toggle {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.npc-toggle summary {
    display: flex;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    list-style: none;
}
.npc-toggle summary::-webkit-details-marker { display: none; }
.npc-toggle[open] summary { margin-bottom: 12px; }
.npc-toggle-portrait {
    width: 64px;
    height: 96px;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    background: radial-gradient(circle at 35% 25%, #2a2016, #17110b);
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    padding: 4px;
}
.npc-toggle-head h3 { margin: 0 0 4px; font-size: 1rem; color: #f2e2bd; }
.npc-toggle-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-dim);
    transition: transform .15s;
    align-self: center;
}
.npc-toggle[open] .npc-toggle-chevron { transform: rotate(180deg); color: var(--accent); }
.npc-toggle-desc { color: var(--text-dim); font-size: 0.84rem; line-height: 1.5; padding-left: 78px; }
.npc-toggle-desc p + p { margin-top: 6px; }

/* --- Quests --- */
.quest-npc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 14px;
}
.quest-npc {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px 4px 4px;
}
.quest-npc-portrait {
    width: 52px;
    height: 68px;
    object-fit: contain;
    image-rendering: pixelated;
    background: radial-gradient(circle at 35% 25%, #2a2016, #17110b);
    border: 1px solid var(--accent-dark);
    border-radius: 16px;
    padding: 2px;
}
.quest-npc-noicon { display: flex; align-items: center; justify-content: center; color: #b8a98a; }
.quest-npc strong { display: block; font-size: 0.82rem; color: #f2e2bd; }
.quest-npc-loc { display: block; font-size: 0.7rem; color: var(--text-dim); }
.quest-sub-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin: 16px 0 4px;
}
.quest-note-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.quest-note-list li {
    font-size: 0.8rem;
    color: var(--text-dim);
    background: var(--bg-alt);
    border-left: 2px solid var(--accent-dark);
    padding: 4px 10px;
    border-radius: 4px;
}
.quest-note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 0.82rem; color: var(--text-dim); font-style: italic; }

/* --- Wiki hero / search / TOC --- */
.wiki-hero {
    text-align: center;
    padding: 36px 20px 30px;
    background:
        linear-gradient(160deg, rgba(255,157,47,0.07), transparent 60%),
        var(--card);
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    margin-bottom: 20px;
}
.wiki-hero h1 { margin: 0 0 10px; }
.wiki-hero p { color: var(--text-dim); margin: 0 0 22px; }
.wiki-search {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}
.wiki-search input {
    flex: 1;
    padding: 13px 16px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
}
.wiki-search input:focus { outline: none; border-color: var(--accent); }
.wiki-search button {
    margin-top: 0;
    padding: 13px 24px;
    white-space: nowrap;
}

.wiki-toc {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 0.85rem;
}
.wiki-toc-label { color: var(--text-dim); margin-right: 4px; }
.wiki-toc a {
    color: #f2e2bd;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    transition: border-color .15s, color .15s;
}
.wiki-toc a:hover { border-color: var(--accent-dark); color: var(--accent); }

.group-total {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 2px 10px;
    border-radius: 999px;
    margin-left: 4px;
}

/* --- Category grid (wiki) --- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 12px;
    background: linear-gradient(160deg, rgba(255,157,47,0.05), transparent 60%), var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.cat-card:hover {
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.cat-thumb {
    width: 64px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 8px;
    background: linear-gradient(160deg, #fdfaf3, #eee4cf);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.08);
    overflow: hidden;
}
.cat-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-icon-fallback {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
}
.cat-name { font-size: 0.9rem; font-weight: 600; color: #f2e2bd; }
.cat-count { font-size: 0.75rem; color: var(--text-dim); }

/* --- Item wiki: layout com barra lateral de filtros --- */
.wiki-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}
.wiki-sidebar {
    position: sticky;
    top: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.sidebar-group { margin-top: 14px; }
.sidebar-group-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin: 0 0 6px 8px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.3;
}
.sidebar-link:hover { background: var(--bg-alt); }
.sidebar-link.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #1a1206; font-weight: 600; }
.sidebar-link.sidebar-all { font-weight: 600; margin-bottom: 4px; }
.sidebar-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
}
.sidebar-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dim);
}
.sidebar-link.active .sidebar-icon-fallback { background: rgba(0,0,0,0.15); color: inherit; }
.sidebar-count { margin-left: auto; font-size: 0.72rem; color: inherit; opacity: 0.75; }
@media (max-width: 900px) {
    .wiki-layout { grid-template-columns: 1fr; }
    .wiki-sidebar { position: static; max-height: none; }
}

/* --- Item wiki grid --- */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
    margin-top: 20px;
}
.item-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.item-cell:hover {
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.item-cell-thumb {
    width: 68px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.item-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.item-cell-noicon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8a98a;
    font-size: 1.4rem;
}
.item-cell span {
    font-size: 0.76rem;
    color: #f2e2bd;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.item-cell small {
    font-size: 0.68rem;
    color: var(--text-dim);
}
.id-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(153, 50, 204, 0.18);
    border: 1px solid #9932CC;
    color: #c977e8;
    font-weight: 700;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* --- Evento Champion x Champion: fila estilo matchmaking --- */
.champion-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.champion-card-info { flex: 1 1 240px; min-width: 200px; }
.champion-card-info h3 { margin: 0 0 4px; }
.champion-card-sub { color: var(--text-dim); font-size: 0.85rem; }
.champion-card-sub .status-dot { vertical-align: middle; }

.champion-card-action { flex: 0 0 auto; min-width: 260px; text-align: center; }

.champion-history-empty { color: var(--text-dim); font-size: 0.85rem; }

.champion-history-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.history-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.history-dot-win    { background: var(--success); }
.history-dot-loss   { background: var(--danger); }
.history-dot-cancel { background: #555; }

.champion-history-list { display: flex; flex-direction: column; }
.history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.history-row:last-child { border-bottom: none; padding-bottom: 0; }
.history-badge {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.7rem;
}
.history-badge-win    { background: rgba(52,199,89,0.16);  color: var(--success); }
.history-badge-loss   { background: rgba(229,72,77,0.16);  color: var(--danger); }
.history-badge-cancel { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.history-opponent { flex: 1 1 auto; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-score {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    min-width: 32px;
    text-align: right;
}
.history-time { flex: 0 0 auto; color: var(--text-dim); min-width: 56px; text-align: right; }

.queue-idle-btn { margin: 0; }
.queue-disabled-note {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-top: 6px;
}

.queue-panel {
    border-radius: 10px;
    padding: 14px 20px;
    min-width: 260px;
}

.queue-searching {
    background: rgba(255, 157, 47, 0.08);
    border: 1px solid var(--accent-dark);
    display: flex;
    align-items: center;
    gap: 14px;
}
.queue-pulse {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: championPulse 1.1s ease-in-out infinite;
}
@keyframes championPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,157,47,0.55); transform: scale(0.9); }
    70%  { box-shadow: 0 0 0 10px rgba(255,157,47,0); transform: scale(1); }
    100% { box-shadow: 0 0 0 0 rgba(255,157,47,0); transform: scale(0.9); }
}
.queue-searching-text { flex: 1; text-align: left; }
.queue-searching-text strong { display: block; color: #f2e2bd; font-size: 0.95rem; }
.queue-searching-text small { color: var(--text-dim); }
.queue-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--accent);
    letter-spacing: 1px;
    min-width: 64px;
    text-align: right;
}
.queue-cancel-btn {
    margin: 0 0 0 10px;
    padding: 8px 14px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.queue-found {
    background: linear-gradient(135deg, rgba(52,199,89,0.15), rgba(52,199,89,0.05));
    border: 1px solid var(--success);
    animation: championFoundFlash 0.6s ease;
}
@keyframes championFoundFlash {
    0%   { box-shadow: 0 0 0 0 rgba(52,199,89,0.5); }
    100% { box-shadow: 0 0 0 16px rgba(52,199,89,0); }
}
.queue-found strong { color: #b7f3c4; display: block; margin-bottom: 2px; }
.queue-found small { color: var(--text-dim); }

.queue-live {
    background: linear-gradient(135deg, rgba(52,199,89,0.12), rgba(52,199,89,0.04));
    border: 1px solid var(--success);
    display: flex;
    align-items: center;
    gap: 14px;
}
.queue-live-pulse {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    animation: championPulseLive 1.4s ease-in-out infinite;
}
@keyframes championPulseLive {
    0%   { box-shadow: 0 0 0 0 rgba(52,199,89,0.55); transform: scale(0.9); }
    70%  { box-shadow: 0 0 0 10px rgba(52,199,89,0); transform: scale(1); }
    100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); transform: scale(0.9); }
}
.queue-live-text { flex: 1; text-align: left; }
.queue-live-text strong { display: block; color: #b7f3c4; font-size: 0.95rem; }
.queue-live-text small { color: var(--text-dim); }

.queue-error-toast {
    background: rgba(229,72,77,0.15);
    border: 1px solid var(--danger);
    color: #ffb3b5;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-top: 10px;
}

/* --- Fila em tela cheia, estilo matchmaking de MOBA --- */
.mm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,157,47,0.10), transparent 55%),
        radial-gradient(circle at 50% 42%, rgba(255,157,47,0.05), rgba(8,9,12,0.97) 70%);
    background-size: 160% 160%, 100% 100%;
    animation: mmFadeIn 0.25s ease, mmBgDrift 10s ease-in-out infinite;
    backdrop-filter: blur(5px);
}
.mm-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background: repeating-linear-gradient(115deg, #fff 0px, #fff 1px, transparent 1px, transparent 68px);
    pointer-events: none;
}
@keyframes mmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmBgDrift {
    0%, 100% { background-position: 50% 42%, 0 0; }
    50%      { background-position: 52% 46%, 0 0; }
}

.mm-content {
    position: relative;
    text-align: center;
    color: var(--text);
    padding: 0 20px;
}

.mm-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
    opacity: 0.9;
}

.mm-rings {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
}
.mm-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 18px rgba(255,157,47,0.35);
    opacity: 0;
    animation: mmRingPulse 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
.mm-ring:nth-child(2) { animation-delay: 0.65s; }
.mm-ring:nth-child(3) { animation-delay: 1.3s; }
@keyframes mmRingPulse {
    0%   { transform: scale(0.3); opacity: 0.9; }
    80%  { opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}
.mm-spin-ring {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--accent) 25%, transparent 50%);
    animation: mmSpin 3s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
@keyframes mmSpin { to { transform: rotate(360deg); } }
.mm-icon {
    position: absolute;
    inset: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    border: 2px solid var(--accent-dark);
}
.mm-icon img { width: 60%; height: 60%; object-fit: contain; image-rendering: pixelated; }

.mm-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f2e2bd;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}
.mm-position-pill {
    display: inline-block;
    background: rgba(255,157,47,0.12);
    border: 1px solid var(--accent-dark);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.mm-timer-label {
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
}
.mm-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 3rem;
    color: var(--accent);
    letter-spacing: 2px;
    text-shadow: 0 0 24px rgba(255,157,47,0.45);
    margin-bottom: 28px;
}
.mm-cancel {
    margin: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 11px 30px;
    border-radius: 999px;
    font-size: 0.85rem;
}
.mm-cancel:hover { border-color: var(--danger); color: #ffb3b5; background: rgba(229,72,77,0.08); }

/* --- Ready-check (aceitar/recusar), estilo League --- */
.mm-ready-timer { color: var(--success); text-shadow: 0 0 24px rgba(52,199,89,0.45); }
.mm-ready-actions { display: flex; gap: 14px; justify-content: center; }
.mm-accept {
    margin: 0;
    padding: 11px 34px;
    border-radius: 999px;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #3fd67a, var(--success));
    color: #042b10;
    border: none;
}
.mm-decline {
    margin: 0;
    padding: 11px 30px;
    border-radius: 999px;
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
}
.mm-decline:hover { border-color: var(--danger); color: #ffb3b5; background: rgba(229,72,77,0.08); }
.mm-ready-waiting { color: var(--text-dim); font-size: 0.9rem; }
.mm-ready-cancelled { color: #ffb3b5; font-size: 0.95rem; }

/* --- Tela de resultado, ao fim da partida --- */
/* --- Confronto de Valhalla reaproveita a tela de matchmaking do Champion x
   Champion (mesma estrutura), só troca a cor base (laranja -> dourado
   do Desafiante) e usa o emblema do Desafiante como imagem fixa no
   meio (não o elo de verdade do líder -- é só a identidade visual da
   liga, tipo o emblema genérico que o LoL usa na tela de busca). */
.mm-overlay.mm-war6 {
    background:
        radial-gradient(circle at 50% 42%, rgba(255,210,74,0.22), transparent 55%),
        radial-gradient(circle at 50% 42%, rgba(255,210,74,0.12), rgba(8,9,12,0.78) 70%);
    background-size: 160% 160%, 100% 100%;
    backdrop-filter: blur(5px) saturate(1.1);
}
.mm-war6 .mm-eyebrow { color: #ffd24a; }
.mm-war6 .mm-ring { border-color: #ffd24a; box-shadow: 0 0 18px rgba(255,210,74,0.35); }
.mm-war6 .mm-spin-ring { background: conic-gradient(from 0deg, transparent, #ffd24a 25%, transparent 50%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.mm-war6 .mm-icon { border-color: #c9a23a; }
.mm-war6 .mm-icon img { image-rendering: auto; width: 76%; height: 76%; }
.mm-war6 .mm-position-pill { background: rgba(255,210,74,0.14); border-color: #c9a23a; color: #ffd24a; }
.mm-war6 .mm-timer { color: #ffd24a; text-shadow: 0 0 24px rgba(255,210,74,0.45); }

.mm-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(6,7,10,0.94);
    animation: mmFadeIn 0.3s ease;
}
.mm-result-overlay::before {
    content: '';
    position: absolute;
    inset: -20%;
    pointer-events: none;
}
.mm-result-overlay.outcome-win::before {
    background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(52,199,89,0.18) 8deg, transparent 20deg, transparent 180deg, rgba(52,199,89,0.18) 188deg, transparent 200deg, transparent 360deg);
    animation: mmRaysSpin 14s linear infinite;
}
.mm-result-overlay.outcome-loss::before {
    background: radial-gradient(circle at 50% 50%, rgba(229,72,77,0.16), transparent 60%);
}
@keyframes mmRaysSpin { to { transform: rotate(360deg); } }

.mm-result-card {
    position: relative;
    text-align: center;
    padding: 44px 56px;
    border-radius: 18px;
    min-width: 340px;
    animation: mmResultPop 0.45s cubic-bezier(.2,1.3,.4,1);
}
.outcome-loss .mm-result-card-inner { animation: mmShake 0.5s ease; }
@keyframes mmResultPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mmShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}
.mm-result-card.outcome-win { background: linear-gradient(160deg, rgba(52,199,89,0.16), rgba(22,26,32,0.97)); border: 1px solid var(--success); box-shadow: 0 0 60px rgba(52,199,89,0.18); }
.mm-result-card.outcome-loss { background: linear-gradient(160deg, rgba(229,72,77,0.14), rgba(22,26,32,0.97)); border: 1px solid var(--danger); box-shadow: 0 0 60px rgba(229,72,77,0.14); }
.mm-result-card.outcome-cancelled { background: var(--card); border: 1px solid var(--border); }

/* Mesma linguagem visual da tela de busca (moldura hexagonal + anel
   pulsando), só trocando a cor por resultado -- é o que deixa as duas
   telas parecendo parte do mesmo fluxo em vez de desenhos separados. */
.mm-result-badge-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
}
.mm-result-badge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
    animation: mmRingPulse 2.2s ease-out infinite;
}
.mm-result-badge {
    position: absolute;
    inset: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.mm-result-badge svg { width: 38px; height: 38px; }
.outcome-win .mm-result-badge-ring,
.outcome-win .mm-result-badge { color: #6fe39a; }
.outcome-loss .mm-result-badge-ring,
.outcome-loss .mm-result-badge { color: #ff9a9d; }
.outcome-cancelled .mm-result-badge-ring,
.outcome-cancelled .mm-result-badge { color: var(--text-dim); }
.mm-result-badge { background: var(--bg-alt); border: 2px solid currentColor; }
.outcome-win .mm-result-badge { background: radial-gradient(circle, rgba(52,199,89,0.22), rgba(52,199,89,0.04)); }
.outcome-loss .mm-result-badge { background: radial-gradient(circle, rgba(229,72,77,0.2), rgba(229,72,77,0.04)); }

.mm-result-title {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 14px;
}
.outcome-win .mm-result-title { color: #6fe39a; text-shadow: 0 0 26px rgba(52,199,89,0.4); }
.outcome-loss .mm-result-title { color: #ff9a9d; }
.outcome-cancelled .mm-result-title { color: var(--text-dim); }

.mm-result-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 4px;
}
.mm-result-score { font-size: 2.2rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mm-result-score-sep { color: var(--text-dim); font-size: 1.2rem; }
.mm-result-sub { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 26px; }
.mm-result-close { margin: 0; padding: 10px 32px; }

/* --- Liga / tier do jogador --- */
.league-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    margin-bottom: 18px;
}
/* Emblema do elo = duas imagens empilhadas (.badge-base embaixo, parado;
   .badge-glow-layer em cima, só com os pontos de luz recortados -- olhos/
   gema) -- o brilho pulsa sozinho via animação de opacidade, dando a
   sensação de "vivo" sem precisar animar a arte inteira. object-fit:
   contain pq o Bronze (ainda sem a arte nova do jogador) tem proporção
   diferente dos outros 9. */
.badge-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.badge-base, .badge-glow-layer { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Só a opacidade pulsa -- nada de blur/brightness no filter, que deixava
   o brilho com uma aparência esfumaçada/estranha em vez de luz acendendo. */
.badge-glow-layer {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    animation: badgeGlowPulse 2.4s ease-in-out infinite;
}
@keyframes badgeGlowPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.badge-lg { width: 96px; height: 83px; }
.badge-md { width: 74px; height: 64px; }
@media (prefers-reduced-motion: reduce) {
    .badge-glow-layer { animation: none; opacity: 0.75; }
}
.league-info { flex: 1; min-width: 0; }
.league-name { font-size: 1.3rem; font-weight: 800; margin: 0 0 2px; }
.league-sub { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 10px; }
.league-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--bg-alt);
    overflow: hidden;
}
.league-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}
.league-progress-note { color: var(--text-dim); font-size: 0.78rem; margin-top: 6px; }
.league-record { text-align: right; flex-shrink: 0; font-size: 0.85rem; color: var(--text-dim); }
.league-record strong { display: block; font-size: 1.1rem; color: var(--text); }

/* --- Leaderboard (top 10) --- */
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-radius: 10px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row:hover { background: rgba(255,255,255,0.03); }
/* --tier-color vem do PHP (champion_render_leaderboard) -- cada linha
   ganha um fiozinho da cor do elo do jogador na borda esquerda, em vez
   de todo mundo com o mesmo laranja genérico. */
.leaderboard-row { border-left: 3px solid color-mix(in srgb, var(--tier-color, var(--border)) 55%, transparent); }
.leaderboard-row-top { background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color, var(--accent)) 14%, transparent), transparent); }
.leaderboard-rank-badge {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
}
.leaderboard-rank-badge.rank-1 { background: linear-gradient(135deg, #ffe375, #b8860b); color: #241a00; }
.leaderboard-rank-badge.rank-2 { background: linear-gradient(135deg, #eef2f6, #9aa6b5); color: #1a1f26; }
.leaderboard-rank-badge.rank-3 { background: linear-gradient(135deg, #e3b580, #8a5a2a); color: #2a1700; }
.leaderboard-name { flex: 1; font-weight: 700; font-size: 1.02rem; }
.leaderboard-stats { color: var(--text-dim); font-size: 0.84rem; text-align: right; }

@media (max-width: 560px) {
    .badge-md { width: 48px; height: 41px; }
    .leaderboard-row { padding: 10px 12px; gap: 10px; }
}

.war6-queue-note {
    color: var(--text-dim);
    font-size: 0.8rem;
    text-align: center;
    margin: 0 0 4px;
}

/* --- Confronto de Valhalla: Salão (lista de salas) --- */
.war6-hall {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(201,162,58,0.38);
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(255,210,74,0.12), transparent 60%),
        linear-gradient(180deg, #1b1a17 0%, #141418 100%);
    box-shadow: inset 0 1px 0 rgba(255,210,74,0.12), 0 12px 30px rgba(0,0,0,0.35);
}
.war6-hall::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 12px;
    border: 1px solid rgba(201,162,58,0.12);
    pointer-events: none;
}
.war6-hall-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.war6-hall-head .war6-hall-stats { margin-top: 10px; }
.war6-hall-create {
    margin: 0;
    padding: 12px 22px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(255,157,47,0.25);
}
.war6-hall-create span { font-size: 1.2rem; line-height: 0; margin-right: 4px; }
.war6-hall-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c9a23a;
}
.war6-hall-title {
    margin: 2px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    color: #ffe08a;
    text-shadow: 0 0 18px rgba(255,210,74,0.25);
}
.war6-hall-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.war6-hall-stat {
    font-size: 0.76rem;
    color: var(--text-dim);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201,162,58,0.22);
    white-space: nowrap;
}
.war6-hall-stat b { color: #ffd24a; font-variant-numeric: tabular-nums; }
.war6-hall-stat.is-live { border-color: rgba(229,72,77,0.5); }
.war6-hall-stat.is-live::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #ff5a5f;
    box-shadow: 0 0 8px #ff5a5f;
    vertical-align: 1px;
}
/* Lista de salas no estilo da lista de salas do Combat Arms: fileiras
   compactas cinza-metálico, LED verde/vermelho no começo, cadeado só
   no ícone e status escrito em cor. */
.war6-list {
    border: 1px solid #0b0b0c;
    border-radius: 4px;
    overflow: hidden;
    background: #1d1e20;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 22px rgba(0,0,0,0.45);
}
.war6-list-head,
.war6-list-row {
    display: grid;
    grid-template-columns: 22px 40px 20px minmax(0, 1fr) minmax(0, 150px) 108px 66px 100px;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 10px;
}
.war6-list-head {
    height: 26px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #cfd2d6;
    background: linear-gradient(180deg, #5a5d62 0%, #3c3e42 48%, #2f3134 52%, #36383c 100%);
    border-bottom: 1px solid #0b0b0c;
    text-shadow: 0 1px 0 #000;
}
.war6-list-row {
    height: 28px;
    font-size: 0.78rem;
    color: #c9ccd1;
    background: linear-gradient(180deg, #3b3d41 0%, #2d2f32 100%);
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid #111214;
    text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}
.war6-list-row:nth-child(odd) { background: linear-gradient(180deg, #333539 0%, #27292c 100%); }
.war6-list-row:last-child { border-bottom: 0; }
.war6-list-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war6-list-row.can-join { cursor: pointer; }
.war6-list-row.can-join:focus-visible { outline: 1px solid #ffd24a; outline-offset: -1px; }
@media (hover: hover) {
    .war6-list-row.can-join:hover { background: linear-gradient(180deg, #57595e 0%, #44464a 100%); color: #fff; }
}
.war6-led {
    width: 11px; height: 11px;
    border-radius: 50%;
    justify-self: center;
    border: 1px solid rgba(0,0,0,0.6);
}
.war6-led.on  { background: radial-gradient(circle at 35% 30%, #c9ffb0, #3fd23a 45%, #1a7a17); box-shadow: 0 0 5px rgba(63,210,58,0.7); }
.war6-led.off { background: radial-gradient(circle at 35% 30%, #ffb3a8, #e23b2c 45%, #7a1710); box-shadow: 0 0 4px rgba(226,59,44,0.55); }
.war6-led.blank { background: #1b1c1e; box-shadow: inset 0 1px 2px #000; }
.war6-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.war6-lock { display: inline-flex; justify-content: center; color: #e8e8e8; }
.war6-lock svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 0 #000); }
.war6-col-name { color: #d9dbde; }
.war6-col-leader { display: flex; align-items: center; gap: 6px; }
.war6-tier-dot { flex-shrink: 0; width: 7px; height: 7px; margin-left: 2px; transform: rotate(45deg); }
.war6-col-mode, .war6-col-players { text-align: center; }
.war6-col-players { font-variant-numeric: tabular-nums; }
.war6-status { font-weight: 700; }
.war6-status.wait  { color: #3fd0ff; }
.war6-status.live  { color: #49e04a; }
.war6-status.queue { color: #ffd24a; }
.war6-status.full  { color: #9a9da2; }
.war6-list-row.is-blank { cursor: default; color: #55585d; }
.war6-list-row.is-blank .war6-col-name { grid-column: 4 / -1; color: #9a9da2; white-space: normal; }
.war6-list-row.is-blank .war6-col-name b { color: #ffd24a; }
.war6-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.war6-pager b { color: #ffd24a; }
.war6-pager-btn {
    width: 30px; height: 26px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    border: 1px solid #0b0b0c;
    background: linear-gradient(180deg, #5a5d62, #36383c);
    color: #e8e8e8;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.war6-pager-btn:disabled { opacity: 0.35; cursor: default; }
.war6-pin-input {
    display: block;
    width: 148px;
    margin-top: 10px;
    padding: 10px 12px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    font-variant-numeric: tabular-nums;
}

/* Janela da senha ao entrar numa sala protegida */
.war6-pin-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5,6,8,0.72);
    backdrop-filter: blur(3px);
}
.war6-pin-box {
    width: 100%;
    max-width: 340px;
    padding: 22px;
    text-align: center;
    border-radius: 14px;
    border: 1px solid rgba(201,162,58,0.5);
    background: linear-gradient(180deg, #1d1c18, #141418);
    box-shadow: 0 20px 50px rgba(0,0,0,0.55);
    animation: war6-pin-in 0.18s ease-out;
}
@keyframes war6-pin-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.war6-pin-box h3 { margin: 4px 0 6px; font-family: Georgia, "Times New Roman", serif; color: #ffe08a; overflow-wrap: anywhere; }
.war6-pin-box p { margin: 0 0 4px; color: var(--text-dim); font-size: 0.86rem; }
.war6-pin-box .war6-pin-input { margin: 12px auto 0; }
.war6-pin-error { min-height: 1.3em; margin-top: 8px; color: #f2b8b8; font-size: 0.82rem; }
.war6-pin-actions { display: flex; gap: 8px; margin-top: 8px; }
.war6-pin-actions .btn { flex: 1; margin: 0; }

/* Janela "Nova sala" */
.war6-create-box { max-width: 420px; text-align: left; }
.war6-create-box h3 { margin-bottom: 14px; }
.war6-create-box label { display: block; margin: 0 0 6px; font-size: 0.82rem; font-weight: 700; }
.war6-create-box #war6-room-name { width: 100%; margin: 0; }
.war6-create-hint { display: block; margin: 6px 0 14px; color: var(--text-dim); font-size: 0.74rem; }
.war6-access { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war6-access-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin: 0;
    padding: 11px 12px;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--text-dim);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.war6-access-opt svg { width: 16px; height: 16px; }
.war6-access-opt b { color: var(--text); font-size: 0.9rem; }
.war6-access-opt small { font-size: 0.72rem; }
.war6-access-opt.on { border-color: #ffd24a; background: rgba(255,210,74,0.1); color: #ffd24a; }
.war6-digits { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.war6-digits[hidden] { display: none; }
.war6-digit {
    width: 52px;
    height: 60px;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    border-radius: 10px;
    border: 1px solid rgba(201,162,58,0.45);
    background: #121215;
}
.war6-digits .war6-digit { width: 52px; flex: 0 0 52px; }
.war6-digit:focus { border-color: #ffd24a; box-shadow: 0 0 0 3px rgba(255,210,74,0.18); outline: none; }

@media (max-width: 560px) {
    .war6-hall { padding: 14px; }
    .war6-hall-create { width: 100%; }
    .war6-list-head { display: none; }
    .war6-list-row { grid-template-columns: 14px 26px 16px minmax(0, 1fr) 30px 76px; gap: 7px; height: 34px; padding: 0 8px; font-size: 0.76rem; }
    .war6-col-leader, .war6-col-mode { display: none; }
    .war6-list-row.is-blank .war6-col-name { grid-column: 4 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .war6-list-row, .war6-pin-box { transition: none; animation: none; }
}

/* --- Confronto de Valhalla: sala (mesmo visual do chat estilo Discord,
   colada em cima dele) --- */
.war6-srv {
    border-radius: 12px 12px 0 0;
    background: #2b2d31;
    color: #dbdee1;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
    overflow: hidden;
}
.war6-srv-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 52px;
    padding: 8px 16px;
    background: #1e1f22;
}
.war6-srv-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: #949ba4; }
.war6-srv-name b { color: #f2f3f5; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war6-srv-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #2b2d31;
    color: #b5bac1;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.war6-srv-tag.is-pw { color: #f0b232; letter-spacing: 0.12em; }
.war6-srv-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.war6-srv-pill { font-size: 0.78rem; color: #949ba4; white-space: nowrap; }
.war6-srv-pill.is-ok { color: #23a55a; font-weight: 600; }
.war6-srv-pill.is-queue { color: #f0b232; font-weight: 600; }
.war6-srv-pill.is-live { color: #23a55a; font-weight: 600; }
.war6-srv-pill.is-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #23a55a; box-shadow: 0 0 6px #23a55a; }
.war6-srv-link { margin: 0; padding: 0; border: 0; background: none; color: #949ba4; font: inherit; font-size: 0.82rem; cursor: pointer; }
.war6-srv-link:hover { color: #f23f43; text-decoration: underline; }
.war6-srv-cta {
    margin: 0;
    padding: 7px 16px;
    border: 0;
    border-radius: 4px;
    background: #5865f2;
    color: #fff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.war6-srv-cta:hover:not(:disabled) { background: #4752c4; }
.war6-srv-cta:disabled { background: #4e5058; color: #949ba4; cursor: not-allowed; }

.war6-srv-team {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px 12px;
    border-bottom: 1px solid #1e1f22;
}
.war6-mate { width: 84px; text-align: center; }
.war6-mate-av {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin: 0 auto;
    border-radius: 50%;
    background: #1e1f22;
    border: 2px solid color-mix(in srgb, var(--tier-color, #4e5058) 75%, transparent);
    color: #6d6f78;
    font-size: 1.3rem;
}
.war6-mate-av .badge-wrap { width: 34px; height: 30px; }
.war6-mate.is-leader .war6-mate-av { border-color: #f0b232; }
.war6-mate-crown {
    position: absolute;
    top: -8px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #f0b232;
    color: #1e1f22;
    box-shadow: 0 0 0 3px #2b2d31;
}
.war6-mate-av { transition: box-shadow 0.12s ease, border-color 0.12s ease; }
.war6-srv .war6-mate.is-speaking .war6-mate-av { border: 2px solid #23a55a; box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.35), 0 0 14px rgba(35, 165, 90, 0.55); }
.war6-mate.is-speaking .war6-mate-name { color: #3ba55d; }
.war6-mate.is-off .war6-mate-av { border-style: dashed; border-color: #4e5058; }
.war6-mate.is-empty .war6-mate-av { border: 2px dashed #3f4147; }
.war6-mate-name {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #f2f3f5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.war6-mate.is-off .war6-mate-name, .war6-mate.is-empty .war6-mate-name { color: #6d6f78; font-weight: 500; }
.war6-mate-sub { font-size: 0.68rem; color: var(--tier-color, #949ba4); }
.war6-mate.is-off .war6-mate-sub { color: #6d6f78; font-style: italic; }
.war6-srv-invite {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 16px;
    border-bottom: 1px solid #1e1f22;
    font-size: 0.78rem;
    color: #949ba4;
}
.war6-srv-chip {
    margin: 0;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: #383a40;
    color: #dbdee1;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.war6-srv-chip:hover { background: #5865f2; color: #fff; }
.war6-srv-note { padding: 8px 16px; border-bottom: 1px solid #1e1f22; font-size: 0.8rem; color: #949ba4; }

/* Chat colado embaixo da sala: vira um bloco só. */
#war6-app:has(.war6-srv) { margin-bottom: 0; }
#war6-app:has(.war6-srv) + #war6-comms .dc { border-radius: 0 0 12px 12px; }

@media (max-width: 560px) {
    .war6-srv-bar { padding: 8px 12px; }
    .war6-srv-actions { width: 100%; justify-content: space-between; margin-left: 0; }
    .war6-srv-team { gap: 2px; padding: 12px 6px 10px; }
    .war6-mate { width: auto; flex: 1 1 0; min-width: 0; }
    .war6-mate-av { width: 40px; height: 40px; font-size: 1.1rem; }
    .war6-mate-av .badge-wrap { width: 28px; height: 25px; }
    .war6-mate-name { font-size: 0.7rem; }
    .war6-mate-sub { font-size: 0.62rem; }
}

/* --- Confronto de Valhalla: comunicação da sala (estilo Discord) --- */
.dc {
    --dc-bg: #313338;
    --dc-side: #2b2d31;
    --dc-dark: #1e1f22;
    --dc-hover: rgba(78,80,88,0.4);
    --dc-text: #dbdee1;
    --dc-muted: #949ba4;
    --dc-brand: #5865f2;
    --dc-green: #23a55a;
    --dc-red: #f23f43;
    position: relative;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "side main" "user main";
    height: 540px;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--dc-bg);
    color: var(--dc-text);
    font-size: 0.94rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.5);
}
.dc button { font: inherit; }
.dc [hidden] { display: none !important; }
.dc svg { flex-shrink: 0; }
.dc-tabs { display: none; }

/* Barra lateral (canais) */
.dc-side { grid-area: side; background: var(--dc-side); overflow-y: auto; padding-bottom: 10px; }
.dc-side-head {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 700;
    color: #f2f3f5;
    border-bottom: 1px solid var(--dc-dark);
    box-shadow: 0 1px 0 rgba(4,4,5,0.2);
}
.dc-cat {
    margin: 18px 8px 4px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dc-muted);
}
.dc-chan {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 16px);
    margin: 1px 8px;
    padding: 6px 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dc-muted);
    font-weight: 500;
    text-align: left;
    cursor: default;
}
.dc-chan.is-active { background: rgba(78,80,88,0.6); color: #f2f3f5; }
.dc-vchan { cursor: pointer; }
.dc-vchan:hover { background: var(--dc-hover); color: var(--dc-text); }
.dc-vchan.is-joined { color: #f2f3f5; }
.dc-vchan em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: var(--dc-muted); }
.dc-vhint { margin: 8px 16px 0; font-size: 0.78rem; line-height: 1.4; color: var(--dc-muted); }
.dc-vhint b { color: var(--dc-text); }
.dc-vusers { padding-left: 22px; }
.dc-vuser {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 8px 1px 6px;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--dc-muted);
    cursor: pointer;
    outline: none;
}
.dc-vuser.is-me { cursor: default; }
.dc-vuser:not(.is-me):hover, .dc-vuser:focus-visible { background: var(--dc-hover); color: var(--dc-text); }
.dc-vuser .dc-av { width: 24px; height: 24px; font-size: 0.72rem; transition: box-shadow 0.1s ease; }
.dc-vuser.is-speaking .dc-av { box-shadow: 0 0 0 2px var(--dc-side), 0 0 0 4px var(--dc-green); }
.dc-vuser.is-speaking .dc-vname { color: #f2f3f5; }
.dc-vname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.dc-vstate { font-style: normal; font-size: 0.68rem; color: #f0b232; white-space: nowrap; }
.dc-vstate.bad { color: var(--dc-red); }
.dc-vicons { display: flex; gap: 2px; color: var(--dc-muted); }
.dc-vic svg { width: 15px; height: 15px; }
.dc-vic.red { color: var(--dc-red); }

/* Avatar */
.dc-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    user-select: none;
}

/* Barra do usuário (embaixo da lateral) */
.dc-user { grid-area: user; background: #232428; }
.dc-conn {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dc-conn-dot { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--dc-green); box-shadow: 0 0 8px var(--dc-green); }
.dc-conn b { font-size: 0.82rem; color: var(--dc-green); }
.dc-conn small { grid-column: 2; font-size: 0.72rem; color: var(--dc-muted); }
.dc-conn .dc-leave { grid-row: 1 / 3; grid-column: 3; }
.dc-ptt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: rgba(88,101,242,0.18);
    color: #c9cdfb;
    font-weight: 700;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.dc-ptt.on { background: var(--dc-green); color: #fff; box-shadow: 0 0 0 3px rgba(35,165,90,0.35); }
.dc-me { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px; }
.dc-me .dc-av { width: 32px; height: 32px; font-size: 0.85rem; }
.dc-me .dc-av.is-live { box-shadow: 0 0 0 2px #232428, 0 0 0 4px var(--dc-green); }
.dc-me-info { flex: 1; min-width: 0; margin-left: 4px; line-height: 1.15; }
.dc-me-info b { display: block; font-size: 0.86rem; color: #f2f3f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-me-info small { display: block; font-size: 0.72rem; color: var(--dc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #b5bac1;
    cursor: pointer;
}
.dc-ibtn:hover:not(:disabled) { background: var(--dc-hover); color: var(--dc-text); }
.dc-ibtn:disabled { opacity: 0.4; cursor: default; }
.dc-ibtn.is-off { color: var(--dc-red); }
.dc-leave { color: #fff; }
.dc-leave:hover:not(:disabled) { background: var(--dc-red); color: #fff; }

/* Área do chat */
.dc-main { grid-area: main; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    flex-shrink: 0;
    padding: 0 16px;
    color: var(--dc-muted);
    border-bottom: 1px solid var(--dc-dark);
    box-shadow: 0 1px 0 rgba(4,4,5,0.2);
}
.dc-head b { color: #f2f3f5; }
.dc-head-topic { margin-left: 8px; padding-left: 12px; border-left: 1px solid #3f4147; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-msgs { flex: 1; overflow-y: auto; padding: 16px 0 8px; overscroll-behavior: contain; }
.dc-msgs::-webkit-scrollbar { width: 8px; }
.dc-msgs::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 4px; }
.dc-welcome { padding: 8px 16px 16px; }
.dc-welcome-ic { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #41434a; color: #fff; }
.dc-welcome-ic svg { width: 36px; height: 36px; }
.dc-welcome h3 { margin: 10px 0 4px; font-size: 1.5rem; color: #f2f3f5; }
.dc-welcome p { margin: 0; color: var(--dc-muted); }
.dc-welcome.is-small .dc-welcome-ic { display: none; }
.dc-welcome.is-small h3 { font-size: 1.1rem; }
.dc-msg {
    position: relative;
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding: 2px 48px 2px 16px;
}
.dc-msg.is-cont { margin-top: 0; padding-left: 72px; }
.dc-msg:hover { background: rgba(2,2,2,0.06); }
.dc-msg-body { min-width: 0; flex: 1; }
.dc-msg-head { display: flex; align-items: baseline; gap: 8px; }
.dc-msg-head b { font-weight: 600; }
.dc-msg-head time, .dc-hover-time { font-size: 0.72rem; color: var(--dc-muted); }
.dc-hover-time { position: absolute; left: 22px; top: 5px; opacity: 0; }
.dc-msg.is-cont:hover .dc-hover-time { opacity: 1; }
.dc-text { line-height: 1.375; white-space: normal; overflow-wrap: anywhere; color: var(--dc-text); }
.dc-text a { color: #00a8fc; }
.dc-att { margin-top: 4px; }
.dc-img { display: inline-block; max-width: 100%; border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.dc-img img { display: block; max-width: 100%; height: auto; background: #2b2d31; }
.dc-video { display: block; max-width: min(100%, 420px); max-height: 320px; border-radius: 8px; background: #000; }
.dc-filecard {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #26272b;
    background: #2b2d31;
    color: #b5bac1;
}
.dc-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dc-file-info a, .dc-file-info b { color: #00a8fc; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-file-info b { color: var(--dc-text); }
.dc-file-info span { font-size: 0.75rem; color: var(--dc-muted); }
.dc-file-dl { color: #b5bac1; display: inline-flex; }
.dc-file-dl:hover { color: #fff; }
.dc-audio-player { display: block; width: min(100%, 420px); margin-top: 6px; }
.dc-sys { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 2px 16px 2px 30px; font-size: 0.86rem; color: var(--dc-muted); }
.dc-sys-ic { color: var(--dc-green); font-weight: 700; }
.dc-sys time { font-size: 0.72rem; }
.dc-newpill {
    position: absolute;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--dc-brand);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.dc-newpill svg { width: 16px; height: 16px; }

/* Envio */
.dc-uploads { padding: 0 16px; }
.dc-up { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 12px; border-radius: 8px; background: #2b2d31; font-size: 0.8rem; }
.dc-up-name { flex: 0 1 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-up-bar { flex: 1; height: 6px; border-radius: 3px; background: #1e1f22; overflow: hidden; }
.dc-up-bar i { display: block; height: 100%; width: 0; background: var(--dc-brand); transition: width 0.2s ease; }
.dc-up-pct { color: var(--dc-muted); white-space: nowrap; }
.dc-composer {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin: 0 16px 20px;
    padding: 4px;
    border-radius: 8px;
    background: #383a40;
}
.dc-attach, .dc-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #b5bac1;
    cursor: pointer;
}
.dc-attach:hover, .dc-send:hover { color: #fff; }
.dc-composer textarea {
    flex: 1;
    min-height: 40px;
    max-height: 160px;
    margin: 0;
    padding: 10px 4px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--dc-text);
    font: inherit;
    line-height: 1.375;
    box-shadow: none;
}
.dc-composer textarea::placeholder { color: #6d6f78; }
.dc-drop {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(88,101,242,0.85);
    z-index: 5;
}
.dc-drop div { padding: 40px; border: 2px dashed rgba(255,255,255,0.8); border-radius: 12px; color: #fff; font-size: 1.2rem; font-weight: 700; }
.dc-main.is-drag .dc-drop { display: flex; }

/* Avisos rápidos */
.dc-toast {
    position: absolute;
    left: 50%;
    top: 58px;
    z-index: 6;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--dc-red);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    transition: opacity 0.3s ease;
}
.dc-toast.info { background: #4e5058; }
.dc-toast.out { opacity: 0; }

/* Menu de volume / silenciar */
.dc-menu {
    position: fixed;
    z-index: 1100;
    width: 230px;
    padding: 12px;
    border-radius: 8px;
    background: #111214;
    color: #dbdee1;
    font-size: 0.86rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.dc-menu-title { margin-bottom: 8px; font-weight: 700; color: #f2f3f5; }
.dc-menu-row { display: flex; justify-content: space-between; color: #b5bac1; font-size: 0.78rem; text-transform: uppercase; font-weight: 700; }
.dc-menu input[type=range], .dc-modal input[type=range] { width: 100%; margin: 6px 0 10px; accent-color: #5865f2; padding: 0; }
.dc-menu-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dc-menu-check input { width: auto; margin: 0; accent-color: #f23f43; }
.dc-menu small { display: block; margin-top: 6px; color: #949ba4; font-size: 0.72rem; }

/* Configurações de voz */
.dc-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.7); }
.dc-modal-box { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; border-radius: 10px; background: #313338; color: #dbdee1; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.dc-modal-box h3 { margin: 0 0 16px; color: #f2f3f5; }
.dc-field { display: block; margin-bottom: 16px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; color: #b5bac1; }
.dc-field[hidden] { display: none; }
.dc-field select { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 4px; background: #1e1f22; color: #dbdee1; font: inherit; text-transform: none; font-weight: 400; }
.dc-field small { display: block; margin-top: 6px; font-weight: 400; text-transform: none; color: #949ba4; }
.dc-radio { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 6px; background: #2b2d31; cursor: pointer; text-transform: none; font-weight: 400; }
.dc-radio input { width: auto; margin: 3px 0 0; accent-color: #5865f2; }
.dc-radio b { display: block; color: #f2f3f5; font-size: 0.9rem; }
.dc-radio small { margin-top: 2px; }
.dc-keybtn { display: block; margin-top: 8px; padding: 8px 16px; border: 1px solid #1e1f22; border-radius: 4px; background: #1e1f22; color: #f2f3f5; font: inherit; font-weight: 700; cursor: pointer; }
.dc-keybtn.on { border-color: #f23f43; color: #f23f43; }
.dc-testrow { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.dc-testrow .dc-btn { padding: 8px 16px; }
.dc-test-echo { display: flex; align-items: center; gap: 6px; text-transform: none; font-weight: 500; color: #dbdee1; cursor: pointer; }
.dc-test-echo input { width: auto; margin: 0; accent-color: #5865f2; }
.dc-test { margin-top: 8px; height: 10px; border-radius: 5px; background: #1e1f22; overflow: hidden; }
.dc-test i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #23a55a, #f0b232, #f23f43); transition: width 0.08s linear; }
.dc-note { margin: 0 0 16px; font-size: 0.78rem; color: #949ba4; }
.dc-modal-actions { display: flex; justify-content: flex-end; }
.dc-btn { margin: 0; padding: 10px 22px; border: 0; border-radius: 4px; background: #5865f2; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.dc-btn:hover { background: #4752c4; }
.dc-btn-ghost { background: transparent; color: #dbdee1; }
.dc-btn-ghost:hover { background: transparent; text-decoration: underline; }
.dc-modal-actions { gap: 8px; }
.dc-help { margin: 0 0 14px; padding-left: 20px; font-size: 0.9rem; line-height: 1.5; color: #dbdee1; }
.dc-help li { margin-bottom: 6px; }
.dc-help b { color: #fff; }

/* Foto ampliada */
.dc-lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: rgba(0,0,0,0.88); cursor: zoom-out; }
.dc-lightbox img { max-width: 100%; max-height: calc(100vh - 80px); border-radius: 6px; }
.dc-lb-bar { display: flex; gap: 16px; align-items: center; color: #dbdee1; font-size: 0.86rem; }
.dc-lb-bar a { color: #00a8fc; }

.dc-audio { display: none; }

/* Celular: abas Chat / Voz, barra do usuário sempre embaixo */
@media (max-width: 760px) {
    .dc {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "tabs" "pane" "user";
        height: min(78vh, 640px);
        height: min(78dvh, 640px);
        border-radius: 10px;
    }
    .dc-tabs { grid-area: tabs; display: flex; background: #1e1f22; }
    .dc-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 12px 8px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #949ba4;
        font-weight: 600;
        cursor: pointer;
    }
    .dc-tab.on { color: #f2f3f5; border-bottom-color: #5865f2; }
    .dc-tab-badge, .dc-tab-count { min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 0.7rem; line-height: 18px; text-align: center; }
    .dc-tab-badge { background: #f23f43; color: #fff; }
    .dc-tab-count { background: #4e5058; color: #dbdee1; }
    .dc-side, .dc-main { grid-area: pane; }
    .dc[data-tab="chat"] .dc-side { display: none; }
    .dc[data-tab="voice"] .dc-main { display: none; }
    .dc-side-head { display: none; }
    .dc-head-topic { display: none; }
    .dc-msg { padding-right: 12px; gap: 12px; }
    .dc-msg.is-cont { padding-left: 68px; }
    .dc-composer { margin: 0 10px 10px; }
    .dc-composer textarea { font-size: 16px; }
    .dc-vuser { padding: 8px; }
    .dc-vuser .dc-av { width: 32px; height: 32px; }
    .dc-ibtn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-up-bar i, .dc-toast, .dc-vuser .dc-av { transition: none; }
}

/* --- Token do ChampionOverlay.exe --- */
.overlay-token-row { display: flex; gap: 10px; margin-top: 10px; }
.overlay-token-row input {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
    padding: 10px 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}

/* --- Barra de amigos (presença online/em partida), site inteiro --
   encostada na borda direita, estilo painel social de cliente de jogo
   (LoL) -- aba vertical fechada, desliza pra dentro quando aberta. --- */
.friends-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 901;
    background: var(--card);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--text);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    padding: 16px 9px;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    writing-mode: vertical-rl;
    box-shadow: -8px 0 24px rgba(0,0,0,0.3);
    transition: border-color 0.15s ease;
}
.friends-tab:hover { border-color: var(--accent); }
.friends-tab #friends-tab-badges { display: flex; flex-direction: column; gap: 6px; writing-mode: horizontal-tb; }

/* Em tela larga o painel ja fica aberto sozinho (sem precisar clicar),
   igual o cliente do LoL -- a aba só existe pra poder FECHAR/reabrir.
   Em tela estreita (notebook pequeno/celular) começa fechado, senão
   cobre o conteúdo da página -- aí sim precisa da aba pra abrir. */
.friends-tab { display: none; }
@media (max-width: 1240px) {
    .friends-tab { display: flex; }
}
.friends-tab.js-open  { display: none !important; }
.friends-tab.js-closed { display: flex !important; }

.friends-tab-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.friends-tab-badge-online  { background: rgba(52,199,89,0.18); color: var(--success); }
.friends-tab-badge-request { background: rgba(255,157,47,0.18); color: var(--accent); }

.friends-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 86vw;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 40px rgba(0,0,0,0.35);
    z-index: 900;
    display: flex;
    flex-direction: column;
    transform: translateX(0); /* tela larga: ja aberto, sem precisar clicar */
    transition: transform 0.25s cubic-bezier(.16,1,.3,1);
}
@media (max-width: 1240px) {
    .friends-panel { transform: translateX(100%); } /* tela estreita: começa fechado */
}
.friends-panel.js-open  { transform: translateX(0) !important; }
.friends-panel.js-closed { transform: translateX(100%) !important; }

.friends-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px; /* mesma altura do .topbar, pra a linha divisória bater com a do menu */
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.friends-panel-header h2 { margin: 0; font-size: 0.95rem; }
.friends-panel-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.friends-panel-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.friends-add-row { display: flex; align-items: stretch; gap: 8px; padding: 12px 16px 0; flex: 0 0 auto; }
.friends-add-row input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.85rem;
}
.friends-add-row input:focus { outline: none; border-color: var(--accent); }
/* Botão "Adicionar" -- ícone quadrado (pessoa + "+"), igual o botão de
   adicionar amigo do cliente do LoL, em vez de um botão de texto. Mesma
   altura do campo de texto ao lado. */
.friends-add-btn {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 38px;
    margin: 0; /* zera o "margin-top:20px" do reset genérico de <button> do site */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.friends-add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,157,47,0.08); }
/* Sem isso o SVG (elemento substituído) encolhe quase pro zero de
   largura dentro do flex do botão -- bug clássico de flex-shrink em
   <svg>/<img> sem flex-shrink:0 explícito. */
.friends-add-btn svg { flex-shrink: 0; width: 18px; height: 18px; }
.friends-add-result {
    padding: 8px 16px 0;
    font-size: 0.8rem;
    color: var(--text-dim);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.friends-panel-body { padding: 10px 16px 16px; overflow-y: auto; flex: 1 1 auto; }
.friends-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    margin: 16px 0 8px;
    cursor: pointer;
    user-select: none;
}
.friends-section-label:first-child { margin-top: 0; }
.friends-chevron { flex: 0 0 auto; color: var(--text-dim); transition: transform 0.15s ease; }
.friends-section-label.is-collapsed .friends-chevron { transform: rotate(-90deg); }
#friends-list.is-collapsed { display: none; }
.friends-count-number {
    margin-left: auto;
    color: var(--accent);
    font-weight: 800;
    text-transform: none;
    letter-spacing: normal;
}

.friend-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}
.friend-avatar .job-badge { width: 100% !important; height: 100% !important; border-radius: 8px; overflow: hidden; }
.badge-friend { width: 72px; height: 62px; }
/* Champion: sem caixa de fundo atrás do emblema -- igual o ranking, a
   cor do elo (--tier-color) aparece como um fio na borda da linha
   inteira (.friend-row.has-tier), não como fundo atrás da imagem. */
.friend-avatar.has-tier { background: none; }
.friend-row.has-tier {
    border-left: 3px solid color-mix(in srgb, var(--tier-color, var(--border)) 55%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color, var(--accent)) 14%, transparent), transparent);
    border-radius: 6px;
    padding-left: 10px;
}
.friend-avatar-blank { background: var(--bg-alt); border-radius: 8px; }
.friend-avatar-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--card);
}
.friend-avatar-dot-online  { background: var(--success); }
.friend-avatar-dot-match   { background: var(--info); }
.friend-avatar-dot-offline { background: #555; }

.friend-request-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.friend-request-row .friend-name { flex: 1 1 auto; }
.friend-request-actions { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.friend-btn {
    border: none;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.friend-btn-accept { background: var(--success); color: #06220f; }
.friend-btn-decline { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.friend-btn:hover { filter: brightness(1.1); }

.friend-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.friend-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.friend-name { font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-status { font-size: 0.72rem; }
.friend-status-online  { color: var(--success); }
.friend-status-match   { color: var(--info); }
.friend-status-offline { color: var(--text-dim); }
/* Nome do elo, igual o ranking -- fica coladinho no "x" de remover. */
.friend-tier-name { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.friend-remove-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 5px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.friend-row:hover .friend-remove-btn { opacity: 1; }
.friend-remove-btn:hover { color: var(--danger); background: rgba(229,72,77,0.12); }

.friends-empty { color: var(--text-dim); font-size: 0.85rem; }

@media (max-width: 480px) {
    .friends-panel { width: 100vw; max-width: 100vw; }
}

/* ---- Slider de eventos da home (hub de torneios) ----
   Os slides ficam lado a lado numa faixa larga (.event-slide-track) e o
   ".events-slider" corta (overflow:hidden) só a largura de 1 -- trocar
   de slide é só mover a faixa com transform, o que já dá o efeito de
   deslizar pro lado de graça (anima a mudança inteira, não só opacidade). */
.events-slider { margin-bottom: 24px; overflow: hidden; border-radius: 6px; }
.event-slide-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
}
.event-slide {
    position: relative;
    display: flex;
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 32px;
    overflow: hidden;
    background: linear-gradient(135deg, #1b140d 0%, #201823 55%, var(--card) 100%);
    border: 1px solid var(--accent-dark);
    outline: 1px solid rgba(0,0,0,0.6);
    outline-offset: -5px;
    border-radius: 10px;
    padding: 32px 36px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* Ícone gigante e bem apagado no fundo, só pra dar profundidade/textura
   (padrão comum em card premium) -- fica atrás de tudo. */
.event-slide-ghost {
    position: absolute;
    right: -24px;
    bottom: -36px;
    width: 230px;
    height: 230px;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

/* Friso fino de brilho na borda de cima do card -- detalhe "glass" de
   app premium. */
.event-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    z-index: 1;
}

/* Faixa de brilho diagonal deslizando devagar pelo card -- efeito
   "shine" de app premium, sutil e contínuo (não liga/desliga com o
   slide, roda sempre). */
.event-slide::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 45%;
    height: 220%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.05) 45%, rgba(255,157,47,0.14) 50%, rgba(255,255,255,0.05) 55%, transparent 100%);
    transform: rotate(10deg);
    animation: eventShimmer 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes eventShimmer {
    0%, 15% { left: -40%; }
    85%, 100% { left: 130%; }
}
.event-slide-art, .event-slide-info { position: relative; z-index: 1; }

.event-slide-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--border);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.event-dot:hover { background: var(--accent-dark); }
.event-dot.is-active { background: var(--accent); transform: scale(1.3); box-shadow: 0 0 8px rgba(255,157,47,0.6); }

.event-slide-art {
    position: relative;
    flex-shrink: 0;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255,157,47,0.2) 0%, transparent 72%);
    border: 2px solid rgba(255,157,47,0.3);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(255,157,47,0.22);
}
/* Anel externo fino e bem apagado, pra dar o "double ring" de badge
   premium em vez de um círculo só. */
.event-slide-art::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(255,157,47,0.16);
}
.event-slide-art img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    image-rendering: pixelated;
}
.event-slide-info { flex: 1; min-width: 0; }
.event-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 12px;
}
/* Selo "ao vivo" com pulso de notificação (anel que expande e some) --
   chama atenção sem animar o card inteiro. */
.event-status-live {
    color: #39d87a;
    background: rgba(57,216,122,0.14);
    animation: eventStatusPulse 2s ease-in-out infinite;
}
@keyframes eventStatusPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(57,216,122,0.35); }
    50% { box-shadow: 0 0 0 7px rgba(57,216,122,0); }
}
.event-slide-info h2 { margin: 0 0 9px; font-size: 1.65rem; font-weight: 800; letter-spacing: -0.01em; color: #f2e2bd; }
/* Título com leve gradiente (só onde o navegador suporta recortar o
   texto pelo background -- senão fica a cor sólida de cima mesmo). */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .event-slide-info h2 {
        background: linear-gradient(90deg, #ffe9c2, var(--accent) 85%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.event-slide-info p { margin: 0 0 20px; color: var(--text-dim); max-width: 56ch; line-height: 1.5; }
.event-slide-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.event-slide-actions .btn, .event-slide-actions .btn-secondary {
    margin-top: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.event-slide-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,157,47,0.3); }
.event-slide-actions .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.4); }

@media (prefers-reduced-motion: reduce) {
    .event-slide::after { animation: none; display: none; }
    .event-status-live { animation: none; }
}

@media (max-width: 640px) {
    .event-slide { flex-direction: column; text-align: center; padding: 24px 20px; }
    .event-slide-info p { max-width: none; }
    .event-slide-actions { justify-content: center; }
}

/* ===================== Reels (estilo TikTok) ===================== */
body.reels-body { overflow: hidden; }
body.reels-body .footer { display: none; }
.reels-wrap {
    position: fixed;
    top: var(--reels-top, 76px);
    left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 30%, #1a1d25 0%, #0b0c10 70%);
    z-index: 5;
}
@media (min-width: 1241px) {
    body.has-friends:not(.friends-closed) .reels-wrap { right: 300px; }
}
.reels-scroller {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.reels-scroller::-webkit-scrollbar { display: none; }
.reel {
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding: 16px 0;
}
.reel-stage {
    position: relative;
    height: 100%;
    aspect-ratio: 9 / 16;
    max-width: calc(100vw - 110px);
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.reel-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.reel-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85);
    opacity: 0; transform: scale(1.3);
    transition: opacity .18s, transform .18s;
    pointer-events: none;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6));
}
.reel.paused .reel-play { opacity: 1; transform: scale(1); }
.reel-burst {
    position: absolute; left: 50%; top: 45%;
    color: #ff3b5c;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.reel-burst svg { width: 110px; height: 110px; filter: drop-shadow(0 6px 20px rgba(255,59,92,0.5)); }
.reel-burst.go { animation: reelBurst .75s ease-out; }
@keyframes reelBurst {
    0%   { transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); opacity: 0; }
    25%  { transform: translate(-50%, -50%) scale(1.15) rotate(-12deg); opacity: 1; }
    45%  { transform: translate(-50%, -50%) scale(0.95) rotate(-12deg); opacity: 1; }
    100% { transform: translate(-50%, -80%) scale(1.3) rotate(-12deg); opacity: 0; }
}
.reel-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 60px 16px 20px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
    color: #fff;
    cursor: default;
}
.reel-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f0e6d2;
    background: rgba(200,170,110,0.18);
    border: 1px solid rgba(200,170,110,0.45);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
}
.reel-chip-match { color: #1a1205; background: linear-gradient(135deg, #f5c94a, #c8aa6e); border-color: #f5c94a; }
.reel-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.reel-meta { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 4px; }
.reel-meta b { color: var(--accent); font-weight: 700; }
.reel-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.18); }
.reel-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.reel-side { display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }
.reel-act {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: 0; padding: 0; margin: 0; box-shadow: none;
    color: #fff; font-size: 0.78rem; font-weight: 700;
    cursor: pointer;
}
.reel-act svg {
    box-sizing: content-box;
    padding: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: transform .15s, color .15s, background .15s;
}
.reel-act:hover svg { background: rgba(255,255,255,0.18); }
.reel-act:active svg { transform: scale(0.88); }
button.reel-act:hover { opacity: 1; }
.reel-views { cursor: default; }
.reel-like.on svg { color: #ff3b5c; animation: reelPop .35s ease-out; }
@keyframes reelPop { 0% { transform: scale(0.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.reels-nav {
    position: absolute; right: 28px; top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 12px;
}
.reels-nav-btn {
    width: 46px; height: 46px; padding: 0; margin: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: none;
}
.reels-nav-btn:hover { background: rgba(255,255,255,0.2); opacity: 1; }
.reels-admin {
    position: absolute; left: 20px; top: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,157,47,0.15);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.85rem; font-weight: 700;
    text-decoration: none;
}
.reels-toast {
    position: absolute; left: 50%; bottom: 40px;
    transform: translate(-50%, 20px);
    background: rgba(20,22,28,0.95);
    border: 1px solid var(--border);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 3;
}
.reels-toast.show { opacity: 1; transform: translate(-50%, 0); }
.reels-empty {
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px; color: var(--text-dim);
}
.reels-empty h2 { color: var(--text); margin: 14px 0 6px; font-size: 1.3rem; }
.reels-empty p { max-width: 360px; margin: 0; line-height: 1.5; }
.reels-empty-icon { color: var(--accent); }

/* celular: video ocupa a tela toda, botoes por cima (igual o app) */
@media (max-width: 640px) {
    .reel { padding: 0; position: relative; }
    .reel-stage { height: 100%; width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
    .reel-side { position: absolute; right: 10px; bottom: 90px; padding: 0; z-index: 2; }
    .reel-act svg { background: rgba(0,0,0,0.25); }
    .reel-caption { padding-right: 76px; }
    .reels-nav { display: none; }
    .reels-admin { left: 12px; top: 12px; z-index: 3; }
    /* tela cheia pro video: no Reels o topo fica so com a marca e a conta */
    body.reels-body .topbar { min-height: 0; padding: 10px 16px; }
    body.reels-body .topnav { display: none; }
}

/* ===================== Admin: clipes ===================== */
.clips-sub { color: var(--text-dim); margin-top: -6px; }
.clips-tabs { display: flex; gap: 8px; margin: 18px 0; }
.clips-tabs a {
    padding: 8px 16px; border-radius: 999px;
    background: var(--bg-alt); border: 1px solid var(--border);
    color: var(--text-dim); text-decoration: none; font-weight: 600;
}
.clips-tabs a.active { color: var(--accent); border-color: var(--accent); }
.clips-tabs a span { margin-left: 4px; font-size: 0.8rem; opacity: 0.8; }
.clips-empty { color: var(--text-dim); }
.clips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.clip-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.clip-media { aspect-ratio: 9 / 16; background: #000; }
.clip-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-state { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.clip-state-bad { color: var(--danger); }
.clip-info { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.clip-line strong { color: var(--accent); }
.clip-meta { font-size: 0.82rem; color: var(--text-dim); }
.clip-form { margin-top: 8px; }
.clip-form input[type=text] { width: 100%; margin-bottom: 8px; }
.clip-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.clip-actions button, .clip-actions .btn { margin: 0; padding: 7px 12px; font-size: 0.85rem; }
.clip-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1a1205; background: linear-gradient(135deg, #f5c94a, #c8aa6e); border-radius: 999px; padding: 2px 8px; margin-right: 4px; }