/*
 * LAYOUT-028: blueprint adaptado ao tema MyAAC, última camada CSS.
 * Ele pressupõe que o template adicione os modificadores/classes descritos
 * em PROMPT_CODEX_CORRECAO_VISUAL_V3.md e que os tokens v1 + v2 estejam ativos.
 */

.af-page {
  min-height: 100%;
  background-color: var(--af-color-page);
  background-image:
    var(--af-gradient-wallpaper-overlay),
    var(--af-asset-wallpaper-desktop);
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

/* Marca composta: arte sem texto + wordmark HTML acessível. */
.af-site-header {
  position: relative;
  height: var(--af-header-desktop);
  padding: 0;
  overflow: visible;
  isolation: isolate;
}

.af-brand {
  position: absolute;
  z-index: var(--af-z-header);
  top: var(--af-brand-top-desktop);
  left: 50%;
  width: min(var(--af-brand-width-desktop), calc(100vw - 32px));
  aspect-ratio: 1200 / 437;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: var(--af-color-text-gold);
  text-decoration: none;
  filter: var(--af-shadow-brand);
}

.af-brand__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.af-brand__wordmark {
  position: absolute;
  top: var(--af-brand-wordmark-y);
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--af-font-display);
  font-size: var(--af-brand-wordmark-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--af-brand-wordmark-tracking);
  color: var(--af-color-text-gold);
  text-shadow: 0 2px 1px rgb(0 0 0 / 80%), 0 0 10px rgb(231 197 111 / 18%);
}

/* Grade limitada por tokens; a densidade de notebook é definida ao final. */
.af-shell {
  display: grid;
  width: min(var(--af-shell-max), calc(100% - 32px));
  max-width: none;
  margin-inline: auto;
  padding: var(--af-shell-top-desktop) 0 48px;
  grid-template-columns: var(--af-column-side) minmax(0, var(--af-column-main)) var(--af-column-side);
  gap: var(--af-column-gap);
}

.af-shell__left,
.af-shell__right {
  transform: translateY(var(--af-sidebar-offset-desktop));
}

.af-shell__left {
  gap: 12px;
}

.af-shell__right {
  gap: var(--af-right-card-gap);
}

/* A ordem-alvo é conta, navegação e só então Jogar Agora. */
.af-shell__left > .af-account { order: 1; }
.af-shell__left > .af-nav { order: 2; }
.af-shell__left > .af-cta-play { order: 3; }

/* Superfícies de pergaminho. */
.af-panel,
.af-card,
.af-account {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: var(--af-panel-radius);
  background-color: var(--af-color-surface);
  background-image: var(--af-gradient-parchment);
  box-shadow: var(--af-shadow-panel);
}
.af-panel::after, .af-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--af-parchment-grain-opacity);
  background: var(--af-asset-parchment) repeat;
  border-radius: inherit;
  pointer-events: none;
}

/* Moldura real gerada. Usar como camada decorativa, nunca como screenshot. */
.af-frame::before,
.af-panel::before,
.af-card::before,
.af-account::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: calc(-1 * var(--af-frame-outset-main));
  border: var(--af-frame-width-main) solid transparent;
  border-image-source: var(--af-asset-frame-ornate);
  border-image-slice: var(--af-frame-slice);
  border-image-width: var(--af-frame-width-main);
  border-image-outset: 0;
  border-image-repeat: stretch;
  pointer-events: none;
}

.af-card::before,
.af-account::before {
  inset: calc(-1 * var(--af-frame-outset-card));
  border-width: var(--af-frame-width-card);
  border-image-width: var(--af-frame-width-card);
}

.af-panel > *,
.af-card > *,
.af-account > * {
  position: relative;
  z-index: 1;
}

.af-panel__title,
.af-card__title,
.af-nav__summary {
  display: flex;
  align-items: center;
  background-color: var(--af-navy-800);
  background-image: var(--af-asset-navy-texture), var(--af-gradient-navy);
  background-repeat: repeat, no-repeat;
  background-size: 512px 512px, cover;
  background-blend-mode: soft-light, normal;
  border-bottom: 2px solid var(--af-gold-700);
  color: var(--af-color-text-gold);
}

.af-panel__title {
  min-height: var(--af-panel-title-height);
  justify-content: center;
  padding-inline: 24px;
  font-size: 1.55rem;
  letter-spacing: 0.06em;
}

.af-card__title {
  min-height: var(--af-card-title-height);
  justify-content: center;
  padding-inline: 14px;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.af-panel__body {
  padding-block: var(--af-panel-block-default);
  padding-inline: var(--af-panel-inline-default);
  color: var(--af-color-text);
}

.af-page--login .af-panel {
  min-height: var(--af-panel-min-height-auth);
}

.af-page--login .af-panel__body {
  padding-block: var(--af-panel-block-auth);
  padding-inline: var(--af-panel-inline-auth);
}

/* Formulário esperado depois da pequena reorganização semântica do partial. */
.af-auth-form {
  width: min(100%, var(--af-input-width-auth));
  margin-inline: auto;
}

.af-auth-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.af-auth-field label {
  display: block;
  margin: 0 0 7px;
  font-family: var(--af-font-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

.af-auth-field input {
  width: 100%;
  min-height: var(--af-control-height);
  padding: 8px 12px;
  border: 1px solid var(--af-parchment-500);
  border-radius: var(--af-radius-control);
  background: rgb(255 253 247 / 88%);
  color: var(--af-color-text);
  box-shadow: inset 0 1px 3px rgb(43 26 11 / 12%);
}

.af-auth-field input:focus-visible {
  outline: 3px solid var(--af-color-focus);
  outline-offset: 2px;
  border-color: var(--af-emerald-700);
}

.af-auth-actions {
  display: grid;
  grid-template-columns: 1fr var(--af-login-button-width);
  align-items: start;
  gap: 20px;
  margin-top: 18px;
}

.af-auth-actions__remember {
  min-height: var(--af-button-height-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.af-auth-actions__submit {
  display: grid;
  gap: 8px;
  text-align: center;
}

.af-auth-actions__submit .af-btn {
  width: var(--af-login-button-width);
}

.af-btn {
  min-height: var(--af-button-height);
  border-radius: var(--af-radius-button);
  box-shadow: var(--af-shadow-control);
}

.af-btn.af-btn--primary {
  background: var(--af-gradient-blue-button);
}

.af-btn.af-btn--gold {
  background: var(--af-gradient-gold-button);
}

.af-btn.af-btn--play {
  min-height: var(--af-button-height-cta);
  background: var(--af-gradient-emerald);
}

.af-auth-create {
  width: min(100%, var(--af-create-button-width));
  margin: 32px auto 0;
  text-align: center;
}

/* Separador real opcional do painel de conta; permanece decorativo. */
.af-ornament-divider {
  width: min(300px, 72%);
  aspect-ratio: 600 / 124;
  margin: 28px auto;
  display: block;
  background: var(--af-asset-divider) center / contain no-repeat;
  pointer-events: none;
  user-select: none;
}

/* Social login continua funcional, mas perde o peso visual dominante. */
.af-auth-social {
  margin-top: 24px;
  border-top: 1px solid var(--af-parchment-400);
  padding-top: 16px;
}

.af-auth-social__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Laterais: não aplicar 16:9 obrigatório a todos os cards. */
.af-card--server {
  min-height: var(--af-right-server-height);
}

.af-card--guide {
  min-height: var(--af-right-guide-height);
}

.af-card--community {
  min-height: var(--af-right-community-height);
}

.af-card__art {
  width: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

.af-card__body {
  padding: 12px 14px 14px;
  font-size: 0.875rem;
  line-height: 1.45;
}

.af-card__body p {
  margin: 0 0 10px;
}

/* Menu compacto; somente o grupo da rota atual recebe open no PHP. */
.af-nav {
  gap: 8px;
}

.af-nav__summary {
  min-height: var(--af-nav-row-height);
}

.af-nav__list {
  padding: 0;
  background: var(--af-emerald-950);
}

.af-nav__list a {
  min-height: var(--af-nav-item-height);
  padding: 6px 16px;
  border-bottom: 1px solid rgb(118 237 189 / 20%);
}

@media (max-width: 1180px) {
  .af-brand {
    width: min(var(--af-brand-width-tablet), calc(100vw - 32px));
  }

  .af-shell {
    width: min(960px, calc(100% - 32px));
    padding-inline: 0;
    grid-template-columns: var(--af-column-side) minmax(0, 1fr);
    grid-template-areas:
      "left main"
      "left right";
    align-items: start;
  }

  .af-shell__left { grid-area: left; }
  .af-shell__main { grid-area: main; }
  .af-shell__right {
    grid-area: right;
    width: min(100%, var(--af-column-side));
    justify-self: end;
  }

  .af-shell__left,
  .af-shell__right {
    transform: none;
  }
}

@media (max-width: 879px) {
  .af-shell {
    width: min(var(--af-column-main), calc(100% - 32px));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "left"
      "right";
  }

  .af-shell__left,
  .af-shell__right {
    width: min(100%, var(--af-column-side));
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .af-page {
    background-image:
      var(--af-gradient-wallpaper-overlay),
      var(--af-asset-wallpaper-mobile);
    background-position: center top, center top;
    background-size: 100% auto, 100% auto;
    background-attachment: scroll, scroll;
  }

  .af-site-header {
    height: var(--af-header-mobile);
  }

  .af-brand {
    top: 8px;
    width: var(--af-brand-width-mobile);
  }

  .af-brand__wordmark {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .af-shell {
    width: min(calc(100% - 32px), 584px);
    padding: 20px 0 40px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "left"
      "right";
  }

  .af-shell__main { grid-row: 1; }
  .af-shell__left { grid-row: 2; }
  .af-shell__right { grid-row: 3; }

  .af-page--login .af-panel__body,
  .af-panel__body {
    padding: 24px 20px 28px;
  }

  .af-panel,
  .af-card,
  .af-account {
    overflow: hidden;
  }

  .af-panel::before,
  .af-card::before,
  .af-account::before {
    display: none;
  }

  .af-auth-actions,
  .af-auth-social__links {
    grid-template-columns: 1fr;
  }

  .af-auth-actions__submit .af-btn,
  .af-auth-create {
    width: 100%;
  }

  .af-btn,
  .af-auth-field input {
    min-height: 48px;
  }
}

@media (max-width: 420px) {
  .af-shell {
    width: calc(100% - 24px);
  }

  .af-brand {
    width: min(98vw, 390px);
  }

  .af-panel__title,
  .af-card__title {
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .af-page *,
  .af-page *::before,
  .af-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Integração com a cascata e os formulários existentes do MyAAC. */
.af-page .af-brand { color: var(--af-color-text-gold); }
.af-brand:focus-visible { outline: 3px solid var(--af-color-focus); outline-offset: 4px; }
.af-account .af-card__body { text-align: center; padding: 16px 18px 18px; }
.af-account .af-btn { font-size: 14px; }
.af-account__link { margin-top: 10px; font-family: var(--af-font-editorial); text-decoration: underline; font-weight: 400; }
.af-nav__group { border: 1px solid var(--af-gold-700); border-radius: 2px; }
.af-nav__group[open] .af-nav__summary { background: var(--af-gradient-emerald); }
.af-nav__list a::before { content: '›'; font-size: 20px; }
.af-shell .af-btn { border: 1px solid var(--af-gold-700); }
.af-shell .af-btn.af-btn--gold { background: var(--af-gradient-gold-button); color: #2a1a06; }
.af-shell .af-btn.af-btn--primary { background: var(--af-gradient-blue-button); color: #fff; }
.af-shell .af-btn.af-btn--play { background: var(--af-gradient-emerald); color: #fff; }
.af-shell .af-btn.af-btn--play:hover { filter: brightness(1.08); }
.af-cta-play { margin-top: 6px; }
.af-card__body { text-align: center; }
.af-card__body .af-btn { font-family: var(--af-font-display); font-size: 14px; text-transform: uppercase; }
.af-card--community .af-card__title { font-size: 13px; }
/* A imagem ocupa a cena inteira; texto e ação ficam sobre a mesma arte. */
.af-card--server { --af-scene-height: calc(var(--af-right-server-height) - var(--af-card-title-height)); }
.af-card--guide { --af-scene-height: calc(var(--af-right-guide-height) - var(--af-card-title-height)); }
.af-card--community { --af-scene-height: calc(var(--af-right-community-height) - var(--af-card-title-height)); }
.af-card__scene {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: var(--af-scene-height);
}
.af-card__scene > .af-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}
.af-card--guide .af-card__art,
.af-card--community .af-card__art { object-fit: contain; }
.af-card__scene > .af-card__body {
  position: relative;
  z-index: 1;
  align-self: end;
  margin-top: 80px;
  padding: 12px 14px;
  background: linear-gradient(to bottom, rgb(246 232 197 / 0), rgb(246 232 197 / 90%) 28%, rgb(246 232 197 / 96%));
}
.af-card__scene .af-card__body p { margin: 0 0 6px; line-height: 18px; }
.af-card--server .af-card__body {
  color: #fff;
  background: linear-gradient(to bottom, rgb(6 22 33 / 0), rgb(6 22 33 / 74%) 28%, rgb(6 22 33 / 86%));
}
.af-card--server .af-card__body .af-card__count {
  width: fit-content;
  margin-inline: auto;
  padding-inline: 6px;
  color: #fff;
  background: rgb(6 22 33 / 78%);
  border-radius: 2px;
  font: 12px/18px var(--af-font-ui);
  text-shadow: 0 1px 3px #000;
}
.af-status__dot--online { background: var(--af-emerald-glow); box-shadow: 0 0 8px var(--af-emerald-glow); }
.af-status__dot--offline { background: #f06861; }
.af-status__dot--neutral { background: #b9c0cb; }
.af-shell__main .af-auth { max-width: 440px; margin: 0 auto; }
.af-shell__main .af-auth .af-auth-field label { font-family: var(--af-font-editorial); margin: 0 0 7px; font-size: 14px; line-height: 1.4; }
.af-shell__main .af-auth .af-auth-field input { min-height: 42px; height: 42px; background: rgb(255 253 247 / 72%); border-color: var(--af-gold-700); }
.af-shell__main .andz :is(input,select,textarea):focus-visible { outline: 2px solid var(--af-emerald-700); outline-offset: 2px; }
.af-shell__main .af-auth label.rm { margin: 0; gap: 8px; font-size: 13px; font-family: var(--af-font-editorial); font-weight: 400; }
.af-shell__main .af-auth input[type=checkbox] { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; }
.af-shell__main .af-auth-actions__submit .af-btn { margin: 0; padding: 8px 16px; min-height: 44px; line-height: 1.3; font-family: var(--af-font-editorial); font-size: 16px; }
.af-auth-actions__submit a { font-family: var(--af-font-editorial); font-size: 14px; text-decoration: underline; }
.af-auth .af-ornament-divider { width: 100%; height: 24px; aspect-ratio: auto; margin: 24px auto; }
.af-auth-new { text-align: center; }
.af-shell__main .af-auth-new h2 { margin: 0 0 4px; font: 700 24px/1.3 var(--af-font-editorial); color: var(--af-color-text); }
.af-auth-new p { margin: 0; font-family: var(--af-font-editorial); font-size: 15px; }
.af-auth-new .af-auth-create { margin: 16px auto 0; min-height: 48px; font-family: var(--af-font-editorial); font-size: 18px; }
.af-auth-social { margin-top: 24px; padding-top: 12px; }
.af-auth-social__label { margin: 0 0 8px; text-align: center; font-size: 12px; color: var(--af-color-text-muted); }
.af-shell__main .af-auth .soc { margin: 0; padding: 8px; min-height: 44px; font-size: 12px; font-weight: 600; gap: 6px; }
.af-shell__main .andz a.discord { color: #fff; }
.af-shell__main .andz a.google { color: #303640; }
.af-auth .hint { margin-top: 10px; font-size: 11px; text-align: center; }
.af-shell__main .andz :is(input,select,textarea) { max-width: 100%; }
.af-footer { text-shadow: 0 1px 3px #000; }
@media (min-width: 761px) and (max-width: 1180px) {
  .af-page--login .af-panel__body { padding: 28px 32px 34px; }
}
@media (max-width: 760px) {
  .af-shell { row-gap: 28px; }
  .af-shell__left, .af-shell__right { width: 100%; max-width: 440px; }
  .af-panel, .af-card { border: 2px solid var(--af-gold-700); overflow: visible; }
  .af-panel__title { font-size: 20px; }
  .af-shell__main .af-auth .af-auth-field input { height: 48px; min-height: 48px; }
  .af-shell__main .af-auth-actions__submit .af-btn, .af-shell .af-btn, .af-shell__main .af-auth .soc { min-height: 48px; }
  .af-shell__main .af-auth .soc { font-size: 14px; }
  .af-auth-actions { gap: 8px; margin-top: 12px; }
  .af-shell__main .af-auth label.rm { min-height: 44px; }
  .af-nav__list a { min-height: 44px; }
  .af-card__scene { min-height: calc(var(--af-scene-height) + 40px); }
  .af-card__scene > .af-card__body { margin-top: 110px; }
}
/* Erros nativos do login: mantém todas as mensagens e links, sem moldura GIF duplicada. */
.af-page--login .SmallBox .ErrorMessage { margin: 0; padding: 14px; border: 1px solid #9e342b; border-radius: 4px; background: #fbe7e5; color: #71271e; font: 14px/1.5 var(--af-font-ui); }
.af-page--login .SmallBox :is(.BoxFrameHorizontal,.BoxFrameVerticalLeft,.BoxFrameVerticalRight,.BoxFrameEdgeLeftTop,.BoxFrameEdgeRightTop,.BoxFrameEdgeLeftBottom,.BoxFrameEdgeRightBottom,.AttentionSign) { display: none; }
.af-shell__main .andz :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { border-color: var(--af-gold-700); }
@media (max-width: 760px) {
  .af-shell__main .andz :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,button,.btn) { min-height: 48px; }
}

/* LAYOUT-029: densidade de notebook em 100%, pela janela CSS, não pelo monitor.
 * Reduz espaços e decoração; preserva texto, reflow e zoom escolhido pelo jogador.
 * Full HD/4K mantêm a mesma largura máxima, sem esticar o conteúdo. */
@media (min-width: 1181px) {
  .af-page {
    --af-shell-max: 1040px;
    --af-column-side: 224px;
    --af-column-main: 560px;
    --af-header-desktop: 190px;
    --af-shell-top-desktop: 28px;
    --af-sidebar-offset-desktop: -28px;
    --af-brand-width-desktop: 480px;
    --af-brand-top-desktop: 8px;
    --af-brand-wordmark-size: 36px;
    --af-panel-title-height: 48px;
    --af-panel-min-height-auth: 0px;
    --af-panel-inline-auth: 48px;
    --af-panel-block-auth: 24px 28px;
    --af-panel-block-default: 24px 28px;
    --af-card-title-height: 44px;
    --af-nav-row-height: 44px;
    --af-nav-item-height: 32px;
    --af-right-card-gap: 10px;
    --af-right-server-height: 200px;
    --af-right-guide-height: 220px;
    --af-right-community-height: 200px;
  }
  .af-shell { padding-bottom: 24px; }
  .af-shell__left { gap: 8px; }
  .af-account .af-card__body { padding: 10px 14px 12px; }
  .af-account__link { margin-top: 6px; }
  .af-nav { gap: 6px; }
  .af-nav__summary { padding-block: 6px; font-size: 16px; }
  .af-nav__list a { padding-block: 4px; font-size: 13px; }
  .af-card__title { font-size: 14px; }
  .af-card--community .af-card__title { font-size: 12px; letter-spacing: .02em; }
  .af-card__scene > .af-card__body { margin-top: 48px; padding: 8px 12px; }
  .af-auth-form__fields { gap: 14px; }
  .af-auth-actions { margin-top: 12px; }
  .af-auth .af-ornament-divider { height: 18px; margin: 12px auto; }
  .af-shell__main .af-auth-new h2 { font-size: 22px; }
  .af-auth-new .af-auth-create { margin-top: 12px; min-height: 44px; }
  .af-auth-social { margin-top: 16px; }
}

/* Barras do navegador e escala do sistema reduzem a altura útil do notebook. */
@media (min-width: 1181px) and (max-height: 850px) {
  .af-page {
    --af-header-desktop: 132px;
    --af-brand-width-desktop: 350px;
    --af-brand-top-desktop: 4px;
    --af-brand-wordmark-size: 26px;
    --af-shell-top-desktop: 24px;
    --af-sidebar-offset-desktop: -24px;
    --af-panel-block-auth: 20px 24px;
    --af-right-card-gap: 8px;
    --af-right-server-height: 192px;
    --af-right-guide-height: 204px;
    --af-right-community-height: 190px;
  }
}
@media (min-width: 1181px) and (max-height: 740px) {
  .af-page {
    --af-header-desktop: 112px;
    --af-brand-width-desktop: 300px;
    --af-brand-wordmark-size: 22px;
    --af-right-server-height: 180px;
    --af-right-guide-height: 194px;
    --af-right-community-height: 180px;
  }
}