/* Andaime.Fun — shell MyAAC/tibiacom (LAYOUT-024), artes fornecidas pelo usuário (LAYOUT-026).
   Cenário e cartões em WebP local, mantendo os tokens --af-* e os painéis opacos de pergaminho.
   Carregado DEPOIS de basic.css; o conteúdo interno das páginas nativas continua usando basic.css. */

/* ---- extensões semânticas (sem alterar os tokens originais) ----
   O gradiente emerald original (0dbe78→078f5e→043b2c) dá só 3,95:1 no meio com texto claro 16px. Para SUPERFÍCIES DE AÇÃO
   com texto (botão JOGAR AGORA e o grupo de navegação aberto) usamos emerald-700→emerald-900 (#066a4b→#043b2c): #eafff5
   sobre 700 = 6,35:1 (AA). Pontos decorativos/status continuam com os tokens originais. */
:root {
  --af-gradient-emerald-strong: linear-gradient(180deg, #066a4b 0%, #05543c 55%, #043b2c 100%);
  --af-on-emerald-strong: #eafff5;
}

/* ---- base ---- */
.af-page { margin: 0; min-height: 100%; background: var(--af-color-page); color: var(--af-color-text-inverse);
  background-image: url('images/reino-alpino-fundo.2e65e8bac17e.webp');
  background-position: center top; background-size: max(100%, 1672px) auto; background-repeat: no-repeat;
  font-family: var(--af-font-editorial); font-size: var(--af-text-md); line-height: var(--af-leading-normal); }
.af-page * { box-sizing: border-box; }
.af-page a { color: var(--af-color-link); }
.af-page img { max-width: 100%; }
.af-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.af-skip { position: absolute; left: -999px; top: 0; z-index: var(--af-z-modal); background: var(--af-navy-800); color: var(--af-color-text-gold); padding: 8px 14px; border-radius: var(--af-radius-sm); }
.af-skip:focus { left: 8px; top: 8px; }

/* ---- cabeçalho: logo + placa ANDAIME.FUN (sem bandeirolas). Conjunto FIXO em 240px desktop / 178px mobile ---- */
.af-site-header { height: var(--af-header-desktop); box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--af-space-2); padding: var(--af-space-3) var(--af-space-4);
  margin: 0; text-align: center; overflow: hidden; }
.af-site-header__logo { height: 148px; width: auto; max-width: 82vw; object-fit: contain; filter: var(--af-logo-filter); display: block; }
.af-plate { position: relative; display: inline-block; padding: 8px 30px; background: var(--af-gradient-navy);
  border: var(--af-border-strong) solid var(--af-gold-700);
  box-shadow: inset 0 0 0 2px var(--af-navy-950), inset 0 0 0 4px var(--af-gold-500), var(--af-shadow-md);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
.af-plate__text { font-family: var(--af-font-display); font-weight: 700; font-size: var(--af-text-2xl);
  letter-spacing: var(--af-tracking-title); color: var(--af-color-text-gold); text-shadow: 0 2px 2px rgba(0,0,0,.55); margin: 0; }

/* ---- shell / grid ---- */
/* box-sizing:border-box (herdado) + padding horizontal encolheria o conteúdo abaixo de 1128 e deslocaria as colunas;
   somamos o padding ao max-width para que a caixa de conteúdo seja exatamente 1128 (=256+584+256+2*16), centralizada. */
.af-shell { max-width: calc(var(--af-shell-max) + var(--af-space-4) * 2); margin: 0 auto;
  padding: var(--af-space-6) var(--af-space-4) var(--af-space-12);
  display: grid; grid-template-columns: var(--af-column-side) var(--af-column-main) var(--af-column-side);
  gap: var(--af-column-gap); align-items: start; }
.af-shell__left, .af-shell__main, .af-shell__right { min-width: 0; display: flex; flex-direction: column; gap: var(--af-column-gap); }

/* ---- painel de pergaminho (FantasyFrame + PanelTitle + ContentPanel) ---- */
.af-panel { background: var(--af-color-surface); border: var(--af-frame-border); border-radius: var(--af-radius-md);
  box-shadow: var(--af-frame-ring), var(--af-shadow-md); overflow: hidden; }
.af-panel__title { margin: 0; min-height: var(--af-panel-title-height); display: flex; align-items: center; gap: var(--af-space-3);
  padding: 0 var(--af-space-4); background: var(--af-gradient-navy); border-bottom: var(--af-border-strong) solid var(--af-gold-700);
  color: var(--af-color-text-gold); font-family: var(--af-font-display); font-weight: 700; font-size: var(--af-text-lg);
  letter-spacing: var(--af-tracking-title); text-transform: uppercase; line-height: 1.1; }
.af-panel__title .fa, .af-panel__title i { color: var(--af-gold-400); }
.af-panel__body { padding: var(--af-space-5); color: var(--af-color-text); }
.af-panel__body a { color: var(--af-color-link); }

/* MyAAC usa 1px nas molduras .TableContainer/.TableContentAndRightShadow.
   No tema antigo, .Content .BoxContent td restaurava a fonte das células.
   O shell novo não tem esses ancestrais: restaurar só o conteúdo tabular,
   inclusive tabelas aninhadas de conta/personagem, mantendo sombras decorativas. */
.af-shell__main .TableContainer td,
.af-shell__main .TableContainer th {
  font-family: var(--af-font-ui);
  font-size: var(--af-text-md);
  line-height: var(--af-leading-normal);
  color: var(--af-color-text);
}

/* ---- botões ---- */
.af-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--af-space-2);
  min-height: var(--af-control-height); width: 100%; box-sizing: border-box; padding: 0 var(--af-space-4);
  border: var(--af-border-hairline) solid rgba(0,0,0,.25); border-radius: var(--af-radius-sm); cursor: pointer;
  font-family: var(--af-font-ui); font-weight: 700; font-size: var(--af-text-md); text-decoration: none; text-align: center;
  transition: filter var(--af-duration-fast) var(--af-ease-standard), background var(--af-duration-fast) var(--af-ease-standard); }
.af-btn:hover { filter: brightness(1.06); }
.af-btn:focus-visible { outline: 3px solid var(--af-color-focus); outline-offset: 2px; }
/* cor combinada .af-btn.af-btn--X (0,2,0) para vencer .af-page a (0,1,1) em botões que são <a> */
.af-btn.af-btn--primary { background: var(--af-blue-action-600); color: #fff; border-color: var(--af-blue-action-700); }
.af-btn.af-btn--gold { background: var(--af-gradient-gold); color: #2a1a06; border-color: var(--af-gold-800); }
.af-btn.af-btn--play { background: var(--af-gradient-emerald-strong); color: var(--af-on-emerald-strong); border-color: var(--af-emerald-900); font-family: var(--af-font-display); letter-spacing: var(--af-tracking-label); }
.af-btn.af-btn--play:hover { filter: none; background: linear-gradient(180deg, #07734f 0%, #065d42 55%, #05452f 100%); }
.af-btn.af-btn--ghost { background: var(--af-navy-800); color: var(--af-color-text-gold); border-color: var(--af-gold-700); }
.af-btn.af-btn--danger { background: var(--af-danger-600); color: #fff; border-color: var(--af-danger-700); }
.af-btn .fa, .af-btn i { color: inherit; }

/* ---- flash OAuth / avisos ---- */
.af-flash { margin: 0 0 var(--af-space-4); padding: var(--af-space-3) var(--af-space-4); border-radius: var(--af-radius-sm);
  border: var(--af-border-hairline) solid; font-family: var(--af-font-ui); font-size: var(--af-text-sm); }
.af-flash--info { background: var(--af-parchment-200); border-color: var(--af-gold-700); color: var(--af-color-text); }
.af-flash--success { background: #e4f7ee; border-color: var(--af-emerald-700); color: var(--af-emerald-900); }
.af-flash--error { background: #fbe7e5; border-color: var(--af-danger-700); color: var(--af-danger-700); }

/* ---- conta (AccountCard) ---- */
.af-account__summary { margin: 0 0 var(--af-space-3); font-size: var(--af-text-sm); color: var(--af-color-text-muted); }
.af-account__summary b { color: var(--af-color-text); }
.af-account .af-btn + .af-btn { margin-top: var(--af-space-2); }
.af-account__link { display: inline-block; margin-top: var(--af-space-3); font-size: var(--af-text-sm); font-weight: 700; color: var(--af-color-link); }

/* ---- navegação (acordeão acessível via <details>/<summary>) ---- */
.af-nav { display: flex; flex-direction: column; gap: var(--af-space-2); }
.af-nav__group { border: var(--af-frame-border); border-radius: var(--af-radius-sm); overflow: hidden; box-shadow: var(--af-shadow-xs); }
.af-nav__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--af-space-3);
  min-height: var(--af-control-height); padding: 0 var(--af-space-4); background: var(--af-gradient-navy); color: var(--af-color-text-gold);
  font-family: var(--af-font-display); font-weight: 700; font-size: var(--af-text-md); letter-spacing: var(--af-tracking-label); text-transform: uppercase; }
.af-nav__summary::-webkit-details-marker { display: none; }
.af-nav__summary .af-nav__chev { margin-left: auto; transition: transform var(--af-duration-fast) var(--af-ease-standard); color: var(--af-gold-400); }
.af-nav__group[open] .af-nav__chev { transform: rotate(90deg); }
.af-nav__summary:focus-visible { outline: 3px solid var(--af-color-focus); outline-offset: -3px; }
.af-nav__group[open] .af-nav__summary { background: var(--af-gradient-emerald-strong); color: var(--af-on-emerald-strong); }
.af-nav__list { list-style: none; margin: 0; padding: var(--af-space-2); background: var(--af-navy-900); }
.af-nav__list a { display: flex; align-items: center; gap: var(--af-space-2); min-height: var(--af-control-height); padding: 6px var(--af-space-3);
  color: var(--af-parchment-200); text-decoration: none; border-radius: var(--af-radius-xs); font-family: var(--af-font-ui); font-size: var(--af-text-sm); }
.af-nav__list a:hover { background: var(--af-navy-700); color: #fff; }
.af-nav__list a[aria-current="page"] { background: var(--af-navy-700); color: var(--af-color-text-gold); font-weight: 700; }
.af-nav__list a .fa { color: var(--af-gold-500); width: 1em; text-align: center; }
.af-cta-play { margin-top: var(--af-space-1); }

/* ---- cards direitos: arte decorativa com proporção reservada antes do download ---- */
.af-card { background: var(--af-color-surface); border: var(--af-frame-border); border-radius: var(--af-radius-md);
  box-shadow: var(--af-frame-ring), var(--af-shadow-sm); overflow: hidden; }
.af-card__title { margin: 0; min-height: 44px; display: flex; align-items: center; gap: var(--af-space-2); padding: 0 var(--af-space-4);
  background: var(--af-gradient-navy); border-bottom: var(--af-border-strong) solid var(--af-gold-700); color: var(--af-color-text-gold);
  font-family: var(--af-font-display); font-weight: 700; font-size: var(--af-text-sm); letter-spacing: var(--af-tracking-label); text-transform: uppercase; line-height: 1.1; }
.af-card__body { padding: var(--af-space-4); color: var(--af-color-text); font-size: var(--af-text-sm); }
.af-card__art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--af-navy-900); border-bottom: 1px solid var(--af-gold-700); }
.af-card__body p { margin: 0 0 var(--af-space-3); }
.af-status { display: inline-flex; align-items: center; gap: var(--af-space-2); font-weight: 700; font-family: var(--af-font-ui); }
.af-status__dot { width: 10px; height: 10px; border-radius: var(--af-radius-pill); background: var(--af-color-text-muted); box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.af-status--online .af-status__dot { background: var(--af-color-online); box-shadow: 0 0 6px var(--af-emerald-400); }
.af-status--offline .af-status__dot { background: var(--af-color-offline); }
.af-status--online { color: var(--af-emerald-700); }
.af-status--offline { color: var(--af-danger-600); }
.af-status--check { color: var(--af-color-text-muted); }
.af-card__count { font-size: var(--af-text-sm); color: var(--af-color-text-muted); margin: var(--af-space-2) 0 var(--af-space-3); }

.af-footer { max-width: var(--af-shell-max); margin: 0 auto; padding: var(--af-space-6) var(--af-space-4) var(--af-space-12);
  color: var(--af-parchment-400); font-family: var(--af-font-ui); font-size: var(--af-text-xs); text-align: center; }
.af-footer a { color: var(--af-gold-300); }

/* ---- conteúdo nativo largo: região de rolagem horizontal REAL e acessível (não esconder overflow) ---- */
/* tabelas nativas (ranking, online, casas…) podem ser mais largas que a coluna central em telas estreitas; o wrapper
   .af-hscroll rola horizontalmente e é focável por teclado (tabindex=0 no PHP) sem clipar colunas/controles. */
.af-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.af-hscroll:focus-visible { outline: 3px solid var(--af-color-focus); outline-offset: 2px; }
.af-hscroll > * { min-width: 0; }

/* cartões .andz (login/cadastro/recuperação): o painel af já é a moldura → neutraliza a moldura interna e harmoniza
   fontes/cores com os tokens, sem alterar estrutura/campos/actions/contratos. */
/* controles de formulário do painel central usam Inter (inputs não herdam font-family do body por padrão → ficavam Arial) */
.af-shell__main :is(input, select, textarea, button) { font-family: var(--af-font-ui); }
.af-shell__main .andz { max-width: 100%; margin: 0; font-family: var(--af-font-ui); color: var(--af-color-text); }
.af-shell__main .andz .brand { display: none; } /* a identidade já vem do cabeçalho/placa */
.af-shell__main .andz .card { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; }
.af-shell__main .andz :is(h1, h2, h3) { margin-top: 0; font-family: var(--af-font-display); color: var(--af-navy-800); }
.af-shell__main .andz a { color: var(--af-color-link); }
.af-shell__main .andz label { color: var(--af-color-text); }

/* ---- homepage: notícia em destaque + compactas com resumo ---- */
.af-news { margin: 0 0 var(--af-space-5); }
.af-news--featured { padding-bottom: var(--af-space-4); border-bottom: var(--af-border-hairline) solid var(--af-parchment-400); }
.af-news__title { margin: 0 0 var(--af-space-1); font-family: var(--af-font-display); font-size: var(--af-text-xl); line-height: var(--af-leading-tight); }
.af-news__title a { color: var(--af-navy-800); text-decoration: none; }
.af-news__title a:hover { text-decoration: underline; }
.af-news__date { margin: 0 0 var(--af-space-2); font-family: var(--af-font-ui); font-size: var(--af-text-xs); color: var(--af-color-text-muted); }
.af-news__date .fa { margin-right: 4px; color: var(--af-gold-600); }
.af-news__summary { margin: 0 0 var(--af-space-2); color: var(--af-color-text); }
.af-news__more { display: inline-block; font-family: var(--af-font-ui); font-weight: 700; font-size: var(--af-text-sm); color: var(--af-color-link); text-decoration: none; }
.af-news__more:hover { text-decoration: underline; }
.af-news__list { list-style: none; margin: 0; padding: 0; }
.af-news__item { padding: var(--af-space-3) 0; border-bottom: var(--af-border-hairline) solid var(--af-parchment-300); }
.af-news__item-title { display: inline-block; font-family: var(--af-font-display); font-weight: 700; font-size: var(--af-text-md); color: var(--af-navy-800); text-decoration: none; }
.af-news__item-title:hover { text-decoration: underline; }
.af-news__item .af-news__date { display: block; margin: 2px 0 4px; }
.af-news__foot { margin: var(--af-space-4) 0 0; }
.af-news__empty { color: var(--af-color-text-muted); font-style: italic; }

/* ---- neutraliza a moldura GIF legada das caixas de conteúdo nativas (notícias) dentro do painel ----
   Só apresentação: remove bordas/cantos/scroll em GIF (cenário legado) mantendo texto, imagens editoriais,
   datas, "leia mais", comentários e controles de administração. */
.af-panel__body .Box .Corner-tl,
.af-panel__body .Box .Corner-tr,
.af-panel__body .Box .Corner-bl,
.af-panel__body .Box .Corner-br,
.af-panel__body .Box .CornerWrapper-b,
.af-panel__body .Box .Border_1,
.af-panel__body .Box #ContentBoxHeadline,
.af-panel__body .Box .Title,
.af-panel__body .Box .BorderTitleText,
.af-panel__body .NewsHeadlineBackground { display: none !important; }
.af-panel__body .Box .Border_2,
.af-panel__body .Box .Border_3 { background: none !important; }
.af-panel__body .Box .BoxContent { background: none !important; padding: 0 !important; }
.af-panel__body .Box { margin: 0 0 var(--af-space-6); }
.af-panel__body .NewsHeadline { position: relative; min-height: 0; margin: 0 0 var(--af-space-2);
  padding: var(--af-space-1) 0; border-bottom: var(--af-border-hairline) solid var(--af-parchment-400); }
.af-panel__body .NewsHeadlineText { position: static !important; font-family: var(--af-font-display); font-weight: 700;
  color: var(--af-navy-800); background: none !important; }
.af-panel__body .NewsHeadlineDate { color: var(--af-color-text-muted); }

/* ---- responsivo ---- */
@media (max-width: 1180px) {
  .af-shell { grid-template-columns: var(--af-column-side) minmax(0, 1fr); }
  .af-shell__main { grid-column: 2; grid-row: 1 / span 2; }
  .af-shell__left { grid-column: 1; grid-row: 1; }
  .af-shell__right { grid-column: 1; grid-row: 2; }
}
@media (max-width: 760px) {
  .af-page { background-size: auto 760px; background-position: 60% top; }
  .af-site-header { height: var(--af-header-mobile); padding: var(--af-space-2) var(--af-space-3); gap: var(--af-space-1); }
  .af-site-header__logo { height: 104px; width: auto; }
  .af-plate { padding: 6px 22px; }
  .af-plate__text { font-size: var(--af-text-xl); }
  .af-shell { grid-template-columns: 1fr; padding: var(--af-space-4) 10px var(--af-space-10); }
  .af-shell__left, .af-shell__main, .af-shell__right { grid-column: 1; }
  .af-shell__main { grid-row: 1; }
  .af-shell__left { grid-row: 2; }
  .af-shell__right { grid-row: 3; }
}