/* ==========================================================================
   Tema oldebra-dark: camada visual sobre o old-school.

   A estrutura (colunas, AJAX, menus, widgets) e a mesma do old-school; este
   arquivo so troca a aparencia. Os blocos <style> do index.php vem depois
   deste <link> na ordem do documento, entao as regras usam `html body` na
   frente para vencer por especificidade.

   Regras genericas do conteudo usam :where() para ficar com especificidade
   baixa: paginas com design proprio (houses, wiki, forge...) continuam
   mandando nos seus elementos.
   ========================================================================== */

:root {
    --od-bg:          #0b0c0e;
    --od-panel:       #18191b;
    --od-panel-2:     #1e1f22;
    --od-panel-3:     #25272a;
    --od-head-top:    #2a2d31;
    --od-head-bot:    #1b1d20;
    /* Faixas de titulo em ardosia azulada (medidas do miracle74):
       lateral = degrade horizontal escuro nas pontas e claro no centro;
       conteudo = degrade vertical com linha preta na base. */
    --od-bar-side:    linear-gradient(90deg, #151719 0%, #1b2127 25%, #1f2830 50%, #1b2127 75%, #151719 100%);
    --od-bar-top:     linear-gradient(180deg, #121313 0%, #171a1c 30%, #1c2328 70%, #1d252c 100%);
    --od-bar-border:  #000;
    --od-title-shadow: 1px 1px 0 #3b3128, -1px -1px 0 rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.9);
    --od-line:        #2e3135;
    --od-line-soft:   #232528;
    --od-text:        #d2d2d2;
    --od-text-dim:    #8d9298;
    --od-title:       #d6ccb3;
    --od-link:        #9cc4e8;
    --od-link-hover:  #cfe3f5;
    --od-green:       #6fdc8c;
    --od-blue:        #7fb2e5;
    --od-gold:        #c9a55a;
    --od-banner-h:    320px;
    --od-topbar-h:    46px;
}

/* ---------- base ---------- */
html body {
    background: var(--od-bg);
    color: var(--od-text);
    left: 0;
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
}
/* Wallpaper fixo de tela inteira (camada propria, ver comentario em
   style46.css) com degrade de cima para baixo: a arte aparece no topo e
   escurece ate o fundo solido do tema. */
/* Arte de fundo (oldebra_bg_ratos, 1920x1080, WebP q75 ~400KB).
   Centralizada: esta arte nao tem o dragao que precisava ser afastado. */
html body::before {
    display: block;
    background: #0b0c0e url(../../oldebra_bg_ratos.jpg) no-repeat center top / cover;
    background: #0b0c0e image-set(url(../../oldebra_bg_ratos.webp) type("image/webp"), url(../../oldebra_bg_ratos.jpg) type("image/jpeg")) no-repeat center top / cover;
}
/* Duas camadas: vinheta lateral (acalma as casas iluminadas atras das
   colunas) + degrade de cima para baixo ate o fundo solido. */
html body::after {
    display: block;
    background:
        linear-gradient(90deg,
            rgba(11,12,14,0.90)  0%,
            rgba(11,12,14,0.55) 18%,
            rgba(11,12,14,0.00) 36%,
            rgba(11,12,14,0.00) 64%,
            rgba(11,12,14,0.55) 82%,
            rgba(11,12,14,0.90) 100%),
        linear-gradient(180deg,
            rgba(11,12,14,0.10)  0%,
            rgba(11,12,14,0.35) 30%,
            rgba(11,12,14,0.75) 60%,
            rgba(11,12,14,0.95) 85%,
            #0b0c0e             100%);
}

/* ---------- barra superior (a server-navbar, reposicionada) ---------- */
html body .server-navbar-mid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    border: none !important;
}
html body .server-navbar-mid::after { display: none; }
html body .server-navbar-mid .server-navbar-inner {
    height: var(--od-topbar-h);
    padding: 0 16px;
    background: rgba(8, 9, 11, 0.92);
    border: none;
    border-bottom: 1px solid var(--od-line);
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
}
html body .snav-edge-separator,
html body .snav-edge-sword { display: none; }
html body .snav-separator {
    background: var(--od-line);
    height: 16px;
    margin: 0 6px;
}
html body .snav-item {
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--od-text);
    text-shadow: none;
    padding: 4px 6px;
}
html body .snav-item:hover {
    color: #fff;
    background: transparent;
    text-shadow: none;
}
html body .snav-online,
html body .snav-online:hover { color: var(--od-green) !important; text-shadow: none !important; }
html body .snav-online:hover { background: transparent !important; }
html body .snav-online.active { background: transparent !important; box-shadow: none; text-decoration: underline; }
html body .snav-download,
html body .snav-download:hover {
    color: var(--od-green) !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 6px !important;
    text-shadow: none !important;
    filter: none;
}
html body .snav-serversave { color: var(--od-text-dim); }
html body #server-save-timer { color: var(--od-text); font-variant-numeric: tabular-nums; }
/* Ultimos 30 min antes do save: ambar estatico (sem pulsar). */
html body .snav-serversave.is-soon,
html body .snav-serversave.is-soon #server-save-timer { color: #e0a84a; }

/* Status do servidor: bolinha de cor fixa (sem glow/animacao).
   Online = verde + "N Online"; offline = cinza + "Server Offline". */
html body .snav-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--od-green);
    flex-shrink: 0;
}
html body .snav-online-on { display: inline-flex; align-items: center; gap: 5px; }
html body .snav-online-off { display: none; }
html body .snav-online.is-offline,
html body .snav-online.is-offline:hover { color: var(--od-text-dim) !important; }
html body .snav-online.is-offline .snav-status-dot { background: #b5524a; }
html body .snav-online.is-offline .snav-online-on { display: none; }
html body .snav-online.is-offline .snav-online-off { display: inline; }

/* ---------- banner (a antiga .site-logo) ---------- */
html body .site-logo {
    position: relative;
    height: var(--od-banner-h);
    margin: 0 0 18px;
    padding-top: var(--od-topbar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sem imagem propria: a arte vem do wallpaper fixo do body. */
    background: none;
}
html body .site-logo a { position: relative; z-index: 1; }
html body .site-logo img {
    width: 360px;
    /* Brilho: metal mais luminoso e contrastado.
       Profundidade, de dentro para fora:
       1) sombra curta e firme logo abaixo (relevo, "peso" do logo);
       2) halo escuro (separa o cobre do telhado vermelho atras);
       3) brilho quente e suave (luz de tocha refletida no metal);
       4) sombra longa e difusa (descola o logo do fundo). */
    filter:
        brightness(1.12) contrast(1.1) saturate(1.06)
        drop-shadow(0 2px 1px rgba(0,0,0,0.9))
        drop-shadow(0 0 12px rgba(0,0,0,0.9))
        drop-shadow(0 0 18px rgba(255,170,90,0.28))
        drop-shadow(0 14px 22px rgba(0,0,0,0.8));
}

/* ---------- grid ---------- */
html body .container_main {
    width: 100%;
    max-width: 1260px;
    min-width: 0;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
html body .container_left,
html body .container_right {
    width: 220px;
    float: none;
}
html body .container_mid {
    float: none;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 14px;
}

/* ---------- cabecalhos de caixa (menus, widgets, conteudo) ---------- */
html body .menu-navbar-header,
html body .widget-box-header {
    position: relative;
    background: var(--od-bar-side);
    border: 1px solid var(--od-bar-border);
    padding: 9px 12px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
}
html body .menu-navbar-title {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: none;
    color: var(--od-title);
    text-shadow: var(--od-title-shadow);
}
html body .menu-navbar-deco,
html body .menu-navbar-header::after,
html body .widget-box-header::after { display: none; }

/* Menu lateral: titulo a esquerda com icone de item, como no Tibia. */
html body .menu-navbar { margin-bottom: 4px; }
html body .menu-navbar-header {
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 32px 8px 10px;
}
html body .menu-navbar-header::before {
    content: '';
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: no-repeat center / 32px 32px;
    image-rendering: pixelated;
}
/* News: megafone (a "corneta" do Miracle no mesmo traco/cor dos outros). */
html body .menu-navbar-header[data-target="menu-cat-7"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9be0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
    background-size: 22px 22px;
    image-rendering: auto;
}
/* Account: o mesmo simbolo "personagem +" do botao Create Account (pedido
   do usuario), em SVG, na cor azul do botao. */
html body .menu-navbar-header[data-target="menu-cat-2"]::before  {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9be0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E");
    background-size: 22px 22px;
    image-rendering: auto;
}
/* Community: "grupo de pessoas" no mesmo traco/cor do icone do Account. */
html body .menu-navbar-header[data-target="menu-cat-3"]::before  {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9be0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    background-size: 22px 22px;
    image-rendering: auto;
}
/* Server Guide (bussola) e Library (livro aberto): mesmo traco/cor. */
html body .menu-navbar-header[data-target="menu-cat-10"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9be0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
}
html body .menu-navbar-header[data-target="menu-cat-5"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9be0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
html body .menu-navbar-header:is([data-target="menu-cat-10"], [data-target="menu-cat-5"])::before {
    background-size: 22px 22px;
    image-rendering: auto;
}
html body .menu-navbar-header .menu-navbar-title { font-size: 15px; }
html body .menu-navbar-arrow {
    right: 12px;
    font-size: 11px;
    color: var(--od-text-dim);
    text-shadow: none;
}

html body .widget-box-header { justify-content: center; }
html body .widget-box { margin-bottom: 12px; }

/* ---------- corpos de caixa ---------- */
html body .menu-navbar-inner,
html body .widget-box-body {
    background: #121314 !important;
    border: 1px solid var(--od-bar-border);
    border-top: none;
    box-shadow: none;
}
html body .menu-navbar-inner { padding: 4px 0 6px !important; }
html body .menu-navbar-inner.collapsed { padding: 0 !important; border: none !important; }
html body .widget-box-body { padding: 10px; }

html body .menu-nav-link {
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--od-text);
    padding: 6px 14px 6px 48px;
    border-bottom: 1px solid var(--od-line-soft);
}
html body .menu-navbar-inner .menu-nav-link:last-child { padding-bottom: 6px !important; }
html body .menu-nav-link:hover {
    background: var(--od-panel-3);
    padding-left: 48px;
    color: #fff !important;
}
html body .menu-nav-link.active {
    background: var(--od-panel-3) !important;
    color: #fff !important;
    border-left: 3px solid var(--od-gold) !important;
    padding-left: 45px !important;
}
html body .menu-nav-submenu { background: rgba(0,0,0,0.2); border-bottom-color: var(--od-line-soft); }
html body .menu-nav-child { padding-left: 60px !important; color: var(--od-text-dim) !important; border-bottom-color: var(--od-line-soft) !important; }
html body .menu-nav-child::before { left: 46px; color: var(--od-text-dim); }
html body .menu-nav-child:hover { padding-left: 60px !important; background: var(--od-panel-3); }
html body .menu-nav-child:hover::before { left: 46px; }
html body .menu-nav-child.active { background: var(--od-panel-3) !important; color: #fff !important; border-left: 3px solid var(--od-gold) !important; padding-left: 57px !important; }
html body .menu-nav-child.active::before { left: 43px; }
html body .menu-nav-sub-arrow { color: var(--od-text-dim); text-shadow: none; }

/* ---------- botoes de destaque da coluna esquerda ---------- */
/* :is(:link,...) porque a style46.css estiliza a.download-box:link etc.
   (especificidade 0,2,1); sem isso a pseudo-classe dela venceria. */
html body a.download-box,
html body a.download-box:is(:link, :visited, :hover, :focus, :active) {
    background: var(--od-panel-2) !important;
    border: 1px solid var(--od-line) !important;
    box-shadow: none !important;
    padding: 9px 12px !important;
    margin-bottom: 6px !important;
    filter: none !important;
}
html body a.download-box:hover { background: var(--od-panel-3) !important; }
/* Create Account: botao de CONVERSAO (usuario achou "fraco" so' com a
   faixa azul). Botao cheio em azul, texto branco, brilho pulsando e o
   mesmo reflexo do "Get Premium Now" (od-cta-shine). */
html body a.create-account-box,
html body a.create-account-box:hover {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background: linear-gradient(180deg, #5b9be0 0%, #3a78c2 45%, #1f4f8f 100%) !important;
    border: 1px solid #0f2f5a !important;
    padding: 11px 12px !important;
    margin-bottom: 8px !important;
    animation: od-ca-pulse 2.6s ease-in-out infinite;
    transition: transform .15s, filter .15s !important;
}
html body a.create-account-box:hover {
    filter: brightness(1.12) !important;
    transform: translateY(-1px);
}
html body a.create-account-box::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg);
    animation: od-cta-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}
html body a.create-account-box svg { color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
@keyframes od-ca-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(170,210,255,.35) inset, 0 3px 12px rgba(58,120,194,.35); }
    50%      { box-shadow: 0 0 0 1px rgba(170,210,255,.35) inset, 0 3px 20px rgba(91,155,224,.65); }
}
@media (prefers-reduced-motion: reduce) {
    html body a.create-account-box, html body a.create-account-box::after { animation: none; }
}
html body a.download-box,
html body a.download-box:is(:link, :visited, :hover, :focus, :active) { color: var(--od-green) !important; border-left: 3px solid var(--od-green) !important; }
html body .create-account-title,
html body .download-box-title {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-shadow: none;
}
html body .create-account-title { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.55) !important; }
html body .download-box-title { color: var(--od-green); }

/* ---------- widgets ---------- */
html body .widget-input {
    background: #0f1012;
    border: 1px solid var(--od-line);
    color: var(--od-text);
}
html body .widget-input:focus { border-color: #4a4f55; }
html body .widget-btn {
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    border: 1px solid var(--od-line);
    background: var(--od-panel-3);
    color: #e6e6e6;
}
html body .widget-btn:hover { filter: none; background: #2f3236; }
html body .widget-btn-blue  { border-left: 3px solid var(--od-blue); }
html body .widget-btn-gold  { border-left: 3px solid var(--od-gold); }
html body .widget-btn-red   { border-left: 3px solid #c46060; }
/* Widget de Login (2026-09-26): titulo com icone e mais peso, e o Lost
   Account virou um botao secundario visivel. Tudo ESTATICO a pedido do
   usuario: sem animacao, brilho ou glow.
   .od-wh = o mesmo cabecalho nos outros widgets (Search Player,
   PowerGamers, Oldebra Wiki, Char Bazaar, Streamers). */
html body .od-login-head,
html body .od-wh {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(180deg, #2e3135 0%, #1e1f22 100%) !important;
    padding: 11px 12px !important;
}
html body .od-login-head .menu-navbar-title,
html body .od-wh .menu-navbar-title {
    font-size: 17px !important;
    letter-spacing: 2px !important;
    color: #e2c58c !important;
}
html body .od-login-ico,
html body .od-wh-ico { color: #5b9be0; flex-shrink: 0; }
html body #login-widget .widget-btn-blue { padding: 9px 0; font-size: 13.5px; }
html body .widget-lost { display: block !important; border-top: none !important; padding-top: 0 !important; margin-top: 8px !important; }
html body .widget-lost-link { width: 100%; box-sizing: border-box; }
html body .widget-lost-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px !important;
    background: #1b1c1f !important;
    border: 1px solid #3a3d42 !important;
    color: #d6ccb3 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
html body .widget-lost-link:hover { color: #fff !important; background: #25272a !important; border-color: #4a4f55 !important; text-shadow: none; }
/* Chave em SVG de traco, mesmo padrao/cor dos icones do menu lateral. */
html body .widget-lost-icon { width: 16px; height: 16px; color: #5b9be0; flex-shrink: 0; }
html body .widget-info-table td { border-bottom-color: var(--od-line-soft); }

html body .od-search-input {
    flex: 1;
    min-width: 0;
    background: #0f1012;
    border: 1px solid var(--od-line);
    color: var(--od-text);
    padding: 6px 8px;
    font-size: 12px;
    outline: none;
}
html body .od-search-input:focus { border-color: #4a4f55; }
html body .od-search-btn {
    flex-shrink: 0;
    background: var(--od-panel-3);
    border: 1px solid var(--od-line);
    color: #e6e6e6;
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
}
html body .od-search-btn:hover { background: #2f3236; }
/* Donate: card estatico (decisao do usuario) — sem glow, sem animacao,
   EXCETO o reflexo que atravessa o card (ver .shop-banner::after abaixo). Os `animation: none` / `display: none` anulam os
   efeitos herdados do <style> do index.php (shop-pulse, shop-shine,
   shop-float, shop-gem, shop-blink, shop-arrow).

   Paleta extraida por amostragem de oldebra_logo_v3.png:
   cobre das letras  #ffeabf > #dbaa87 > #ac785f > #a45325 > #843513 > #662208 > #4c1204
   carmim das gemas  #bd2d2f

   (Uma versao em "cena" com bau + pilha de ouro animados foi testada em
   2026-09-26 e REJEITADA pelo usuario.) */
html body .shop-widget { filter: none; margin-bottom: 12px; }
html body .shop-widget::after,
html body .shop-banner-shine,
html body .shop-banner-particles { display: none; }
html body .shop-banner {
    /* Fundo um tom acima dos outros cards para o Donate se separar da coluna;
       borda em cobre medio e o carmim so na faixa esquerda (moldura toda
       avermelhada lia como alerta/erro, igual ao botao de Logout). */
    background: linear-gradient(135deg, #2a150b 0%, #3a1d0f 50%, #231109 100%);
    border: 1px solid #a45325;
    border-left: 3px solid #bd2d2f;
    box-shadow: inset 0 1px 0 rgba(219,170,135,.18);
    margin-bottom: 0;
}
html body .shop-banner:hover { filter: none; }
/* Excecao ao "estatico" (pedido do usuario em 2026-09-26): o mesmo reflexo
   que atravessa o Create Account (od-cta-shine). So' o reflexo; o pulso de
   glow do Create Account NAO foi trazido. */
html body .shop-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg);
    animation: od-cta-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    html body .shop-banner::after { animation: none; display: none; }
}
html body .shop-banner-content { padding: 10px 12px; }
html body .shop-banner-icon { width: 38px; height: 38px; animation: none; filter: none; }
html body .shop-banner-icon { display: flex; align-items: center; justify-content: center; }
/* Pilha de ouro do jogo (item 25766) no tamanho nativo, sem suavizar,
   animada pelos 12 quadros do item (usuario liberou movimento SO' nela;
   o resto do card continua estatico). */
html body .donate-pile {
    display: block;
    width: 37px;
    height: 39px;
    background: url(../../images/donate/gold_pile_anim.png) 0 0 / 37px 468px no-repeat;
    image-rendering: pixelated;
    animation: donate-pile 1.2s steps(12) infinite;
}
@keyframes donate-pile {
    from { background-position: 0 0; }
    to   { background-position: 0 -468px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .donate-pile { animation: none; }
}
/* Titulo com o degrade metalico das letras da logo. Sombra via
   filter: drop-shadow porque text-shadow apareceria atraves do
   preenchimento transparente do background-clip:text. */
html body .shop-banner-title {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.2px;
    color: #dbaa87;
    /* So a metade CLARA do cobre da logo: descendo ate #843513 a base das
       letras sumia no fundo escuro. */
    background: linear-gradient(180deg, #ffeabf 0%, #f0c9a2 45%, #dbaa87 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(1px 1px 0 #1a0602);
    animation: none;
}
html body .shop-banner-sub { color: #dbaa87; letter-spacing: 0; }
html body .shop-banner-arrow { animation: none; color: #bd2d2f; }

html body .wiki-pitch,
html body .bazar-pitch { color: var(--od-text-dim); }
html body .wiki-emblem { filter: none; }
html body .bazar-emblem { color: var(--od-title); text-shadow: none; }
html body .wiki-cta,
html body .bazar-cta {
    background: var(--od-panel-3);
    border: 1px solid var(--od-line);
    color: #e6e6e6 !important;
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-shadow: none;
    box-shadow: none;
}
html body .wiki-cta:hover,
html body .bazar-cta:hover { filter: none; transform: none; box-shadow: none; background: #2f3236; }

html body .streamer-card { border-bottom-color: var(--od-line-soft); }
html body .streamer-card:hover { background: var(--od-panel-3); }
html body .streamer-name { color: var(--od-text); }

/* Powergamers (system/templates/powergamers.html.twig) */
html body .pg-row { border-bottom-color: var(--od-line-soft); }

/* ---------- ticker ---------- */
html body .oc-newsticker {
    background: #121314;
    border: 2px solid var(--od-bar-border);
    border-radius: 0;
    margin-bottom: 12px;
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
}
html body .oc-newsticker-title {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.2px;
    color: var(--od-title);
    text-shadow: var(--od-title-shadow);
    text-align: left;
    padding: 9px 12px;
    background: var(--od-bar-top);
    border-bottom: 1px solid var(--od-bar-border);
}
html body .oc-newsticker-body { padding: 4px 8px 6px; }
html body .oc-ticker-row { padding: 6px 8px; border-bottom-color: var(--od-line-soft); }
html body .oc-ticker-row:hover { background: var(--od-panel-3); }
html body a.oc-ticker-row .oc-ticker-date { color: var(--od-text-dim) !important; }
html body a.oc-ticker-row .oc-ticker-text { color: var(--od-text) !important; font-weight: 600; }
html body a.oc-ticker-row:hover .oc-ticker-text { color: #fff !important; }
html body .oc-ticker-clock,
html body .oc-ticker-arrow { color: var(--od-text-dim); }

/* ---------- area de conteudo ---------- */
html body .center_box { background: none; margin-bottom: 18px; }
html body .od-content-header {
    justify-content: flex-start;
    padding: 10px 16px;
    background: var(--od-bar-top);
    border: 2px solid var(--od-bar-border);
    border-bottom: 1px solid var(--od-bar-border);
    box-shadow: none;
}
html body #content-title {
    font-size: 16px;
    letter-spacing: 1.5px;
}
html body #content-body {
    background: #121314;
    border: 2px solid var(--od-bar-border);
    padding: 16px 16px 32px;
    min-height: 0;
    color: var(--od-text);
    box-sizing: border-box;
}
html body #content-body.od-has-header { border-top: none; }

html body #content-body .intro-box,
html body #content-body > p,
html body #content-body > form > p:first-of-type,
html body #content-body .content-intro,
html body #content-body .InnerTableContainer:not(:has(table)):not(:has(form)):not(:has(input)) {
    background: var(--od-panel-2);
    border: 1px solid var(--od-line);
    border-left: 3px solid var(--od-gold);
    color: var(--od-text);
}

/* Tabelas e links genericos do conteudo: especificidade baixa de proposito. */
:where(#content-body) a { color: var(--od-link); }
:where(#content-body) a:hover { color: var(--od-link-hover); }
:where(#content-body) table { border-collapse: collapse; }
:where(#content-body) th {
    background: var(--od-panel-3);
    color: #e6e6e6;
    font-weight: 700;
    text-align: left;
}
:where(#content-body) tr:nth-child(even) > td { background-color: rgba(255,255,255,0.025); }
:where(#content-body) td,
:where(#content-body) th { border-color: var(--od-line-soft); }

/* Tabela larga nao estoura a coluna: rola dentro do painel. */
html body #content-body { overflow-x: auto; }

/* ---------- paginas com estilo proprio ----------
   Estas paginas trazem um <style> proprio com a paleta dourada/azul do
   old-school. Aqui elas recebem a paleta do tema, sem mexer nos arquivos
   delas (que o old-school continua usando). */

/* Powergamers (system/templates/powergamers.html.twig) */
html body .pg-body {
    background: var(--od-panel) !important;
    border: 1px solid var(--od-line) !important;
    border-top: none !important;
    box-shadow: none !important;
}
html body .pg-row { border-bottom-color: var(--od-line-soft) !important; }
html body .pg-row:hover { background: var(--od-panel-3) !important; }
html body .pg-row-1,
html body .pg-row-1:hover { background: var(--od-panel-2) !important; }
html body .pg-name { color: var(--od-text) !important; }
html body .pg-name-1 { color: var(--od-title) !important; text-shadow: none !important; }
html body .pg-name a:hover { color: #fff !important; }
html body .pg-rank-1 { color: var(--od-title) !important; }
html body .pg-xp,
html body .pg-xp-1 { color: var(--od-green) !important; text-shadow: none !important; }
html body .pg-sub,
html body .pg-empty { color: var(--od-text-dim) !important; }

/* Houses (system/templates/houses.html.twig) */
html body .hlist { border: 1px solid var(--od-line) !important; }
html body .hlist thead th {
    background-color: var(--od-panel-3) !important;
    color: #e6e6e6 !important;
    border-bottom: 1px solid var(--od-line) !important;
    letter-spacing: 0.04em;
}
html body .hlist tbody td {
    color: var(--od-text) !important;
    border-bottom: 1px solid var(--od-line-soft) !important;
}
html body .hlist tbody td.col-name,
html body .hlist tbody td a { color: var(--od-link) !important; font-weight: 600; }
html body .hlist tbody td a:hover { color: var(--od-link-hover) !important; }
html body .hlist tbody tr:nth-child(odd) { background: rgba(255,255,255,0.025) !important; }
html body .hlist tbody tr:hover { background: var(--od-panel-3) !important; }
html body .hlist .hcap {
    background: var(--od-panel-2) !important;
    color: var(--od-title) !important;
    border-bottom: 1px solid var(--od-line) !important;
}
html body .hlist .col-view input[type=submit] {
    background: var(--od-panel-3) !important;
    border: 1px solid var(--od-line) !important;
    color: #e6e6e6 !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html body .hlist .col-view input[type=submit]:hover { background: #2f3236 !important; }
html body .hsearch-col {
    background: var(--od-panel-2) !important;
    border: 1px solid var(--od-line) !important;
}
html body .hsearch-col > h4 { color: var(--od-title) !important; border-bottom-color: var(--od-line) !important; }
html body .hsearch-sep { background: var(--od-line) !important; }
html body .hstatus-auction { color: var(--od-title) !important; }
html body .hlist-countdown,
html body .hlist-empty { color: var(--od-text-dim) !important; }

/* Highscores (sidebar/Community/Highscores/index.php) */
html body .hs-header {
    background: var(--od-bar-top) !important;
    border: 1px solid var(--od-bar-border) !important;
    box-shadow: none !important;
}
html body .hs-header::after { display: none !important; }
html body .hs-title {
    font-family: 'Cinzel', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    color: var(--od-title) !important;
    text-shadow: var(--od-title-shadow) !important;
}
html body .hs-deco { display: none !important; }
html body .hs-body,
html body .hs-filters {
    background: var(--od-panel) !important;
    border: 1px solid var(--od-line) !important;
    box-shadow: none !important;
}
html body .hs-body { border-top: none !important; }
/* Highscores em PLANILHA, igual a tabela do Who's Online
   (pages/online.php): grade de linhas horizontais E verticais #0c0d0e,
   zebra #1e1f21/#222a2e, hover #2a3035. A 1a linha da tabela e' o
   cabecalho (<tr> com <th>, sem <thead>), entao a 1a linha de dados e'
   nth-child(2): por isso "even" leva o tom da linha impar do Online. */
html body .hs-table { border: 1px solid #0c0d0e !important; }
html body .hs-table th,
html body .hs-table td { border: 1px solid #0c0d0e !important; }
html body .hs-table th {
    background: #25272a !important;
    color: #fff !important;
}
html body .hs-table td { color: #d2d2d2 !important; }
html body .hs-table tr:nth-child(even) td { background: #1e1f21 !important; }
html body .hs-table tr:nth-child(odd)  td { background: #222a2e !important; }
html body .hs-table tr:hover td { background: #2a3035 !important; }
html body .hs-table a { color: #6fa8dc !important; }
html body .hs-table a:hover { color: #a9cbea !important; }
html body .hs-rank { color: var(--od-text-dim) !important; }
html body .hs-val { color: var(--od-text) !important; }
html body .hs-filter label { color: var(--od-text-dim) !important; }
html body .hs-select {
    background: #0f1012 !important;
    border: 1px solid var(--od-line) !important;
    color: var(--od-text) !important;
}

/* ---------- rodape ---------- */
html body .footer_cnt {
    color: var(--od-text-dim) !important;
    font-size: 12px;
    margin: 24px auto 40px;
}
html body .footer_cnt strong { color: var(--od-text); }

/* ---------- telas menores ---------- */
@media (max-width: 1000px) {
    html body { --od-banner-h: 220px; }
    html body .site-logo img { width: 260px; }
    html body .container_left,
    html body .container_right { width: 100%; }
    html body .container_mid {
        order: -1;
        flex: 1 1 100%;
        margin: 0 0 14px;
    }
    html body .server-navbar-mid .server-navbar-inner { justify-content: flex-start; }
}
@media (max-width: 520px) {
    html body { --od-banner-h: 170px; }
    html body .site-logo img { width: 200px; }
    html body .container_main { padding: 0 8px; }
    html body #content-body { padding: 12px 10px 24px; min-height: 0; }
}

/* Versalete: sem uppercase forcado (o script do index.php deixa o texto em
   Title Case e a Cinzel desenha as minusculas como maiusculas pequenas). */
html body .menu-navbar-title,
html body .oc-newsticker-title,
html body .hs-title,
html body .shop-banner-title {
    text-transform: none !important;
    letter-spacing: 0.6px !important;
}
html body .menu-navbar-title { font-size: 16px; }
html body .menu-navbar-header .menu-navbar-title { font-size: 17px; }
html body #content-title { font-size: 18px; }
html body .oc-newsticker-title { font-size: 16px; }
html body .hs-title { font-size: 15px !important; }
html body .shop-banner-title { font-size: 17px; text-shadow: none; }

/* Sprites de item no lugar de emojis (Donate, Wiki, Char Bazaar, Online). */
html body .od-ico {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    vertical-align: middle;
    display: inline-block;
}
html body .ol-bar-icon .od-ico { width: 26px; height: 26px; }
html body .wiki-emblem,
html body .bazar-emblem { line-height: 0; }
/* Emoji no lugar do sprite (Wiki = lampada, Char Bazaar = carrinho),
   pedido do usuario 2026-09-26. Mesmo tamanho visual dos sprites 32px. */
html body .od-emoji {
    display: inline-block;
    font-size: 30px;
    line-height: 1;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
/* powergamers.html.twig pede Patua One, que o tema nao carrega mais. */
html body .pg-title { font-family: 'Cinzel', Georgia, serif; }


/* ==========================================================================
   Auditoria visual (2026-09-26): correcoes pontuais achadas no pente-fino.
   ========================================================================== */

/* Buscas com lupa (Commands, Wiki): a regra global de input do style46.css
   (`padding: 6px 8px !important`) apagava o recuo reservado para o icone e
   a lupa ficava em cima do texto. */
html body #cmd-search,
html body #wiki-search { padding-left: 36px !important; }

/* Bandeiras: o Windows nao desenha emoji de bandeira (vira "US", "BR"),
   entao os botoes/secoes usam os gifs de images/flags. */
html body .sr-flag,
html body .dm-flag {
    width: 16px;
    height: 11px;
    vertical-align: -1px;
    margin-right: 4px;
    image-rendering: pixelated;
}

/* Lista vazia (Latest News sem noticias): mesmo visual do "No active bans". */
html body .od-empty {
    text-align: center;
    padding: 48px 24px;
    color: #7d8288;
    font-style: italic;
    background: rgba(14,15,17,.6);
    border: 1px solid #1e1f22;
}

/* Elite Monsters: cabecalhos das tabelas eram #b8922a, que o filtro de
   cores troca por #3a3d42 (cor de MOLDURA) — texto quase invisivel. */
html body .sk-tbl th,
html body .sk-ex th {
    color: #8d9298 !important;
    border-bottom-color: #2e3135 !important;
}

/* Party Calculator: botao "Calculate" tinha texto quase preto sobre o
   cinza que o filtro poe no lugar do dourado. */
html body .psh-btn-calc {
    color: #e6ddc6 !important;
    border-color: #44484e !important;
    font-weight: 700 !important;
}
html body .psh-btn-calc:hover { background: #44484e !important; color: #fff !important; }

/* Forge System: numero do passo (circulo) sumia no fundo. */
html body .fp-section-num { color: #e6ddc6 !important; box-shadow: none !important; }

/* Numeros: na Cinzel o "1" e' um "I" romano ("I-Star", "Member I"). Onde
   o texto e' numero/contador, usa Open Sans. */
html body .sk-tbl td.nm,
html body .sk-ex td:first-child,
html body .psh-member-label,
html body .bl-stat-val,
html body .mk-stat-val,
html body .lk-stat-val:not(.lk-top-name),
html body .rs-value,
html body .tb-value,
html body .sl-num,
html body .fp-section-num,
html body .fp-level-step .ln,
html body .dt-step-num,
html body .wk-stat b {
    font-family: 'Open Sans', Verdana, Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: 0 !important;
}

/* Relics: o <li> era flex, entao cada pedaco de texto virava um item com
   gap de 8px — o ponto final ficava solto ("4 Days ."). */
html body .rl-slot-item-rules li { display: block; position: relative; padding-left: 16px; }
html body .rl-slot-item-rules li::before { position: absolute; left: 0; top: 0; }

/* Celular: nomes longos vazavam da caixa. */
html body .lk-monster { white-space: normal; overflow-wrap: anywhere; }
html body .tr-dummy-name { overflow-wrap: anywhere; }
@media (max-width: 520px) {
    html body .tr-dummy-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Titulos de SECAO: um padrao so', a "faixa com barra lateral" (decisao do
   usuario, 2026-09-26). Antes eram 3 estilos: faixa com barra (Commands,
   Daily Tasks, Server Info...), titulo solto com linha a direita (Premium
   Benefits, Relics, Training) e faixa centralizada (Black Skulls, Elite
   Monsters). Cada pagina tem a sua classe; aqui todas viram a mesma coisa.
   ========================================================================== */
html body :is(.cmd-section-header, .dt-section-header, .si-section-header,
              .psh-section-header, .fp-section-header, .wiki-sh, .mk-section-hdr,
              .pb-section-title, .rl-section-title, .tr-section-title,
              .bs-section, .sk-h, .donate-section-title, .od-sec, .gv-section-title) {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    background: linear-gradient(90deg, rgba(37,39,42,.98) 0%, rgba(20,21,23,.7) 100%) !important;
    border: none !important;
    border-left: 6px solid #3a3d42 !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    text-align: left !important;
    box-shadow: none !important;
}
/* Titulo: o proprio elemento (variantes sem <h2>) ou o <h2> de dentro. */
html body :is(.pb-section-title, .rl-section-title, .tr-section-title,
              .bs-section, .sk-h, .donate-section-title, .od-sec, .gv-section-title),
html body :is(.cmd-section-header, .dt-section-header, .si-section-header,
              .psh-section-header, .fp-section-header, .wiki-sh, .mk-section-hdr) h2 {
    margin-top: 0;
    font-family: 'Cinzel', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.3;
    color: #e2c58c !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
html body :is(.cmd-section-header, .dt-section-header, .si-section-header,
              .psh-section-header, .fp-section-header, .wiki-sh, .mk-section-hdr) h2 { margin: 0 !important; }
/* Espacamento: as variantes que eram titulo solto tinham 36-40px acima;
   a caixa ja tem padding, entao basta um respiro padrao. */
html body :is(.pb-section-title, .rl-section-title, .tr-section-title) { margin: 28px 0 14px !important; }
html body :is(.cmd-section-header, .dt-section-header, .si-section-header,
              .psh-section-header, .fp-section-header, .wiki-sh, .mk-section-hdr,
              .bs-section, .donate-section-title, .od-sec) { margin-bottom: 14px !important; }
/* A linha a direita e o filete dourado do .sk-h saem: a barra ja marca. */
html body :is(.pb-section-title, .rl-section-title, .tr-section-title, .sk-h)::after { display: none !important; }
/* .sk-h e' o cabecalho colado no topo da caixa (.sk-b): mantem a colagem. */
html body .sk-h { margin: 22px 0 0 !important; }
/* Forge: o numero do capitulo acompanha a altura da faixa padrao. */
html body .fp-section-header .fp-section-num { width: 30px; height: 30px; font-size: 14px; }

/* ==========================================================================
   PowerGamers (widget da coluna direita), 2026-09-26: lista compacta no
   modelo enviado pelo usuario (outfit | "N - Nome" / "level, vocacao" | XP)
   com linhas em estilo PLANILHA, as mesmas cores da tabela do Who's Online
   (templates/oldebra-dark/pages/online.php): zebra #1e1f21/#222a2e, hover
   #2a3035, divisoria #0c0d0e, nome em azul-link.
   ========================================================================== */
html body .pg-body {
    background: #1e1f21 !important;
    border: 1px solid #0c0d0e !important;
}
html body .pg-row {
    gap: 8px;
    padding: 6px 8px 6px 4px !important;
    border-bottom: 1px solid #0c0d0e !important;
    box-shadow: none !important;
}
html body .pg-row:last-child { border-bottom: none !important; }
html body .pg-row:nth-child(odd)  { background: #1e1f21 !important; }
html body .pg-row:nth-child(even) { background: #222a2e !important; }
html body .pg-row:hover { background: #2a3035 !important; }
html body .pg-name {
    font-size: 13px;
    font-weight: 700;
    color: #d2d2d2 !important;
    text-shadow: none !important;
}
html body .pg-name a { color: #6fa8dc !important; text-decoration: none; }
html body .pg-name a:hover { color: #a9cbea !important; text-decoration: underline; }
html body .pg-sub { font-size: 11px; color: #9da1a6 !important; }
html body .pg-xp {
    font-size: 12px;
    color: #d2d2d2 !important;
    text-shadow: none !important;
}
html body .pg-xp b { font-weight: 700; color: #e6e6e6; }
html body .pg-xp-unit { font-size: 11px; color: #9da1a6; }

/* ==========================================================================
   Guilds — lista (guilds4.list.html.twig) em PLANILHA, mesmas cores da
   tabela do Who's Online. .od-sec = titulo de secao generico (entra no
   padrao "faixa com barra lateral" la em cima).
   ========================================================================== */
html body .od-gl-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid #0c0d0e; }
html body .od-gl-table th,
html body .od-gl-table td { border: 1px solid #0c0d0e; }
html body .od-gl-table th {
    background: #25272a !important; color: #fff; text-align: left;
    font-weight: 700; padding: 8px 8px;
}
html body .od-gl-table td { padding: 8px; color: #d2d2d2; vertical-align: middle; }
html body .od-gl-table tbody tr:nth-child(odd)  td { background: #1e1f21 !important; }
html body .od-gl-table tbody tr:nth-child(even) td { background: #222a2e !important; }
html body .od-gl-table tbody tr:hover td { background: #2a3035 !important; }
html body .od-gl-table .od-gl-logo { width: 72px; text-align: center; }
html body .od-gl-table .od-gl-logo img { display: block; margin: 0 auto; }
html body .od-gl-table .od-gl-act { width: 90px; text-align: center; }
html body .od-gl-name { font-weight: 700; font-size: 14px; color: #6fa8dc !important; text-decoration: none; }
html body .od-gl-name:hover { color: #a9cbea !important; text-decoration: underline; }
html body .od-gl-admin { margin-left: 8px; font-size: 11px; color: #f87171 !important; }
html body .od-gl-desc { margin-top: 3px; font-size: 12px; color: #9da1a6; line-height: 1.5; }
html body .od-gl-empty td { text-align: center; color: #9da1a6; padding: 16px 6px; font-style: italic; }

html body .od-gl-create {
    display: flex; align-items: center; gap: 14px;
    margin: 14px 0 4px; padding: 12px 18px;
    background: #1e1f22;
    border: 1px solid #34373c;
    border-left: 6px solid #3a3d42;
    text-decoration: none !important;
    transition: border-color .2s, background .2s;
}
html body .od-gl-create:hover { background: #25272a; border-color: #4a4f55; }
html body .od-gl-create-ico { font-size: 1.6em; line-height: 1; flex-shrink: 0; }
html body .od-gl-create-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
html body .od-gl-create-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 15px; color: #e2c58c; letter-spacing: .04em; }
html body .od-gl-create-sub { font-size: 12px; color: #9da1a6; }
html body .od-gl-create-arrow { font-size: 1.5em; color: #8d9298; flex-shrink: 0; }

/* Guilds — pagina da guild (guilds2.view.html.twig). O cabecalho de secao
   (.gv-section-title) entra no padrao da faixa la em cima; aqui so' a
   caixa, o banner e a tabela em PLANILHA (cores do Who's Online). */
html body .gv-header {
    background: linear-gradient(180deg, #25272a 0%, #1b1c1f 100%) !important;
    border: 1px solid #34373c !important;
    box-shadow: none !important;
}
html body .gv-section { background: transparent !important; border: none !important; }
html body .gv-section-title { margin: 0 0 10px !important; }
html body .gv-section-body { background: transparent !important; border: none !important; }
html body .gv-table { width: 100%; border-collapse: collapse; border: 1px solid #0c0d0e !important; }
html body .gv-table th,
html body .gv-table td { border: 1px solid #0c0d0e !important; }
html body .gv-table th { background: #25272a !important; color: #fff !important; }
html body .gv-table td { color: #d2d2d2 !important; }
html body .gv-table tbody tr:nth-child(odd)  td { background: #1e1f21 !important; }
html body .gv-table tbody tr:nth-child(even) td { background: #222a2e !important; }
html body .gv-table tbody tr:hover td { background: #2a3035 !important; }
html body .gv-table a,
html body .gv-section-body a { color: #6fa8dc !important; }
html body .gv-table a:hover,
html body .gv-section-body a:hover { color: #a9cbea !important; }
html body .gv-table .gv-empty { background: #1e1f21 !important; color: #9da1a6 !important; }

/* ==========================================================================
   Houses no padrao do Miracle74 (houses.html.twig / houses.view.html.twig),
   2026-09-26: filtros em 4 colunas + lista em PLANILHA (cores do Who's
   Online) e pagina da house com imagem | texto e botoes Bid / Back.
   ========================================================================== */
/* Botao padrao do tema: o mesmo visual do Submit/View (buttons.base.html.twig
   depois do filtro de cores), para links e <button>. */
html body .od-btn {
    display: inline-block;
    padding: 7px 22px;
    font-family: 'Open Sans', Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff !important;
    background: linear-gradient(180deg, #3a3d42, #25272a);
    border: 1px solid #d6ccb3;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(140,145,152,.4);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    text-decoration: none !important;
    cursor: pointer;
    transition: filter .2s;
}
html body .od-btn:hover { filter: brightness(1.2); }
html body .od-btn:disabled { opacity: .6; cursor: default; }

/* Tabelas em planilha (filtros e lista) */
html body .od-hs-filters,
html body .od-hs-table,
html body .od-hv-form { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid #0c0d0e; margin-bottom: 18px; }
html body .od-hs-filters th,
html body .od-hs-filters td,
html body .od-hs-table th,
html body .od-hs-table td,
html body .od-hv-form th,
html body .od-hv-form td { border: 1px solid #0c0d0e; }
html body .od-hs-filters th,
html body .od-hs-table th { background: #25272a !important; color: #fff; text-align: left; font-weight: 700; padding: 8px; }
html body .od-hs-filters td { background: #1e1f21 !important; padding: 8px; vertical-align: top; color: #d2d2d2; }
html body .od-hs-filters .od-hs-go { width: 120px; text-align: center; }
html body .od-hs-opt { display: block; padding: 2px 0; cursor: pointer; color: #d2d2d2; white-space: nowrap; }
html body .od-hs-opt input { margin: 0 6px 0 0; vertical-align: -1px; }

html body .od-hs-table td { padding: 7px 8px; color: #d2d2d2; }
html body .od-hs-table tbody tr:nth-child(odd)  td { background: #1e1f21 !important; }
html body .od-hs-table tbody tr:nth-child(even) td { background: #222a2e !important; }
html body .od-hs-table tbody tr:hover td { background: #2a3035 !important; }
html body .od-hs-table a { color: #6fa8dc !important; text-decoration: none; }
html body .od-hs-table a:hover { color: #a9cbea !important; text-decoration: underline; }
html body .od-hs-table .od-hs-num { width: 80px; white-space: nowrap; }
html body .od-hs-auction { color: #e2c58c !important; }
html body .od-hs-dim { color: #7d8288; }
html body .od-hs-empty td { text-align: center; color: #9da1a6; font-style: italic; padding: 16px 6px; }
html body .od-hs-note { font-size: 12px; color: #9da1a6; line-height: 1.6; margin: 0; }

/* Pagina da house */
html body .od-hv-card {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 16px; margin-bottom: 18px;
    background: #1e1f21; border: 1px solid #0c0d0e;
}
html body .od-hv-img {
    flex: 0 0 auto; width: 148px; height: 148px;
    display: flex; align-items: center; justify-content: center;
    background: #0f1012; border: 1px solid #34373c; overflow: hidden;
}
html body .od-hv-img img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
html body .od-hv-placeholder { font-size: 3em; opacity: .5; }
html body .od-hv-info { flex: 1; min-width: 0; color: #d2d2d2; font-size: 13px; line-height: 1.6; }
html body .od-hv-info p { margin: 0 0 10px; }
html body .od-hv-info b { color: #fff; }
html body .od-hv-info a { color: #6fa8dc !important; }
html body .od-hv-name { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 17px; color: #e2c58c; margin-bottom: 8px; }
html body .od-hv-actions { display: flex; justify-content: center; gap: 40px; margin: 6px 0 4px; }
html body .od-hv-form th { width: 150px; background: #25272a !important; color: #fff; text-align: left; padding: 8px; font-weight: 700; }
html body .od-hv-form td { background: #1e1f21 !important; padding: 8px; color: #d2d2d2; }
html body .od-hv-form select,
html body .od-hv-form input[type=number] { min-width: 200px; }
html body .od-hv-dim { margin-left: 8px; color: #9da1a6; font-size: 12px; }
html body .od-hv-note { font-size: 12px; color: #9da1a6; margin: 0 0 12px; }
html body .od-hv-alert { padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
html body .od-hv-alert.ok  { background: rgba(16,80,16,.25); border: 1px solid rgba(50,180,50,.4); color: #86efac; }
html body .od-hv-alert.err { background: rgba(122,16,16,.25); border: 1px solid rgba(200,50,50,.5); color: #fca5a5; }
@media (max-width: 640px) {
    html body .od-hv-card { flex-direction: column; align-items: center; }
    html body .od-hs-filters thead { display: none; }
    html body .od-hs-filters tr, html body .od-hs-filters td { display: block; width: auto !important; }
}

/* ==========================================================================
   Library — resquicios da paleta antiga (auditoria de cores 2026-09-26).
   Os fundos marrons/azuis sairam pelo content_filter; aqui fica o que o
   filtro nao alcanca: azul "de destaque" usado como estrutura, botao com
   texto escuro sobre dourado, bordas creme fortes e o Forge Simulator
   (Shadow DOM carregado por fetch, nao passa pelo filtro).
   ========================================================================== */
/* Premium Benefits: caixa "Multiple Tasks System" era azul inteira. */
html body .pb-task-banner { border: 1px solid #3a3d42 !important; }
html body .pb-task-banner::before { display: none; }
html body .pb-task-banner h3 { color: #e2c58c !important; font-family: 'Cinzel', Georgia, serif; }
html body .pb-task-box.prem-box { border-color: #6b7076 !important; background: rgba(140,145,152,.08) !important; }
html body .pb-task-box.prem-box .tb-label,
html body .pb-task-box.prem-box .tb-value { color: #e2c58c !important; }
html body .pb-task-perk { background: rgba(140,145,152,.1) !important; border-color: #3a3d42 !important; color: #c9ccd0 !important; }
/* Premium Benefits: chamada final "Get Premium Now". E' o convite de
   compra da pagina, entao usa o cobre da LOGO (mesma identidade do card e
   da pagina Donate): caixa com brilho quente e faixa carmim, botao cobre
   com reflexo que passa de tempos em tempos. */
html body .pb-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(164,83,37,.28) 0%, transparent 65%),
        linear-gradient(180deg, #25272a 0%, #1b1c1f 100%) !important;
    border: 1px solid #843513 !important;
    border-top: 2px solid #bd2d2f !important;
    padding: 28px 16px 30px !important;
}
html body .pb-cta p {
    color: #f0c9a2 !important;
    font-size: 15px !important;
    font-weight: 600;
    margin-bottom: 18px !important;
}
html body .pb-cta a {
    position: relative;
    overflow: hidden;
    padding: 14px 42px !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    color: #2a0d02 !important;
    text-shadow: 0 1px 0 rgba(255,234,191,.55);
    background: linear-gradient(180deg, #ffeabf 0%, #f0c9a2 30%, #dbaa87 60%, #a45325 100%) !important;
    border: 1px solid #843513 !important;
    animation: od-cta-pulse 2.6s ease-in-out infinite;
}
html body .pb-cta a::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    animation: od-cta-shine 3.2s ease-in-out infinite;
}
html body .pb-cta a:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px) scale(1.03) !important;
}
@keyframes od-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,234,191,.25) inset, 0 6px 22px rgba(164,83,37,.55), 0 0 26px rgba(219,170,135,.18); }
    50%      { box-shadow: 0 0 0 1px rgba(255,234,191,.25) inset, 0 6px 22px rgba(164,83,37,.75), 0 0 44px rgba(219,170,135,.42); }
}
@keyframes od-cta-shine {
    0%, 55% { left: -60%; }
    85%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    html body .pb-cta a, html body .pb-cta a::after { animation: none; }
}
/* Training: moldura e barra lateral creme de 2-5px destoavam do tema. */
html body .tr-hero { border: 1px solid #3a3d42 !important; }
html body .tr-info-card { border-left-color: #3a3d42 !important; }
html body .tr-info-card::before { display: none; }
/* Forge Simulator: variaveis no host vencem o :host de dentro do shadow. */
html body #fsim-host {
    --bg: #141517; --panel: #1b1c1f; --panel-2: #222326;
    --line: #34373c; --line-soft: #25272a;
    --gold: #6b7076; --gold-bright: #d6ccb3;
    --text: #d8d3c4; --text-dim: #a9adb2; --text-faint: #7d8288;
}

/* Daily Task Lists (?subtopic=dailytasklists): o cabecalho de cada
   dificuldade (Beginner, Intermediate...) tinha o mesmo peso da lista e
   sumia. Vira uma faixa propria, colada no topo do bloco, com o titulo na
   cor dos titulos do tema e a exigencia/contagem como etiquetas. */
html body .dt-tier-block { padding-top: 0 !important; }
html body .dt-tier-head {
    align-items: center !important;
    margin: 0 -16px 12px !important;
    padding: 10px 16px !important;
    background: linear-gradient(90deg, rgba(52,55,60,.95) 0%, rgba(30,31,34,.6) 100%);
    border-bottom: 1px solid #3a3d42 !important;
}
html body .dt-tier-name {
    font-family: 'Cinzel', Georgia, serif !important;
    font-weight: 700;
    font-size: 17px !important;
    color: #e2c58c !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
html body .dt-tier-head .dt-stars { color: #e2c58c !important; font-size: 14px; }
html body .dt-tier-req {
    color: #fff !important;
    background: rgba(0,0,0,.35);
    border: 1px solid #44484e;
    padding: 2px 10px;
    font-size: 12px !important;
}
html body .dt-tier-note {
    color: #c9ccd0 !important;
    background: rgba(0,0,0,.25);
    border: 1px solid #3a3d42;
    padding: 2px 10px;
    font-size: 12px !important;
}
html body .dt-pool li { color: #b9bdc2 !important; }

/* ==========================================================================
   Pagina do personagem (system/templates/characters2.html.twig),
   2026-09-26: usuario achou titulos, rotulos e valores "mortos". Cabecalho
   no mesmo padrao dos widgets (.od-wh: icone azul + titulo pergaminho
   maior), rotulos em pergaminho, valores em branco. Estatico.
   .am-* = mesma coisa na pagina da conta (account13.management.html.twig).
   ========================================================================== */
html body .char-header,
html body .am-section-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    background: linear-gradient(180deg, #2e3135 0%, #1e1f22 100%) !important;
    border: 1px solid #3a3d42 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    gap: 9px !important;
    padding: 11px 12px !important;
}
html body .char-header::after,
html body .am-section-header::after { display: none !important; }
html body .char-deco,
html body .am-section-deco { display: none !important; }
html body .char-title,
html body .am-section-title {
    font-family: 'Cinzel', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: 2px !important;
    text-transform: none !important;
    color: #e2c58c !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.8) !important;
}
html body .task-toggle-icon {
    border-color: #5b9be0 !important;
    color: #5b9be0 !important;
    width: 18px !important; height: 18px !important;
    font-size: 14px !important;
}
html body .char-body,
html body .am-section-body { border: 1px solid #3a3d42 !important; border-top: none !important; }
html body .char-table td,
html body .am-table td { color: #f2f2f2 !important; font-size: 13.5px !important; }
html body .char-table td:first-child,
html body .am-table td:first-child { color: #cfc5ab !important; font-weight: 700 !important; }
html body .char-table th,
html body .am-table th {
    background: #25272a !important;
    color: #e2c58c !important;
    font-size: 12.5px !important;
    letter-spacing: .03em;
    border-bottom: 1px solid #3a3d42 !important;
}
html body .char-table td strong,
html body .am-table td strong { color: #fff !important; }