/* Moboria: componentes compartilhados. Catálogo vivo em /styleguide/. Páginas só acrescentam o que é delas (home.css, live.css, ...).
   Moldura pixel: borda real de 2px (--border) na cor de --rim + raio de 2px, e, nos controles, uma "borda de baixo" dura (sombra de
   uma camada, sem desfoque). Sem clip-path, sem imagem, sem sombras múltiplas: renderiza igual em qualquer motor. */

.panel, .card, .btn, .chip, .portrait-card, .sidebar-nav, .notice, .meter, .tag, .pill, .step {
  border: var(--border) solid var(--rim, var(--line));
  border-radius: var(--radius);
}

/* ---------- Classe de herói: --class (aro) e --class-ink (texto) a partir de [data-class] ---------- */
[data-class] { --class: var(--line-strong); --class-ink: var(--muted); }
[data-class="barbarian"] { --class: var(--c-barbarian); --class-ink: var(--c-barbarian-ink); }
[data-class="cleric"] { --class: var(--c-cleric); --class-ink: var(--c-cleric-ink); }
[data-class="necromancer"] { --class: var(--c-necromancer); --class-ink: var(--c-necromancer-ink); }
[data-class="ranger"] { --class: var(--c-ranger); --class-ink: var(--c-ranger-ink); }
[data-class="druid"] { --class: var(--c-druid); --class-ink: var(--c-druid-ink); }
[data-class="knight"] { --class: var(--c-knight); --class-ink: var(--c-knight-ink); }
[data-class="rogue"] { --class: var(--c-rogue); --class-ink: var(--c-rogue-ink); }
[data-class="sorcerer"] { --class: var(--c-sorcerer); --class-ink: var(--c-sorcerer-ink); }

/* ---------- Cabeçalho: sem hambúrguer. 360px = 2 linhas (marca+pílula / menu+Watch); >= 760px = 1 linha ---------- */
.site-header { background: var(--base); border-bottom: 2px solid var(--line); position: relative; z-index: var(--z-header); }
.site-header__inner {
  display: grid; align-items: center; column-gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand pill" "nav watch";
  padding-block: var(--space-2);
}
.brand { grid-area: brand; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; text-decoration: none; }
.brand__mark { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line-strong); }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: .02em; }
.site-header .pill { grid-area: pill; justify-self: end; }
.site-nav { grid-area: nav; min-width: 0; }
.site-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--space-1); }
.site-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  font-weight: 700; color: var(--muted); text-decoration: none;
  border-bottom: 3px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-nav a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
/* link ativo: só CSS, a partir de <body data-page> (o servidor ainda põe aria-current) */
body[data-page="live"] .site-nav [data-nav="live"],
body[data-page="wiki"] .site-nav [data-nav="wiki"],
body[data-page="account"] .site-nav [data-nav="account"],
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--gold-press); }
.site-header__watch { grid-area: watch; justify-self: end; }
@media (max-width: 359px) { .brand__mark { width: 28px; height: 28px; } .brand__name { font-size: 1.25rem; } .brand { gap: var(--space-1); } }
@media (min-width: 760px) {
  .site-header__inner { grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "brand pill . nav watch"; column-gap: var(--space-4); padding-block: var(--space-3); }
  .site-nav ul { gap: var(--space-2); }
  .site-header__watch { margin-left: var(--space-2); }
}

/* ---------- Rodapé ---------- */
.site-footer { margin-top: var(--space-8); background: var(--panel); border-top: 2px solid var(--line); padding-block: var(--space-6) var(--space-7); font-size: var(--text-sm); color: var(--muted); }
.site-footer__inner { display: grid; gap: var(--space-5); }
.site-footer__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--text); line-height: 1.1; margin-bottom: var(--space-1); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--text); }
.site-footer__notes p + p { margin-top: var(--space-2); }
.site-footer__notes { scroll-margin-top: var(--space-5); }
@media (min-width: 760px) { .site-footer__inner { grid-template-columns: 1fr 1fr 1.5fr; gap: var(--space-6); } .site-footer__nav ul { flex-direction: column; gap: 0; } }

/* ---------- Botões ---------- */
.btn {
  --rim: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  --lip: rgb(0 0 0 / .55);
  min-height: 44px; padding: 0 var(--space-4);
  background: var(--raised); color: var(--text); box-shadow: 0 3px 0 0 var(--lip);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --rim: var(--gold-press); background: var(--raised-hi); text-decoration: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--lip); }
.btn--gold { --rim: var(--gold-press); --lip: var(--gold-deep); background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-hi); }
.btn--gold:active { background: var(--gold-press); }
.btn--ghost { background: transparent; --lip: transparent; }
.btn--ghost:hover { background: var(--raised); }
.btn--sm { padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--lg { min-height: 56px; padding: 0 var(--space-5); font-size: var(--text-lg); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }

/* ---------- Chip copiável ("Type !join in chat"). Só marcação aqui; o JS da Home liga data-copy / [data-copied] ---------- */
.chip {
  --rim: var(--line-strong);
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  min-height: 48px; padding: var(--space-2) var(--space-4);
  background: var(--panel); color: var(--text); font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.chip:hover { --rim: var(--gold-press); background: var(--raised); }
.chip .cmd { font-size: 1.15em; padding: .05em .5em; }
.chip__hint { margin-left: var(--space-1); font-size: var(--text-sm); font-weight: 400; color: var(--muted); }
.chip[data-copied] { --rim: var(--live); }
.chip[data-copied] .chip__hint { color: var(--live); font-weight: 700; }

/* ---------- Painel e cartão ---------- */
.panel { --rim: var(--line); background: var(--panel); padding: var(--space-5); }
.panel--raised { background: var(--raised); }
.card { --rim: var(--line); display: flex; flex-direction: column; gap: var(--space-3); background: var(--panel); padding: var(--space-5); color: var(--text); text-decoration: none; transition: background-color var(--dur) var(--ease); }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: var(--lh-snug); }
.card__meta { color: var(--muted); font-size: var(--text-sm); }
a.card:hover, .card--link:hover { --rim: var(--gold-press); background: var(--raised); text-decoration: none; }

/* ---------- Tag (rótulo curto; com data-class ganha a cor da classe) e pílula (estado) ---------- */
.tag {
  --rim: var(--class, var(--line-strong));
  display: inline-flex; align-items: center; padding: 0 var(--space-2); min-height: 24px; border-width: 1px;
  background: var(--raised); color: var(--class-ink, var(--muted)); font-size: var(--text-xs); font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.pill {
  --rim: var(--line-strong);
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 32px; padding: 0 var(--space-3);
  background: var(--panel); color: var(--muted); font-size: var(--text-sm); font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
}
a.pill[href]::after { content: ""; position: absolute; inset: -8px -2px; } /* área de toque de 48px sem engordar a pílula */
a.pill[href]:hover { --rim: var(--gold-press); color: var(--text); }
.pill__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); }
.pill[data-state="live"], .pill--live { color: var(--text); }
.pill[data-state="live"] .pill__dot, .pill--live .pill__dot { background: var(--live); border-color: var(--live); }
.pill[data-state="offline"] .pill__dot, .pill--offline .pill__dot { background: var(--line-strong); }
[data-live-pill] { min-width: 9.75rem; } /* reserva a largura do maior texto ("LIVE · 12 heroes"): sem layout shift */
@media (prefers-reduced-motion: no-preference) {
  .pill[data-state="live"] .pill__dot::after, .pill--live .pill__dot::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--live);
    animation: pill-pulse 1.8s var(--ease) infinite;
  }
}
@keyframes pill-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

/* ---------- Medidor de vida (ATENÇÃO: dentro de .meter, --hp é a PORCENTAGEM e esconde o --hp vermelho da paleta; o vermelho é --hp-low): <div class="meter" role="meter" aria-valuenow aria-valuemin aria-valuemax aria-label>
   <span class="meter__fill"></span></div>. Largura = --hp (0-100) via CSSOM (el.style.setProperty), cor = data-level (ok|mid|low), tudo por js/meter.js ---------- */
.meter { --rim: var(--line-strong); --hp: 0; position: relative; height: 16px; overflow: hidden; background: var(--base); }
.meter--lg { height: 22px; }
.meter__fill {
  display: block; height: 100%; width: calc(var(--hp) * 1%); max-width: 100%;
  background: var(--hp-ok); transition: width var(--dur-slow) var(--ease), background-color var(--dur) var(--ease);
}
.meter[data-level="mid"] .meter__fill { background: var(--hp-mid); }
.meter[data-level="low"] .meter__fill { background: var(--hp-low) repeating-linear-gradient(135deg, rgb(0 0 0 / .28) 0 4px, transparent 4px 8px); } /* listras: não depende só da cor */
.meter-row { display: flex; align-items: center; gap: var(--space-3); }
.meter-row .meter { flex: 1; }
.meter-row .num { flex: none; min-width: 5ch; text-align: right; font-size: var(--text-sm); }

/* ---------- Faixa de arte (hero, band--art): a imagem entra por --hero-img definido numa CLASSE (nunca style="") ---------- */
.hero--gate, .band--gate { --hero-img: url("/img/art/gate-sm.webp"); }
.hero--valley, .band--valley { --hero-img: url("/img/art/valley-sm.webp"); }
@media (min-width: 700px) {
  .hero--gate, .band--gate { --hero-img: url("/img/art/gate.webp"); }
  .hero--valley, .band--valley { --hero-img: url("/img/art/valley.webp"); }
}
.hero, .band--art {
  position: relative; isolation: isolate; display: grid; align-items: end;
  background: var(--base) var(--hero-img, none) var(--hero-pos, center 28%) / cover no-repeat;
}
.hero::before, .band--art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--base) 3%, rgb(20 17 14 / .80) 36%, rgb(20 17 14 / .32) 100%);
}
@media (min-width: 900px) {
  .hero::before, .band--art::before {
    background: linear-gradient(to right, rgb(20 17 14 / .94) 0%, rgb(20 17 14 / .62) 46%, rgb(20 17 14 / .12) 100%), linear-gradient(to top, var(--base) 0%, transparent 38%);
  }
}
.hero { min-height: 26rem; min-height: clamp(26rem, 76svh, 44rem); padding-block: var(--space-7) var(--space-6); }
.hero__inner { display: flex; flex-direction: column; gap: var(--space-4); max-width: 40rem; }
.hero__title { font-size: var(--text-4xl); line-height: var(--lh-tight); font-weight: 800; }
.hero__lead, .lede { font-size: var(--text-lg); line-height: 1.5; max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-2); }

/* ---------- Seção ---------- */
.band { padding-block: var(--space-7); }
.band--panel { background: var(--panel); border-block: 2px solid var(--line); }
.band--art { padding-block: var(--space-8); }
.band__title { margin-bottom: var(--space-5); }
@media (min-width: 900px) { .band { padding-block: var(--space-8); } }

/* ---------- Faixa rolável de retratos (scroll-snap). Dê role="region" aria-label e tabindex="0" ao <ul class="strip"> ---------- */
.strip {
  display: flex; gap: var(--space-4); list-style: none; margin: 0; overflow-x: auto; overscroll-behavior-x: contain;
  padding: var(--space-3) max(var(--gutter), calc((100% - var(--container)) / 2)) var(--space-4);
  scroll-snap-type: x proximity; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.strip > * { flex: none; width: clamp(8.5rem, 42vw, 13.5rem); scroll-snap-align: start; }

/* ---------- Cartão de retrato 2:3 (nunca cortado em quadrado). <a|div class="portrait-card" data-class="knight"> img + .portrait-card__body ---------- */
.portrait-card {
  --rim: var(--class, var(--line-strong));
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; isolation: isolate;
  background: var(--panel); color: var(--text); text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.portrait-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait-card__body { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px; padding: var(--space-6) var(--space-3) var(--space-3); background: linear-gradient(to top, rgb(20 17 14 / .94) 35%, transparent); }
.portrait-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.15; }
.portrait-card__meta { color: var(--class-ink, var(--muted)); font-size: var(--text-sm); font-weight: 700; }
a.portrait-card:hover { text-decoration: none; }
a.portrait-card:hover .portrait-card__name { text-decoration: underline; text-decoration-color: var(--class); text-underline-offset: .2em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { a.portrait-card:hover { transform: translateY(-3px); } }

/* ---------- Helpers de layout ---------- */
.stack { display: flex; flex-direction: column; gap: var(--stack, var(--space-4)); }
.stack--sm { --stack: var(--space-2); }
.stack--lg { --stack: var(--space-6); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 15rem)), 1fr)); }
.grid--wide { --grid-min: 22rem; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-3)); }
.cluster--sm { --cluster: var(--space-2); }

/* ---------- Prosa (wiki, páginas legais) ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose > h2 { margin-top: var(--space-7); font-size: var(--text-2xl); }
.prose > h3 { margin-top: var(--space-6); }
.prose > h2 + *, .prose > h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--muted); }
.prose blockquote { padding: var(--space-3) var(--space-5); background: var(--panel); border-left: 4px solid var(--line-strong); color: var(--text); }
.prose img { margin-block: var(--space-5); }
.prose code { padding: 0 .3em; background: var(--raised); border-radius: var(--radius); }
.prose .cmd { padding: 0 .4em; }

/* ---------- Tabela. Envolva em <div class="table-wrap" tabindex="0" role="region" aria-label="..."> para rolar no celular ---------- */
.table-wrap { overflow-x: auto; max-width: 100%; padding: 4px; margin: -4px; }
.table { width: 100%; font-size: var(--text-sm); text-align: left; }
.table caption { padding: var(--space-2) 0; color: var(--muted); text-align: left; caption-side: top; }
.table th, .table td { padding: var(--space-2) var(--space-3); vertical-align: top; }
.table td { min-width: 5.5rem; }
.table .wrap { min-width: 14rem; } /* coluna de texto longo: nas outras a tabela rola de lado em vez de espremer */
.table thead th { background: var(--raised); border-bottom: 2px solid var(--line-strong); font-weight: 700; white-space: nowrap; }
.table tbody tr:nth-child(even) { background: rgb(42 35 27 / .55); }
.table tbody th { font-weight: 700; }
.table .num { text-align: right; white-space: nowrap; }

/* ---------- Menu lateral da wiki: <details class="sidebar-nav"> fechado no celular, aberto e fixo a partir de 60rem ---------- */
.with-sidebar { display: grid; gap: var(--space-5); align-items: start; }
.with-sidebar__main { min-width: 0; }
.sidebar-nav { --rim: var(--line); background: var(--panel); }
.sidebar-nav > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--space-4);
  font-weight: 700; list-style: none;
}
.sidebar-nav > summary::-webkit-details-marker { display: none; }
.sidebar-nav > summary::after {
  content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.sidebar-nav[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-3); }
.sidebar-nav ul ul { padding: 0 0 0 var(--space-4); }
.sidebar-nav__label { padding: var(--space-3) var(--space-3) var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.sidebar-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border-left: 3px solid transparent; border-radius: var(--radius); color: var(--muted); text-decoration: none;
}
.sidebar-nav a:hover { color: var(--text); background: var(--raised); }
.sidebar-nav a[aria-current="page"] { color: var(--text); background: var(--raised); border-left-color: var(--gold); font-weight: 700; }
@media (min-width: 60rem) {
  .with-sidebar { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-6); }
  .sidebar-nav { position: sticky; top: var(--space-4); }
  .sidebar-nav > summary { display: none; }
  .sidebar-nav ul:first-of-type { padding-top: var(--space-3); }
}
@supports selector(::details-content) { @media (min-width: 60rem) { .sidebar-nav::details-content { content-visibility: visible; } } }

/* ---------- Aviso: vazio, offline, erro, info. Sempre com título em texto (cor nunca é a única pista) ---------- */
.notice {
  --rim: var(--line); display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5); background: var(--panel); border-left: 6px solid var(--accent, var(--line-strong));
}
.notice__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; }
.notice p:not(.notice__title) { color: var(--muted); }
.notice .btn, .notice .cluster { margin-top: var(--space-3); align-self: flex-start; }
.notice--empty { background: transparent; border: 2px dashed var(--line-strong); }
.notice--offline { --accent: var(--muted); }
.notice--error { --accent: var(--hp); }
.notice--error .notice__title { color: var(--hp-ink); }
.notice--info { --accent: var(--c-druid); }

/* ---------- Espaço de anúncio: reserva a altura (sem layout shift); o hidden é respeitado (anúncio desligado = nada) ---------- */
.ad-slot { display: block; min-height: 280px; margin-block: var(--space-6); padding: var(--space-5) var(--space-3) var(--space-3); position: relative; background: var(--panel); border: 2px dashed var(--line); overflow: hidden; }
.ad-slot::before { content: "Advertisement"; position: absolute; top: var(--space-1); left: var(--space-3); color: var(--muted); font-size: var(--text-xs); }

/* ---------- Formulário e número em destaque ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > label { font-weight: 700; font-size: var(--text-sm); }
.field__help { color: var(--muted); font-size: var(--text-sm); }
.input {
  width: 100%; min-height: 44px; padding: 0 var(--space-3); background: var(--base); color: var(--text);
  border: 2px solid var(--line-strong); border-radius: var(--radius);
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover { border-color: var(--gold-press); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__value { font-family: var(--font-px); font-weight: 500; font-size: var(--text-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--muted); font-size: var(--text-sm); }