@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   GosakOT — folha de estilo única.

   Base: design system Nocturne (ground azul-ardósia, Inter, raios 4/8/14,
   réguas que somem nas pontas, botões contornados) com o accent trocado
   pelo OURO da marca GosakOT (#c9a45a).

   Camadas, em ordem de precedência crescente:
     tokens      variáveis — a ÚNICA fonte de cor/tipo/espaço/raio/sombra
     base        reset e elementos nus
     components  botões, campos, cards, tabelas, nav, toasts…
     legacy      compatibilidade com o HTML tibia.com que o ZnoteAAC ainda
                 emite, para que páginas não portadas não quebrem
     utilities   utilitários curtos, sempre por último

   Nada de hex solto fora de :root. Nada de px de espaçamento fora da escala.
   ═══════════════════════════════════════════════════════════════════════ */

@layer tokens, base, components, legacy, utilities;

/* ───────────────────────────────────────────────────────────── tokens ─── */
@layer tokens {
  :root {
    /* ── Ground e superfícies ───────────────────────────────────────── */
    --color-bg: #161826;
    --color-bg-deep: #101120;
    --color-surface: #232532;
    --color-surface-2: #2b2d3b;
    --color-text: #e9e9ed;
    --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
    --color-divider-strong: color-mix(in srgb, #e9e9ed 28%, transparent);

    /* ── Accent OURO GosakOT — rampa 100–900 ────────────────────────── */
    --color-accent: #c9a45a;
    --color-accent-100: #faf4e6;
    --color-accent-200: #f4e6c3;
    --color-accent-300: #ead29c;
    --color-accent-400: #dcba72;
    --color-accent-500: #c9a45a;
    --color-accent-600: #a8853f;
    --color-accent-700: #846830;
    --color-accent-800: #5e4a23;
    --color-accent-900: #3d3018;

    /* ── Neutros — rampa perceptual compartilhada ───────────────────── */
    --color-neutral-100: #f3f5fe;
    --color-neutral-200: #e4e7f5;
    --color-neutral-300: #cfd3e5;
    --color-neutral-400: #b2b6ca;
    --color-neutral-500: #9397ab;
    --color-neutral-600: #75798c;
    --color-neutral-700: #595d6c;
    --color-neutral-800: #3f424d;
    --color-neutral-900: #292b31;

    /* ── Banda de seção: índigo saturado, presença em escala de página ─ */
    --color-section: #262a60;
    --color-section-glow: #353b80;
    --color-section-ghost: #4c5397;

    /* ── Semânticos — contraste ≥ 4.5:1 sobre o ground ──────────────── */
    --color-success: #6fcf97;
    --color-success-bg: color-mix(in srgb, #6fcf97 14%, transparent);
    --color-warning: #e8b862;
    --color-warning-bg: color-mix(in srgb, #e8b862 14%, transparent);
    --color-danger: #f08a8a;
    --color-danger-bg: color-mix(in srgb, #f08a8a 14%, transparent);
    --color-info: #8fb8e8;
    --color-info-bg: color-mix(in srgb, #8fb8e8 14%, transparent);

    /* Estado do servidor */
    --color-online: #6fcf97;
    --color-offline: #f08a8a;

    /* ── Tipografia ─────────────────────────────────────────────────── */
    --font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --font-heading-weight: 500;

    /* Escala de títulos — fluida, presa nas duas pontas */
    --step-0: 0.9375rem;                                   /* 15px  corpo   */
    --step-1: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);     /* 16–17 destaque*/
    --step-2: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);  /* h5           */
    --step-3: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);     /* h4           */
    --step-4: clamp(1.5rem, 1.28rem + 1.1vw, 2rem);        /* h3           */
    --step-5: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);    /* h2           */
    --step-6: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);     /* h1           */
    --step-num: clamp(2rem, 1.5rem + 2.4vw, 2.875rem);     /* números       */

    /* ── Espaçamento — densidade 0.7×, como no Nocturne ─────────────── */
    --space-1: 2.8px;
    --space-2: 5.6px;
    --space-3: 8.4px;
    --space-4: 11.2px;
    --space-5: 14px;
    --space-6: 16.8px;
    --space-8: 22.4px;
    --space-10: 28px;
    --space-12: 33.6px;
    --space-16: 44.8px;
    --space-20: 56px;
    --space-24: 67.2px;

    /* ── Layout ─────────────────────────────────────────────────────── */
    --measure: 1120px; /* coluna central mais contida (era 1160) */
    --gutter: clamp(22px, 5vw, 44px); /* respiro lateral maior: margens visiveis ja em ~1000px (era 16-24) */
    --pad-x: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
    --header-h: 60px;

    /* ── Raios ──────────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* ── Elevação: aresta + escuridão ambiente, nunca sombra pesada ─── */
    --shadow-sm: 0 0 0 1px var(--color-neutral-800);
    --shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgb(0 0 0 / 0.55);
    --shadow-lg: 0 0 0 1px var(--color-neutral-500), 0 16px 40px rgb(0 0 0 / 0.65);
    --glow-accent: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent),
                   0 0 24px -6px color-mix(in srgb, var(--color-accent) 55%, transparent);

    /* ── Movimento — intencional, curto, com easing próprio ─────────── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-1: 120ms;   /* microinteração: tint de hover        */
    --dur-2: 190ms;   /* transição de estado                  */
    --dur-3: 280ms;   /* entrada de painel / acordeão         */
    --dur-4: 420ms;   /* entrada de página                    */

    --z-header: 100;
    --z-dropdown: 200;
    --z-drawer: 300;
    --z-toast: 400;
    --z-dialog: 500;

    color-scheme: dark;
  }

  /* Quem pediu menos movimento recebe menos movimento — em todo o site. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms;
    }
  }
}

/* ─────────────────────────────────────────────────────────────── base ─── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* `clip` e não `hidden`: recorta o transbordo lateral (a gaveta mobile
       fechada vive deslocada em translateX(100%)) SEM criar um contêiner de
       rolagem — o que quebraria o position:sticky do cabeçalho. */
    overflow-x: clip;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.55;
    font-weight: 400;
    color: var(--color-text);
    background:
      radial-gradient(1200px 720px at 82% -160px,
        color-mix(in srgb, var(--color-accent-900) 72%, transparent), transparent 60%),
      radial-gradient(1100px 800px at -10% 100%,
        color-mix(in srgb, #000 30%, transparent), transparent 55%),
      var(--color-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;   /* nenhuma página pode rolar na horizontal */
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-3);
    text-wrap: balance;
  }
  h1 { font-size: var(--step-6); }
  h2 { font-size: var(--step-5); }
  h3 { font-size: var(--step-4); }
  h4 { font-size: var(--step-3); }
  h5 { font-size: var(--step-2); }
  h6 {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
  }

  p { margin: 0 0 var(--space-4); text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }

  a {
    color: var(--color-accent-300);
    text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    text-underline-offset: 3px;
    transition: color var(--dur-1) var(--ease-out);
  }
  a:hover { color: var(--color-accent-200); }

  img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  figure { margin: 0; }

  small { font-size: 0.8125rem; }
  code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.875em; }

  hr {
    height: 1px; border: 0; margin: var(--space-8) 0;
    background: linear-gradient(to right,
      transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent);
  }

  /* Foco: sempre visível, sempre no ouro, nunca o anel azul do browser. */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

  /* Números tabulares em toda tabela e todo indicador. */
  table, .gk-num, .gk-stat-value { font-variant-numeric: tabular-nums; }

  [hidden] { display: none !important; }
}

/* ───────────────────────────────────────────────────────── components ─── */
@layer components {

  /* ── Só para leitor de tela ─────────────────────────────────────── */
  .gk-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .gk-skip {
    position: absolute; left: var(--space-4); top: -100px; z-index: calc(var(--z-header) + 1);
    padding: var(--space-3) var(--space-6);
    background: var(--color-surface); color: var(--color-accent);
    border: 1px solid var(--color-accent); border-radius: var(--radius-md);
    font-weight: 500; text-decoration: none;
    transition: top var(--dur-2) var(--ease-out);
  }
  .gk-skip:focus { top: var(--space-3); }

  /* ── Contêiner ──────────────────────────────────────────────────── */
  .gk-wrap { padding-inline: var(--pad-x); }
  .gk-section { padding-block: clamp(28px, 5vw, 52px); }
  .gk-section--tight { padding-block: clamp(20px, 3vw, 32px); }

  /* Banda índigo: a única superfície saturada do site. */
  .gk-band {
    background:
      radial-gradient(900px 420px at 85% -40%,
        color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
      var(--color-section);
  }

  /* ── Título de seção ────────────────────────────────────────────── */
  .gk-kicker {
    display: block;
    font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
  }
  .gk-kicker::before {
    content: ""; display: inline-block;
    width: 18px; height: 1px; margin-right: var(--space-3);
    vertical-align: middle;
    background: var(--color-accent);
  }
  .gk-section-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--space-3) var(--space-8);
    margin-bottom: var(--space-8);
  }
  .gk-section-head h2, .gk-section-head h3 { margin: 0; }
  .gk-section-head .gk-more { margin-left: auto; font-size: 0.875rem; }

  /* ── Botões — contorno, nunca preenchimento sólido ──────────────── */
  .gk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px;               /* alvo de toque WCAG */
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-heading); font-weight: 500; font-size: 0.875rem;
    line-height: 1.2; color: var(--color-text); text-decoration: none;
    background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out),
                transform var(--dur-1) var(--ease-out);
  }
  .gk-btn:active { transform: translateY(1px); }
  .gk-btn[disabled], .gk-btn[aria-disabled="true"] {
    opacity: 0.45; cursor: not-allowed; pointer-events: none;
  }

  .gk-btn--primary { color: var(--color-accent); border-color: var(--color-accent); }
  .gk-btn--primary:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    box-shadow: var(--glow-accent);
  }
  .gk-btn--primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

  .gk-btn--secondary { border-color: var(--color-divider); }
  .gk-btn--secondary:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    border-color: var(--color-divider-strong);
  }
  .gk-btn--secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

  .gk-btn--ghost { color: var(--color-accent-300); padding-inline: var(--space-3); }
  .gk-btn--ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

  .gk-btn--danger { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 55%, transparent); }
  .gk-btn--danger:hover { background: var(--color-danger-bg); }

  .gk-btn--sm { min-height: 34px; padding: var(--space-2) var(--space-4); font-size: 0.8125rem; }
  .gk-btn--lg { min-height: 50px; padding: var(--space-4) var(--space-10); font-size: 0.9375rem; }
  .gk-btn--block { width: 100%; }
  .gk-btn--icon { width: 44px; min-height: 44px; padding: 0; }

  /* Botão em carregamento: o rótulo fica, o spinner entra. */
  .gk-btn[data-loading="true"] { pointer-events: none; opacity: 0.8; }
  .gk-btn[data-loading="true"]::before {
    content: ""; width: 14px; height: 14px; flex: none;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%;
    animation: gk-spin 620ms linear infinite;
  }
  @keyframes gk-spin { to { transform: rotate(360deg); } }

  .gk-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  /* ── Tags ───────────────────────────────────────────────────────── */
  .gk-tag {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: 0.6875rem; letter-spacing: 0.02em; line-height: 1.6;
    padding: 2px var(--space-4);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .gk-tag--accent  { background: var(--color-accent-900); color: var(--color-accent-200); }
  .gk-tag--neutral { background: var(--color-neutral-800); color: var(--color-neutral-200); }
  .gk-tag--outline { border: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent); color: var(--color-accent-300); }
  .gk-tag--success { background: var(--color-success-bg); color: var(--color-success); }
  .gk-tag--warning { background: var(--color-warning-bg); color: var(--color-warning); }
  .gk-tag--danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
  .gk-tag--vip {
    background: linear-gradient(100deg, var(--color-accent-900), var(--color-accent-800));
    color: var(--color-accent-200);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
  }

  /* Ponto de status do servidor. */
  .gk-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--color-offline);
  }
  .gk-dot--on {
    background: var(--color-online);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-online) 22%, transparent);
    animation: gk-pulse 2.4s var(--ease-in-out) infinite;
  }
  @keyframes gk-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-online) 22%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-online) 6%, transparent); }
  }

  /* ── Cards ──────────────────────────────────────────────────────── */
  .gk-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .gk-card--link {
    text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }
  .gk-card--link:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .gk-card--quiet { background: color-mix(in srgb, var(--color-surface) 55%, transparent); }
  .gk-card__kicker {
    font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-accent);
  }
  .gk-card__title {
    font-family: var(--font-heading); font-weight: 500;
    font-size: 1.0625rem; line-height: 1.25; margin: 0;
  }
  .gk-card__body { margin: 0; font-size: 0.8125rem; opacity: 0.82; flex: 1; }
  .gk-card__meta {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: 0.6875rem;
    color: color-mix(in srgb, var(--color-text) 52%, transparent);
  }
  /* Quando o rodapé do card É um link ("Ver highscores completos →"), ele não
     está dentro de uma frase, então precisa dos 24px de alvo. */
  a.gk-card__meta { min-height: 24px; padding-block: var(--space-1); }

  /* Links de lista dentro de card (top de experiência) e o "ver mais" do
     cabeçalho de seção: também são alvos isolados, não links de frase. */
  .gk-card ol a, .gk-card ul a, .gk-section-head .gk-more {
    display: inline-block;
    padding-block: 4px;
  }
  .gk-elev-sm { box-shadow: var(--shadow-sm); }
  .gk-elev-md { box-shadow: var(--shadow-md); }
  .gk-elev-lg { box-shadow: var(--shadow-lg); }

  /* Grade de cards que nunca fica com um órfão espremido. */
  .gk-grid { display: grid; gap: var(--space-6); }
  .gk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .gk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .gk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
  /* A banda de números vira 2×2 no celular em vez de uma coluna de quatro
     linhas, que empurrava as notícias para muito abaixo da dobra. */
  @media (max-width: 560px) {
    .gk-band .gk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
  }
  .gk-split {
    display: grid; gap: clamp(20px, 3vw, 34px);
    grid-template-columns: minmax(0, 2fr) minmax(min(100%, 270px), 1fr);
    align-items: start;
  }
  @media (max-width: 900px) { .gk-split { grid-template-columns: 1fr; } }

  /* ── Estatística ────────────────────────────────────────────────── */
  .gk-stat { display: flex; flex-direction: column; gap: var(--space-2); }
  .gk-stat-value {
    font-family: var(--font-heading); font-weight: 500;
    font-size: var(--step-num); line-height: 1.05; margin: 0;
  }
  .gk-stat-label {
    margin: 0;
    font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 64%, transparent);
  }

  /* ── Formulários ────────────────────────────────────────────────── */
  .gk-field { display: block; margin-bottom: var(--space-6); }
  .gk-field > label, .gk-label {
    display: block; margin-bottom: var(--space-2);
    font-size: 0.8125rem; font-weight: 500;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
  }
  .gk-req { color: var(--color-accent); margin-left: 2px; }
  .gk-hint {
    display: block; margin-top: var(--space-2);
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
  }
  .gk-input, .gk-select, .gk-textarea {
    width: 100%; min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font: inherit; font-size: 1rem;   /* 16px: evita o zoom automático do iOS */
    color: var(--color-text); caret-color: var(--color-accent);
    background: var(--color-bg-deep);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .gk-input:hover, .gk-select:hover, .gk-textarea:hover { border-color: var(--color-divider-strong); }
  .gk-input:focus-visible, .gk-select:focus-visible, .gk-textarea:focus-visible {
    border-color: var(--color-accent); outline-offset: 0;
  }
  .gk-input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
  .gk-textarea { min-height: 110px; resize: vertical; }
  .gk-select {
    appearance: none;
    padding-right: var(--space-12);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 18px center, right 12px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }
  .gk-input[aria-invalid="true"], .gk-select[aria-invalid="true"], .gk-textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
  }
  .gk-error {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin-top: var(--space-2); font-size: 0.75rem; color: var(--color-danger);
  }
  .gk-check {
    display: flex; align-items: flex-start; gap: var(--space-3);
    font-size: 0.875rem; cursor: pointer; padding-block: var(--space-2);
  }
  .gk-check input[type="checkbox"], .gk-check input[type="radio"] {
    width: 18px; height: 18px; flex: none; margin: 2px 0 0;
    accent-color: var(--color-accent); cursor: pointer;
  }
  fieldset.gk-fieldset { border: 0; margin: 0 0 var(--space-6); padding: 0; }
  fieldset.gk-fieldset > legend {
    padding: 0; margin-bottom: var(--space-3);
    font-size: 0.8125rem; font-weight: 500;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
  }
  .gk-form-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

  /* ── Alertas ────────────────────────────────────────────────────── */
  .gk-alert {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 0.875rem;
    margin-bottom: var(--space-6);
  }
  .gk-alert__icon { flex: none; margin-top: 1px; }
  .gk-alert--success { background: var(--color-success-bg); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); color: var(--color-success); }
  .gk-alert--warning { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); color: var(--color-warning); }
  .gk-alert--danger  { background: var(--color-danger-bg);  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);  color: var(--color-danger); }
  .gk-alert--info    { background: var(--color-info-bg);    border-color: color-mix(in srgb, var(--color-info) 40%, transparent);    color: var(--color-info); }
  .gk-alert strong { color: inherit; }
  .gk-alert p { color: color-mix(in srgb, var(--color-text) 88%, transparent); margin: 0; }

  /* ── Tabelas — rolam dentro do próprio contêiner, nunca na página ─ */
  .gk-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    scrollbar-width: thin;
  }
  .gk-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 520px;    /* abaixo disso rola dentro do wrap */
  }
  .gk-table caption {
    caption-side: top; text-align: left;
    padding: 0 0 var(--space-3);
    font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 58%, transparent);
  }
  .gk-table th {
    text-align: left; font-weight: 500;
    font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
    position: sticky; top: 0;
    background: var(--color-bg);
    z-index: 1;
  }
  .gk-table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
  }
  /* Réguas como faixa de linha, para o fade valer a linha inteira. */
  .gk-table thead tr {
    background: linear-gradient(to right,
      transparent, var(--color-divider) 48px,
      var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
  }
  .gk-table tbody tr {
    background: linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .gk-table tbody tr:hover {
    background:
      linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                      color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
      linear-gradient(to right,
        transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
        color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
  }
  .gk-table .gk-rank {
    font-family: var(--font-heading);
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    width: 3.5rem;
  }
  .gk-table tbody tr:nth-child(1) .gk-rank { color: var(--color-accent); }
  .gk-table tbody tr:nth-child(2) .gk-rank,
  .gk-table tbody tr:nth-child(3) .gk-rank { color: var(--color-accent-400); }
  /* Links de célula viram alvo confortável no toque. Um <a> de texto puro
     mede a altura da linha (~17px); com o padding abaixo passa de 24px, o
     mínimo do WCAG 2.2 SC 2.5.8, sem alterar o ritmo visual da tabela. */
  .gk-table a {
    display: inline-block;
    padding-block: 4px;
    text-decoration: none;
  }
  .gk-table a:hover { text-decoration: underline; }
  .gk-num { text-align: right; }

  /* Dica de rolagem lateral, só onde ela existe. */
  .gk-table-hint {
    display: none;
    margin-top: var(--space-2);
    font-size: 0.6875rem;
    color: color-mix(in srgb, var(--color-text) 48%, transparent);
  }
  @media (max-width: 640px) { .gk-table-hint { display: block; } }

  /* ── Paginação ──────────────────────────────────────────────────── */
  .gk-pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin-top: var(--space-8);
  }
  .gk-pager a, .gk-pager span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding-inline: var(--space-3);
    font-size: 0.8125rem; text-decoration: none; color: var(--color-text);
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
    transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }
  .gk-pager a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
  .gk-pager [aria-current="page"] { color: var(--color-accent); border-color: var(--color-accent); }
  .gk-pager .gk-pager__gap { border: 0; min-width: 20px; opacity: 0.5; }

  /* ── Estado vazio ───────────────────────────────────────────────── */
  .gk-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
    padding: var(--space-20) var(--space-8);
    text-align: center;
    border: 1px dashed var(--color-divider);
    border-radius: var(--radius-lg);
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
  }
  .gk-empty__title { font-family: var(--font-heading); font-size: 1.0625rem; color: var(--color-text); margin: 0; }
  .gk-empty__body { margin: 0; font-size: 0.875rem; max-width: 44ch; }

  /* ── Skeleton ───────────────────────────────────────────────────── */
  .gk-skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--color-text) 6%, transparent) 25%,
      color-mix(in srgb, var(--color-text) 12%, transparent) 37%,
      color-mix(in srgb, var(--color-text) 6%, transparent) 63%);
    background-size: 400% 100%;
    animation: gk-shimmer 1.4s var(--ease-in-out) infinite;
  }
  @keyframes gk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
  .gk-skeleton--line { height: 0.75rem; margin-bottom: var(--space-3); }

  /* ── Toast ──────────────────────────────────────────────────────── */
  .gk-toasts {
    position: fixed; inset-block-end: var(--space-8); inset-inline-end: var(--space-8);
    z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: var(--space-3);
    max-width: min(380px, calc(100vw - var(--space-16)));
    pointer-events: none;
  }
  .gk-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    animation: gk-toast-in var(--dur-3) var(--ease-spring) both;
  }
  .gk-toast[data-leaving="true"] { animation: gk-toast-out var(--dur-2) var(--ease-in-out) both; }
  .gk-toast--success { border-left: 2px solid var(--color-success); }
  .gk-toast--danger  { border-left: 2px solid var(--color-danger); }
  .gk-toast--info    { border-left: 2px solid var(--color-accent); }
  @keyframes gk-toast-in  { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes gk-toast-out { to { opacity: 0; transform: translateY(6px); } }
  @media (max-width: 560px) {
    .gk-toasts { inset-inline: var(--space-4); inset-block-end: var(--space-4); max-width: none; }
  }

  /* ── Tooltip ────────────────────────────────────────────────────── */
  .gk-tip { position: relative; }
  .gk-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: var(--space-2) var(--space-3);
    font-size: 0.6875rem; white-space: nowrap;
    background: var(--color-surface-2); color: var(--color-text);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
    z-index: var(--z-dropdown);
  }
  .gk-tip:hover::after, .gk-tip:focus-visible::after { opacity: 1; transform: translateX(-50%); }

  /* ── Diálogo ────────────────────────────────────────────────────── */
  .gk-dialog {
    width: min(460px, calc(100vw - var(--space-16)));
    padding: var(--space-8);
    border: 0; border-radius: var(--radius-lg);
    background: var(--color-surface); color: var(--color-text);
    box-shadow: var(--shadow-lg);
  }
  .gk-dialog::backdrop { background: rgb(10 11 20 / 0.72); backdrop-filter: blur(2px); }
  .gk-dialog[open] { animation: gk-dialog-in var(--dur-3) var(--ease-spring) both; }
  @keyframes gk-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
  .gk-dialog__title { font-size: 1.25rem; margin-bottom: var(--space-3); }
  .gk-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-8); }

  /* ══ Cabeçalho ═══════════════════════════════════════════════════ */
  .gk-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: color-mix(in srgb, var(--color-bg-deep) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--color-divider);
  }
  .gk-header__bar {
    display: flex; align-items: center; gap: var(--space-6);
    min-height: var(--header-h);
    padding-inline: var(--pad-x);
  }
  .gk-brand { display: flex; align-items: center; gap: var(--space-3); flex: none; text-decoration: none; }
  .gk-brand img { height: 30px; width: auto; }
  .gk-brand__sub {
    font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
  }

  .gk-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-4); }
  .gk-nav__item { position: relative; }
  .gk-nav__link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem; font-weight: 500; color: var(--color-text);
    text-decoration: none; border-radius: var(--radius-md);
    background: transparent; border: 0; cursor: pointer;
    white-space: nowrap;   /* "Char Bazaar" não pode quebrar em duas linhas */
    transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  }
  .gk-nav__link:hover { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
  .gk-nav__link[aria-current="page"], .gk-nav__item--active > .gk-nav__link { color: var(--color-accent); }
  .gk-nav__link[aria-current="page"]::after, .gk-nav__item--active > .gk-nav__link::after {
    content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 2px;
    height: 1px; background: var(--color-accent);
  }
  .gk-nav__caret { width: 8px; height: 8px; opacity: 0.55; transition: transform var(--dur-2) var(--ease-out); }
  .gk-nav__item[data-open="true"] .gk-nav__caret { transform: rotate(180deg); }

  .gk-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 232px; padding: var(--space-3);
    background: var(--color-surface); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    display: flex; flex-direction: column; gap: 1px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                visibility var(--dur-2);
  }
  .gk-nav__item[data-open="true"] > .gk-menu { opacity: 1; visibility: visible; transform: none; }
  .gk-menu a {
    display: block; padding: var(--space-3) var(--space-4);
    font-size: 0.8125rem; color: var(--color-text); text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  .gk-menu a:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-200); }
  .gk-menu a[aria-current="page"] { color: var(--color-accent); }

  .gk-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex: none; }

  /* Indicador de status no cabeçalho. */
  .gk-status {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: 0.75rem;
    border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .gk-status b { font-weight: 500; }

  /* Seletor de idioma. */
  .gk-lang { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
  .gk-lang a {
    padding: var(--space-2) var(--space-3); font-size: 0.6875rem; font-weight: 500;
    color: color-mix(in srgb, var(--color-text) 60%, transparent); text-decoration: none;
    transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  .gk-lang a + a { border-left: 1px solid var(--color-divider); }
  .gk-lang a[aria-current="true"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .gk-lang a:hover { color: var(--color-text); }

  /* Botão hambúrguer. */
  .gk-burger { display: none; }

  /* ── Gaveta mobile ──────────────────────────────────────────────── */
  .gk-drawer {
    position: fixed; inset: var(--header-h) 0 0 auto;
    width: min(360px, 88vw);
    z-index: var(--z-drawer);
    background: var(--color-bg-deep);
    border-left: 1px solid var(--color-divider);
    padding: var(--space-6) var(--space-6) var(--space-20);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility var(--dur-3);
  }
  .gk-drawer[data-open="true"] { transform: none; visibility: visible; }
  .gk-scrim {
    position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
    background: rgb(10 11 20 / 0.6);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
  }
  .gk-scrim[data-open="true"] { opacity: 1; visibility: visible; }

  .gk-acc { border-bottom: 1px solid var(--color-divider); }
  .gk-acc__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    width: 100%; min-height: 52px; padding: var(--space-3) 0;
    font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--color-text);
    text-align: left; background: transparent; border: 0; cursor: pointer;
  }
  .gk-acc__trigger[aria-expanded="true"] { color: var(--color-accent); }
  .gk-acc__trigger .gk-nav__caret { transition: transform var(--dur-2) var(--ease-out); }
  .gk-acc__trigger[aria-expanded="true"] .gk-nav__caret { transform: rotate(180deg); }
  .gk-acc__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-3) var(--ease-out);
  }
  .gk-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
  .gk-acc__inner { overflow: hidden; }
  .gk-acc__inner a {
    display: block; padding: var(--space-3) var(--space-4);
    font-size: 0.875rem; color: color-mix(in srgb, var(--color-text) 80%, transparent);
    text-decoration: none; border-radius: var(--radius-sm);
    min-height: 44px;
  }
  .gk-acc__inner a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
  .gk-acc__inner a[aria-current="page"] { color: var(--color-accent); }

  @media (max-width: 1080px) {
    .gk-nav { display: none; }
    .gk-burger { display: inline-flex; }
    .gk-header__actions .gk-status { display: none; }
  }
  @media (min-width: 1081px) {
    .gk-drawer, .gk-scrim { display: none; }
  }
  @media (max-width: 520px) {
    .gk-header__actions .gk-btn--primary { display: none; }
    .gk-brand img { height: 26px; }
  }

  /* ── Rodapé ─────────────────────────────────────────────────────── */
  .gk-footer {
    margin-top: clamp(40px, 7vw, 88px);
    border-top: 1px solid var(--color-divider);
    background: color-mix(in srgb, var(--color-bg-deep) 70%, transparent);
  }
  /* Duas zonas: a marca à esquerda, os grupos de links num grid próprio.
     Antes tudo dividia UM grid, e os dois últimos grupos caíam numa segunda
     fileira embaixo da marca, deixando um vão grande no meio do rodapé. */
  .gk-footer__grid {
    display: grid; gap: clamp(28px, 4vw, 48px);
    grid-template-columns: minmax(230px, 1fr) minmax(0, 3fr);
    padding: clamp(32px, 5vw, 56px) var(--pad-x) var(--space-12);
  }
  .gk-footer__links {
    display: grid; gap: var(--space-10) var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
    align-content: start;
  }
  @media (max-width: 860px) {
    .gk-footer__grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .gk-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 340px) {
    .gk-footer__links { grid-template-columns: 1fr; }
  }
  .gk-footer li a { overflow-wrap: anywhere; }
  .gk-footer h2 {
    font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    margin-bottom: var(--space-4);
  }
  .gk-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .gk-footer li a {
    display: inline-block; padding: var(--space-2) 0;
    font-size: 0.875rem; color: color-mix(in srgb, var(--color-text) 76%, transparent);
    text-decoration: none;
  }
  .gk-footer li a:hover { color: var(--color-accent-300); }
  .gk-footer__base {
    display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: center;
    padding: var(--space-6) var(--pad-x) var(--space-12);
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    border-top: 1px solid var(--color-divider);
  }
  .gk-footer__legal { max-width: 62ch; line-height: 1.6; }

  /* ── Miniatura de personagem / criatura ─────────────────────────── */
  .gk-outfit {
    display: grid; place-items: center;
    width: 64px; height: 64px; flex: none;
    background: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
    border-radius: var(--radius-md);
  }
  .gk-outfit img { image-rendering: pixelated; max-width: 100%; }
  .gk-outfit--lg { width: 96px; height: 96px; }

  /* ── Barra de progresso ─────────────────────────────────────────── */
  .gk-bar { height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text) 10%, transparent); overflow: hidden; }
  .gk-bar > i {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--color-accent-700), var(--color-accent));
    transition: width var(--dur-4) var(--ease-out);
  }

  /* ── Abas ───────────────────────────────────────────────────────── */
  .gk-tabs { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-8); scrollbar-width: none; }
  .gk-tabs::-webkit-scrollbar { display: none; }
  .gk-tabs a, .gk-tabs button {
    padding: var(--space-3) var(--space-6); min-height: 44px;
    font: inherit; font-size: 0.875rem; font-weight: 500;
    color: color-mix(in srgb, var(--color-text) 66%, transparent);
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }
  .gk-tabs a:hover, .gk-tabs button:hover { color: var(--color-text); }
  .gk-tabs [aria-selected="true"], .gk-tabs [aria-current="page"] {
    color: var(--color-accent); border-bottom-color: var(--color-accent);
  }

  /* ── Entrada de página, discreta ────────────────────────────────── */
  .gk-rise { animation: gk-rise var(--dur-4) var(--ease-out) both; }
  @keyframes gk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ───────────────────────────────────────────────────────────── legacy ─── */
/* Compatibilidade com o HTML tibia.com que o ZnoteAAC ainda emite em páginas
   ainda não portadas: molduras de GIF, tabelas aninhadas, fundos claros.
   Objetivo: nenhuma página quebrada durante a migração progressiva. */
@layer legacy {
  /* As molduras de imagem viram nada. */
  .CaptionEdgeLeftTop, .CaptionEdgeRightTop, .CaptionBorderTop,
  .CaptionVerticalLeft, .CaptionVerticalRight, .CaptionBorderBottom,
  .CaptionEdgeLeftBottom, .CaptionEdgeRightBottom,
  .BoxFrameHorizontal, .BoxFrameVerticalLeft, .BoxFrameVerticalRight,
  .BoxFrameEdgeLeftTop, .BoxFrameEdgeRightTop,
  .BoxFrameEdgeLeftBottom, .BoxFrameEdgeRightBottom,
  .CornerWrapper, #TibiaLogoArtworkTop, #tmp-browser-info {
    display: none !important;
  }

  .TableContainer, .SmallBox, .InnerTableContainer, .TableContentContainer {
    background: none !important;
    border: 0 !important;
    width: auto !important;
    margin-bottom: var(--space-8);
  }
  .TableContainer { background: var(--color-surface) !important; border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); }

  .CaptionContainer, .CaptionInnerContainer { background: none !important; height: auto !important; }
  .CaptionContainer .Text {
    font-family: var(--font-heading); font-weight: 500;
    font-size: 1.0625rem; color: var(--color-accent);
    background: none !important; padding: var(--space-2) var(--space-2) var(--space-4) !important;
    text-align: left !important;
  }

  table.Table1, table.Table2, table.Table3, table.Table4, table.Table5,
  table.TableContent, table.InnerTableContainer {
    width: 100% !important;
    max-width: 100% !important;
    background: none !important;
    border: 0 !important;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--color-text);
  }
  table.TableContent th, table.TableContent td { border: 0 !important; padding: var(--space-3) var(--space-4) !important; }
  table.TableContent { border: 0 !important; }

  /* As faixas claras do tema tibia.com viram tons do ground. */
  .LabelV150, .LabelV200, .LabelV250, .LabelV300,
  .Odd, .Even, .OddRow, .EvenRow,
  td[bgcolor], tr[bgcolor] {
    background-color: transparent !important;
    color: inherit !important;
  }
  table.TableContent tr:nth-child(odd)  > td { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
  table.TableContent tr:first-child > td {
    font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    background: none;
  }

  /* Qualquer tabela legada rola dentro do próprio contêiner. */
  .gk-legacy table { max-width: 100%; }
  .gk-legacy { overflow-x: auto; }

  /* Botões-imagem do tema antigo. */
  .MediumButtonBackground, .MediumButtonOver, .BigButtonBackground {
    background: none !important; width: auto !important; height: auto !important;
  }
  input.MediumButtonText[type="image"], input[type="image"] { max-height: 34px; width: auto; }

  /* Links legados herdam o ouro. */
  .gk-legacy a { color: var(--color-accent-300); }

  /* Sem larguras fixas herdadas. */
  .gk-legacy [width], .gk-legacy [style*="width:"] { max-width: 100% !important; }
  .gk-legacy img { height: auto; }

  /* ── Campos legados herdam o input do design system ─────────────────── */
  .gk-legacy input[type="text"], .gk-legacy input[type="email"],
  .gk-legacy input[type="password"], .gk-legacy input[type="number"],
  .gk-legacy input[type="search"], .gk-legacy input:not([type]),
  .gk-legacy select, .gk-legacy textarea {
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    background: var(--color-bg-deep);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    font: inherit; font-size: 1rem;
    max-width: 100%;
  }
  .gk-legacy input:focus-visible, .gk-legacy select:focus-visible, .gk-legacy textarea:focus-visible {
    border-color: var(--color-accent); outline-offset: 0;
  }

  /* ── Botões legados viram o botão contornado do design system ───────── */
  .gk-legacy input[type="submit"], .gk-legacy input[type="button"],
  .gk-legacy input[type="reset"], .gk-legacy button:not([class*="gk-"]),
  .gk-legacy .BigButtonText, .gk-legacy .MediumButtonText,
  .gk-legacy a.Button, .gk-legacy .BigButton, .gk-legacy .MediumButton {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: var(--space-2) var(--space-6);
    font-family: var(--font-heading); font-weight: 500; font-size: 0.875rem;
    color: var(--color-accent) !important;
    background: transparent !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer; text-decoration: none;
    width: auto !important; height: auto !important;
    transition: background var(--dur-1) var(--ease-out);
  }
  .gk-legacy input[type="submit"]:hover, .gk-legacy input[type="button"]:hover,
  .gk-legacy button:not([class*="gk-"]):hover, .gk-legacy .BigButtonText:hover,
  .gk-legacy a.Button:hover, .gk-legacy .MediumButtonText:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
  }

  /* ── Fundos claros remanescentes do tibia.com neutralizados ─────────── */
  .gk-legacy [bgcolor], .gk-legacy [background],
  .gk-legacy .Border_1, .gk-legacy .Border_2, .gk-legacy .Border_3,
  .gk-legacy .BoxContent, .gk-legacy .ContentBox, .gk-legacy #BoxContent {
    background-color: transparent !important;
    background-image: none !important;
  }

  /* Ajuste de densidade: células legadas não herdam padding gigante. */
  .gk-legacy td, .gk-legacy th { padding: var(--space-2) var(--space-4); }
}

/* ──────────────────────────────────────────────────────────── utilities ── */
@layer utilities {
  .gk-stack       { display: flex; flex-direction: column; }
  .gk-stack-2 > * + * { margin-top: var(--space-2); }
  .gk-stack-4 > * + * { margin-top: var(--space-4); }
  .gk-stack-6 > * + * { margin-top: var(--space-6); }
  .gk-stack-8 > * + * { margin-top: var(--space-8); }
  .gk-row         { display: flex; align-items: center; gap: var(--space-3); }
  .gk-row--wrap   { flex-wrap: wrap; }
  .gk-between     { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .gk-mt-0  { margin-top: 0; }
  .gk-mb-0  { margin-bottom: 0; }
  .gk-mt-8  { margin-top: var(--space-8); }
  .gk-mb-8  { margin-bottom: var(--space-8); }
  .gk-muted { color: color-mix(in srgb, var(--color-text) 58%, transparent); }
  .gk-accent{ color: var(--color-accent-300); }
  .gk-small { font-size: 0.8125rem; }
  .gk-tiny  { font-size: 0.6875rem; }
  .gk-center{ text-align: center; }
  .gk-right { text-align: right; }
  .gk-measure { max-width: 68ch; }
  .gk-nowrap  { white-space: nowrap; }
  .gk-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gk-full  { width: 100%; }
  .gk-hide-sm { }
  @media (max-width: 640px) { .gk-hide-sm { display: none !important; } }
  @media (min-width: 641px) { .gk-only-sm { display: none !important; } }

  /* Imagens de conteúdo se fundem ao ground escuro. */
  .gk-lighten { mix-blend-mode: lighten; background-color: transparent; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GosakOT — Neutralização decisiva dos fundos claros legados (tibia.com)
   FORA de @layer de propósito: vence o CSS legado não-layered e o bgcolor/
   style inline. O texto do DS é claro (--color-text #e9e9ed); estes fundos
   bege (#D4C0A1 / #F1E0C6) deixavam o texto ilegível — 886 falhas de contraste
   no axe (Ciclo 2). Aqui viram a superfície escura do DS.
   ══════════════════════════════════════════════════════════════════════════ */
[bgcolor="#D4C0A1" i], [bgcolor="#F1E0C6" i], [bgcolor="#E0D0B0" i],
[bgcolor="#FAF0D7" i], [bgcolor="#EFE0C6" i],
[style*="#D4C0A1" i], [style*="#F1E0C6" i], [style*="d5c1a3" i],
.InnerTableContainer, .TableContentContainer,
table.Table1 > tbody > tr > td, table.Table2 > tbody > tr > td,
table.Table3 > tbody > tr > td, table.Table4 > tbody > tr > td,
table.Table5 > tbody > tr > td {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  color: var(--color-text) !important;
}
/* Cabeçalho das tabelas legadas: um tom acima, texto ouro suave. */
table.Table1 > tbody > tr:first-child > td,
table.Table2 > tbody > tr:first-child > td,
table.Table3 > tbody > tr:first-child > td {
  background-color: var(--color-surface-2) !important;
}

/* Texto escuro legado (feito p/ fundo bege) agora sobre superfície escura:
   força cor legível em descendentes de texto, preservando links (ouro). */
.InnerTableContainer b, .InnerTableContainer strong, .InnerTableContainer font,
.InnerTableContainer span, .InnerTableContainer p, .InnerTableContainer li,
table.Table1 td b, table.Table2 td b, table.Table3 td b,
table.Table1 td font, table.Table2 td font, table.Table3 td font,
table.Table1 td strong, table.Table2 td strong, table.Table3 td strong,
[bgcolor="#D4C0A1" i] b, [bgcolor="#F1E0C6" i] b,
[bgcolor="#D4C0A1" i] font, [bgcolor="#F1E0C6" i] font {
  color: var(--color-text) !important;
}
.InnerTableContainer a, table.Table1 td a, table.Table2 td a, table.Table3 td a {
  color: var(--color-accent-300) !important;
}
/* Texto-mudo do DS: 52% falhava AA (~4.3:1); 66% passa. */
.gk-card__meta { color: color-mix(in srgb, var(--color-text) 66%, transparent) !important; }

/* Guarda contra overflow horizontal residual (ícones/flags legados ~8px além
   da viewport em loot/characterprofile). 'clip' não cria contexto de scroll,
   então não quebra position:sticky do cabeçalho. */
html, body { overflow-x: clip; max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   ServerInfo / Commands — 2 colunas compactas (2026-08-26)
   As páginas legadas empilham várias caixas .TableContainer curtas em coluna
   única (muito espaço vazio). column-count flui as caixas em 2 colunas e
   equilibra a altura; break-inside mantém cada caixa inteira. Escopado por
   data-page para não afetar highscores/etc.
   ══════════════════════════════════════════════════════════════════════════ */
body[data-page="serverinfo"] main.gk-legacy,
body[data-page="commands"] main.gk-legacy {
  column-count: 2;
  column-gap: var(--space-6);
}
body[data-page="serverinfo"] main.gk-legacy > .TableContainer,
body[data-page="commands"] main.gk-legacy > .TableContainer {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--space-6) !important;
}
@media (max-width: 860px) {
  body[data-page="serverinfo"] main.gk-legacy,
  body[data-page="commands"] main.gk-legacy { column-count: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Unificação de fundo das tabelas legadas (2026-08-26)
   Antes: caixa=surface, cabeçalho=surface-2, corpo=surface — patchwork de tons
   dentro da mesma tabela. Agora UM fundo só (o da .TableContainer); células
   transparentes; cabeçalho de coluna distinguido por tipografia (ouro/negrito)
   + borda, não por cor de fundo; zebra única e translúcida. Uniforme em todas
   as páginas legadas. Vence o override anterior por vir depois (unlayered).
   ══════════════════════════════════════════════════════════════════════════ */
main.gk-legacy .InnerTableContainer,
main.gk-legacy .TableContentContainer,
main.gk-legacy table.TableContent td,
main.gk-legacy table.Table1 > tbody > tr > td,
main.gk-legacy table.Table2 > tbody > tr > td,
main.gk-legacy table.Table3 > tbody > tr > td,
main.gk-legacy table.Table4 > tbody > tr > td,
main.gk-legacy table.Table5 > tbody > tr > td {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;
}
/* Cabeçalho de coluna: sem cor de fundo, distinção por texto + borda. */
main.gk-legacy table.Table1 > tbody > tr:first-child > td,
main.gk-legacy table.Table2 > tbody > tr:first-child > td,
main.gk-legacy table.Table3 > tbody > tr:first-child > td,
main.gk-legacy table.Table4 > tbody > tr:first-child > td,
main.gk-legacy table.Table5 > tbody > tr:first-child > td,
main.gk-legacy table.TableContent tr:first-child td {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent) !important;
}
/* Zebra única e sutil nas linhas de dados. */
main.gk-legacy table.Table1 > tbody > tr:nth-child(2n) > td,
main.gk-legacy table.Table2 > tbody > tr:nth-child(2n) > td,
main.gk-legacy table.Table3 > tbody > tr:nth-child(2n) > td,
main.gk-legacy table.TableContent tr:nth-child(2n) td {
  background-color: color-mix(in srgb, var(--color-text) 5%, transparent) !important;
}

/* ServerInfo/Commands: o box de intro (seletor de idioma) atravessa as 2 colunas
   no topo — antes ficava só na coluna esquerda e a empurrava pra baixo, deixando
   as duas colunas desalinhadas (topo 196 vs 112). Agora ambas começam juntas. */
/* O seletor de idioma legado (.SmallBox) duplica o PT|EN do header e, por ficar
   só na coluna esquerda, desalinhava as 2 colunas. Escondido → as colunas
   começam juntas no topo. (A língua passa a vir do header, ver serverinfo.php.)
   column-span:all quebrava a multicol quando o container tem overflow, então
   não usamos spanner. */
body[data-page="serverinfo"] main.gk-legacy > .SmallBox,
body[data-page="commands"] main.gk-legacy > .SmallBox { display: none; }
/* <br> soltos entre caixas atrapalham a multicol — some. */
body[data-page="serverinfo"] main.gk-legacy > br,
body[data-page="commands"] main.gk-legacy > br { display: none; }