/* Moboria: base. Reset, tipografia, links, foco, helpers. Sem componentes aqui (veja components.css). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-4); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--base);
  /* um clarão quente no topo (gradiente, sem imagem) */
  background-image: radial-gradient(120% 50% at 50% -8%, rgb(255 211 122 / .07), transparent 62%);
  background-repeat: no-repeat;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--text-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { text-wrap: pretty; }
small, .text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.muted { color: var(--muted); }
strong, b { font-weight: 700; }

/* .px/.num: rótulos de jogo; a Pixelify só desenha as letras (unicode-range), os dígitos saem em Atkinson negrito tabular.
   .cmd: comando de chat em monoespaçada do sistema, porque o público precisa LER e DIGITAR "!join" sem dúvida. */
.px, .num { font-family: var(--font-px); font-weight: 700; letter-spacing: .01em; }
.num { font-variant-numeric: tabular-nums; }
.cmd, code, kbd, samp { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.cmd {
  display: inline-block; padding: 0 .4em; border-radius: var(--radius);
  background: var(--raised); color: var(--text);
  border: 1px solid var(--line-strong);
  font-size: .94em; line-height: 1.5; white-space: nowrap;
}
code, kbd, samp { font-size: .94em; }

/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold-press);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { text-decoration-thickness: 2px; }
/* links que parecem controle (botões, menu, cartões) tiram o sublinhado nos seus próprios componentes */

/* ---------- Foco: anel dourado, sempre visível no teclado ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--gold); color: var(--on-gold); font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Layout base ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 900px) { :root { --gutter: 32px; } }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; } /* alt visível se a imagem falhar */
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

hr { border: 0; border-top: 2px solid var(--line); margin-block: var(--space-6); }

.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

::selection { background: var(--gold); color: var(--on-gold); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
summary { cursor: pointer; }
table { border-collapse: collapse; }
@supports (touch-action: manipulation) { a, button, summary, input, select { touch-action: manipulation; } }

/* ---------- Movimento reduzido: nada anima, nada rola suave ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}