/* =============================================================================
   D2BR — Guia (conteúdo importado do The Arreat Summit)
   Extensão do design system Horadric (css/d2-ui.css). Nada de tokens novos de
   cor fora do vocabulário já existente: o único acento cromático extra é o
   código de raridade de item do próprio D2 (runa/único/set/mágico/raro), que
   aqui é informação, não decoração — mesma regra que o tooltip de itens usa.

   Três telas:
     .guia-hub     -> grade de seções (a "estante")
     .guia-secao   -> índice de uma seção
     .guia-pagina  -> leitura longa: trilho lateral + conteúdo importado
   ============================================================================= */

#main-content .guia {
  --rail-w: 260px;
  /* Raridades de item — iguais às do tooltip de build (public/css/build_item_tooltip.css) */
  --it-rune: #e2903f;
  --it-unique: #c7b377;
  --it-set: #00c800;
  --it-magic: #6f6fff;
  --it-rare: #e8e06b;
  --it-craft: #d9a05b;
}

/* ---------------------------------------------------------------------------
   Submenu "Guia" no cabeçalho — 12 itens não cabem numa coluna só, então no
   desktop o dropdown vira duas colunas. No mobile o classy-nav já achata o
   submenu (.breakpoint-on), e ali a coluna única continua valendo.
   --------------------------------------------------------------------------- */
.header-area .egames-main-menu .breakpoint-off .classynav ul li .dropdown.guia-dropdown {
  min-width: 452px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4px;
}

.header-area .egames-main-menu .breakpoint-off .classynav ul li .dropdown.guia-dropdown .guia-menu-wide {
  grid-column: 1 / -1;
}

.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-sep {
  padding: 12px 14px 5px;
  pointer-events: none;
}

.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-sep span {
  display: block;
  font-family: var(--font-display-light);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rune);
  border-top: 1px solid rgba(233, 198, 107, .14);
  padding-top: 10px;
}

.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-all {
  color: var(--gold-soft) !important;
}

/* Forja — conteúdo do mod, e o único item em destaque do submenu: brasa de
   forja (âmbar --rune sobre dourado) na linha inteira, no topo. O acento é o
   mesmo vocabulário do design system; o que o separa dos outros itens é o
   fundo e o brilho, não uma cor nova. */
.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-forja {
  color: var(--gold-soft) !important;
  font-family: var(--font-display-light);
  font-size: 15px !important;
  letter-spacing: .06em;
  background:
    linear-gradient(180deg, rgba(226, 144, 63, .22), rgba(199, 155, 70, .1));
  border: 1px solid rgba(226, 144, 63, .45);
  box-shadow: 0 0 18px rgba(226, 144, 63, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
  margin: 2px 6px 8px;
}

.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-forja .fa {
  color: var(--rune) !important;
  font-size: 15px !important;
  text-shadow: 0 0 12px var(--rune-glow);
}

.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-forja:hover,
.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-forja:focus {
  color: #fff5da !important;
  background: linear-gradient(180deg, rgba(226, 144, 63, .34), rgba(199, 155, 70, .16));
  border-color: var(--rune);
  box-shadow: 0 0 26px rgba(226, 144, 63, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* A barra de acento à esquerda que os outros itens só ganham no hover: aqui
   ela já nasce acesa. */
.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-forja::before {
  height: 58%;
}

.header-area .egames-main-menu .classynav ul li .dropdown .guia-menu-badge {
  margin-left: auto;
  padding: 3px 9px;
  /* o tema dá line-height alto aos itens do menu: sem zerar aqui a pílula vira
     um círculo */
  line-height: 1.35;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Cabeçalho comum das três telas
   --------------------------------------------------------------------------- */
#main-content .guia-head {
  margin-bottom: clamp(26px, 4vw, 42px);
}

#main-content .guia-head .d2-lead {
  margin-top: 18px;
}

/* Migalha de pão: Guia / Itens / Runes */
#main-content .guia-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--font-display-light);
}

#main-content .guia-crumbs li::after {
  content: "›";
  margin-left: 8px;
  color: var(--line-strong);
}

#main-content .guia-crumbs li:last-child::after {
  content: none;
}

#main-content .guia-crumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease;
}

#main-content .guia-crumbs a:hover,
#main-content .guia-crumbs a:focus {
  color: var(--gold-soft);
}

#main-content .guia-crumbs .is-current {
  color: var(--gold-soft);
}

/* ---------------------------------------------------------------------------
   Hub e índice de seção — grades de cartão
   --------------------------------------------------------------------------- */
#main-content .guia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
}

#main-content .guia-tile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 20px 22px;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}

#main-content .guia-tile:hover,
#main-content .guia-tile:focus {
  text-decoration: none;
  color: inherit;
}

/* Destaque do hub: a Forja é conteúdo do servidor, não do Arreat Summit — fica
   acima da grade, na largura toda, com o mesmo âmbar do item do menu. */
#main-content .guia-tile-forja {
  margin-bottom: 22px;
  align-items: center;
  border-color: rgba(226, 144, 63, .42);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(226, 144, 63, .14), transparent 60%),
    linear-gradient(180deg, #1b1611, #101214);
  box-shadow: 0 0 24px rgba(226, 144, 63, .1);
}

#main-content .guia-tile-forja:hover {
  border-color: var(--rune);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 30px rgba(226, 144, 63, .22);
}

#main-content .guia-tile-forja .guia-sigil {
  border-color: rgba(226, 144, 63, .5);
  color: var(--rune);
}

#main-content .guia-tile-forja .guia-tile-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

#main-content .guia-tile-forja .guia-tile-text b {
  color: var(--gold-soft);
}

/* Sigilo da seção: arte original do guia quando existe, glifo como reserva. */
#main-content .guia-sigil {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: radial-gradient(80% 80% at 50% 20%, rgba(226, 144, 63, .16), rgba(0, 0, 0, .45));
  color: var(--gold);
  font-size: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

#main-content .guia-sigil img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

#main-content .guia-tile-body {
  min-width: 0;
}

#main-content .guia-tile-title {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .03em;
  color: var(--gold-soft);
  margin-bottom: 6px;
}

#main-content .guia-tile-text {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

#main-content .guia-tile-count {
  display: inline-block;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rune);
}

/* ---------------------------------------------------------------------------
   Largura da casca
   O .container do bootstrap para em 1140px, largura pensada para uma coluna de
   texto. O guia é a tela mais densa do site — trilho de 260px mais as tabelas
   do conteúdo importado, que têm até 9 colunas — e nesse limite sobrava pouco
   mais de 700px para o conteúdo. Em telas grandes a casca cresce.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  #main-content .guia > .container {
    max-width: min(1560px, 100% - 40px);
  }
}

/* ---------------------------------------------------------------------------
   Leitura longa — trilho + conteúdo
   --------------------------------------------------------------------------- */
#main-content .guia-layout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* Seções de página única (Santuários, Créditos) não têm trilho. Sem derrubar a
   coluna dele o conteúdo seria auto-posicionado no slot de --rail-w e a página
   inteira ficaria espremida em 260px. */
#main-content .guia-layout.is-solo {
  grid-template-columns: minmax(0, 1fr);
}

/* O trilho: coluna de "slots" gravados, no espírito do inventário do D2. */
#main-content .guia-rail {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(29, 32, 36, .92), rgba(15, 17, 19, .96));
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

#main-content .guia-rail::-webkit-scrollbar {
  width: 8px;
}

#main-content .guia-rail::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
}

#main-content .guia-rail-title {
  font-family: var(--font-display-light);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rune);
  margin: 2px 0 12px;
  padding-left: 10px;
}

#main-content .guia-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#main-content .guia-rail a {
  display: block;
  position: relative;
  padding: 8px 10px 8px 22px;
  border-radius: 7px;
  color: var(--txt);
  opacity: .74;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}

#main-content .guia-rail a::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 1px;
  background: var(--line-strong);
  transform: rotate(45deg);
  transition: background .18s ease, box-shadow .18s ease;
}

#main-content .guia-rail a:hover,
#main-content .guia-rail a:focus {
  opacity: 1;
  color: var(--gold-soft);
  background: rgba(233, 198, 107, .06);
  text-decoration: none;
}

#main-content .guia-rail .is-active a {
  opacity: 1;
  color: var(--gold-soft);
  background: rgba(233, 198, 107, .1);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

#main-content .guia-rail .is-active a::before {
  background: var(--gold);
  box-shadow: 0 0 8px var(--rune-glow);
}

/* Disclosure do trilho no mobile */
#main-content .guia-rail-mobile {
  display: none;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

#main-content .guia-rail-mobile > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--font-display-light);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold-soft);
  list-style: none;
}

#main-content .guia-rail-mobile > summary::-webkit-details-marker {
  display: none;
}

#main-content .guia-rail-mobile > summary::after {
  content: "▾";
  float: right;
  color: var(--rune);
}

#main-content .guia-rail-mobile[open] > summary::after {
  content: "▴";
}

#main-content .guia-rail-mobile .guia-rail {
  position: static;
  max-height: 52vh;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

/* ---------------------------------------------------------------------------
   Conteúdo importado — tipografia de leitura
   --------------------------------------------------------------------------- */
#main-content .as-content {
  color: var(--txt);
  font-size: 16px;
  line-height: 1.75;
}

/* A medida de leitura vale para o texto corrido, não para a coluna inteira:
   tabela, imagem e título usam toda a largura disponível. Era o .as-content
   que carregava o max-width, e com ele as tabelas de item ficavam espremidas
   em 78ch mesmo sobrando espaço ao lado. */
#main-content .as-content > p,
#main-content .as-content > ul,
#main-content .as-content > ol,
#main-content .as-content > dl,
#main-content .as-content > blockquote {
  max-width: 78ch;
}

#main-content .as-content > p,
#main-content .as-content li {
  margin: 0 0 18px;
}

#main-content .as-content ul,
#main-content .as-content ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

#main-content .as-content li {
  margin-bottom: 8px;
}

#main-content .as-content b,
#main-content .as-content strong {
  color: var(--gold-soft);
  font-weight: 700;
}

/* Hierarquia reconstruída na importação: <h2> vinha do título em imagem e
   <h3> do "<B>Assunto</B><BR>" que o guia original usava como subtítulo. */
#main-content .as-content h1,
#main-content .as-content h2,
#main-content .as-content h3,
#main-content .as-content h4 {
  font-family: var(--font-display);
  color: var(--gold-soft);
  letter-spacing: .03em;
}

#main-content .as-content h2 {
  font-size: clamp(21px, 3vw, 27px);
  margin: 46px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

#main-content .as-content h2:first-child {
  margin-top: 0;
}

/* Alvo de deep link (/guia?p=items/sets/sets7#omegasshadow): o menu do topo é
   fixo em 70px, então a âncora precisa parar abaixo dele — encostada no limite
   da janela, o título ficaria escondido atrás da barra. */
#main-content .as-content [id] {
  scroll-margin-top: 88px;
}

#main-content .as-content h3 {
  font-family: var(--font-display-light);
  font-size: 18px;
  margin: 30px 0 10px;
}

#main-content .as-content h3 + p {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Nota (o <blockquote> do original que traz texto explicativo)
   O tema base pinta blockquote de azul claro com texto branco — ilegível aqui.
   Vira um painel rebaixado, mais escuro que a página, com fio dourado à
   esquerda: o mesmo vocabulário do inventário do D2, sem competir com as
   tabelas, que já são o elemento de destaque.
   --------------------------------------------------------------------------- */
#main-content .as-content blockquote {
  margin: 0 0 24px;
  padding: 18px 22px;
  border: 0;
  border-left: 2px solid var(--gold-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: linear-gradient(90deg, rgba(233, 198, 107, .06), rgba(11, 12, 13, .5));
  color: var(--txt);
  font-size: 15.5px;
  line-height: 1.7;
  quotes: none;
}

#main-content .as-content blockquote::before,
#main-content .as-content blockquote::after {
  content: none;
}

#main-content .as-content blockquote > p:last-child,
#main-content .as-content blockquote > h3:first-child {
  margin-bottom: 0;
}

/* O <b> que abre a nota é o nome dela. */
#main-content .as-content blockquote h3:first-child {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Listas, ênfases e blocos monoespaçados que vêm do conteúdo
   --------------------------------------------------------------------------- */
#main-content .as-content ul {
  list-style: none;
  padding-left: 4px;
}

#main-content .as-content ul > li {
  position: relative;
  padding-left: 20px;
}

#main-content .as-content ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--rune);
  transform: rotate(45deg);
}

#main-content .as-content ol {
  list-style: decimal;
}

/* Sublinhado do original: mantém a ênfase sem se disfarçar de link. */
#main-content .as-content u {
  text-decoration: none;
  color: var(--gold-soft);
  border-bottom: 1px dotted rgba(233, 198, 107, .45);
}

#main-content .as-content i,
#main-content .as-content em {
  color: #dcd6c8;
  font-style: italic;
}

#main-content .as-content pre,
#main-content .as-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--gold-soft);
  background: rgba(11, 12, 13, .6);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

#main-content .as-content pre {
  padding: 14px 16px;
  margin: 0 0 22px;
  overflow-x: auto;
  white-space: pre-wrap;
}

#main-content .as-content code {
  padding: 1px 5px;
}

#main-content .as-content a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 198, 107, .3);
  transition: color .18s ease, border-color .18s ease;
}

#main-content .as-content a:hover,
#main-content .as-content a:focus {
  color: var(--gold-soft);
  border-bottom-color: var(--gold-soft);
}

#main-content .as-content a.as-ext::after {
  content: "↗";
  font-size: .8em;
  margin-left: 3px;
  opacity: .7;
}

/* Link que é só uma imagem (miniatura de mapa) não precisa do indicador. */
#main-content .as-content a:has(img)::after {
  content: none;
}

#main-content .as-content a.as-zoom {
  display: inline-block;
  border-bottom: 0;
  line-height: 0;
}

#main-content .as-content a.as-zoom img {
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

#main-content .as-content a.as-zoom:hover img,
#main-content .as-content a.as-zoom:focus img {
  border-color: var(--line-strong);
  box-shadow: 0 0 18px rgba(226, 144, 63, .22);
}

#main-content .as-content img {
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Dentro de tabela o `max-width: 100%` global se resolve contra a célula, e o
   navegador espremia os ícones de runa/gema de 28px para 11px. Aqui o ícone
   mantém o tamanho declarado — quem rola é o invólucro da tabela. */
#main-content .as-content table img {
  max-width: none;
}

/* Os conectores entre mapas são traços claros sobre fundo preto chapado,
   desenhados para a página preta de 2001. Em cima do painel eles viravam
   barras pretas; o blend descarta o preto e deixa só o traço. */
#main-content .as-content img[src*="/maps/connect"] {
  mix-blend-mode: screen;
}

/* Sprites do jogo: mantém o pixel duro em vez de borrar no upscale. */
#main-content .as-content img[width]:not([width="0"]) {
  image-rendering: pixelated;
}

#main-content .as-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 30px 0;
}

#main-content .as-content .as-center {
  text-align: center;
}

/* Código de raridade do D2 — é informação vinda do conteúdo original. */
#main-content .as-content .as-c-rune { color: var(--it-rune); }
#main-content .as-content .as-c-unique { color: var(--it-unique); }
#main-content .as-content .as-c-set { color: var(--it-set); }
#main-content .as-content .as-c-magic { color: var(--it-magic); }
#main-content .as-content .as-c-rare { color: var(--it-rare); }
#main-content .as-content .as-c-craft { color: var(--it-craft); }
#main-content .as-content .as-c-danger { color: var(--blood-soft); }
#main-content .as-content .as-c-white { color: #fff; }
#main-content .as-content .as-c-muted { color: var(--muted); }

/* ---------------------------------------------------------------------------
   Tabelas importadas — largas por natureza (dano por nível de skill)
   --------------------------------------------------------------------------- */
#main-content .as-content .as-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(11, 12, 13, .5);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

#main-content .as-content .as-table-wrap::-webkit-scrollbar {
  height: 9px;
}

#main-content .as-content .as-table-wrap::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
}

#main-content .as-content table.as-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

#main-content .as-content table.as-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #23262a, #17191c);
  color: var(--gold-soft);
  font-family: var(--font-display-light);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11.5px;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

#main-content .as-content table.as-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(233, 198, 107, .07);
  vertical-align: top;
}

#main-content .as-content table.as-table tr:last-child td {
  border-bottom: 0;
}

#main-content .as-content table.as-table tbody tr:nth-child(even) td,
#main-content .as-content table.as-table tr:nth-child(even) td {
  background: rgba(233, 198, 107, .03);
}

#main-content .as-content table.as-table tr:hover td {
  background: rgba(233, 198, 107, .07);
}

#main-content .as-content table.as-table .as-tc { text-align: center; }
#main-content .as-content table.as-table .as-tr { text-align: right; }

/* Tabela aninhada: era layout no original, aqui vira só agrupamento. */
#main-content .as-content table.as-table table.as-table {
  border: 0;
  background: none;
}

#main-content .as-content table.as-table table.as-table th {
  position: static;
}

/* ---------------------------------------------------------------------------
   Rodapé da página: fonte original + anterior/próxima
   --------------------------------------------------------------------------- */
#main-content .guia-foot {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

#main-content .guia-prevnext {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

#main-content .guia-prevnext a {
  flex: 1 1 220px;
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--txt);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

#main-content .guia-prevnext a:hover,
#main-content .guia-prevnext a:focus {
  border-color: var(--line-strong);
  background: var(--panel-2);
  text-decoration: none;
}

#main-content .guia-prevnext .is-next {
  text-align: right;
}

#main-content .guia-prevnext small {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rune);
  margin-bottom: 3px;
}

#main-content .guia-prevnext span {
  color: var(--gold-soft);
  font-family: var(--font-display-light);
  font-size: 15px;
}

#main-content .guia-fonte {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

#main-content .guia-fonte a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(233, 198, 107, .3);
}

#main-content .guia-fonte a:hover {
  color: var(--gold-soft);
}

/* ---------------------------------------------------------------------------
   Busca dentro da seção
   --------------------------------------------------------------------------- */
#main-content .guia-busca {
  position: relative;
  margin-bottom: 16px;
}

#main-content .guia-busca input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  font-size: 13px;
  color: var(--txt);
  background: rgba(11, 12, 13, .6);
  border: 1px solid var(--line);
  border-radius: 7px;
}

#main-content .guia-busca input:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 2px rgba(233, 198, 107, .12);
}

#main-content .guia-busca .fa {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}

#main-content .guia-vazio {
  color: var(--muted);
  font-size: 13px;
  padding: 8px 10px;
}

/* ---------------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #main-content .guia-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #main-content .guia-layout > .guia-rail {
    display: none;
  }

  #main-content .guia-rail-mobile {
    display: block;
  }
}

@media (max-width: 575px) {
  #main-content .guia-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #main-content .as-content {
    font-size: 15px;
  }

  #main-content .as-content table.as-table {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content .guia-tile,
  #main-content .guia-rail a,
  #main-content .guia-prevnext a {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Sumário "nesta página"
   Os títulos do conteúdo importado passaram a ter âncora, então cada página
   ganha navegação própria. O partial decide quando aparecer (a partir de 3
   títulos) e quando fluir em duas colunas (acima de 10) — aqui é só a forma.
   Segue o idioma do trilho lateral: mesmo rótulo em versalete âmbar, mesma
   moldura dourada fina.
   --------------------------------------------------------------------------- */
#main-content .guia-sumario {
  margin: 0 0 30px;
  padding: 14px 18px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-deep);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .02);
}

#main-content .guia-sumario-titulo {
  font-family: var(--font-display-light);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rune);
  margin: 0 0 10px;
}

#main-content .guia-sumario ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* F.A.Q. chega a 38 títulos: em coluna única viraria um paredão antes do
   conteúdo. break-inside impede que um item seja cortado ao meio na quebra. */
#main-content .guia-sumario.is-longo ul {
  columns: 2;
  column-gap: 32px;
}

#main-content .guia-sumario li {
  margin: 4px 0;
  line-height: 1.45;
  break-inside: avoid;
}

/* O recuo diz o nível do título — é a estrutura da página, não decoração. */
#main-content .guia-sumario-n3 { padding-left: 14px; }
#main-content .guia-sumario-n4,
#main-content .guia-sumario-n5,
#main-content .guia-sumario-n6 { padding-left: 28px; }

#main-content .guia-sumario a {
  color: var(--txt);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

#main-content .guia-sumario a:hover,
#main-content .guia-sumario a:focus-visible {
  color: var(--gold-soft);
  border-bottom-color: var(--line-strong);
}

/* O cabeçalho do site tem 70px e gruda no topo ao rolar. Sem esta folga a
   âncora para atrás dele e o título fica invisível justamente ao ser buscado. */
#main-content .as-content h1,
#main-content .as-content h2,
#main-content .as-content h3,
#main-content .as-content h4,
#main-content .as-content h5,
#main-content .as-content h6 {
  scroll-margin-top: 86px;
}

/* No celular não cabe a segunda coluna. Sem mais nada, porém, o índice de uma
   página de F.A.Q. (34 perguntas) viraria 2800px de rolagem antes da primeira
   linha do conteúdo — pior que não ter índice. O teto de altura vale só para as
   listas longas: as curtas continuam inteiras na tela. */
/* No celular não cabe a segunda coluna, e sem um teto o índice de uma página de
   F.A.Q. (34 perguntas) viraria 2800px de rolagem antes da primeira linha do
   conteúdo.
   "columns: auto" e não "columns: 1": com column-count declarado a caixa
   CONTINUA sendo multi-coluna, e uma caixa multi-coluna de altura limitada
   transborda de LADO, não para baixo — com "columns: 1" o resultado medido foi
   7 colunas somando 2040px de largura e 29 dos 34 itens fora da tela. */
@media (max-width: 575px) {
  #main-content .guia-sumario.is-longo ul {
    columns: auto;
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------------------------------------------------------------------------
   Páginas fixas do servidor dentro do guia (Sunder Charms, The Forbidden Cow
   Level). Elas reaproveitam .guia-pagina + .as-content inteiros; o que segue é
   só o punhado de peças que o conteúdo importado não tem.
   Nenhuma cor nova: os elementos usam o mesmo vocabulário de raridade/dano já
   declarado em #main-content .guia (--it-*) mais o --blood e o --rune do
   design system.
   --------------------------------------------------------------------------- */

/* Cartão de abertura do Sunder Charms: o ícone do Grand Charm ao lado da lista
   que diz o que eles são. Grade e não float — o ícone é 1x3 e alto, e com float
   a lista escorreria por baixo dele. */
#main-content .sunder-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  max-width: 78ch;
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(11, 12, 13, .5);
}

#main-content .sunder-hero img {
  /* arte de 1.13d: ampliar borrando seria pior que não ampliar */
  image-rendering: pixelated;
  margin: 0;
}

#main-content .sunder-hero ul {
  margin: 0;
}

#main-content .sunder-hero li:last-child {
  margin-bottom: 0;
}

/* A etiqueta do elemento na tabela dos seis charms. A cor É a informação (é
   assim que o jogo mostra dano elemental), por isso ela sobrevive sozinha: o
   nome do elemento está escrito dentro da etiqueta, não só pintado. */
#main-content .sunder-el {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

#main-content .sunder-el.is-cold { color: #7fb8e8; }
#main-content .sunder-el.is-fire { color: #e07a4a; }
#main-content .sunder-el.is-light { color: #e8e06b; }
#main-content .sunder-el.is-pois { color: #7fc24a; }
#main-content .sunder-el.is-phys { color: var(--muted); }
#main-content .sunder-el.is-magic { color: var(--it-magic); }

/* A arte de abertura da página de evento. Moldura fina e largura própria: é
   uma imagem de 612px, esticá-la para a coluna inteira só a borraria. */
#main-content .evento-banner {
  max-width: 612px;
  margin: 0 0 28px;
}

#main-content .evento-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}

@media (max-width: 575px) {
  #main-content .sunder-hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}