/*
 * components.css — Componentes reutilizáveis entre páginas
 * Adicionar aqui apenas o que aparecer em 3+ páginas diferentes.
 * CSS específico de página fica em assets/css/pages/nome.css
 */

/* ---------------------------------------------------------------------------
 * Nav lateral de conteúdo — usado em serverinfo, tou, privacy_policy (e futuros)
 * --------------------------------------------------------------------------- */
.content-nav {
    float: right;
    width: 25%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 5px;
}

/* ==========================================================================
 * .toc-content-area — wrapper UNIVERSAL para qualquer página com TOC.
 * Usado em: serverinfo, ToU, privacy_policy, oldmonsters, wars (e futuras).
 *
 * Estratégia: TOC com `position: absolute` no canto superior direito do
 * wrapper. As tabelas fluem em block-flow normal com `width: 73%` +
 * `margin-right: 27%` (reserva espaço à direita para a TOC). Conforme as
 * tabelas vão empilhando, todas continuam à esquerda da TOC enquanto há
 * espaço vertical. Quando uma tabela ultrapassa o final da TOC, o JS
 * `adjustTocLayout` (em app.js) marca-a com `.past-toc` →
 * `width: 100%; margin-right: 0` (full width).
 *
 * Estrutura HTML padrão:
 *   <div class="toc-content-area">
 *     <nav class="content-nav">
 *       <h3>Contents</h3>
 *       <ul><li><a href="#anchor">Item</a></li>...</ul>
 *     </nav>
 *     <table class="table-standard"><thead>...</thead>...</table>
 *     <table class="table-standard">...</table>
 *     ...
 *   </div>
 *
 * Para páginas com sub-wrapper hidden por padrão (ex.: serverinfo `.world-content`):
 *   - Use `display: none` por padrão e `display: block` quando ativo.
 *   - Não há restrição: as tabelas dentro do sub-wrapper também respondem.
 * ========================================================================== */
.toc-content-area {
    position: relative;
}

.toc-content-area > .content-nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
    float: none;
    box-sizing: border-box;
}

/* `.world-content` é específico do serverinfo, mas a regra fica aqui pra
   manter o padrão centralizado. Outras páginas podem usar wrappers similares. */
.world-content { display: none; }
.world-content-active { display: block; }

/* Tabelas: width 73% à esquerda + margin-right 27% reserva o espaço da TOC.
   `!important` necessário porque a regra global mobile de `.table-standard`
   também usa `!important` (para vencer cascade default + display:block).
   Sem !important aqui, a TOC perderia para a regra global em ≤680px.
   Mesmas regras valem para `.info-card` quando usado dentro de toc-content-area. */
.toc-content-area .table-standard,
.toc-content-area .info-card {
    width: 73% !important;
    margin-left: 0 !important;
    margin-right: 27% !important;
    margin-top: 0;
    margin-bottom: 8px;
    box-sizing: border-box;
}

/* Verticalmente além do final da TOC: full width. Setado pelo JS. */
.toc-content-area .table-standard.past-toc,
.toc-content-area .info-card.past-toc {
    width: 100% !important;
    margin-right: 0 !important;
}

.content-nav h3 {
    margin: 0;
    color: #cccccc;
}

.content-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Bullet point ANTES de cada item da TOC. Útil quando os tópicos não têm
   prefixo numérico (ex.: serverinfo, privacy_policy, oldmonsters, wars).
   Em TOCs com numeração explícita (ToU "1. Introdução"), use a classe
   modificadora `.content-nav--numbered` no <nav> para suprimir o bullet
   (sem ele a numeração já delimita os itens). */
.content-nav li {
    margin: 5px 0;
    padding-left: 12px;
    position: relative;
    line-height: 1.35;
}

.content-nav li::before {
    content: '\2022'; /* • */
    position: absolute;
    left: 0;
    top: 0;
    color: #777a82;
    font-weight: bold;
}

/* TOC numerada — esconde o bullet (a numeração já cumpre o papel) */
.content-nav--numbered li {
    padding-left: 0;
}
.content-nav--numbered li::before {
    content: none;
}

.content-nav a {
    color: #cccccc;
    text-decoration: none;
}

.content-nav a:hover {
    color: #ffff00;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * .page-title — título padrão no topo de cada página do site.
 * Cardo uppercase + border-bottom slate fina + count opcional à direita.
 * Pattern visual: tasks/monsters/spells/etc todas iguais.
 *
 * HTML:
 *   <h1 class="page-title">
 *       <span class="page-title__text">Tasks</span>
 *       <span class="page-title__count">58 total</span>
 *   </h1>
 * --------------------------------------------------------------------------- */
.page-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-heading);
    text-shadow: var(--text-shadow-heading);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-bottom: 6px;
    margin: 8px 0 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.page-title__count {
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: rgba(226, 232, 240, 0.62);
    flex-shrink: 0;
}

/* Parágrafo intro logo abaixo do .page-title — opcional (usado em dailyraids). */
.page-intro {
    margin: -6px 0 18px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 13px;
    line-height: 1.55;
    max-width: 680px;
}

/* Wrapper de página pra dar respiro lateral igual o `#monsters-root`/`#tasks-root`.
   Usado em templates que não têm wrapper próprio (dailyraids, oldmonsters, wars,
   guilds, team, etc.) pra o conteúdo não ficar colado nas bordas do bloco central. */
.page-content { padding: 0 12px; }

/* ---------------------------------------------------------------------------
 * Linha de título escuro em tabelas — usado em serverinfo, tou, privacy_policy (e futuros)
 * --------------------------------------------------------------------------- */
.section-title-row td {
    background-color: #242438;
    color: var(--color-heading);
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    padding: 6px;
}

/* ---------------------------------------------------------------------------
 * Botões de seleção de idioma — usado em rules, tou, privacy_policy (e futuros)
 * --------------------------------------------------------------------------- */
.flag-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 200px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #000;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.flag-button {
    text-decoration: none;
    color: #cccccc;
    margin: 0 10px;
}

.flag-button:hover {
    color: #ffff00;
    text-decoration: underline;
}

/* Blocos de idioma do toggle PT/EN: começam escondidos; switchLegal() (app.js)
   revela um por vez. Usado em tou, privacy_policy, guilds (e futuros). */
.legal-lang-block {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Player Search da sidebar — input + botão no padrão do site (substitui o input
 * legado + botão-imagem GIF que "sumia" no submit). O botão é um <button> real,
 * então o loading-state global (app.js) renderiza o spinner dentro dele.
 * --------------------------------------------------------------------------- */
.sidebar-search {
    display: flex;
    flex-direction: column;
    gap: 7px;
    /* Respiro maior em cima (entre o título e o input) + base equilibrada
       (8px aqui + 5px do padding-bottom da box). Lateral vem dos 10px de margin
       da própria box. */
    padding: 12px 0 8px;
}
/* Spacers legados (float 5px) da box do Player Search — o gap/padding já cuidam. */
#themeboxews-content .clean_5 {
    display: none;
}
.sidebar-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 9px;
    background: rgba(200, 208, 219, 0.09); /* acinzentado (tom slate, on-brand) */
    color: var(--color-text-bright);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.sidebar-search__input::placeholder { color: var(--color-text-muted); }
.sidebar-search__input:focus {
    outline: none;
    border-color: var(--color-accent-soft);
    background: rgba(200, 208, 219, 0.13);
}
.sidebar-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center; /* centralizado, largura pelo conteúdo (não full-width) */
    box-sizing: border-box;
    padding: 5px 22px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
}
.sidebar-search__btn:hover {
    border-color: var(--border-soft-hover);
    background: var(--surface-soft-hover);
    color: var(--color-text-bright);
}
.sidebar-search__btn svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
 * Paginação — usado em market, guilds, items, items_cleaned (e futuros).
 * Pills com tokens do design system (cinza-azul + glow dourado no current).
 * Suporta sliding window com ellipsis (gerado pelo partial / market helper).
 * --------------------------------------------------------------------------- */
.pagin {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
}

.pagin a,
.pagin > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
    box-sizing: border-box;
}

.pagin a:hover,
.pagin a:active {
    border-color: var(--border-soft-hover);
    color: var(--color-text-bright);
    background: var(--surface-soft-hover);
}

.pagin .current {
    border-color: var(--color-accent-soft);
    color: var(--color-accent-soft);
    background: var(--surface-soft);
    text-shadow: 0 0 4px rgba(255, 200, 110, 0.35);
    cursor: default;
}

.pagin .ellipsis {
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: default;
    min-width: auto;
    padding: 0 4px;
}

.pagin .disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .pagin {
        font-size: 11px;
        gap: 3px;
    }
    .pagin a,
    .pagin > span {
        min-width: 26px;
        height: 26px;
        padding: 0 6px;
    }
}

.pagination {
    margin: 12px 0;
}

.pagination > a {
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
 * Nomes de players com destaque por top 3 — usados em highscores, whoisonline,
 * characters profile, frags/deaths, e qualquer lugar que liste players.
 * Classe aplicada via helper PHP player_name_top_class().
 *
 * Regra: o MELHOR rank entre todas as skills define a cor.
 * --------------------------------------------------------------------------- */
.player-name {
    /* Estado padrão — herda comportamento do <a> nativo, sem override. */
}

/* Nítido, não "glow": sombra escura curta (igual aos ícones de medalha em
   highscores/characters) define o texto colorido sobre o fundo escuro sem o
   halo borrado que deixava infantil. paint-order + stroke fino dá o contorno
   premium sem engrossar/borrar a fonte. */
.player-name--gold,
.player-name--silver,
.player-name--bronze {
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    paint-order: stroke fill;
    -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.45);
}

.player-name--gold   { color: var(--medal-gold)   !important; }
.player-name--silver { color: var(--medal-silver) !important; }
.player-name--bronze { color: var(--medal-bronze) !important; }

.player-name--gold:hover,
.player-name--silver:hover,
.player-name--bronze:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Utilitários de cor de texto — usados em múltiplas páginas
 * --------------------------------------------------------------------------- */
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-muted   { color: var(--color-text-muted); }
.text-info    { color: var(--color-info); }
.text-warning { color: var(--color-warning); }

/* Link de página atual (items.php / items_cleaned.php) */
.items-pagination-current {
    font-weight: bold;
    color: #ffd479;
}

/* ---------------------------------------------------------------------------
 * Tabela padrão — usada em serverinfo, highscores, guilds, characters, etc.
 * --------------------------------------------------------------------------- */
.table-standard {
    border-collapse: collapse;
    width: 95%;
    margin: 0 auto;
}

.table-standard th,
.table-standard td {
    border: 1px solid #000000;
    text-align: left;
    padding: var(--cell-padding);
}

.table-standard th {
    background-color: #505050;
    color: var(--color-heading);
}

.table-standard tr.row-odd  { background-color: #20222c; }
.table-standard tr.row-even { background-color: #1b1e26; }

/* ---------------------------------------------------------------------------
 * Caixa de aviso / erro — substituição do padrão SmallBox legado
 * --------------------------------------------------------------------------- */
.notice-box {
    border: 1px solid #666666;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-sm);
    padding: 10px 14px;  /* mantido hardcoded — `--card-padding-y` é 12px (visual diferente) */
    margin: var(--space-sm) 0;
    font-size: var(--font-size-md);
    color: #cccccc;
}

.notice-box.notice-error   { border-color: #aa3333; color: #ffaaaa; }
.notice-box.notice-success { border-color: #336633; color: #aaffaa; }
.notice-box.notice-warning { border-color: #886600; color: #f5b041; }
.notice-box.notice-info    { border-color: #334466; color: #aaccff; }

.notice-box ul {
    margin: 6px 0 0 16px;
    padding: 0;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVIDADE — regras globais de componentes
 * --------------------------------------------------------------------------- */

/* Nav de conteúdo (índice flutuante): mantém float em tablet e mobile.
   Só colapsa para bloco inteiro em telas muito estreitas (<= 400px) */
@media (max-width: 400px) {
    .content-nav {
        float: none;
        width: 100%;
        margin-bottom: 12px;
        box-sizing: border-box;
    }
}

/* Tabelas padrão em mobile: full-width.
   IMPORTANTE: NÃO usar `display: block` no <table> — ao virar block, as
   cells perdem o algoritmo nativo de table-layout e viram shrink-to-fit.
   Mantemos `display: table` (default) com `table-layout: auto` (algoritmo
   nativo que dimensiona cada coluna pelo conteúdo — coluna pequena fica
   pequena, coluna grande fica grande). */
@media (max-width: 680px) {
    .table-standard {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        table-layout: auto;
        box-sizing: border-box;
    }

    /* Garante que <form> não comprima a tabela com shrink-to-fit. */
    form {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
}

/* Cells: quebra palavras longas (URLs, IDs sem espaço) em vez de overflow.
   Aplica em todos os breakpoints — proteção universal contra
   "texto vazando para a célula vizinha". */
.table-standard td,
.table-standard th {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
}

/* ---------------------------------------------------------------------------
 * .table-scroll — wrapper para tabelas que devem permitir scroll horizontal
 * quando o conteúdo natural é mais largo que o container (típico em mobile
 * com tabelas de muitas colunas). Em desktop a tabela cabe e nada acontece.
 *
 * Estrutura HTML:
 *   <div class="table-scroll">
 *     <table class="table-standard">...</table>
 *   </div>
 *
 * Comportamento: a tabela tem `width: max-content` (largura natural do
 * conteúdo) com `min-width: 100%` (preenche o container quando couber).
 * Necessário sobrescrever o `width: 100% !important` do `.table-standard`
 * mobile — só dentro do `.table-scroll`.
 * --------------------------------------------------------------------------- */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 10px 0;
}
.table-scroll > .table-standard,
.table-scroll > table {
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * .chip — pill genérica para indicadores discretos (online pill, badges, etc.)
 * Usa tokens `--surface-soft` + `--border-soft` + `--color-accent-soft`.
 * Hover automático via `--surface-soft-hover`.
 * --------------------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background-color: var(--surface-soft);
    border: 1px solid var(--border-soft);
    color: var(--color-accent-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover,
.chip:active {
    background-color: var(--surface-soft-hover);
    border-color: var(--border-soft-hover);
    color: #ffffff;
}
.chip svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.7;
    flex-shrink: 0;
    color: inherit;
    filter: var(--glow-accent);
}

/* ---------------------------------------------------------------------------
 * .filter-grid — grid responsivo para forms de filtro com 2 colunas em mobile.
 * Usado em market.php (e qualquer página futura com forma similar). Cada filho
 * direto vira coluna; em ≤680px ficam 2 a 2 lado a lado.
 * --------------------------------------------------------------------------- */
.filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
}
.filter-grid > * {
    flex: 1 1 50%;
    box-sizing: border-box;
    padding: 4px 8px;
}

/* ---------------------------------------------------------------------------
 * Loading state em forms — feedback visual durante submit.
 *
 * Aplicação automática via handler global em app.js que escuta `submit` em
 * qualquer <form>. Marca o form com `.is-loading` e desabilita os botões
 * submit (button[type=submit] / input[type=submit]).
 *
 * Customização opcional do texto via `data-loading-text="..."` no botão.
 *
 * Bloqueia segundo submit enquanto pendente (prevenção de duplo clique).
 * --------------------------------------------------------------------------- */
@keyframes form-spinner-rotate {
    to { transform: rotate(360deg); }
}

.form-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: form-spinner-rotate 0.7s linear infinite;
    box-sizing: border-box;
}

form.is-loading button[type="submit"],
form.is-loading input[type="submit"] {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * .char-tasks-toggle — botao "Show all / Show less" de blocos colapsaveis
 * (.char-tasks-collapse). UNIVERSAL: tasks (characters) e tabela de drops
 * (item detail). Handler generico em app.js alterna .is-expanded no wrapper.
 * --------------------------------------------------------------------------- */
.char-tasks-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 7px 10px;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.char-tasks-toggle:hover {
    background-color: var(--surface-soft-hover, rgba(255, 255, 255, 0.06));
    border-color: var(--border-soft-hover, rgba(255, 255, 255, 0.18));
    color: var(--color-text);
}

.char-tasks-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.28s ease;
}

.is-expanded .char-tasks-toggle svg {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * .subnav-tabs — barra de navegação de subseções, universal.
 *
 * Usado em hubs com várias subpáginas (raids: how-it-works/locations/rewards;
 * library hubs futuros, etc.). Estilo "pills" com Lucide icons. A pill
 * ativa marca-se com `aria-current="page"` (preferido) ou class `.is-active`.
 *
 * Variante `.subnav-tabs--sub` para sub-tabs aninhadas (menores), ex.: tiers
 * dentro de Rewards. Pode-se aninhar uma `.subnav-tabs--sub` logo abaixo da
 * `.subnav-tabs` principal sem regras adicionais.
 *
 * Estrutura HTML:
 *   <nav class="subnav-tabs">
 *     <a href="..." class="subnav-tab" aria-current="page">
 *       <i data-lucide="book-open"></i><span>How it Works</span>
 *     </a>
 *     <a href="..." class="subnav-tab"><i data-lucide="map-pin"></i><span>Locations</span></a>
 *     ...
 *   </nav>
 * --------------------------------------------------------------------------- */
.subnav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 18px;
    padding: 0;
}

.subnav-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background-color: var(--surface-soft);
    border: 1px solid var(--border-soft);
    color: var(--color-accent-soft);
    font-size: var(--font-size-md);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}

.subnav-tab:hover {
    background-color: var(--surface-soft-hover);
    border-color: var(--border-soft-hover);
    color: #ffffff;
    text-decoration: none;
}

.subnav-tab[aria-current="page"],
.subnav-tab.is-active {
    background-color: rgba(224, 112, 0, 0.12);
    border-color: rgba(255, 200, 110, 0.35);
    color: #ffe2a8;
}

.subnav-tab svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
    flex-shrink: 0;
    color: inherit;
    filter: var(--glow-accent);
}

/* Sub-tabs (segundo nível) — visualmente menores e mais discretos */
.subnav-tabs--sub {
    margin-top: -8px;
    margin-bottom: 14px;
    gap: 4px;
}
.subnav-tabs--sub .subnav-tab {
    padding: 4px 10px;
    font-size: var(--font-size-sm);
}
.subnav-tabs--sub .subnav-tab svg {
    width: 12px;
    height: 12px;
}

/* Quando a sub-tab tem `--tier-accent` setada (inline ou via classe), o ícone
   recebe a cor do tier mesmo no estado idle, e o estado ativo destaca
   borda + texto com a cor do tier — conecta visualmente a tab à página. */
.subnav-tabs--sub .subnav-tab[style*="--tier-accent"] svg {
    color: var(--tier-accent);
}
.subnav-tabs--sub .subnav-tab[style*="--tier-accent"].is-active,
.subnav-tabs--sub .subnav-tab[style*="--tier-accent"][aria-current="page"] {
    background-color: color-mix(in srgb, var(--tier-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--tier-accent) 45%, transparent);
    color: var(--tier-accent);
}

/* ---------------------------------------------------------------------------
 * .page-hero — cabeçalho de página com título centralizado e subtítulo opcional.
 * Usado em hubs/landing pages. Mantém estilo simples e leve, sem moldura.
 * --------------------------------------------------------------------------- */
.page-hero {
    text-align: center;
    margin: 4px 0 18px;
}
.page-hero h1,
.page-hero h2 {
    margin: 0 0 6px;
    font-size: 22px;
    color: var(--color-text-bright);
    letter-spacing: 0.4px;
}
.page-hero p {
    margin: 0 auto;
    max-width: 640px;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * .hub-grid + .hub-card — grid de cards para hubs/landing pages.
 *
 * Cada card tem ícone Lucide, título e descrição opcional. Auto-fit em até
 * 3 colunas, colapsa pra 1 em mobile. Reusável em qualquer landing futura
 * (ex.: settings hub, library hub, account hub).
 *
 * Estrutura HTML:
 *   <div class="hub-grid">
 *     <a href="..." class="hub-card">
 *       <i data-lucide="scroll-text" class="hub-card-icon"></i>
 *       <h3>How it Works</h3>
 *       <p>Description...</p>
 *     </a>
 *   </div>
 * --------------------------------------------------------------------------- */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 12px 0 18px;
}

.hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 18px;
    background-color: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--color-accent-soft);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    box-sizing: border-box;
}
.hub-card:hover {
    background-color: var(--surface-soft-hover);
    border-color: var(--border-soft-hover);
    text-decoration: none;
    transform: translateY(-1px);
}

.hub-card-icon {
    display: inline-flex;
    margin-bottom: 10px;
    color: #ffd479;
    filter: var(--glow-accent-strong);
}
.hub-card-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.6;
}

.hub-card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--color-text-bright);
    font-weight: 700;
}
.hub-card p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* Variante color-coded por tier (usa --tier-N como acento na borda + ícone).
   Aplica via classe `.hub-card--tier-3` / `--tier-2` / `--tier-1`. Reusável
   em qualquer ranqueamento por tier (highscores ranges, donate packages...). */
.hub-card--tier-3 { --hub-accent: var(--tier-3); }
.hub-card--tier-2 { --hub-accent: var(--tier-2); }
.hub-card--tier-1 { --hub-accent: var(--tier-1); }
.hub-card--tier-3,
.hub-card--tier-2,
.hub-card--tier-1 {
    border-color: color-mix(in srgb, var(--hub-accent) 35%, transparent);
}
.hub-card--tier-3:hover,
.hub-card--tier-2:hover,
.hub-card--tier-1:hover {
    border-color: color-mix(in srgb, var(--hub-accent) 60%, transparent);
}
.hub-card--tier-3 .hub-card-icon,
.hub-card--tier-2 .hub-card-icon,
.hub-card--tier-1 .hub-card-icon {
    color: var(--hub-accent);
}
.hub-card--tier-3 h3,
.hub-card--tier-2 h3,
.hub-card--tier-1 h3 {
    color: var(--hub-accent);
}

/* ---------------------------------------------------------------------------
 * .tier-section — bloco de uma tier (header com cor + corpo).
 *
 * Reusa cor via `--tier-accent` setada no próprio elemento (inline ou via
 * modifier `.tier-section--t3/--t2/--t1`). Header tem barra colorida lateral
 * sutil. Reusável em qualquer feature multi-tier.
 *
 * Estrutura HTML:
 *   <section class="tier-section tier-section--t3">
 *     <header class="tier-header">
 *       <i data-lucide="shield"></i>
 *       <h3>Third Tier (level 80+)</h3>
 *     </header>
 *     ...content...
 *   </section>
 * --------------------------------------------------------------------------- */
.tier-section {
    margin: 0 0 22px;
}
.tier-section--t3 { --tier-accent: var(--tier-3); }
.tier-section--t2 { --tier-accent: var(--tier-2); }
.tier-section--t1 { --tier-accent: var(--tier-1); }

.tier-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tier-accent, var(--color-accent-soft)) 35%, transparent);
}
.tier-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--tier-accent, var(--color-text-bright));
    text-shadow: 0 0 6px color-mix(in srgb, var(--tier-accent, transparent) 20%, transparent);
}
.tier-header svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
    color: var(--tier-accent, var(--color-accent-soft));
    filter: var(--glow-accent);
}

/* ---------------------------------------------------------------------------
 * .media-figure — img + caption centralizada com moldura sutil.
 * Usado em howitworksraids (screenshots), locationsbosses (mapas), e
 * qualquer página com captura/diagrama centralizado.
 * --------------------------------------------------------------------------- */
.media-figure {
    margin: 12px auto;
    text-align: center;
    max-width: 100%;
}
.media-figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background-color: rgba(0, 0, 0, 0.25);
    padding: 4px;
    box-sizing: border-box;
}
.media-figure figcaption,
.media-figure .media-caption {
    display: block;
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ---------------------------------------------------------------------------
 * .entity-grid + .entity-card — grid de criaturas/personagens/NPCs.
 *
 * Cada card mostra imagem + nome. Auto-fit, colapsa em mobile. Reusável em
 * monsters, NPCs, bosses, characters preview.
 * --------------------------------------------------------------------------- */
.entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 10px 0;
}
.entity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 8px 10px;
    background-color: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    text-align: center;
    min-height: 110px;
}
.entity-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 8px;
    image-rendering: pixelated; /* respeita pixel art do Tibia */
}
.entity-card-name {
    font-size: var(--font-size-sm);
    color: var(--color-text-bright);
    font-weight: 600;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------------
 * .info-card — bloco de conteúdo com header colorido + body padded.
 * Substitui o padrão antigo de `<table class="table-standard">` + `<thead><th>`
 * só pra ter uma "caixa com título". Mais leve e moderno.
 *
 * Estrutura HTML:
 *   <section class="info-card">
 *     <header class="info-card-header">Requirements and Conditions</header>
 *     <div class="info-card-body">...</div>
 *   </section>
 * --------------------------------------------------------------------------- */
.info-card {
    margin: 0 auto 14px;
    width: 95%;
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-sizing: border-box;
}
.info-card-header {
    background-color: #242438;
    color: #ffffff;
    padding: 8px 14px;
    font-weight: 700;
    font-size: var(--font-size-md);
    border-bottom: 1px solid var(--color-border);
}
.info-card-body {
    padding: var(--card-padding-y) var(--card-padding-x);
    color: var(--color-text);
    font-size: var(--font-size-md);
    line-height: 1.55;
}
.info-card-body p { margin: 0 0 10px; }
.info-card-body p:last-child { margin-bottom: 0; }
.info-card-body ul { margin: 6px 0 10px 18px; padding: 0; }
.info-card-body ul li { margin-bottom: 3px; }

/* ---------------------------------------------------------------------------
 * Itens de item (grid de ícones) — usado em market.php, items.php, shopsystem
 * --------------------------------------------------------------------------- */
.item-box {
    display: inline-block;
    margin: 3px;
    width: 32px;
    height: 32px;
    background: rgba(155, 155, 155, 0.53);
    border-radius: 10px;
    border: 1.5px solid #434040;
    vertical-align: middle;
    text-align: center;
}

/* === Task cross-reference chips (usadas em items detail + monsters detail) === */
.task-crossref { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.task-crossref__tag {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 3px;
    font-size: 11px;
    color: #cbd5e1;
    text-decoration: none;
    background: rgba(18, 22, 30, 0.45);
    text-transform: capitalize;
    letter-spacing: 0.4px;
}
.task-crossref__tag:hover { border-color: #94a3b8; color: #fff; }
.task-diff-badge--easy      { color: #5fcf95; border-color: rgba(95, 207, 149, 0.4); }
.task-diff-badge--medium    { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }
.task-diff-badge--hard      { color: #f97316; border-color: rgba(249, 115, 22, 0.4); }
.task-diff-badge--very_hard { color: #ef4444; border-color: rgba(239, 68, 68, 0.45); }