/* ---- Tokens do sistema de design (docs/design.md) ----
     Dono: base. Primeiro arquivo da cascata: tudo o que vem depois pode usar.
     Fantasia medieval escura em pixel art: superfícies roxo-noite, destaque violeta,
     ouro para o que vale (nível, moeda, prêmio, ação principal de compra).
     Regra: cor, tamanho de letra, espaço, raio, sombra, duração e camada saem daqui.
     Valor solto no CSS de uma janela só quando nenhum token serve (e com comentário). */
  :root {
    /* Superfícies, do fundo para cima */
    --c-bg: #0b0a12;              /* fundo do jogo, entre os quadros do HUD */
    --c-bg-deep: #06050b;         /* sombra dura dos quadros, fundo de barra */
    --c-sunken: #110f1e;          /* poço: campo, barra vazia, lista dentro de cartão */
    --c-surface-1: #17142a;       /* quadro do HUD, cartão */
    --c-surface-2: #201c36;       /* cabeçalho de quadro, linha em destaque */
    --c-surface-3: #2a2545;       /* hover de linha, botão secundário */
    --c-window: #1e1b2b;          /* corpo das janelas */
    --c-window-head: #241f3a;     /* faixa do título da janela */
    --c-overlay: rgba(6, 5, 11, .84); /* fundo escuro atrás da janela */
    --c-scrim: rgba(6, 5, 11, .6);    /* fundo atrás de diálogo e folha */

    /* Texto */
    --c-text: #e8e6f0;
    --c-text-strong: #ffffff;
    --c-text-2: #c5c1d6;          /* texto de apoio */
    --c-text-muted: #9a95ad;      /* rótulo, legenda */
    --c-text-faint: #6f6a85;      /* hora, dica apagada (só em texto >= 12px) */
    --c-title: #d9d2ff;           /* títulos de quadro e janela */
    --c-accent-text: #b9a9ff;     /* subtítulo, link */

    /* Bordas */
    --c-line: #322c52;
    --c-line-soft: #2a2545;
    --c-line-strong: #4a3f86;
    --c-line-hi: rgba(185, 169, 255, .07); /* brilho de 1px por dentro do quadro */

    /* Destaque */
    --c-violet: #7b61ff;
    --c-violet-strong: #5b3fd1;   /* botão principal */
    --c-violet-deep: #3b2f86;     /* aba ativa */
    --c-gold: #ffd166;
    --c-gold-strong: #e0a100;
    --c-gold-deep: #a8892f;
    --c-gold-dark: #6b5520;
    --c-focus: #ffd166;           /* anel de foco do teclado */

    /* Estados */
    --c-ok: #5fd38d;
    --c-ok-deep: #1f5a3a;
    --c-warn: #ffb37a;
    --c-warn-deep: #6b4220;
    --c-danger: #e5586b;
    --c-danger-text: #ff8a8a;
    --c-danger-deep: #7a2331;
    --c-info: #8fd8ff;
    --c-info-deep: #1b4c74;

    /* Raridades (as mesmas de content/items.ts RARITY) */
    --rar-0: #b8b3c8; /* Comum */
    --rar-1: #7ad65a; /* Incomum */
    --rar-2: #5aa8ff; /* Raro */
    --rar-3: #c47aff; /* Épico */
    --rar-4: #ffd24a; /* Lendário */
    --rar-5: #ff4d7e; /* Místico */

    /* Tipografia: duas famílias. Jersey 10 (pixel) só para títulos e números grandes. */
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Jersey 10", system-ui, sans-serif;
    /* Escala do texto da interface. Em em: acompanha a letra da janela (.modal), que já
       cresce com a tela. --fs-xs nunca fica abaixo de 12px. */
    --fs-xs: max(12px, .8em);
    --fs-sm: .875em;
    --fs-md: 1em;
    --fs-lg: 1.125em;
    --fs-xl: 1.3em;
    /* Escala da Jersey 10 (ela é baixa: precisa de ~1,4x para a mesma altura) */
    --fs-d-sm: 1.25em;
    --fs-d-md: 1.5em;
    --fs-d-lg: 1.85em;
    --fs-d-xl: 2.4em;
    --lh-tight: 1.15;
    --lh: 1.4;
    --fw-regular: 400;
    --fw-semi: 600;
    --fw-bold: 700;

    /* Espaço: múltiplos de 4 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Raios: pequenos (pixel art). Pílula só em contador e etiqueta. */
    --r-xs: 2px;
    --r-sm: 3px;
    --r-md: 4px;
    --r-lg: 6px;
    --r-pill: 999px;

    /* Bordas e sombras */
    --bw: 2px;                    /* borda de quadro */
    --sh-frame: inset 0 0 0 1px var(--c-line-hi), 0 2px 0 var(--c-bg-deep);
    --sh-raised: 0 2px 0 var(--c-bg-deep);
    --sh-pop: 0 6px 18px rgba(0, 0, 0, .6);
    --sh-window: 0 0 0 1px var(--c-bg-deep), 0 18px 48px rgba(0, 0, 0, .55);
    --sh-glow-violet: 0 0 10px rgba(123, 97, 255, .45);
    --sh-glow-gold: 0 0 10px rgba(255, 209, 102, .35);

    /* Movimento */
    --t-fast: 120ms;
    --t-med: 180ms;
    --t-slow: 280ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Alvos e controles */
    --touch: 44px;                /* alvo de toque mínimo */
    --ctl-sm: 32px;
    --ctl-md: 40px;
    --ctl-lg: 48px;

    /* Janelas: larguras padrão (.panel.sz-*) */
    --win-sm: 28em;
    --win-md: 40em;
    --win-lg: 56em;
    --win-xl: 70em;
    --win-2xl: 104em;

    /* Camadas (z-index). As mesmas de src/ui/kit/layers.ts (o teste tests/kit/tokens.test.ts confere). */
    --z-mundo: 0;
    --z-hud: 3;
    --z-hud-alto: 4;
    --z-janela: 5;
    --z-dialogo: 6;
    --z-tutorial: 6;
    --z-aviso: 6;
    --z-aviso-tela: 7;
    --z-ficha: 8;
    --z-cinematica: 40;
    --z-carregando: 55;
    --z-topo: 60;
    --z-dica: 90;

    /* Área segura (recorte da câmera, barra de gestos) */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
  }
  /* Toque: os controles pequenos e médios crescem até o alvo mínimo. */
  @media (pointer: coarse) {
    :root { --ctl-sm: var(--touch); --ctl-md: var(--touch); }
  }
  /* Global. Dono: base. Os valores saem dos tokens (styles/tokens.css, docs/design.md). */
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; overflow: hidden; background: #0d0c13; color: var(--c-text); font: 15px/var(--lh) var(--font-ui); -webkit-font-smoothing: antialiased; }
  h1 { font-size: 22px; margin: 0; }
  .sub { color: var(--c-text-muted); margin: 0; font-size: 13px; }
  ::selection { background: rgba(123, 97, 255, .45); color: var(--c-text-strong); }
  /* Barras de rolagem finas, na cor das bordas (o Chrome e o Firefox). */
  * { scrollbar-width: thin; scrollbar-color: #3a3452 transparent; }
  input, button { font: inherit; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid #453f63; background: #14121c; color: inherit; }
  select, textarea { font: inherit; color: inherit; }
  input::placeholder, textarea::placeholder { color: var(--c-text-faint); opacity: 1; }
  input:focus, select:focus, textarea:focus { border-color: var(--c-violet); outline: none; }
  button { background: var(--c-violet-strong); border-color: var(--c-violet-strong); cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), filter var(--t-fast); }
  button.alt { background: #2b2740; border-color: #453f63; }
  /* Passar o mouse acende um pouco (quem tem o seu :hover manda, a especificidade é zero). */
  :where(button:hover:not(:disabled)) { filter: brightness(1.1); }
  button:disabled { opacity: .5; cursor: not-allowed; }
  /* Foco do teclado: anel dourado, só quando vem do teclado. */
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  :where(input, select, textarea):focus-visible { outline-offset: 0; }
  /* O jogo ocupa a tela inteira; todo o resto fica por cima dele. */
  .stage { position: fixed; inset: 0; container: tela / inline-size; --edge: clamp(8px, 1.2cqw, 16px); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
  }
  /* Listas de números (dl): o HUD (Personagem) e a janela Personagem usam. */
  dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
  dt { color: #9a95ad; } dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
  /* ---- Kit de componentes (docs/design.md). Dono: base. ----
     Classes com o prefixo ui- (não batem com as de hoje). O TS que monta cada um: src/ui/kit/components.ts.
     Tamanhos em em (acompanham a letra da janela) e espaços pelos tokens --sp-*. */

  /* ---------- Botões: .ui-btn + primary (padrão) | secondary | danger | ghost | gold; sm | lg; block; icon ---------- */
  .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl-md); margin: 0; padding: 0 var(--sp-4); background: var(--c-violet-strong); border: 1px solid var(--c-violet); border-radius: var(--r-md); box-shadow: var(--sh-raised), inset 0 1px 0 rgba(255, 255, 255, .14); color: var(--c-text-strong); font: var(--fw-bold) var(--fs-md)/1.1 var(--font-ui); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), filter var(--t-fast), transform var(--t-fast); }
  .ui-btn:hover:not(:disabled) { filter: brightness(1.12); }
  .ui-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
  .ui-btn.secondary { background: var(--c-surface-3); border-color: var(--c-line-strong); color: var(--c-text); box-shadow: var(--sh-raised); }
  .ui-btn.danger { background: var(--c-danger-deep); border-color: var(--c-danger); }
  .ui-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--c-text-2); }
  .ui-btn.ghost:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); filter: none; }
  .ui-btn.gold { background: linear-gradient(#ffdf8f, var(--c-gold-strong)); border-color: var(--c-gold); color: #2a1a05; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
  /* Desabilitado: o mesmo para todas as variantes (primário, ouro, perigo, secundário). Fundo liso
     apagado, borda tracejada e o texto legível: nada de cor da variante esmaecida (o ouro virava
     uma barra marrom). O motivo vai num texto perto (.ui-hint). */
  .ui-btn.ui-btn:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"], .ghost) { opacity: 1; filter: none; background: var(--c-surface-1); border-color: var(--c-line-strong); border-style: dashed; box-shadow: none; color: var(--c-text-muted); text-shadow: none; cursor: not-allowed; }
  .ui-btn.ghost:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
  /* Os botões de ouro que ainda não são .ui-btn (Morte, Loja) desabilitam igual. */
  button.gold:disabled:not(.ui-btn) { opacity: 1; filter: none; background: var(--c-surface-1); border: 1px dashed var(--c-line-strong); box-shadow: none; color: var(--c-text-muted); text-shadow: none; cursor: not-allowed; }
  .ui-btn.ui-btn:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"], .ghost) :is(small, b, i, em) { color: inherit; }
  .ui-btn.sm { min-height: var(--ctl-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
  .ui-btn.lg { min-height: var(--ctl-lg); padding: 0 var(--sp-6); font-size: var(--fs-lg); }
  .ui-btn.block { display: flex; width: 100%; }
  .ui-btn.icon { width: var(--ctl-md); padding: 0; }
  .ui-btn.icon.sm { width: var(--ctl-sm); }
  .ui-btn.icon.lg { width: var(--ctl-lg); }
  .ui-btn > .ui-badge { margin-left: var(--sp-1); }
  /* Carregando: o texto some e um aro gira no lugar (a largura do botão não muda). */
  .ui-btn[aria-busy="true"] { position: relative; color: transparent !important; text-shadow: none; pointer-events: none; }
  .ui-btn[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ui-spin .8s linear infinite; }
  .ui-btn.gold[aria-busy="true"]::after { border-color: rgba(42, 26, 5, .3); border-top-color: #2a1a05; }
  .ui-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
  .ui-actions.start { justify-content: flex-start; }
  .ui-actions.fill > .ui-btn { flex: 1 1 0; min-width: max-content; }

  /* ---------- Abas: .ui-tabs > button (.on ou aria-selected="true") ---------- */
  /* Dividem a largura; quando não cabem, a faixa rola de lado (nunca corta o nome). */
  .ui-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-1); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .ui-tabs::-webkit-scrollbar { display: none; }
  .ui-tabs > button { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl-md); margin: 0; padding: 0 var(--sp-3); background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; color: var(--c-text-muted); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
  .ui-tabs > button:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); filter: none; }
  .ui-tabs > button:is(.on, [aria-selected="true"]) { background: var(--c-violet-deep); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-violet); }
  /* O contador vai ao lado do nome, não por cima: a faixa rola de lado e cortaria o que passa da borda. */
  .ui-tabs > button > .ui-badge { flex: none; }
  /* Variante linha: abas sublinhadas, para dentro de cartões. */
  .ui-tabs.line { padding: 0; gap: var(--sp-4); background: none; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; }
  .ui-tabs.line > button { flex: none; padding: 0 var(--sp-1); border-radius: 0; }
  .ui-tabs.line > button:is(.on, [aria-selected="true"]) { background: none; color: var(--c-gold); box-shadow: inset 0 -2px 0 var(--c-gold); }
  /* Variante que quebra a linha em vez de rolar de lado (poucas abas de nome comprido, janela estreita). */
  .ui-tabs.wrap { flex-wrap: wrap; overflow-x: visible; }
  .ui-tabs.wrap > button { flex: 1 1 auto; }

  /* ---------- Controle segmentado: .ui-seg > button (.on ou aria-pressed="true") ---------- */
  /* Uma escolha entre poucas opções (2 a 4) que muda o que se vê: modo de ver, gênero, prazo, filtro curto.
     Mais baixo que as abas; com toque, 44 px (--ctl-sm). .fill: as opções dividem a largura por igual. */
  .ui-seg { display: flex; gap: 2px; padding: 2px; background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .ui-seg > button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-3); background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; color: var(--c-text-muted); font: var(--fw-semi) var(--fs-sm)/1.2 var(--font-ui); filter: none; touch-action: manipulation; }
  .ui-seg > button:hover:not(:disabled, .on, [aria-pressed="true"]) { background: var(--c-surface-2); color: var(--c-text); filter: none; }
  .ui-seg > button:is(.on, [aria-pressed="true"]) { background: var(--c-violet-deep); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-violet); }
  .ui-seg.fill > button { flex: 1 1 0; }

  /* ---------- Interruptor: button.ui-switch com aria-pressed (liga e desliga na hora; --ac é a cor ligado) ---------- */
  /* .switch é o nome antigo (Configurações, Auto Helper, linha do WebGL): os dois valem. */
  :is(.ui-switch, .switch) { position: relative; flex: none; width: 2.9em; height: 1.6em; padding: 0; border-radius: 1em; background: var(--c-surface-3); border: 1px solid var(--c-line-strong); }
  :is(.ui-switch, .switch)::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.6em - 6px); height: calc(1.6em - 6px); border-radius: 50%; background: var(--c-text-muted); transition: transform var(--t-fast), background var(--t-fast); }
  :is(.ui-switch, .switch)[aria-pressed="true"] { background: color-mix(in srgb, var(--ac, var(--c-violet)) 35%, var(--c-bg)); border-color: var(--ac, var(--c-violet)); }
  :is(.ui-switch, .switch)[aria-pressed="true"]::after { transform: translateX(1.3em); background: var(--ac, var(--c-violet)); }

  /* ---------- Títulos de seção, pilhas e grades ---------- */
  .ui-h { display: flex; align-items: center; gap: .45em; margin: 0 0 var(--sp-2); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; color: var(--c-accent-text); }
  .ui-h::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  /* O lado do título (contagem, nota) é menor que o título: em é a letra do .ui-h (1,25em), então .64em = 0,8em da janela. */
  .ui-h > .ui-h-side { margin-left: auto; font: var(--fw-semi) max(12px, .64em)/1 var(--font-ui); color: var(--c-text-muted); }
  .ui-stack { display: grid; gap: var(--sp-3); align-content: start; }
  .ui-stack.tight { gap: var(--sp-2); }
  .ui-stack.loose { gap: var(--sp-5); }
  .ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 14em)), 1fr)); gap: var(--sp-3); }
  .ui-divider { height: 1px; margin: var(--sp-2) 0; border: 0; background: var(--c-line); }
  .ui-muted { color: var(--c-text-muted); }
  .ui-small { font-size: var(--fs-xs); }
  .ui-num { font-variant-numeric: tabular-nums; }

  /* ---------- Cartão: .ui-card (+ interactive | selected | rar com --c) ---------- */
  .ui-card { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); color: inherit; text-align: left; }
  .ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
  .ui-card-titles { display: grid; gap: 2px; min-width: 0; }
  .ui-card-title { margin: 0; min-width: 0; font: var(--fw-regular) var(--fs-d-sm)/var(--lh-tight) var(--font-display); letter-spacing: .02em; color: var(--c-title); overflow-wrap: anywhere; }
  .ui-card-sub { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
  .ui-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
  :is(button, a).ui-card, .ui-card.interactive { cursor: pointer; font: inherit; transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast); }
  :is(button, a).ui-card:hover:not(:disabled), .ui-card.interactive:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); filter: none; }
  .ui-card.selected { border-color: var(--c-gold); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .25), var(--sh-glow-gold); }
  .ui-card.rar { border-color: color-mix(in srgb, var(--c) 55%, var(--c-line)); background: radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), var(--c-surface-1); }
  .ui-card.sunken { background: var(--c-sunken); box-shadow: none; }

  /* ---------- Lista e linha: .ui-list > .ui-row (ícone | texto | ações) ---------- */
  .ui-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
  .ui-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: var(--ctl-lg); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); color: inherit; text-align: left; }
  .ui-row.no-icon { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-row-icon { display: grid; place-items: center; min-width: 2em; }
  .ui-row-main { display: grid; gap: 2px; min-width: 0; }
  .ui-row-title { font-weight: var(--fw-semi); color: var(--c-text); overflow-wrap: anywhere; }
  .ui-row-sub { color: var(--c-text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
  .ui-row-meta { color: var(--c-text-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .ui-row-actions { display: flex; align-items: center; gap: var(--sp-2); }
  :is(button, a).ui-row, .ui-row.interactive { width: 100%; cursor: pointer; font: inherit; }
  :is(button, a).ui-row:hover:not(:disabled), .ui-row.interactive:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); filter: none; }
  .ui-row.selected { border-color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 12%, var(--c-sunken)); }
  /* Em coluna estreita, as ações descem para uma linha própria. */
  @container painel (max-width: 30em) {
    .ui-row:has(> .ui-row-actions) { grid-template-columns: auto minmax(0, 1fr); }
    .ui-row > .ui-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  }

  /* ---------- Tabela: .ui-table (td com data-label vira cartão em janela estreita) ---------- */
  .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
  .ui-table th { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
  .ui-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line-soft); vertical-align: middle; }
  .ui-table tbody tr:hover td { background: var(--c-surface-2); }
  .ui-table :is(th, td).num { text-align: right; }
  @container painel (max-width: 40em) {
    .ui-table.cards, .ui-table.cards tbody, .ui-table.cards tr, .ui-table.cards td { display: block; }
    .ui-table.cards thead { display: none; }
    .ui-table.cards tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
    .ui-table.cards td { padding: 0; border: 0; text-align: left; }
    .ui-table.cards td[data-label]::before { content: attr(data-label); display: block; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
    .ui-table.cards tbody tr:hover td { background: none; }
  }

  /* ---------- Número em destaque: .ui-stat (small = rótulo, b = valor; tom gold | dia | up | down) ---------- */
  /* Resumos de extrato, painel da staff. Em grade: <div class="ui-grid" style="--min: 9em">. */
  .ui-stat { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .ui-stat > small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.25; }
  .ui-stat > b { color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .ui-stat.gold > b { color: var(--c-gold); }
  .ui-stat.dia > b { color: var(--c-info); }
  .ui-stat.up > b { color: var(--c-ok); }
  .ui-stat.down > b { color: var(--c-danger-text); }

  /* ---------- Marcas: .ui-badge (contador) e .ui-pill (etiqueta: ok | warn | danger | info | gold | rar com --c) ---------- */
  .ui-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-danger); box-shadow: 0 0 0 2px var(--c-bg-deep); color: #fff; font: var(--fw-bold) 12px/18px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
  .ui-badge.gold { background: var(--c-gold); color: #2a1a05; }
  .ui-badge.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }
  .ui-pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.35; white-space: nowrap; }
  .ui-pill.ok { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, var(--c-surface-1)); }
  .ui-pill.warn { color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); background: color-mix(in srgb, var(--c-warn) 10%, var(--c-surface-1)); }
  .ui-pill.danger { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-1)); }
  .ui-pill.info { color: var(--c-info); border-color: color-mix(in srgb, var(--c-info) 45%, transparent); background: color-mix(in srgb, var(--c-info) 10%, var(--c-surface-1)); }
  .ui-pill.gold { color: var(--c-gold); border-color: var(--c-gold-dark); background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-1)); }
  .ui-pill.rar { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--c-surface-1)); }

  /* ---------- Campos: .ui-field (label, .ui-input/.ui-select/.ui-textarea, .ui-hint, .ui-error); .ui-search ---------- */
  .ui-field { display: grid; gap: var(--sp-1); min-width: 0; }
  .ui-field > label, .ui-label { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .ui-input, .ui-select, .ui-textarea { width: 100%; min-width: 0; min-height: var(--ctl-md); margin: 0; padding: 0 var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-text); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .ui-textarea { min-height: 6em; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: var(--lh); }
  .ui-select { appearance: none; padding-right: 2.2em; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--c-text-muted) 50%); background-position: calc(100% - 1.1em) 52%, calc(100% - .75em) 52%; background-size: .35em .35em; background-repeat: no-repeat; cursor: pointer; }
  .ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: #5b4bb0; }
  .ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(123, 97, 255, .25); outline: none; }
  .ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
  .ui-hint { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .ui-error { color: var(--c-danger-text); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  .ui-field.invalid :is(.ui-input, .ui-select, .ui-textarea) { border-color: var(--c-danger); }
  .ui-search { position: relative; min-width: 0; }
  .ui-search::before { content: ""; position: absolute; left: .85em; top: 50%; width: .62em; height: .62em; margin-top: -.42em; border: 2px solid var(--c-text-muted); border-radius: 50%; pointer-events: none; }
  .ui-search::after { content: ""; position: absolute; left: 1.42em; top: 50%; width: 2px; height: .4em; margin-top: .1em; background: var(--c-text-muted); transform: rotate(-45deg); pointer-events: none; }
  .ui-search > .ui-input { padding-left: 2.3em; }

  /* ---------- Dica: .ui-tip (posicionada por quem abre; camada --z-dica) ---------- */
  .ui-tip { position: absolute; z-index: var(--z-dica); max-width: min(20em, calc(100vw - 16px)); padding: var(--sp-2) var(--sp-3); background: #0f0d1c; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-pop); color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); pointer-events: none; }
  .ui-tip b { color: var(--c-text-strong); }

  /* ---------- Vazio, carregando, erro ---------- */
  .ui-empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); background: rgba(17, 15, 30, .55); border: 1px dashed var(--c-line); border-radius: var(--r-md); color: var(--c-text-muted); text-align: center; }
  .ui-empty-icon { font-size: 2em; line-height: 1; opacity: .85; }
  .ui-empty-title { margin: 0; font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; color: var(--c-title); }
  .ui-empty p { margin: 0; max-width: 32em; }
  .ui-empty.error { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); }
  .ui-empty.error .ui-empty-title { color: var(--c-danger-text); }
  .ui-loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); color: var(--c-text-muted); }
  .ui-spinner { flex: none; display: inline-block; width: 1.1em; height: 1.1em; border: 2px solid var(--c-line-strong); border-top-color: var(--c-violet); border-radius: 50%; animation: ui-spin .8s linear infinite; }
  .ui-skeleton { display: block; min-height: 1em; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--c-surface-1) 0, var(--c-surface-2) 50%, var(--c-surface-1) 100%); background-size: 200% 100%; animation: ui-shimmer 1.3s linear infinite; }
  @keyframes ui-spin { to { transform: rotate(360deg); } }
  @keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

  /* ---------- Confirmação e diálogo: .ui-dialog-wrap > .ui-dialog (vira folha inferior no celular) ---------- */
  .ui-dialog-wrap { position: absolute; inset: 0; z-index: var(--z-dialogo); display: grid; place-items: center; padding: var(--sp-4); background: var(--c-scrim); }
  .ui-dialog { display: grid; gap: var(--sp-3); width: min(100%, 26em); max-height: 100%; overflow: auto; overscroll-behavior: contain; padding: var(--sp-4); background: var(--c-window); border: var(--bw) solid var(--c-line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-window), inset 0 0 0 1px var(--c-line-hi); font-size: clamp(14px, 2.6cqw, 15px); }
  .ui-dialog.danger { border-color: var(--c-danger-deep); }
  .ui-dialog-title { margin: 0; font: var(--fw-regular) var(--fs-d-md)/1.05 var(--font-display); letter-spacing: .02em; color: var(--c-title); }
  .ui-dialog-text { margin: 0; color: var(--c-text-2); }
  .ui-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); }

  /* ---------- Folha inferior: .ui-sheet (celular) ---------- */
  .ui-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dialogo); display: grid; gap: var(--sp-3); max-height: 85%; overflow: auto; overscroll-behavior: contain; padding: var(--sp-5) max(var(--sp-4), var(--safe-r)) max(var(--sp-4), var(--safe-b)) max(var(--sp-4), var(--safe-l)); background: var(--c-window); border-top: var(--bw) solid var(--c-line-strong); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .6); }
  .ui-sheet::before { content: ""; position: absolute; top: var(--sp-2); left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: var(--r-pill); background: var(--c-line-strong); }

  /* No celular em pé, o diálogo encosta embaixo (folha) e os botões ocupam a largura, o principal por último. */
  @media (max-width: 599px) {
    .ui-dialog-wrap { place-items: end stretch; padding: 0; }
    .ui-dialog { width: 100%; border-width: var(--bw) 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: max(var(--sp-4), var(--safe-b)); padding-left: max(var(--sp-4), var(--safe-l)); padding-right: max(var(--sp-4), var(--safe-r)); }
    .ui-dialog-actions { flex-direction: column-reverse; }
    .ui-dialog-actions > .ui-btn { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ui-spinner, .ui-skeleton, .ui-btn[aria-busy="true"]::after { animation-duration: 2.4s; }
    .ui-btn, .ui-card, .ui-input, .ui-select, .ui-textarea { transition: none; }
  }

  /* ---------- Ícones: <i class="ui-ic" style="--i: N"> (ui/kit/icons.ts, uiIcon). Pixel art 16x16 do
     client/img/ui/icones.png (tools/criar-icones-ui.lua), no lugar dos emoji. x2 e x3: pixel inteiro. ---------- */
  .ui-ic { --ic: 16px; display: inline-block; flex: none; width: var(--ic); height: var(--ic); vertical-align: -3px; background: url('/img/ui/icones.png') calc(var(--i, 0) * var(--ic) * -1) 0 / calc(var(--ic) * 48) var(--ic) no-repeat; image-rendering: pixelated; }
  .ui-ic.x2 { --ic: 32px; vertical-align: middle; }
  .ui-ic.x3 { --ic: 48px; vertical-align: middle; }

  /* ---------- Faixa de abas que rola (ui/kit/tabstrip.ts): esmaecido e seta na ponta com abas fora da vista ---------- */
  .ui-tabs { --tabs-bg: var(--c-sunken); overflow-y: hidden; }
  .ui-tabs.line { --tabs-bg: var(--c-window); }
  .chat-tabs { --tabs-bg: var(--c-sunken); }
  .bag-chips { --tabs-bg: var(--c-window); }
  /* Celular estreito: as abas sublinhadas mais juntas (Mecânicas, Recompensas e Ranking cabem em 360 px). */
  @container painel (max-width: 26em) { .ui-tabs.line { gap: var(--sp-2); } }
  :is(.ui-tabs, .chat-tabs, .bag-chips):is(.more-l, .more-r)::before, :is(.ui-tabs, .chat-tabs, .bag-chips):is(.more-l, .more-r)::after { position: sticky; z-index: 1; flex: none; display: grid; align-items: center; width: 2em; align-self: stretch; color: var(--c-accent-text); font: var(--fw-bold) 1.1rem/1 var(--font-ui); pointer-events: none; }
  :is(.ui-tabs, .chat-tabs, .bag-chips).more-l::before { content: "‹"; order: -1; left: 0; margin-right: -2em; justify-items: start; padding-left: 2px; background: linear-gradient(to left, transparent, var(--tabs-bg) 60%); }
  :is(.ui-tabs, .chat-tabs, .bag-chips).more-r::after { content: "›"; order: 99; right: 0; margin-left: -2em; justify-items: end; padding-right: 2px; background: linear-gradient(to right, transparent, var(--tabs-bg) 60%); }
  /* ===== Telas de entrada: entrar / criar conta e escolha de classe (docs/design.md). Dono: telas. =====
     Fundo comum: o mapa de lava escurecido, com brasas subindo. A letra da tela é 16 px (18 px em
     monitor grande) e as medidas são em em: tudo cresce junto. */
  .login { position: absolute; inset: 0; display: flex; overflow: auto; overscroll-behavior: contain; font-size: 16px;
    padding: max(var(--sp-4), var(--safe-t)) max(var(--sp-4), var(--safe-r)) max(var(--sp-5), var(--safe-b)) max(var(--sp-4), var(--safe-l));
    /* A arte do fundo (brilho da lava e o mapa escurecido): cores próprias, sem token. */
    background: radial-gradient(ellipse 90% 55% at 50% 115%, rgba(255, 106, 30, .32), transparent 70%), linear-gradient(180deg, rgba(11, 10, 18, .84), rgba(11, 10, 18, .95) 80%), var(--c-bg) url(/img/mapas/mapa_lava_preview.png) center / 640px repeat; image-rendering: pixelated; }
  .ln-embers { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
  .ln-embers i { position: absolute; bottom: -12px; left: var(--x); width: var(--z); height: var(--z); background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0; animation: lnEmber var(--t) linear var(--d) infinite; }
  @keyframes lnEmber { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translate(var(--dx), -105vh); opacity: 0; } }
  @keyframes lnDrop { from { opacity: 0; transform: translateY(-14px); } }
  @keyframes lnRise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes lnSpin { to { transform: rotate(360deg); } }

  /* O quadro das telas de entrada: cartão escuro com o filete violeta em cima (o mesmo da tela de
     carregamento, em update-load.css). */
  .ln-card, .cp-box { background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-1) 40%); border: var(--bw) solid var(--c-line); border-top: 3px solid var(--c-violet); border-radius: var(--r-md); box-shadow: var(--sh-frame), 0 24px 60px rgba(0, 0, 0, .55); }

  /* O botão principal (Entrar, Criar conta, Começar): violeta em relevo, letra de título. */
  .ln-go { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--ctl-lg); margin: 0; padding: 0 var(--sp-8); background: linear-gradient(180deg, #8a72ff, var(--c-violet-strong)); border: var(--bw) solid #9d8bff; border-bottom-color: var(--c-violet-deep); border-radius: var(--r-md); box-shadow: 0 3px 0 #241a63; color: var(--c-text-strong); font: var(--fw-regular) 1.6em/1 var(--font-display); letter-spacing: .03em; text-shadow: 0 2px 0 rgba(36, 26, 99, .8); touch-action: manipulation; }
  .ln-go:hover:not(:disabled) { filter: brightness(1.1); }
  .ln-go:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #241a63; }
  /* Esperando o servidor: apagado, com o aro girando à direita (o texto troca para "Entrando…"). */
  .ln-go:disabled { opacity: 1; filter: saturate(.55) brightness(.8); cursor: progress; }
  .ln-go.busy::after, #classOk:disabled::after { content: ""; position: absolute; top: 50%; right: var(--sp-4); width: 16px; height: 16px; margin-top: -8px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: var(--c-text-strong); border-radius: 50%; animation: lnSpin .8s linear infinite; }

  /* ---------- Entrar / criar conta ---------- */
  .ln-wrap { position: relative; margin: auto; width: min(66em, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 23.5em; grid-template-areas: "hero card" "news card"; gap: var(--sp-5) 3.5em; align-items: center; }
  .ln-hero { grid-area: hero; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--sp-4); align-self: end; }
  .ln-logo { margin: 0; font: var(--fw-regular) clamp(3.4em, 6.6vw, 6.2em)/.85 var(--font-display); letter-spacing: .02em; color: var(--c-gold); background: linear-gradient(180deg, #fff0bf 8%, var(--c-gold) 48%, #ff9a3c 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #3b1f6e) drop-shadow(0 12px 22px rgba(0, 0, 0, .65)); animation: lnDrop .7s var(--ease) both; }
  .ln-tag { margin: 0; max-width: 30em; color: var(--c-text-2); font-size: var(--fs-lg); line-height: 1.5; text-shadow: 0 1px 2px #000; text-wrap: balance; }
  /* A cena: os quatro heróis olhando para a direita, Goblin Mineiro e Demônio de Lava olhando para a
     esquerda. Folhas de 64x64 por quadro, 4 por linha; a linha escolhe a direção (baixo, esquerda,
     direita, cima). --s é a escala; a cena inteira tem 270 px × --s de largura. */
  .ln-scene { --s: 2.6; position: relative; display: flex; justify-content: space-between; align-items: flex-end; width: min(34em, 100%); margin: var(--sp-1) 0 calc(-1 * var(--sp-2)); animation: lnRise .8s .12s var(--ease) both; }
  .ln-scene::before { content: ""; position: absolute; left: -12%; right: -12%; bottom: -22%; height: 75%; background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(255, 112, 40, .24), transparent 100%); pointer-events: none; }
  .ln-side { position: relative; display: flex; align-items: flex-end; }
  .ln-side::after { content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; bottom: calc(5px * var(--s)); height: calc(7px * var(--s)); background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); }
  .ln-spr { --row: 2; --n: 4; --cols: 4; --t: .6s; display: block; flex: none; width: calc(64px * var(--s)); height: calc(64px * var(--s)); background: var(--img) 0 calc(-64px * var(--s) * var(--row)) / calc(64px * var(--s) * var(--cols)) calc(256px * var(--s)) no-repeat; image-rendering: pixelated; animation: lnIdle var(--t) steps(var(--n)) infinite; }
  @keyframes lnIdle { to { background-position-x: calc(-64px * var(--s) * var(--n)); } }
  .ln-warrior { --img: url(/img/guerreiro/idle.png); }
  .ln-mage { --img: url(/img/mago/idle.png); margin-left: calc(-30px * var(--s)); }
  .ln-archer { --img: url(/img/arqueiro/idle.png); margin-right: calc(-30px * var(--s)); }
  .ln-assassin { --img: url(/img/assassino/idle.png); margin-left: calc(-30px * var(--s)); }
  .ln-goblin { --img: url(/img/goblin_mineiro/idle.png); --row: 1; --t: 1.6s; margin-right: calc(-24px * var(--s)); }
  .ln-demon { --img: url(/img/hollow/idle.png); --row: 1; --cols: 1; animation: lnBob 1.8s ease-in-out infinite; }
  @keyframes lnBob { 50% { transform: translateY(calc(-1px * var(--s))); } }
  /* Servidor no ar: pílula com a bolinha (verde pulsando, vermelha fora, cinza procurando). */
  .ln-status { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 6px var(--sp-3); background: rgba(15, 13, 26, .78); border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-text-2); font-size: var(--fs-sm); }
  .ln-status i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c-text-muted); }
  .ln-status.on i { background: var(--c-ok); animation: lnPing 2.4s ease-out infinite; }
  .ln-status.off { border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-line)); color: var(--c-danger-text); }
  .ln-status.off i { background: var(--c-danger); }
  @keyframes lnPing { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 141, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(95, 211, 141, 0); } }
  /* A novidade mais recente do Log de Atualizações. */
  .ln-news { grid-area: news; align-self: start; display: grid; justify-items: start; gap: var(--sp-1); max-width: 32em; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: rgba(23, 20, 42, .88); border: var(--bw) solid var(--c-line); border-left: 3px solid var(--c-warn); border-radius: var(--r-md); box-shadow: var(--sh-frame); }
  .ln-news small { color: var(--c-warn); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em; }
  .ln-news b { color: var(--c-text-strong); font: var(--fw-regular) 1.45em/1.05 var(--font-display); letter-spacing: .02em; }
  .ln-news p { margin: 0; color: var(--c-text-2); font-size: .9em; line-height: 1.45; }
  .ln-news button { margin-top: var(--sp-1); padding: 0; background: none; border: 0; color: var(--c-accent-text); font-size: .88em; font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 3px; }
  .ln-news button:hover { color: var(--c-text-strong); filter: none; }

  /* O cartão de entrar / criar conta. */
  .ln-card { grid-area: card; display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-6); animation: lnRise .7s .2s var(--ease) both; }
  .ln-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); padding: var(--sp-1); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .ln-tabs button { min-height: var(--touch); padding: 0 var(--sp-2); background: none; border: 0; border-radius: var(--r-sm); color: var(--c-text-muted); font: var(--fw-regular) 1.4em/1 var(--font-display); letter-spacing: .03em; }
  .ln-tabs button:hover:not(.on) { background: var(--c-surface-2); color: var(--c-text); filter: none; }
  .ln-tabs button.on { background: var(--c-violet-strong); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-violet-deep), inset 0 1px 0 rgba(255, 255, 255, .14); }
  .ln-title { margin: 0; color: var(--c-text-strong); font: var(--fw-regular) 1.95em/1 var(--font-display); letter-spacing: .02em; }
  .ln-head { display: grid; gap: var(--sp-1); }
  .ln-head p { margin: 0; color: var(--c-text-muted); font-size: .9em; }
  .auth-form { display: grid; gap: var(--sp-4); }
  .fld { display: grid; gap: 6px; }
  .fld label { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .fld input { width: 100%; height: 3em; padding: 0 var(--sp-4); background: var(--c-sunken); border: var(--bw) solid var(--c-line); border-radius: var(--r-md); color: var(--c-text-strong); font-size: 1em; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .fld input::placeholder { color: var(--c-text-faint); }
  .fld input:hover { border-color: var(--c-line-strong); }
  .fld input:focus { outline: none; border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(123, 97, 255, .25); }
  .fld input[aria-invalid="true"] { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 6%, var(--c-sunken)); }
  .fld input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(229, 88, 107, .25); }
  .fld .hint { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.35; }
  .fld .err { color: var(--c-danger-text); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.35; }
  .fld .err:empty { display: none; }
  .fld:has([aria-invalid="true"]) .hint { display: none; }
  .fld .caps { color: var(--c-gold); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  .pw { position: relative; }
  .pw input { padding-right: 3.2em; }
  .pw .eye { position: absolute; top: 50%; right: 2px; display: grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; transform: translateY(-50%); background: none; border: 0; border-radius: var(--r-sm); color: var(--c-text-muted); touch-action: manipulation; }
  .pw .eye:hover, .pw .eye[aria-pressed="true"] { color: var(--c-text-strong); filter: none; }
  .pw .eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .auth-form .ln-go { margin-top: var(--sp-1); }
  .ln-alt { margin: 0; text-align: center; color: var(--c-text-muted); font-size: .9em; }
  .ln-alt a { position: relative; color: var(--c-accent-text); font-weight: var(--fw-semi); text-underline-offset: 3px; }
  .ln-alt a:hover { color: var(--c-text-strong); }
  /* O link é uma linha de texto: a área de toque chega a 44 px por fora, sem mudar o desenho. */
  .ln-alt a::after { content: ""; position: absolute; inset: -14px -6px; }
  /* O aviso em cima do formulário: erro (vermelho) ou informação (violeta). */
  #msg.ln-msg { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 10px var(--sp-3); background: color-mix(in srgb, var(--c-danger-deep) 55%, var(--c-sunken)); border: 1px solid var(--c-danger); border-radius: var(--r-md); color: var(--c-text); font-size: .9em; line-height: 1.4; }
  #msg.ln-msg::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; background: var(--c-danger); border-radius: var(--r-sm); color: var(--c-text-strong); font-weight: 800; font-size: 13px; line-height: 1; }
  #msg.ln-msg.info { background: color-mix(in srgb, var(--c-violet-deep) 45%, var(--c-sunken)); border-color: var(--c-violet); }
  #msg.ln-msg.info::before { content: "i"; background: var(--c-violet-strong); font-family: Georgia, serif; font-style: italic; }
  #msg.ln-msg:empty { display: none; }
  .launcher .fld input:focus-visible { outline: none; }
  /* Monitor grande: a tela inteira um pouco maior (tudo em em). */
  @media (min-width: 1600px) and (min-height: 900px) { .login { font-size: 18px; } }
  @media (max-width: 900px) {
    .ln-wrap { width: min(27em, 100%); grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "card" "news"; gap: var(--sp-4); }
    .ln-hero { justify-items: center; gap: var(--sp-3); text-align: center; }
    .ln-logo { font-size: clamp(2.8em, 13vw, 3.8em); }
    .ln-tag { font-size: .95em; }
    /* 270 px × 1,3 = 351 px: cabe na coluna de um celular de 390 px. */
    .ln-scene { --s: 1.3; width: min(23em, 100%); margin: 0 0 calc(-1 * var(--sp-1)); }
    /* O brilho da lava não passa da largura da tela (senão a página rola de lado). */
    .ln-scene::before { left: 0; right: 0; }
    .ln-news { max-width: none; }
    .ln-card { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  }
  /* Celular em pé: a frase do jogo fica só com a primeira parte. */
  @media (max-width: 480px) { .ln-tag-more { display: none; } }
  /* 360 px (Android pequeno): 270 px × 1,15 = 311 px cabem entre as margens (com 1,3 o demônio passava da borda e a tela rolava de lado). */
  @media (max-width: 399px) { .ln-scene { --s: 1.15; } }
  @media (max-width: 359px) { .ln-scene { --s: 1.05; } }
  @media (max-height: 560px) and (orientation: landscape) { .ln-scene { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .ln-embers { display: none; }
    .ln-spr, .ln-logo, .ln-scene, .ln-card, .ln-status.on i, .cp-box { animation: none; }
  }

  /* ---------- Escolha de classe (#classCard), depois de criar a conta ----------
     À esquerda, o destaque da classe marcada (o personagem parado, nome, papel e o que ela faz); à
     direita, o visual (gênero), os quatro cartões das classes e o botão de começar. */
  .cp-box { margin: auto; width: min(100%, 60em); display: grid; grid-template-columns: minmax(0, 21em) minmax(0, 1fr); grid-template-areas: "head head" "hero side" "hero foot"; grid-template-rows: auto 1fr auto; gap: var(--sp-4) var(--sp-6); padding: var(--sp-6); animation: lnRise .5s var(--ease) both; }
  .cp-head { grid-area: head; display: grid; gap: var(--sp-1); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line-soft); }
  .cp-title { margin: 0; color: var(--c-text-strong); font: var(--fw-regular) 2.1em/1 var(--font-display); letter-spacing: .02em; }
  .cp-sub { margin: 0; color: var(--c-text-muted); font-size: .9em; line-height: var(--lh); }
  /* O destaque: o personagem num palco com luz violeta, e o texto da classe embaixo. */
  .cp-hero { grid-area: hero; display: grid; align-content: start; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  /* A luz do palco cabe inteira na caixa (sem borda reta aparecendo). */
  .cp-stage { position: relative; display: grid; place-items: end center; height: 13em; background: radial-gradient(ellipse 50% 32% at 50% 74%, rgba(123, 97, 255, .32), transparent 72%); }
  .cp-stage::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 10%; height: 9%; background: radial-gradient(ellipse, rgba(0, 0, 0, .65), transparent 70%); }
  .cp-prev { --s: 3; --row: 0; position: relative; margin-bottom: calc(2px * var(--s)); }
  .cp-info { display: grid; gap: 6px; min-width: 0; }
  .cp-name { margin: 0; color: var(--c-gold); font: var(--fw-regular) 2em/1 var(--font-display); letter-spacing: .02em; text-shadow: 0 2px 0 #3b1f6e; }
  .cp-role { margin: 0; color: var(--c-accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .cp-desc { margin: var(--sp-1) 0 0; color: var(--c-text-2); font-size: .9em; line-height: 1.5; }
  /* A lista de classes ocupa a altura que sobra (o botão fica alinhado com o fim do destaque). */
  .cp-side { grid-area: side; display: grid; grid-template-rows: auto auto 1fr; gap: var(--sp-2); min-width: 0; }
  /* Rótulo de seção: losango + texto em Jersey 10 (o .ui-h do kit, no tamanho da tela). */
  .cp-label { display: flex; align-items: center; gap: .45em; color: var(--c-accent-text); font: var(--fw-regular) 1.3em/1 var(--font-display); letter-spacing: .02em; }
  .cp-label::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  .cp-gender { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  /* Gênero: botão segmentado. */
  .cp-seg { gap: var(--sp-1); padding: var(--sp-1); }
  .cp-seg > button { min-height: var(--ctl-md); font-size: var(--fs-md); }
  .cp-note { color: var(--c-warn); font-size: var(--fs-xs); line-height: 1.35; }
  .cp-note:empty { display: none; }
  /* Os cartões das classes: retrato, nome e papel. A descrição (small) aparece no destaque. */
  .cp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-3); }
  #classPick > button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: var(--sp-3); row-gap: 2px; min-width: 0; min-height: 5.6em; padding: var(--sp-3); background: var(--c-surface-1); border: var(--bw) solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); color: var(--c-text); text-align: left; touch-action: manipulation; transition: border-color var(--t-fast), background-color var(--t-fast); }
  #classPick > button:hover:not(.on) { border-color: var(--c-line-strong); background: var(--c-surface-2); filter: none; }
  #classPick > button.on { border-color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 7%, var(--c-surface-2)); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .25), var(--sh-glow-gold); }
  /* Marcado: o losango dourado no canto. */
  #classPick > button.on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: var(--c-gold); transform: rotate(45deg); }
  #classPick .portrait { grid-row: span 2; width: 3.6em; height: 3.6em; border-color: var(--c-line-strong); }
  #classPick > button.on .portrait { border-color: var(--c-gold-deep); }
  #classPick b { align-self: end; min-width: 0; color: var(--c-title); font: var(--fw-regular) 1.45em/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  #classPick > button.on b { color: var(--c-gold); }
  #classPick em { align-self: start; min-width: 0; color: var(--c-text-muted); font-size: var(--fs-xs); font-style: normal; line-height: 1.3; }
  #classPick small { display: none; }
  .cp-foot { grid-area: foot; align-self: end; }
  /* Mais específico que o #classOk do responsive.css (base): o botão não fica mais preso sozinho. */
  #classCard #classOk { position: relative; height: auto; margin: 0; }

  /* Tablet e celular em pé: uma coluna. O destaque fica numa faixa (personagem à esquerda, texto à
     direita), os cartões numa linha de quatro (só retrato e nome) e o botão preso embaixo. */
  @media (max-width: 760px) {
    .cp-box { width: min(100%, 34em); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "hero" "side" "foot"; grid-template-rows: none; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) 0; }
    .cp-head { padding-bottom: var(--sp-3); }
    .cp-title { font-size: 1.85em; }
    .cp-hero { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
    .cp-stage { width: 6.5em; height: 7.5em; }
    .cp-prev { --s: 1.6; }
    .cp-name { font-size: 1.7em; }
    .cp-desc { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
    .cp-gender { margin-bottom: var(--sp-2); }
    .cp-grid { gap: var(--sp-2); }
    #classPick > button { grid-template-rows: none; min-height: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); }
    #classPick .portrait { grid-row: auto; width: 2.8em; height: 2.8em; }
    #classPick b { align-self: center; font-size: 1.3em; overflow-wrap: normal; }
    #classPick em { display: none; }
    #classPick > button.on::after { top: 6px; right: 6px; width: 6px; height: 6px; }
    /* O botão preso embaixo da tela, com fundo próprio, enquanto a escolha rola por baixo. */
    .cp-foot { position: sticky; bottom: 0; z-index: 1; margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4) max(var(--sp-4), var(--safe-b)); background: var(--c-surface-1); border-top: 1px solid var(--c-line-soft); border-radius: 0 0 var(--r-md) var(--r-md); }
  }
  @media (max-width: 359px) {
    #classPick b { font-size: 1.15em; }
  }
  /* Celular deitado (pouca altura): o destaque à esquerda, o resto à direita, sem a frase de cima. */
  @media (max-height: 500px) and (min-width: 600px) {
    .cp-box { width: min(100%, 52em); grid-template-columns: minmax(0, 15.5em) minmax(0, 1fr); grid-template-areas: "hero head" "hero side" "hero foot"; grid-template-rows: auto 1fr auto; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); }
    .cp-head { padding: 0; border: 0; }
    .cp-title { font-size: 1.6em; }
    .cp-sub { display: none; }
    .cp-hero { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
    .cp-stage { width: auto; height: 6.5em; }
    .cp-prev { --s: 1.5; }
    .cp-name { font-size: 1.5em; }
    .cp-desc { font-size: var(--fs-xs); }
    .cp-side { grid-template-rows: auto 1fr; gap: var(--sp-1); }
    .cp-gender { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-3); margin-bottom: var(--sp-2); }
    .cp-note { grid-column: 1 / -1; }
    .cp-side > .cp-label { display: none; }
    .cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
    #classPick > button { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; row-gap: 4px; min-height: 0; padding: var(--sp-2) var(--sp-1); text-align: center; }
    #classPick .portrait { grid-row: auto; width: 2.8em; height: 2.8em; }
    #classPick b { align-self: center; font-size: 1.1em; overflow-wrap: normal; }
    #classPick em { display: none; }
    #classPick > button.on::after { top: 5px; right: 5px; width: 6px; height: 6px; }
    .cp-foot { position: static; margin: 0; padding: 0; background: none; border: 0; }
    #classCard #classOk { min-height: var(--touch); font-size: 1.4em; }
  }

  /* ---------- Cartões de classe do diálogo de troca de classe ----------
     O diálogo (ui/dialogs/class-change.ts) copia os cartões da escolha de classe para um
     .class-pick dele. Estas regras são dele e ficam aqui até irem para o dialogs.css. */
  .class-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .class-pick button { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; background: #15131f; border: 1px solid #3a3452; text-align: center; }
  .class-pick button.on { background: #2b2740; border-color: #8f7bff; box-shadow: 0 0 0 1px #8f7bff; }
  .class-pick b { font-size: 16px; }
  .class-pick small { color: #9a95ad; font-size: 12.5px; line-height: 1.35; }
  .class-pick em { color: #ffd166; font-style: normal; font-size: 12px; letter-spacing: .02em; }
  .class-pick .portrait { width: 5.5em; height: 5.5em; }
  /* Retrato da classe (client/img/classes/retratos.png: guerreiro, mago, assassino, arqueiro). A
     classe vai em --c (c1, c2, c3; sem nada, Guerreiro). */
  .portrait.c1 { --c: 1; }
  .portrait.c2 { --c: 2; }
  .portrait.c3 { --c: 3; }
  /* No Feminino (.f), os de client/img/classes/retratos_f.png (mesma ordem; a classe sem arte
     feminina repete o retrato masculino). */
  .portrait.f { background-image: url(/img/classes/retratos_f.png); }
  /* Toque: as abas, os links e o "Novidade" da entrada com 44 px (vieram do responsive.css). */
  @media (pointer: coarse) {
    .ln-tabs button { min-height: 44px; }
    .ln-alt a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
    .ln-news button { padding: 12px 0; margin: -6px 0 -12px; }
  }
  /* Jogo: barra de cima, três colunas (caçada e chat | mapa | personagem e
     espólios) e a barra de telas embaixo. Molduras de 2 px com brilho por
     dentro, no jeito das janelas de jogo em pixel art. */
  /* Nomes curtos de antes (muito CSS usa): apontam para os tokens (styles/tokens.css). */
  :root { --pane: var(--c-surface-1); --pane-2: var(--c-surface-2); --line: var(--c-line); --line-hi: var(--c-line-hi); --violet: var(--c-violet); --gold: var(--c-gold); --muted: var(--c-text-muted); }
  .game { position: absolute; inset: 0; display: grid; gap: 6px; padding: 6px; grid-template: "top top top" auto "left map right" minmax(0, 1fr) "dock dock dock" auto / 17.5rem minmax(0, 1fr) 17.5rem; background: var(--c-bg); font-variant-numeric: tabular-nums; }
  .frame { background: var(--pane); border: 2px solid var(--line); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-hi), 0 2px 0 var(--c-bg-deep); }
  .box { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 0 12px 12px; min-width: 0; }
  .box h2 { margin: 0 -12px; padding: 7px 12px; font: 400 20px/1.1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; color: var(--c-title); background: var(--pane-2); border-bottom: 2px solid var(--line); display: flex; align-items: center; gap: 8px; }
  .box h2::before { content: ""; width: 7px; height: 7px; background: var(--violet); transform: rotate(45deg); box-shadow: 0 0 6px var(--violet); }
  .box-note { margin: 0; color: var(--muted); font-size: 13px; }
  .col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; min-width: 0; }
  .col.left { grid-area: left; grid-template-rows: auto minmax(0, 1fr); }
  .col.right { grid-area: right; grid-template-rows: auto minmax(0, 1fr); }

  /* Barra de cima: quem é o personagem e o que ele tem. */
  .topbar { grid-area: top; display: flex; gap: 6px; align-items: stretch; }
  .topbar > .frame { padding: 8px 12px; }
  .me { display: flex; gap: 12px; align-items: center; width: 24rem; cursor: pointer; }
  .me:hover { border-color: var(--c-line-strong); }
  .box h2.link { cursor: pointer; }
  .box h2.link:hover { color: #fff; }
  .portrait { flex: none; width: 4em; height: 4em; border-radius: 3px; border: 2px solid var(--c-line-strong); background: #2b2740 url(/img/classes/retratos.png) no-repeat; background-size: 400% 100%; background-position: calc(var(--c, 0) * 100% / 3) 0; image-rendering: pixelated; }
  .me-info { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .me-name { display: flex; justify-content: space-between; gap: .5em; font: 400 22px/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .me-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lvl { color: var(--gold); white-space: nowrap; }
  .hbar { position: relative; height: 15px; background: var(--c-bg); border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-surface-3); }
  .hbar i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .15s linear; }
  .hbar.hp i { background: linear-gradient(#f0606f, #b3273a); }
  .hbar.xp i { background: linear-gradient(#9d8bff, var(--c-violet-strong)); }
  .hbar.rei i { background: linear-gradient(#7fd6ff, #2a78d6); }
  .hbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 1px #000; }
  .res { display: flex; align-items: center; gap: 10px; min-width: 9.5rem; }
  .res small { display: block; color: var(--muted); font-size: 12px; }
  .res span { font: 400 30px/1 "Jersey 10", system-ui, sans-serif; }
  .coin { flex: none; width: 18px; height: 18px; border-radius: 50%; }
  .coin.gold { background: radial-gradient(circle at 35% 35%, #ffe9a3, var(--c-gold-strong)); box-shadow: 0 0 0 2px #6b4b00; }
  .coin.dia { background: linear-gradient(135deg, #b8f3ff, #3aa0e8); border-radius: 3px; transform: rotate(45deg) scale(.8); box-shadow: 0 0 0 2px #1b4c74; }

  /* Caçada: o que ela rendeu e como ela anda. */
  .hunt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .hunt-stats div { background: var(--c-sunken); border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; }
  .hunt-stats small { display: block; color: var(--muted); font-size: 12px; }
  .hunt-stats span { font: 400 24px/1 "Jersey 10", system-ui, sans-serif; }
  .hunt-actions { display: grid; gap: 6px; }
  .hunt-actions button { font-weight: 700; padding: 9px 12px; }
  /* Botão do Auto Helper: as bolinhas acendem com o que está ligado. */
  .hunt-actions .helper-btn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .6em; }
  .hb-dots { display: flex; gap: 4px; }
  .hb-dots i { width: 7px; height: 7px; border-radius: 50%; background: #3a3452; }
  .hb-dots i.on.hp { background: var(--c-ok); box-shadow: 0 0 5px var(--c-ok); }
  .hb-dots i.on.mp { background: #6fb6ff; box-shadow: 0 0 5px #6fb6ff; }
  .hb-dots i.on.sell { background: var(--c-gold); box-shadow: 0 0 5px var(--c-gold); }
  .pot-hud { position: absolute; z-index: 3; top: 8px; right: 8px; display: flex; gap: 6px; }
  /* Zoom do mapa: canto de baixo, à direita. */
  .zoom-ctl { position: absolute; z-index: 3; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
  .zoom-ctl button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; background: rgba(15, 13, 26, .82); border: 1px solid var(--line); border-radius: 4px; color: var(--c-text); font: 700 18px/1 system-ui, sans-serif; }
  .zoom-ctl button:hover:not(:disabled) { border-color: #5b4bb0; }
  .zoom-ctl button:disabled { opacity: .4; }
  .pot { display: flex; align-items: center; gap: 5px; min-width: 64px; height: 38px; padding: 0 9px 0 6px; background: rgba(15, 13, 26, .82); border: 2px solid var(--c-line); border-radius: 4px; box-shadow: 0 2px 0 var(--c-bg-deep); color: #fff; touch-action: manipulation; }
  .pot:hover { border-color: #5b5378; }
  .pot b { font: 400 20px/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .pot.auto { border-color: color-mix(in srgb, var(--pc) 70%, var(--c-line)); }
  .pot.empty b { color: var(--c-danger-text); }
  /* Frasco em pixel: gargalo, rolha e o líquido da cor da poção. */
  .pot i { position: relative; width: 16px; height: 22px; image-rendering: pixelated;
    background: linear-gradient(var(--pc), var(--pc)) 3px 9px / 10px 11px no-repeat, linear-gradient(var(--c-text), var(--c-text)) 5px 4px / 6px 5px no-repeat, linear-gradient(#8a5a2b, #8a5a2b) 5px 1px / 6px 3px no-repeat, linear-gradient(var(--c-text), var(--c-text)) 1px 8px / 14px 14px no-repeat; }
  .pot.hp { --pc: #e5586b; } .pot.mp { --pc: #5aa8ff; }
  .hb-dots i.on.sk { background: #c47aff; box-shadow: 0 0 5px #c47aff; }

  /* Chat: ocupa o resto da coluna. Abas Global (jogadores) e Sistema (avisos
     do jogo); a aba fechada mostra quantas mensagens chegaram. */
  .chat { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; min-height: 0; }
  /* Abas do chat numa linha própria, embaixo do título, dividindo a largura. */
  .chat h2 { flex-wrap: wrap; row-gap: 6px; }
  .chat-tabs { flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; background: #0f0d1a; border: 1px solid var(--line); border-radius: 4px; }
  .chat-tabs button { position: relative; padding: 2px 4px; background: none; border: 0; border-radius: 3px; color: var(--muted); font: inherit; font-size: 17px; }
  .chat-tabs button.on { background: var(--c-violet-deep); color: #fff; }
  .chat-tabs b { position: absolute; top: -8px; right: -6px; min-width: 17px; padding: 0 4px; border-radius: 9px; background: #e5586b; color: #fff; font: 700 10.5px/17px system-ui, sans-serif; }
  .chat-feed { position: relative; min-height: 0; margin: 0 -6px; }
  .feed { list-style: none; margin: 0; padding: 0 6px; height: 100%; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: #3a3452 transparent; }
  .msg { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 5px 6px; border-radius: 3px; font-size: 13.5px; line-height: 1.35; }
  .msg + .msg { margin-top: 2px; }
  .msg:hover, .sys:hover { background: #1d1934; }
  .msg .who { color: var(--c); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg.mine { background: #1b1730; }
  .msg .who { cursor: pointer; }
  .msg .who:hover { text-decoration: underline; }
  /* Privado: faixa lilás à esquerda; "De" e "Para" antes do nome. */
  .msg.private { background: rgba(199, 155, 255, .07); box-shadow: inset 2px 0 0 #c79bff; }
  .msg .who small { margin-right: .3em; color: var(--c-text-muted); font-weight: 600; }
  .msg .txt { grid-column: 1 / -1; color: #e3e0ef; overflow-wrap: anywhere; }
  .msg time, .sys time { color: var(--c-text-faint); font-size: 11.5px; white-space: nowrap; }
  .sys { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: baseline; padding: 4px 6px; border-radius: 3px; color: #b3aec7; font-size: 13px; line-height: 1.35; }
  .sys .txt { overflow-wrap: anywhere; }
  .sys .txt b { color: var(--c); }
  .sys.warn { color: #ffb37a; }
  .sys.loot { color: #dcd9e8; }
  .feed-empty { padding: 10px 6px; color: var(--muted); font-size: 13px; }
  .chat-new { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 4px 14px; border-radius: 14px; font-size: 12.5px; box-shadow: 0 2px 10px #000; }
  .chat-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .chat-row input { flex: 1; min-width: 0; padding: 7px 10px; background: #0f0d1a; }
  .chat-row #chatTo { flex: 1 0 100%; border-color: #6b4fa8; color: #e2d3ff; }
  .chat-row button { padding: 7px 12px; }

  /* Mapa: o nome do lugar em cima; as magias por cima do chão, embaixo. */
  .mapframe { grid-area: map; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
  .map-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 12px; background: var(--pane-2); border-bottom: 2px solid var(--line); }
  .map-head h2 { margin: 0; font: 400 21px/1.1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .map-head span { color: var(--muted); font-size: 12.5px; text-align: right; }
  /* O nome do mapa fica numa linha: a dica (longa na arena do boss) é que dobra. */
  .map-head h2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mapHint { flex: 1 1 0; min-width: 12em; }
  .map-head .threat-key { display: inline-flex; gap: 3px; align-items: center; cursor: help; }
  .map-head .threat-key[hidden] { display: none; }
  .threat-key i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #0b0912; }
  .map { position: relative; min-height: 0; overflow: hidden; container: mapa / inline-size; }
  .map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0d0c13; touch-action: none; image-rendering: pixelated; }
  .map #ui { background: none; image-rendering: auto; pointer-events: none; }
  .skills { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; background: rgba(15, 13, 26, .88); border: 2px solid var(--line); border-radius: 4px; font-size: 14px; }
  .skill { position: relative; width: 3.4em; height: 3.4em; border-radius: 3px; border: 2px solid #4a3f86; background: #1b1826 no-repeat; background-size: 27.2em 3.4em; image-rendering: pixelated; overflow: hidden; cursor: pointer; }
  .skill .cd { position: absolute; inset: 0 0 auto 0; background: rgba(8, 7, 14, .72); }
  .skill .cost { position: absolute; right: .2em; bottom: .1em; font-size: .75em; font-weight: 700; color: #8fd8ff; text-shadow: 0 1px 1px #000; }
  .skill .time { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; text-shadow: 0 1px 2px #000; }
  .skill .key { position: absolute; left: .3em; top: .1em; font-size: .7em; font-weight: 700; color: #c5c1d6; text-shadow: 0 1px 1px #000; }
  .skill.low { filter: grayscale(.8) brightness(.7); }
  .skill.on { border-color: var(--gold); box-shadow: 0 0 .6em #ffb347; }
  .skill.queued { border-color: #8fd8ff; box-shadow: 0 0 .6em #4fb4ff; }
  /* Habilidades de livro (docs/skills.md): borda na cor da raridade; espaço vazio; passiva. */
  .skill { border-color: color-mix(in srgb, var(--rc, #4a3f86) 55%, #4a3f86); }
  .skill.empty { border-style: dashed; background: #14121c; opacity: .7; }
  .skill.passive .cost { color: #ffd166; }
  /* Bufs ativos: ícone e segundos que faltam, em cima da barra de magias. */
  .buffs { position: absolute; left: 50%; bottom: calc(10px + 4.6em); transform: translateX(-50%); display: flex; gap: 4px; font-size: 14px; pointer-events: auto; }
  .buffs .buff { position: relative; width: 2.1em; height: 2.1em; border: 1px solid #ffd166; border-radius: 3px; background: #1b1826; overflow: hidden; }
  .buffs .buff .sk-ic { position: absolute; inset: 0; width: 100%; height: 100%; }
  .buffs .buff .sp { display: grid; place-items: center; color: #9ae8f0; }
  .buffs .buff .left { position: absolute; right: 1px; bottom: 0; font-size: .7em; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
  .touch .game.can-walk .buffs { left: auto; right: 46px; transform: none; bottom: calc(10px + 8em); }
  .sk-ic { display: inline-block; flex: none; width: 2.4em; height: 2.4em; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: middle; border-radius: 3px; }
  .sk-ic.locked { filter: grayscale(1) brightness(.55); }

  /* ---- Mapa por dentro (design-hud, docs/design.md): o lugar de cada peça não muda ---- */
  /* Nome do lugar com o losango dos quadros, como Caçada e Chat. */
  .map-head h2 { color: var(--c-title); }
  .map-head h2::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 0 1px; vertical-align: .18em; background: var(--c-violet); transform: rotate(45deg); box-shadow: 0 0 6px var(--c-violet); }
  #mapHint { color: var(--c-text-muted); }
  /* Barra de magias: o quadro escuro do HUD; a tecla e o custo em plaquinhas escuras nos cantos (legíveis em cima do ícone). */
  .skills { background: rgba(11, 10, 18, .9); border-color: var(--c-line); box-shadow: var(--sh-frame), 0 4px 14px rgba(0, 0, 0, .35); }
  .skill { background-color: var(--c-sunken); transition: border-color var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); }
  .skill .key { left: 0; top: 0; padding: 0 .35em; background: rgba(6, 5, 11, .78); border-radius: 0 0 var(--r-sm) 0; color: var(--c-text-2); line-height: 1.35; text-shadow: none; }
  .skill .cost { right: 0; bottom: 0; padding: 0 .3em; background: rgba(6, 5, 11, .78); border-radius: var(--r-sm) 0 0 0; color: var(--c-info); line-height: 1.3; text-shadow: none; }
  .skill.passive .cost { color: var(--c-gold); }
  .skill .time { color: var(--c-text-strong); font-size: 1.15em; }
  /* Espaço vazio: um "+" apagado (tocar abre Habilidades). */
  .skill.empty { background: var(--c-bg); opacity: .8; }
  .skill.empty::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-text-faint); font: 400 1.7em/1 var(--font-display); }
  @media (hover: hover) { .skill:not(.on, .queued):hover { border-color: var(--c-violet); } }
  .skill:active { filter: brightness(1.25); }
  .buffs .buff { border-color: var(--c-gold); border-radius: var(--r-sm); background: var(--c-sunken); box-shadow: 0 2px 0 rgba(6, 5, 11, .6); }
  /* Poções e zoom (o desenho é do layout.css): o mesmo quadro escuro e o realce do kit. */
  .pot { background: rgba(11, 10, 18, .88); border-color: var(--c-line); transition: border-color var(--t-fast), filter var(--t-fast); }
  .pot b { color: var(--c-text-strong); }
  .zoom-ctl button { background: rgba(11, 10, 18, .88); border-color: var(--c-line); box-shadow: 0 2px 0 var(--c-bg-deep); color: var(--c-text-2); transition: border-color var(--t-fast), color var(--t-fast); }
  @media (hover: hover) {
    .pot:hover { border-color: var(--c-line-strong); }
    .zoom-ctl button:hover:not(:disabled) { border-color: #5b4bb0; color: var(--c-text-strong); }
  }
  .pot:active, .zoom-ctl button:active:not(:disabled) { filter: brightness(1.25); }

  /* Dica de toque (celular): a dica do kit (.ui-tip), com a faixa violeta em cima. */
  #touchTip { padding: var(--sp-2) var(--sp-3); background: #0f0d1c; border: 1px solid var(--c-line-strong); border-top: 2px solid var(--c-violet); border-radius: var(--r-md); box-shadow: var(--sh-pop); color: var(--c-text-2); font: 13.5px/1.45 var(--font-ui); }
  #touchTip b { color: var(--c-text-strong); }

  /* Celular: o nome do lugar fica por cima do mapa, à esquerda das poções; o nome comprido quebra a
     linha em vez de passar por baixo delas. */
  @media (max-width: 599px), (max-height: 500px) {
    .mapframe .map-head h2 { white-space: normal; overflow-wrap: anywhere; }
    .mapframe .map-head h2::before { display: none; }
    .mapframe .map-head { gap: 6px; padding-inline: 8px; }
    .mapframe .threat-key { gap: 2px; }
    .mapframe .threat-key i { width: 8px; height: 8px; }
    .game:not(.side-min) .mapframe:has(#potHud:not([hidden])) .map-head { max-width: calc(100% - var(--pots, 0px) - 16px); }
  }
  /* Tela Habilidades (docs/skills.md, docs/design.md): a barra com os 4 espaços em cima (como a
     barra de ação, com tecla, mana e recarga), a dica e o filtro por raridade, as 16 da classe
     numa grade por raridade e o detalhe da escolhida ao lado. No celular em pé o detalhe sobe de
     baixo, numa folha presa ao pé da tela; deitado, fica numa coluna à direita. Pixel art:
     bordas de 2 px, cantos quase retos, sombras duras; a cor da raridade vem em --rc. */
  .panel.skills-panel { width: min(97%, 68em); height: min(96%, 48em); display: flex; flex-direction: column; }
  #panelSkills:not([hidden]) { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-height: 0; }
  #panelSkills > * { flex: none; }
  #panelSkills > .skp-body { flex: 1 1 0; }
  .skp-top { display: grid; gap: var(--sp-3); }

  /* ---- A barra: um poço escuro com os 4 encaixes ---- */
  .skp-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 2px 0 var(--c-bg-deep), inset 0 0 0 1px var(--c-line-hi); }
  .skp-sock { --rc: var(--c-line-strong); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px var(--sp-3); min-width: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); background: var(--c-surface-1); border: 2px solid color-mix(in srgb, var(--rc) 55%, var(--c-line)); border-radius: var(--r-sm); box-shadow: var(--sh-raised); cursor: pointer; outline: none; transition: border-color var(--t-fast), background-color var(--t-fast); }
  .skp-sock:hover { background: var(--c-surface-2); }
  .skp-sock:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  .skp-sock[draggable="true"] { cursor: grab; }
  /* A moldura do ícone, na cor da raridade. O ícone mede 1em e a fonte dele é o tamanho (as Comuns, fxIcon, se medem em em). */
  .skp-fr { --fs: 3.6em; position: relative; display: grid; place-items: center; width: var(--fs); height: var(--fs); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 30%, var(--c-surface-2)), var(--c-bg) 78%); border: 2px solid var(--rc); border-radius: var(--r-xs); box-shadow: 0 0 0 2px var(--c-bg-deep), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .skp-fr > .sk-ic { width: 1em; height: 1em; font-size: calc(var(--fs) - .5em) !important; border-radius: 0; }
  .skp-sock .skp-fr { --fs: 3.9em; grid-row: span 2; }
  /* A tecla no canto da moldura. */
  .skp-cap { position: absolute; z-index: 1; left: -.55em; top: -.55em; display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .2em; background: var(--c-surface-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); box-shadow: var(--sh-raised); color: var(--c-gold); font: var(--fw-regular) 1.05em/1 var(--font-display); }
  .skp-sock .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; padding-right: .9em; overflow: hidden; overflow-wrap: anywhere; align-self: end; color: var(--rc); font: var(--fw-regular) 1.2em/1.05 var(--font-display); letter-spacing: .02em; }
  .skp-meta { display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); align-self: start; min-width: 0; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .skp-meta .mp { color: var(--c-info); }
  .skp-meta .pv { color: var(--c-gold); }
  .skp-sock.empty { --rc: var(--c-line-strong); border-style: dashed; background: var(--c-sunken); box-shadow: none; }
  .skp-sock.empty .skp-fr { background: var(--c-bg); border-style: dashed; box-shadow: none; }
  .skp-sock.empty .plus { color: var(--c-line-strong); font: var(--fw-regular) 2.2em/1 var(--font-display); }
  .skp-sock.empty .nm { color: var(--c-text-faint); }
  .skp-sock.pick { border-color: var(--c-gold); border-style: solid; background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-1)); animation: skpPulse 1.1s ease-in-out infinite; }
  .skp-sock.pick .nm, .skp-sock.pick .skp-meta { color: var(--c-gold); }
  .skp-sock.new .skp-fr { animation: skpIn .45s cubic-bezier(.2, .8, .2, 1); }
  /* Tirar da barra (aparece ao passar o mouse ou no foco; no toque, sempre). */
  .skp-x { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 1.6em; height: 1.6em; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: var(--r-xs); color: var(--c-text-faint); font-size: .9em; line-height: 1; opacity: 0; transition: opacity var(--t-fast); }
  .skp-sock:hover .skp-x, .skp-sock:focus-within .skp-x, .touch .skp-x { opacity: 1; }
  .skp-x:hover, .skp-x:focus-visible { color: var(--c-danger-text); background: color-mix(in srgb, var(--c-danger) 18%, transparent); opacity: 1; filter: none; }
  /* Arrastando: os encaixes viram alvo; da barra para a grade, tira. */
  .skp.dragging .skp-sock { border-color: var(--c-gold-dark); border-style: dashed; }
  .skp.dragging .skp-sock.over { border-color: var(--c-gold); border-style: solid; background: color-mix(in srgb, var(--c-gold) 12%, var(--c-surface-1)); }
  .skp.from-slot .skp-board { outline: 2px dashed var(--c-danger-deep); outline-offset: -2px; }
  .skp.from-slot .skp-board.over { outline-color: var(--c-danger-text); background: color-mix(in srgb, var(--c-danger) 8%, transparent); }
  @keyframes skpPulse { 50% { box-shadow: 0 0 0 2px rgba(255, 209, 102, .35), var(--sh-raised); } }
  @keyframes skpIn { from { transform: scale(.6); filter: brightness(2); } }

  /* ---- Dica e filtro numa linha ---- */
  .skp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
  .skp-tip { display: flex; flex: 1 1 18em; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  .skp-tip::before { content: ""; flex: none; width: .45em; height: .45em; background: var(--c-violet); transform: rotate(45deg); }
  .skp-tip.hunt { color: var(--c-warn); }
  .skp-tip.hunt::before { background: var(--c-warn); }
  .skp-tip.pick { color: var(--c-gold); font-weight: var(--fw-bold); }
  .skp-tip.pick::before { background: var(--c-gold); }
  .skp-tip .ui-btn { flex: none; margin-left: auto; }
  /* O filtro é a faixa de abas do kit; a aba acesa ganha a cor da raridade. */
  .skp-seg { flex: none; }
  .skp-seg > button { min-height: var(--ctl-sm); font-size: 1.15em; }
  .skp-seg > button.on { color: var(--rc, var(--c-text-strong)); box-shadow: inset 0 -2px 0 var(--rc, var(--c-violet)); }

  /* ---- Corpo: a grade à esquerda (rola sozinha) e o detalhe à direita ---- */
  .skp-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19em, 23em); grid-template-rows: minmax(0, 1fr); gap: var(--sp-3); min-height: 0; }
  .skp-board { display: grid; align-content: start; gap: var(--sp-2); min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 4px 4px 2px; }
  .skp-row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--rc); }
  .skp-rh { display: grid; gap: var(--sp-1); min-width: 0; }
  .skp-rh b { color: var(--rc); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .skp-rh small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  .skp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
  .skp-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; min-height: 0; padding: var(--sp-2) 2px 6px; background: none; border: 2px solid transparent; border-radius: var(--r-sm); color: inherit; text-align: center; cursor: pointer; }
  .skp-tile:hover { background: var(--c-surface-2); filter: none; }
  .skp-tile.sel { background: color-mix(in srgb, var(--rc) 13%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--rc) 70%, var(--c-surface-1)); }
  .skp-tile:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
  .skp-tile[draggable="true"] { cursor: grab; }
  .skp-tn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
  .skp-tile.on .skp-tn, .skp-tile.sel .skp-tn { color: var(--c-text-strong); }
  .skp-tile.locked .skp-fr { background: var(--c-sunken); border-color: color-mix(in srgb, var(--rc) 30%, var(--c-line-soft)); border-style: dashed; box-shadow: 0 0 0 2px var(--c-bg-deep); }
  .skp-tile.locked .skp-fr > .sk-ic { filter: grayscale(1) brightness(.4); opacity: .8; }
  .skp-tile.locked .skp-tn { color: var(--c-text-faint); }
  .skp-tile.locked.sel .skp-tn { color: var(--c-text-2); }
  .skp-lock { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-text-muted); pointer-events: none; }
  .skp-lock svg { width: 1.1em; height: 1.2em; filter: drop-shadow(0 2px 0 var(--c-bg-deep)); }
  .skp-tile .skp-cap { left: -.45em; top: -.45em; font-size: .95em; }
  /* O livro na bolsa (dá para aprender ou subir): selo no canto da moldura. */
  .skp-fr > .skp-bk { position: absolute; right: -.5em; bottom: -.5em; width: 1.6em; height: 1.6em; filter: drop-shadow(0 1px 0 var(--c-bg-deep)) drop-shadow(0 0 2px var(--c-bg-deep)); }
  .skp-pips { display: flex; gap: 2px; }
  .skp-pips i { width: .5em; height: .5em; background: var(--c-surface-3); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
  .skp-pips i.on { background: var(--rc); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35); }
  .skp-pips.none { display: none; }
  /* Escolhendo para um espaço: as aprendidas acendem, as outras somem um pouco. */
  .skp.picking .skp-tile:not(.locked) .skp-fr { outline: 2px dashed var(--c-gold); outline-offset: 2px; }
  .skp.picking .skp-tile.locked { opacity: .45; }

  /* ---- Detalhe da escolhida ---- */
  .skp-det { position: relative; display: grid; align-content: start; gap: var(--sp-3); min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-top: 3px solid var(--rc); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .skp-dh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-items: center; }
  .skp-dh > div { display: grid; gap: var(--sp-2); justify-items: start; min-width: 0; }
  .skp-dh .skp-fr { --fs: 5.4em; }
  .skp-dh .skp-cap { font-size: 1.2em; }
  .skp-det h3 { margin: 0; color: var(--rc); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  .skp-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .skp-tags span { padding: 1px var(--sp-2); background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.35; }
  .skp-tags .rar { color: var(--rc); border-color: color-mix(in srgb, var(--rc) 50%, transparent); background: color-mix(in srgb, var(--rc) 10%, var(--c-surface-1)); }
  .skp-lv { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
  .skp-lv .skp-pips i { width: .8em; height: .8em; }
  .skp-det.locked .skp-lv { color: var(--c-text-muted); }
  /* Os números: mana, recarga, alcance, duração. */
  .skp-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6em, 1fr)); gap: var(--sp-1); }
  .skp-kv div { display: grid; gap: 2px; padding: 6px var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .skp-kv small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  .skp-kv b { color: var(--c-text); font: var(--fw-regular) 1.3em/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  .skp-kv .mp b { color: var(--c-info); }
  /* O efeito agora e no próximo nível (o que muda em verde). */
  .skp-fx { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .skp-det .ui-h { margin: 0; font-size: 1.15em; }
  .skp-fx p { margin: 0; color: var(--c-text); font-size: var(--fs-sm); line-height: var(--lh); }
  .skp-fx p b { color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
  .skp-fx.next { background: none; border-style: dashed; border-color: var(--c-line); }
  .skp-fx.next .ui-h { color: var(--c-text-muted); }
  .skp-fx.next .ui-h::before { background: var(--c-line-strong); }
  .skp-fx.next p { color: var(--c-text-muted); }
  .skp-fx.next p b { color: var(--c-text-2); }
  .skp-fx.next p b.up { color: var(--c-ok); }
  /* Na barra (as 4 teclas) e os livros. */
  .skp-sec { display: grid; gap: var(--sp-2); }
  .skp-sh { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 1.6em; }
  .skp-off:hover:not(:disabled) { color: var(--c-danger-text); }
  .skp-sec p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .skp-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .skp-keys button { position: relative; display: grid; place-items: center; min-width: 0; min-height: 3.4em; padding: var(--sp-1); background: var(--c-surface-2); border: 2px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--sh-raised); color: var(--c-text); }
  .skp-keys button:hover:not([aria-current]) { border-color: var(--c-violet); background: var(--c-surface-3); filter: none; }
  .skp-keys button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
  .skp-keys .k { position: absolute; left: 4px; top: 2px; color: var(--c-gold); font: var(--fw-regular) 1.15em/1 var(--font-display); }
  .skp-keys .sk-ic { width: 2em; height: 2em; border-radius: 0; }
  .skp-keys .nil { width: 2em; height: 2em; border: 1px dashed var(--c-line-strong); }
  .skp-keys button[aria-current] { background: color-mix(in srgb, var(--c-gold) 12%, var(--c-surface-1)); border-color: var(--c-gold); cursor: default; }
  .skp-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  /* O botão do livro, preso no pé do detalhe que rola (fundo próprio: nada passa por baixo dele à vista). */
  .skp-main { position: sticky; z-index: 2; bottom: calc(-1 * var(--sp-4)); margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); padding: var(--sp-2) var(--sp-4) var(--sp-4); background: var(--c-surface-1); border-top: 1px solid var(--c-line); box-shadow: 0 -10px 12px -8px rgba(0, 0, 0, .55); }
  .skp-acts .ui-btn small { font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: .8; }
  .skp-close { display: none; }
  @media (prefers-reduced-motion: reduce) { .skp-sock.pick, .skp-sock.new .skp-fr, .skp-det.rise { animation: none !important; } .skp-sock, .skp-x { transition: none; } }

  /* ---- Janela estreita (celular em pé): a janela inteira rola, a grade ocupa a largura e o
     detalhe é uma folha presa ao pé da tela, que abre ao tocar numa habilidade e fecha no
     Fechar (ou Esc). ---- */
  @container painel (max-width: 599px) {
    #panelSkills:not([hidden]) { display: block; flex: none; }
    #panelSkills > * + * { margin-top: var(--sp-3); }
    .skp-bar { gap: 6px; padding: 6px; }
    .skp-sock { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-1) 6px; text-align: center; }
    .skp-sock .skp-fr { --fs: 3.3em; grid-row: auto; }
    .skp-sock .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; padding-right: 0; white-space: normal; font-size: 1.05em; line-height: .95; }
    .skp-sock .skp-x { display: none; }
    .skp-meta { justify-content: center; }
    .skp-meta .cd { display: none; }
    .skp-cap { left: -.45em; top: -.45em; }
    .skp-tools { flex-direction: column; align-items: stretch; }
    .skp-tip { flex: none; }
    .skp-seg > button { flex: 1 1 auto; min-width: 0; padding: 0 var(--sp-1); }
    .skp-body { display: contents; }
    .skp-board { overflow: visible; padding: 0; margin-top: var(--sp-3); }
    .skp-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding: var(--sp-2) 6px 6px var(--sp-2); }
    .skp-rh { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--sp-2); }
    .skp-tiles { gap: 2px; }
    .skp-tile { padding: var(--sp-2) 2px 6px; }
    .skp-tile .skp-fr { --fs: 3.3em; }
    .skp-det { display: none; }
    .skp-det.sheet { position: sticky; z-index: 3; bottom: calc(-1 * var(--pb)); display: grid; max-height: min(78dvh, 40em); margin: var(--sp-3) calc(-1 * var(--pr)) calc(-1 * var(--pb)) calc(-1 * var(--pl)); padding: var(--sp-3) var(--pr) var(--pb) var(--pl); border-width: 3px 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -12px 24px rgba(0, 0, 0, .6); }
    .skp-det.sheet.rise { animation: skpSheet .22s cubic-bezier(.2, .8, .2, 1); }
    .skp-close { position: absolute; top: var(--sp-2); right: var(--pr); display: inline-flex; }
    /* A folha é compacta: cabe inteira na tela sem rolar por dentro. */
    .skp-det.sheet { gap: var(--sp-2); }
    .skp-dh { padding-right: 5em; column-gap: var(--sp-3); }
    .skp-dh > div { gap: 6px; }
    .skp-dh .skp-fr { --fs: 3.8em; }
    .skp-det h3 { font-size: var(--fs-d-md); }
    .skp-kv div { padding: var(--sp-1) var(--sp-2); }
    .skp-kv b { font-size: 1.15em; }
    .skp-fx { padding: 6px var(--sp-3) var(--sp-2); }
    .skp-sec { gap: 6px; }
    .skp-keys button { min-height: var(--touch); }
    .skp-det.sheet .skp-main { bottom: calc(-1 * var(--pb)); margin: 0 calc(-1 * var(--pr)) calc(-1 * var(--pb)) calc(-1 * var(--pl)); padding: var(--sp-2) var(--pr) var(--pb) var(--pl); }
  }
  @keyframes skpSheet { from { transform: translateY(40%); opacity: .4; } }

  /* ---- Celular deitado (pouca altura): a janela não rola; à esquerda a barra, o filtro e a
     grade (que rola sozinha); à direita o detalhe na altura toda (rola sozinho). Assim a barra e
     o filtro ficam sempre à vista e nada rola dentro de outra coisa que também rola. A dica some
     (a da caçada e a do espaço escolhido ficam). ---- */
  @media (max-height: 500px) and (min-width: 600px) {
    #panelSkills:not([hidden]) { display: grid; flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(15.5em, 18.5em); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top det" "board det"; gap: var(--sp-2) var(--sp-3); }
    .skp-body { display: contents; }
    .skp-top { grid-area: top; gap: var(--sp-2); }
    .skp-board { grid-area: board; padding: 0 2px 2px 0; }
    .skp-det { grid-area: det; padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: var(--sp-2); }
    .skp-main { bottom: calc(-1 * var(--sp-3)); margin: 0 calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
    .skp-bar { padding: 6px; gap: 6px; }
    .skp-sock { padding: var(--sp-1) 6px var(--sp-1) var(--sp-1); column-gap: var(--sp-2); }
    .skp-sock .skp-fr { --fs: 2.6em; }
    .skp-sock .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 0; white-space: normal; font-size: 1em; line-height: .95; }
    .skp-sock .skp-x { display: none; }
    .skp-meta .cd { display: none; }
    .skp-cap { font-size: .85em; }
    .skp-tip:not(.hunt, .pick) { display: none; }
    .skp-seg { flex: 1 1 100%; }
    .skp-seg > button { flex: 1 1 auto; min-width: 0; padding: 0 var(--sp-1); font-size: 1.05em; }
    .skp-row { grid-template-columns: 4.4em minmax(0, 1fr); gap: var(--sp-2); padding: 2px 6px 2px var(--sp-2); }
    .skp-rh b { font-size: 1.1em; }
    .skp-tile { padding: 6px 2px var(--sp-1); gap: var(--sp-1); }
    .skp-tile .skp-fr { --fs: 2.8em; }
    .skp-dh .skp-fr { --fs: 3.6em; }
    .skp-det h3 { font-size: 1.35em; }
  }
  /* ---- HUD por dentro (design-hud, docs/design.md) ----
     O lugar e o tamanho dos quadros (barra de cima, Caçada, Chat, Personagem, Espólios, barra de
     telas) são do layout.css e do responsive.css (base): aqui só o que vai dentro deles. As regras
     da barra de cima, da Caçada e do Chat que vêm do layout.css são refeitas aqui (este arquivo
     vem depois na cascata) sem mudar nenhuma altura: o quadro de cada um continua do mesmo tamanho. */

  /* Barra de cima: retrato, nome, nível e as três barras. */
  .me { transition: border-color var(--t-fast); }
  .me .portrait { border-color: var(--c-line-strong); background-color: var(--c-surface-3); box-shadow: inset 0 0 0 1px rgba(6, 5, 11, .45); }
  .me-name { color: var(--c-text-strong); }
  .me-name .lvl { color: var(--c-gold); text-shadow: 0 0 8px rgba(255, 209, 102, .22); }
  .hbar { background: var(--c-bg-deep); box-shadow: inset 0 0 0 1px var(--c-line); }
  /* O preenchimento em pixel: brilho de 1 px em cima e sombra embaixo. */
  .hbar i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .2); }
  .hbar span { z-index: 1; letter-spacing: .02em; text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .85); font-variant-numeric: tabular-nums; }
  /* XP em dez gomos: dá para ver de longe quanto falta para o nível. */
  .hbar.xp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(6, 5, 11, .55) calc(10% - 1px) 10%); }
  .res small { color: var(--c-text-muted); letter-spacing: .02em; }
  .res span { color: var(--c-text-strong); }

  /* Caçada: números em cartões baixos, a ação principal em violeta e as outras no tom do quadro. */
  #huntIdle { color: var(--c-text-muted); }
  .hunt-stats div { min-width: 0; background: var(--c-sunken); border-color: var(--c-line-soft); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .3); }
  .hunt-stats small { color: var(--c-text-muted); letter-spacing: .02em; }
  .hunt-stats span { color: var(--c-text-strong); letter-spacing: .02em; }
  /* XP em lilás e ouro em dourado, como na barra de cima. */
  #huntXp, #huntXpH { color: var(--c-accent-text); }
  #huntGold { color: var(--c-gold); }
  .hunt-actions button { border: 1px solid var(--c-violet); border-radius: var(--r-md); box-shadow: var(--sh-raised), inset 0 1px 0 rgba(255, 255, 255, .14); transition: background-color var(--t-fast), border-color var(--t-fast), filter var(--t-fast), transform var(--t-fast); }
  .hunt-actions button.alt { background: var(--c-surface-3); border-color: var(--c-line-strong); box-shadow: var(--sh-raised); color: var(--c-text); }
  .hunt-actions button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
  .hb-dots i { background: var(--c-line-strong); }
  .hb-dots i.on.mp { background: var(--c-info); box-shadow: 0 0 5px var(--c-info); }

  /* Chat: abas no trilho fundo do kit, mensagens com o nome e a hora numa linha. */
  .chat-tabs { background: var(--c-sunken); border-color: var(--c-line); }
  .chat-tabs button { color: var(--c-text-muted); transition: background-color var(--t-fast), color var(--t-fast); }
  .chat-tabs button.on { background: var(--c-violet-deep); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-violet); }
  /* Não lidas: o contador fica ao lado do nome, dentro da aba (nunca por cima da faixa). As abas
     dividem a largura pelo que cada uma precisa; se não couberem, a faixa rola de lado. */
  .chat-tabs { display: flex; overflow: auto hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .chat-tabs::-webkit-scrollbar { display: none; }
  .chat-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
  .chat-tabs b { position: static; flex: none; min-width: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--c-danger); color: var(--c-text-strong); font: 700 11px/16px var(--font-ui); text-align: center; }
  .chat-tabs b[hidden] { display: none; }
  .msg { border-radius: var(--r-sm); }
  .msg.mine { background: color-mix(in srgb, var(--c-violet) 9%, transparent); box-shadow: inset 2px 0 0 var(--c-violet-strong); }
  .msg.private { background: rgba(199, 155, 255, .07); box-shadow: inset 2px 0 0 #c79bff; }
  .msg .txt { color: var(--c-text); }
  .msg time, .sys time { color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
  .sys { color: var(--c-text-2); }
  .sys.warn { color: var(--c-warn); }
  .sys.loot { color: var(--c-text); }
  .feed-empty { padding: var(--sp-6) var(--sp-3); color: var(--c-text-muted); text-align: center; }
  .chat-new { background: var(--c-violet-strong); border: 1px solid var(--c-violet); color: var(--c-text-strong); font-weight: 700; box-shadow: var(--sh-pop); }
  .chat-row input { background: var(--c-sunken); border-color: var(--c-line-strong); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .chat-row input:focus { border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(123, 97, 255, .22); }
  .chat-row #chatTo { border-color: #6b4fa8; }
  .chat-row button.alt { background: var(--c-surface-3); border-color: var(--c-line-strong); box-shadow: var(--sh-raised); }
  @media (hover: hover) {
    .msg:hover, .sys:hover { background: var(--c-surface-2); }
    .chat-tabs button:not(.on):hover { background: var(--c-surface-2); color: var(--c-text); }
  }

  /* Personagem: rótulo à esquerda, valor à direita, uma linha fina entre as linhas. */
  .me-stats { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; font-size: 14px; }
  .me-stats dt { color: var(--c-text-muted); }
  .me-stats dd { margin: 0; color: var(--c-text-strong); text-align: right; font: 400 20px/1 var(--font-display); letter-spacing: .02em; }
  /* O Poder é o número que mais importa: em dourado, sem o negrito falso na letra de pixel. */
  .me-stats .me-power b { color: var(--c-gold); font-weight: 400; }
  /* A linha entre as linhas fica dentro do vão de 5 px (pseudo-elemento): a coluna não muda de altura. */
  @media (min-width: 600px) {
    .me-stats > * { position: relative; }
    .me-stats > :not(:nth-last-child(-n + 2))::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--c-line-soft); pointer-events: none; }
    .me-stats > dt:not(:nth-last-child(-n + 2))::after { right: -12px; }
  }
  .points { background: linear-gradient(color-mix(in srgb, var(--c-gold) 16%, var(--c-surface-1)), color-mix(in srgb, var(--c-gold) 7%, var(--c-surface-1))); border-color: var(--c-gold-deep); color: var(--c-gold); font-weight: 700; box-shadow: var(--sh-raised), inset 0 1px 0 rgba(255, 209, 102, .16); }
  .points:hover:not(:disabled) { border-color: var(--c-gold); filter: none; }

  /* Espólios: o resumo, o filtro em trilho (quatro partes iguais, sem rolar de lado) e a lista. */
  .loot { min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #lootList { list-style: none; margin: 0; padding: 0; overflow: hidden auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 4px; min-height: 0; }
  /* Sem nada na lista, o aviso sobe para logo abaixo do título (no lugar da lista). */
  #lootList:empty { display: none; }
  #lootEmpty { align-self: start; padding: var(--sp-4) var(--sp-3); border: 1px dashed var(--c-line); border-radius: var(--r-md); background: rgba(17, 15, 30, .55); color: var(--c-text-muted); text-align: center; }
  #lootList li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 5px; background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-left: 3px solid var(--c); border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.3; }
  #lootList li .nm { min-width: 0; color: var(--c); font-weight: 600; overflow-wrap: anywhere; }
  #lootList li small { color: var(--c-text-faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  #lootList li.locked .ii { filter: grayscale(1) brightness(.55); opacity: .75; }
  #lootList li.gone .nm { opacity: .8; }
  #lootList li .txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
  #lootList li .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
  /* Destino (vendida, perdida, essência, no NPC): etiqueta do kit, com borda. */
  #lootList li .lt { flex: none; padding: 0 5px; border: 1px solid transparent; border-radius: var(--r-xs); font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
  #lootList li .lt.sold { background: color-mix(in srgb, var(--c-gold) 10%, var(--c-sunken)); border-color: var(--c-gold-dark); color: var(--c-gold); }
  #lootList li .lt.lost { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-sunken)); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); color: var(--c-danger-text); }
  #lootList li .lt.ess { background: color-mix(in srgb, var(--rar-3) 12%, var(--c-sunken)); border-color: color-mix(in srgb, var(--rar-3) 45%, transparent); color: #d4b8ff; }
  #lootList li .lt.npc { background: color-mix(in srgb, var(--c-gold) 6%, var(--c-sunken)); border-color: color-mix(in srgb, var(--c-gold) 22%, transparent); color: #d8c48a; font-weight: 600; }
  /* "★ Crítico no máximo": dourado, quebra a linha se precisar. */
  #lootList li .lt.loot-max { flex: 0 1 auto; padding: 0; border: 0; background: none; color: var(--c-gold); white-space: normal; }
  #lootList li .nm .x { color: var(--c-text-strong); font-weight: 700; }
  #lootList li.rare { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 15%, var(--c-sunken)), var(--c-sunken) 70%); border-color: color-mix(in srgb, var(--c) 35%, var(--c-line-soft)); border-left-color: var(--c); }
  #lootList li.empty { justify-content: center; min-height: 0; padding: var(--sp-3) var(--sp-2); border: 1px dashed var(--c-line); color: var(--c-text-muted); background: none; }
  #lootList li .ii { flex: none; }
  .loot-sum { margin: 0 0 6px; padding: 5px 8px; background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-left: 3px solid var(--c-gold-deep); border-radius: var(--r-sm); color: var(--c-text-2); font-size: 12.5px; line-height: 1.35; }
  .loot-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-bottom: 6px; padding: 2px; background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .loot-filter[hidden] { display: none; }
  .loot-filter .chip { position: relative; min-width: 0; padding: 3px 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; touch-action: manipulation; }
  .loot-filter .chip.on { background: var(--c-violet-deep); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-violet); }
  @media (hover: hover) { .loot-filter .chip:not(.on):hover { background: var(--c-surface-2); color: var(--c-text); filter: none; } }
  .loot-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .loot-row .loot-filter { flex: 1; min-width: 0; margin-bottom: 0; }
  /* "Vender itens": o botão dourado do kit (ação de ouro), pequeno. */
  #lootSell { flex: none; margin-left: auto; padding: 4px 10px; background: linear-gradient(#ffdf8f, var(--c-gold-strong)); border: 1px solid var(--c-gold); border-radius: var(--r-md); box-shadow: var(--sh-raised), inset 0 1px 0 rgba(255, 255, 255, .35); color: #2a1a05; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, .3); white-space: nowrap; touch-action: manipulation; }
  #lootSell:active { transform: translateY(1px); box-shadow: none; }
  /* No PC (colunas à mostra) o "Vender itens" fica na barra do título Espólios; no celular o título some e ele fica ao lado do filtro. */
  @media (min-width: 1000px) and (min-height: 501px) {
    #lootBox { position: relative; }
    .loot-row { display: block; margin-bottom: 0; }
    .loot-row .loot-filter { margin-bottom: 6px; }
    #lootSell { position: absolute; top: 6px; right: 10px; }
  }


  /* Barra de telas (só o acabamento: os ícones e a ordem são do menu). */
  .dock { grid-area: dock; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
  .dock button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 7px 6px; background: var(--c-surface-1); border: 2px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-frame); font: 400 18px/1 var(--font-display); letter-spacing: .02em; color: var(--c-text); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
  .dock button:hover { border-color: #5b4bb0; background: var(--c-surface-2); color: var(--c-text-strong); }
  .dock button:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  /* A tela aberta fica marcada no menu (o menu/index.ts põe aria-current). */
  .dock button[aria-current="true"] { border-color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 16%, var(--c-surface-1)); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-violet), 0 2px 0 var(--c-bg-deep); }
  /* Ícones do menu: client/img/ui/menu.png (tools/criar-icones-menu.lua), 14 quadros de 20x20 na
     ordem do client/img/ui/menu.json. --ic é o lado do ícone na tela: 20 px CSS são 1, 2 ou 3 px do
     aparelho por pixel da arte (telas de 1x, 2x e 3x); as telas grandes, com zoom, trocam no
     responsive.css. A caixa tem 24 px de altura, como o ícone do Boss de antes: a altura dos botões
     não muda. */
  .dock button em { --ic: 20px; --i: 0; flex: none; width: var(--ic); height: 24px; background: url('/img/ui/menu.png') calc(var(--i) * var(--ic) * -1) 50% / calc(var(--ic) * 14) var(--ic) no-repeat; image-rendering: pixelated; }
  .dock [data-panel="skills"] em { --i: 1; }
  .dock [data-panel="maps"] em { --i: 2; }
  .dock [data-panel="boss"] em { --i: 3; }
  .dock [data-panel="codex"] em { --i: 4; }
  .dock [data-panel="spirits"] em { --i: 5; }
  .dock [data-panel="mail"] em { --i: 6; }
  .dock [data-panel="market"] em { --i: 7; }
  .dock [data-panel="vip"] em { --i: 8; }
  .dock [data-panel="pools"] em { --i: 9; }
  .dock [data-panel="skins"] em { --i: 10; }
  .dock [data-panel="ranking"] em { --i: 11; }
  .dock [data-panel="log"] em { --i: 12; }
  .dock [data-link="/wiki"] em { --i: 13; }
  .dock button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock button.vip { border-color: var(--c-gold-dark); color: var(--c-gold); }
  .dock button.vip:hover { border-color: var(--c-gold-deep); }
  .dock button.vip[aria-current="true"] { border-color: var(--c-gold); background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-1)); box-shadow: inset 0 -2px 0 var(--c-gold), 0 2px 0 var(--c-bg-deep); }
  /* A tecla de atalho: uma tecla pequena no canto, que aparece ao passar o mouse (não come a largura do nome). */
  .dock kbd { position: absolute; top: -7px; left: -4px; z-index: 1; padding: 0 4px; background: var(--c-surface-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); box-shadow: 0 1px 0 var(--c-bg-deep); color: var(--c-text-2); font: 700 10px/14px var(--font-ui); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
  .dock button:is(:hover, :focus-visible) kbd { opacity: 1; }
  /* Cada botão com a largura do nome e as sobras iguais (sem "Persona…"), em qualquer largura. */
  .dock { grid-auto-columns: minmax(0, auto); }
  .badge { position: absolute; top: -7px; right: -5px; min-width: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-danger); color: #fff; font: 700 11px/20px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--c-bg); }
  .game button:focus-visible, .game input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

  /* Tela média: as colunas afinam. Celular, tablet, toque e telas grandes
     ficam no fim do estilo ("Celular, tablet e telas grandes"). */
  @media (max-width: 1250px) {
    .game { grid-template-columns: 15rem minmax(0, 1fr) 15rem; }
    .me { width: 19rem; }
    .res { min-width: 7.5rem; }
    .dock button { font-size: 17px; gap: 6px; }
  }
  body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }

  /* ---- Celular e tablet: só o necessário para nada se cobrir nem ficar cortado ---- */
  /* O nome comprido não empurra o nível para cima do ouro: a coluna das barras encolhe. */
  .me-info { grid-template-columns: minmax(0, 1fr); }
  .me-name .lvl { flex: none; }
  @media (pointer: coarse) {
    /* Campos e botões do chat com 44 px; o Vender itens também. */
    .chat-row :is(input, button) { min-height: var(--touch); }
    #lootSell { min-height: var(--touch); padding-inline: 12px; }
    /* Filtro dos Espólios: desenha 40 px, o toque pega 44. */
    .game #lootBox .loot-filter .chip { min-height: 40px; }
    .loot-filter .chip::after { content: ""; position: absolute; inset: -3px 0; }
  }
  /* Celular deitado: com Espólios ou Personagem aberto, a barra de telas sai (como já sai com o Chat)
     e a aba fica com a altura da coluna; antes a lista ficava com 9 px e o aviso ia para baixo dos botões. */
  @media (max-height: 500px) and (min-width: 600px) {
    .game:is([data-sheet="loot"], [data-sheet="me"]):not(.side-min) .dock { display: none; }
    /* A aba aberta mostra o nome inteiro ("Personagem" cortava em "Personag…"). */
    .sheet-tabs button.on span { font-size: 17px; letter-spacing: 0; }
    /* O helper.css (habilidades-helper) deixa o filtro baixo aqui com 9 px de lado: em quatro partes iguais, 4 px. */
    .game #lootBox .loot-filter .chip { padding: 1px 4px; }
    /* Espólios na coluna estreita: o filtro na largura toda (quatro partes de 44 px ou mais), a lista
       e o "Vender itens" embaixo, na largura toda, perto do polegar. */
    #lootBox { grid-template-rows: auto minmax(0, 1fr) auto; }
    #lootBox :is(.loot-top, .loot-row) { display: contents; }
    #lootFilter { grid-row: 1; margin: 0; }
    #lootList, #lootEmpty { grid-row: 2; }
    #lootSell { grid-row: 3; margin: 0; }
    /* Personagem: linhas um pouco mais baixas, para o "Distribuir pontos" caber sem rolar. */
    .me-stats { row-gap: 3px; font-size: 13px; }
    .me-stats dd { font-size: 18px; }
    .me-stats > :not(:nth-last-child(-n + 2))::after { bottom: -2px; }
    /* Trilho da coluna recolhida: os botões desenham 40 px de largura; o toque pega 44. */
    .game.side-min .sheet-tabs button:not(.side-tog)::after { content: ""; position: absolute; inset: 0 -2px; }
  }
  /* Celular deitado, na caçada: a coluna tem uns 90 px para a Caçada. Os botões (Idle, Voltar, Auto
     Helper) vêm primeiro, sempre à vista; os números ficam numa linha baixa (nome e valor lado a
     lado) e o que não couber rola dentro da caixa. */
  @media (max-height: 500px) and (min-width: 600px) {
    #huntBox > .hunt-actions { order: -1; }
    #hudHunt { display: flex; flex-wrap: wrap; gap: 3px; }
    #hudHunt > div { flex: 1 1 auto; display: flex; align-items: baseline; gap: 5px; min-width: 0; padding: 2px 6px; }
    #hudHunt > .hunt-rate { flex-basis: 100%; }
    #hudHunt small { flex: none; font-size: 12px; }
    #hudHunt span { min-width: 0; font-size: 16px; }
    #hudHunt .hunt-dead { display: none; }
    #hudHunt .hunt-rate em { display: inline; margin: 0 0 0 auto; }
  }
  /* Ícone do atlas nos botões da Caçada (Caçar, Voltar, Idle, Manual, Desistir). */
  .hunt-actions button > .ui-ic { margin-right: 6px; }
  /* PC com a tela baixa (notebook de 768 px com a barra do navegador: ~650 px de página): a Caçada
     fica compacta (os números numa linha, Idle e Voltar lado a lado) para o chat caber inteiro na
     coluna, com o campo de escrever à vista e fora do menu de baixo. As caixas não mudam de lugar. */
  @media (min-width: 1000px) and (min-height: 501px) and (max-height: 720px) {
    .hunt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .hunt-stats div { padding: 4px 6px; min-width: 0; }
    .hunt-stats small { overflow: hidden; text-overflow: clip; white-space: nowrap; }
    .hunt-stats span { font-size: 21px; }
    .hunt-stats .hunt-rate { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
    .hunt-stats .hunt-rate small { display: inline; }
    .hunt-stats .hunt-rate em { margin: 0 0 0 auto; }
    .hunt-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
    .hunt-actions button { padding-block: 7px; }
    #modeBtn[hidden] + #actionBtn { grid-column: 1 / -1; }
    .chat { min-height: 9.5em; }
  }
  /* Celular pequeno (360 px): o nome cabe inteiro ao lado do nível e a barra de XP mostra a
     porcentagem (o "19.240 / 223.948 XP" não cabia e era cortado). Só a letra muda; nada sai do lugar. */
  @media (max-width: 379px) {
    .topbar .me-name { font-size: 15px; gap: 3px; letter-spacing: -.01em; }
    .topbar .hbar.xp span { font-size: 0; }
    .topbar .hbar.xp span::before { content: attr(data-pct); font-size: 12px; }
  }
  /* Toque: cada aba do chat com pelo menos 44 px de largura (com as abas do tamanho do nome, o "Global" ficava com 40). */
  @media (pointer: coarse) { .chat-tabs button { min-width: var(--touch); } }
  /* Coluna do chat estreita (até 1440 px): letra das abas um pouco menor, para os contadores caberem ao lado. */
  @media (min-width: 1000px) and (min-height: 501px) { .chat-tabs button { gap: 2px; padding-inline: 3px; } .chat-tabs b { min-width: 14px; padding: 0 3px; font-size: 10.5px; line-height: 15px; } }
  @media (min-width: 1000px) and (max-width: 1440px) and (min-height: 501px) { .chat-tabs button { font-size: 15px; } }
  /* ---- A moldura das janelas (#modal > .panel). Dono: base. docs/design.md, "Moldura de janela". ----
     A janela é um quadro do HUD maior: borda de 2 px, brilho de 1 px por dentro, cantos de 6 px e uma
     faixa de título (.panel-top) presa no topo enquanto o corpo rola. Camada: --z-janela (5), acima do
     nome do mapa e do direcional, abaixo dos avisos da staff e da atualização (6 e 7). */
  .modal { position: absolute; z-index: var(--z-janela); inset: 0; display: grid; place-items: center; background: var(--c-overlay); backdrop-filter: blur(3px) saturate(.7); font-size: clamp(12px, 2.6cqw, 15px); }
  /* O recuo da tela fica em variáveis: o topo preso (.panel-top) e o rodapé
     preso da recarga encostam na borda usando os mesmos valores. */
  .panel { --pt: 1em; --pr: 1em; --pb: 1em; --pl: 1em; container: painel / inline-size; width: min(92%, var(--win-sm)); max-height: 94%; overflow: auto; overscroll-behavior: contain; scroll-padding-top: 4.5em; background: var(--c-window); border: var(--bw) solid var(--c-line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-window), inset 0 0 0 1px var(--c-line-hi); padding: var(--pt) var(--pr) var(--pb) var(--pl); }
  /* Larguras padrão (registerPanel({ size: 'lg' }) põe .sz-lg); as janelas que ainda têm a sua classe seguem com ela. */
  .panel.sz-sm { width: min(92%, var(--win-sm)); }
  .panel.sz-md { width: min(94%, var(--win-md)); }
  .panel.sz-lg { width: min(96%, var(--win-lg)); }
  .panel.sz-xl { width: min(96%, var(--win-xl)); }
  .panel.sz-2xl { width: min(97%, var(--win-2xl)); }
  .panel.sz-full { width: min(97%, var(--win-2xl)); height: min(96%, 64em); display: flex; flex-direction: column; }
  /* Faixa do título: fundo próprio e uma linha embaixo; ao rolar, ganha sombra. */
  .panel-top { position: sticky; top: calc(-1 * var(--pt)); z-index: 6; margin: calc(-1 * var(--pt)) calc(-1 * var(--pr)) .9em calc(-1 * var(--pl)); padding: calc(var(--pt) * .7) var(--pr) calc(var(--pt) * .7) var(--pl); background: var(--c-window-head); border-bottom: 1px solid var(--c-line); box-shadow: inset 0 1px 0 var(--c-line-hi); transition: box-shadow var(--t-med); }
  .panel.scrolled .panel-top { box-shadow: inset 0 1px 0 var(--c-line-hi), 0 8px 14px -6px rgba(0, 0, 0, .6); }
  .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: 2.2em; }
  /* Título em Jersey 10 com o losango dourado (o mesmo dos títulos do HUD); quebra a linha em vez de cortar. */
  .panel-head strong { display: flex; align-items: center; gap: .45em; min-width: 0; font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); letter-spacing: .02em; color: var(--c-title); overflow-wrap: anywhere; text-shadow: 0 2px 0 var(--c-bg-deep); }
  .panel-head strong::before { content: ""; flex: none; width: .28em; height: .28em; background: var(--c-gold); transform: rotate(45deg); box-shadow: var(--sh-glow-gold); }
  .panel-head strong:empty::before { display: none; }
  /* Fechar: botão quadrado, discreto, que acende ao passar o mouse. Em em: a faixa do título não passa de ~3,6em
     (o detalhe preso das Habilidades e o do balanceamento contam com isso); no toque, 44 px (responsive.css). */
  .panel-head button { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; padding: 0; background: var(--c-surface-1); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-text-2); font: var(--fw-bold) 1.05em/1 var(--font-ui); }
  .panel-head button:hover { background: var(--c-danger-deep); border-color: var(--c-danger); color: var(--c-text-strong); filter: none; }
  /* Mensagem da janela (#panelMsg): uma faixa de aviso logo abaixo do título. */
  .panel-msg { margin-top: var(--sp-2); color: var(--c-warn); overflow-wrap: anywhere; }
  .panel-msg:empty { display: none; }
  /* A contagem do Correio (#mailCount). */
  .st-points { margin-bottom: .7em; color: var(--c-text-2); }
  .st-points b { color: var(--c-gold); font-size: 1.15em; }
  kbd { font: inherit; font-size: .8em; color: var(--c-text-muted); border: 1px solid #453f63; border-radius: .3em; padding: 0 .35em; }
  /* Ícone de item: um quadro de 32x32 do atlas (client/img/itens), pixelado.
     Nunca menor que 32 px: abaixo disso o desenho perde pixels. */
  .ii { display: inline-block; flex: none; width: 32px; height: 32px; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: middle; }
  .ii.x2 { width: 64px; height: 64px; }
  /* Inventário e equipamento. A cor da borda do item é a raridade; o ícone
     ocupa o quadrado em passos de 16 px (1x, 1,5x, 2x), para os pixels ficarem
     iguais. Item da outra classe fica apagado. */
  .bag-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .3em; }
  .bag-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: .55em; }
  .bag-pages button { min-width: 2.2em; padding: .3em .5em; font-weight: 700; touch-action: manipulation; }
  .bag-pages .pg { background: #14112a; border: 2px solid var(--c-line); color: var(--muted); }
  .bag-pages .pg.has { color: var(--c-text); }
  .bag-pages .pg.on { background: var(--c-violet-strong); border-color: var(--c-violet); color: #fff; }
  .tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c, #322d47) 16%, #191628), #12101b 72%); border: 2px solid color-mix(in srgb, var(--c, #322d47) 70%, #14121c); border-radius: .4em; line-height: 1; padding: 0; color: inherit; overflow: hidden; }
  /* Espaço livre da mochila. */
  div.tile:empty { --c: #322d47; background: #14121c; }
  .tile .ii { width: 100%; height: auto; aspect-ratio: 1; }
  @supports (width: round(down, 1px, 1px)) { .tile .ii { width: max(32px, round(down, 100%, 16px)); } }
  button.tile { cursor: pointer; }
  button.tile:hover { filter: brightness(1.15); }
  .tile.sel { outline: 2px solid var(--c-gold); outline-offset: 1px; }
  .tile.locked { border-style: dashed; }
  div.tile.void { --c: #1c1928; background: repeating-linear-gradient(135deg, #100e17 0 5px, #15131e 5px 10px); box-shadow: none; opacity: .6; }
  .tile.locked .ii { filter: grayscale(1) brightness(.55); opacity: .75; }
  .tile i { position: absolute; right: 2px; bottom: 2px; padding: 1px 3px; border-radius: 2px; background: var(--c-gold); color: #1a1426; font: 700 12px/1 system-ui, sans-serif; font-style: normal; }
  .item-detail { margin-top: .8em; padding-top: .8em; border-top: 1px solid #322d47; display: grid; gap: .5em; }
  .item-detail:empty { display: none; }
  .item-detail .name { font-weight: 700; font-size: 1.1em; }
  .item-detail small { display: block; color: var(--c-text-muted); font-size: .85em; }
  .item-detail .actions { display: flex; gap: .5em; flex-wrap: wrap; }
  .item-detail button { padding: .4em .8em; font-size: .95em; }
  button.danger { background: var(--c-danger-deep); border-color: var(--c-danger-deep); }
  /* Detalhe do item: ícone grande, nome na cor da raridade, etiquetas (espaço,
     raridade, classe) e o que ele soma. */
  .it-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8em; align-items: center; }
  .it-art { display: grid; place-items: center; width: 76px; height: 76px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 24%, #1d1838), #12101b 72%); border: 2px solid var(--c); border-radius: 4px; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 22%, transparent); }
  .it-card .name { color: var(--c); }
  .it-tags { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .35em; }
  .it-tags span { padding: .1em .45em; border: 1px solid #3a3452; border-radius: 3px; background: var(--c-surface-1); color: var(--c-text-2); font-size: .8em; font-weight: 600; }
  .it-tags .rar { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, #3a3452); }
  .it-tags .no { color: var(--c-danger-text); border-color: var(--c-danger-deep); }
  .it-stats { display: flex; flex-wrap: wrap; gap: .1em .9em; margin-top: .3em; color: var(--c-text-2); }
  .it-stats b { color: var(--c-ok); font: 400 1.3em/1 "Jersey 10", system-ui, sans-serif; }
  /* ---- Mapas: um cartão por destino, com a imagem do mapa em cima (docs/design.md) ----
     A Cidade numa faixa no topo; as caçadas em grade (3, 2 ou 1 coluna pela largura da janela).
     Cada cartão: banner (onde você está, a faixa de nível, o monstro e o nome), o texto, as seções
     do que cai (cabeçalho .mc-h) e o botão no pé (todos na mesma altura na linha). */
  .map-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  @container painel (max-width: 54em) { .map-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container painel (max-width: 36em) { .map-cards { grid-template-columns: minmax(0, 1fr); } }

  .map-card { display: flex; flex-direction: column; min-width: 0; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-frame); }
  /* São 38 cartões: os que estão fora da tela não são montados até chegar perto (abrir a janela levava segundos no celular). */
  .map-card:not(.city) { content-visibility: auto; contain-intrinsic-size: auto 560px; }
  .map-card.mine { border-color: color-mix(in srgb, var(--c-ok) 45%, var(--c-line)); }
  .map-card.here { border-color: var(--c-gold-deep); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .18), var(--sh-raised); }

  /* Banner: a imagem do mapa (ou um fundo), as etiquetas em cima, o monstro e o nome embaixo. */
  .mc-banner { position: relative; flex: none; height: 7.5em; background: var(--c-sunken) center / cover no-repeat; image-rendering: pixelated; border-bottom: 1px solid var(--c-line); }
  .mc-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(11, 10, 18, .82)); pointer-events: none; }
  .map-card.locked .mc-banner { filter: grayscale(.85) brightness(.55); }
  .mc-banner .hero { position: absolute; z-index: 1; left: var(--sp-2); bottom: -2px; width: 80px; height: 80px; }
  .mc-name { position: absolute; z-index: 1; left: calc(80px + var(--sp-3)); right: var(--sp-3); bottom: var(--sp-2); margin: 0; font: var(--fw-regular) var(--fs-d-lg)/.95 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); text-shadow: 0 2px 0 #000; overflow-wrap: anywhere; }
  .map-card.no-hero .mc-name { left: var(--sp-3); }
  .mc-badges { position: absolute; z-index: 2; top: var(--sp-2); left: var(--sp-2); right: var(--sp-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1); }
  .mc-badges span { padding: 2px var(--sp-2); background: rgba(11, 10, 18, .86); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-text-2); font: var(--fw-bold) var(--fs-xs)/1.35 var(--font-ui); white-space: nowrap; }
  .mc-badges .lv { color: var(--c-gold); }
  .mc-badges .lv.locked { color: var(--c-danger-text); }
  .mc-badges .lv.mine { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 50%, var(--c-line)); }
  .mc-badges .here { color: #2a1a05; background: var(--c-gold); border-color: var(--c-gold); }
  .mc-badges .safe { color: var(--c-ok); }

  /* Corpo: texto, seções e o botão empurrado para o pé. */
  .mc-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-3); }
  .mc-info { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .mc-sec { display: grid; gap: var(--sp-2); min-width: 0; }
  .mc-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--c-line-soft); }
  .mc-h-t { color: var(--c-text-muted); font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
  .mc-h-note { color: var(--c-text-faint); font-size: var(--fs-xs); line-height: 1.2; }
  .mc-go { margin-top: auto; }
  /* Mapa bloqueado no celular: recolhido; o "Ver monstros e espólio" abre o resto. */
  .mc-more { display: grid; gap: var(--sp-3); min-width: 0; }
  .mc-more > summary { justify-self: start; list-style: none; cursor: pointer; }
  .mc-more > summary::-webkit-details-marker { display: none; }
  .mc-more[open] > summary { margin-bottom: var(--sp-1); }
  .map-card.locked:has(.mc-more:not([open])) .mc-banner { height: 5.5em; }
  /* Recolhido, o botão apagado sai (o nível já está no banner); aberto, ele volta. */
  .map-card.locked:has(.mc-more:not([open])) .mc-go { display: none; }
  .map-card.locked:has(.mc-more:not([open])) .mc-body { padding-block: var(--sp-2); }
  .mc-more > summary { justify-self: stretch; }
  .map-card.locked:has(.mc-more:not([open])) { contain-intrinsic-size: auto 200px; }

  /* Monstros: o desenho, o nome e a faixa. */
  .mc-mobs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .mc-mob { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 2px var(--sp-3) 2px 2px; background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .mc-mob-name { color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .mc-mob-lv { color: var(--c-gold); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; }
  .spr { flex: none; width: 34px; height: 34px; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; }
  .spr.none { display: grid; place-items: center; background: var(--c-surface-2); border-radius: var(--r-xs); color: var(--c-text-muted); font-weight: var(--fw-bold); }

  /* Peças: uma vitrine por raridade (o desenho gira entre as peças da sua classe) e a chance por abate. */
  .mc-drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6em, 1fr)); gap: var(--sp-1); }
  .mc-drop { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: var(--sp-2) var(--sp-1) 6px; background: color-mix(in srgb, var(--c) 7%, var(--c-sunken)); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--c-line-soft)); border-radius: var(--r-sm); }
  .mc-drop-ic { display: grid; place-items: center; width: 32px; height: 32px; }
  .mc-drop-name { max-width: 100%; color: var(--c); font: var(--fw-bold) var(--fs-xs)/1.15 var(--font-ui); text-align: center; overflow-wrap: anywhere; }
  .mc-drop-pct { color: var(--c-text); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
  .mc-drop.off { opacity: .55; }
  .mc-drop.off .mc-drop-ic { filter: grayscale(1) brightness(.5); }

  /* Material, pergaminhos e pedras: ícone, o nome e a chance embaixo dele. */
  .mc-rows { display: grid; gap: var(--sp-1); }
  .mc-rows.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5em), 1fr)); }
  .mc-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: var(--sp-2); min-width: 0; min-height: 2.6em; padding: 3px var(--sp-2) 3px 3px; background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .mc-row > :first-child { grid-row: 1 / span 2; width: 32px; height: 32px; }
  .mc-row-name { align-self: end; color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.15; overflow-wrap: anywhere; }
  .mc-row-pct { align-self: start; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.3; font-variant-numeric: tabular-nums; }

  /* A Cidade: faixa no topo, a imagem à esquerda; o texto e o botão à direita. */
  .map-card.city { grid-column: 1 / -1; flex-direction: row; }
  .map-card.city .mc-banner { width: 20em; height: auto; min-height: 5.5em; border-bottom: 0; border-right: 1px solid var(--c-line); }
  .map-card.city .mc-body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); }
  .map-card.city .mc-info { flex: 1 1 14em; }
  .map-card.city .mc-go { width: auto; min-width: 12em; margin: 0; }
  @container painel (max-width: 36em) {
    .map-card.city { flex-direction: column; }
    .map-card.city .mc-banner { width: auto; height: 5.5em; border-right: 0; border-bottom: 1px solid var(--c-line); }
    .map-card.city .mc-body { flex-direction: column; align-items: stretch; padding: var(--sp-3); }
    .map-card.city .mc-info { flex: none; }
    .map-card.city .mc-go { width: 100%; }
  }

  /* ---- Gruta de Gelo (docs/gruta.md) ----
     As abas Caçadas e Masmorras: as do kit (.ui-tabs), em cima da lista. */
  .map-tabs { margin-bottom: var(--sp-3); }
  .mc-badges .pvp { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 55%, var(--c-line)); }
  /* O cartão da Gruta: o Kryos (quando nasce ou até quando fica) e o tempo que resta na semana. */
  .mc-gruta { display: grid; gap: var(--sp-1); }
  .mc-fact { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.3; }
  .mc-fact.covil { color: var(--c-accent-text); }
  .mc-fact.tempo { color: var(--c-info); }
  .mc-fact.off { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-line-soft)); }

  /* Gruta de Gelo: o mapinha, o radar e o mapa grande (ui/panels/maps/mapinha.ts). Só dentro da Gruta,
     num canto que a HUD não usa: embaixo à esquerda no PC; no celular, em cima à esquerda, embaixo do
     nome do mapa (o joystick fica embaixo à esquerda e as poções em cima à direita). O quadro é o do
     HUD (o das poções): fundo escuro, borda de 2 px e a sombra de 2 px embaixo. */
  .gruta-hud { position: absolute; z-index: var(--z-hud); left: var(--sp-2); bottom: var(--sp-2); display: grid; grid-template-columns: 152px; grid-template-areas: 'radar' 'lista' 'mini'; justify-items: center; gap: var(--sp-1); pointer-events: none; }
  .gruta-hud[hidden] { display: none; }
  .gruta-hud > * { pointer-events: auto; }
  .gruta-hud button { min-height: 0; min-width: 0; }
  .gh-mini { grid-area: mini; position: relative; display: block; width: 140px; height: 140px; margin: 0; padding: 0; background: var(--c-bg-deep); border: 2px solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--c-bg-deep); cursor: zoom-in; overflow: hidden; }
  .gh-mini:hover { border-color: var(--c-line-strong); }
  .gh-mini-c { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
  .gh-tempo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 1px var(--sp-1); background: rgba(6, 5, 11, .8); color: var(--c-info); font: var(--fw-bold) 11px/1.3 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gh-tempo:empty { display: none; }
  .gh-radar-c { grid-area: radar; display: block; width: 96px; height: 96px; justify-self: center; }
  .gh-lista { grid-area: lista; display: grid; gap: 2px; width: 100%; }
  /* Cada monstro perto: o ponto na cor do perigo, o nome em cima e o nível e a distância embaixo (o nome inteiro cabe). */
  .gh-item { cursor: pointer; display: grid; grid-template-columns: 8px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; width: 100%; margin: 0; padding: 3px 6px; text-align: left; background: rgba(15, 13, 26, .86); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-text); font: var(--fw-regular) 12px/1.2 var(--font-ui); }
  .gh-item:hover { border-color: var(--c-line-strong); background: rgba(31, 26, 52, .92); }
  .gh-item i { grid-row: 1 / span 2; width: 8px; height: 8px; border-radius: var(--r-xs); background: var(--c); box-shadow: 0 0 0 1px var(--c-bg-deep); }
  .gh-item b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--fw-bold); }
  .gh-item small { color: var(--c-text-muted); font-size: 11px; line-height: 1.2; }
  .gh-vazio { display: block; padding: 2px 5px; background: rgba(15, 13, 26, .86); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); color: var(--c-text-muted); font-size: 11px; line-height: 1.3; text-align: center; }
  /* Mostrar ou esconder o radar: o botão quadrado com o ícone do radar, aceso quando o radar aparece. */
  .gh-recolher { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; background: var(--c-violet-deep); border: 1px solid var(--c-violet); border-radius: var(--r-sm); box-shadow: 0 2px 0 var(--c-bg-deep); cursor: pointer; }
  .gh-recolher:hover { filter: brightness(1.15); }
  .gruta-hud.recolhido .gh-recolher { background: rgba(15, 13, 26, .86); border-color: var(--c-line-strong); }
  .gruta-hud.recolhido .gh-recolher .ui-ic { filter: grayscale(.7) brightness(.8); }
  .gruta-hud.recolhido .gh-radar-c, .gruta-hud.recolhido .gh-lista { display: none; }
  /* Toque: embaixo do nome do mapa e das poções (as poções ficam em cima à direita até 62 px); o mapinha, o radar e o
     botão lado a lado, a lista embaixo. Os alvos têm 44 px de toque (o botão do radar cresce pelo ::after). */
  .gruta-hud.toque { top: 62px; bottom: auto; left: 6px; grid-template-columns: 84px 72px 32px; grid-template-areas: 'mini radar botao' 'lista lista .'; justify-items: start; align-items: start; }
  .gruta-hud.toque .gh-recolher { position: relative; grid-area: botao; width: 32px; height: 32px; margin-top: 6px; }
  .gruta-hud.toque .gh-recolher::after { content: ''; position: absolute; inset: -7px; }
  .gruta-hud.toque .gh-mini { width: 84px; height: 84px; }
  .gruta-hud.toque .gh-tempo { font-size: 10px; }
  .gruta-hud.toque .gh-tempo .ui-ic { display: none; }
  .gruta-hud.toque .gh-item { min-height: 44px; padding: 4px 6px; }
  .gruta-hud.toque .gh-item small { font-size: 11px; }
  /* No toque, com a barra do Kryos no topo do mapa (boss.css), o mapinha desce para baixo dela. */
  .map:has(#bossHud.world:not([hidden])) .gruta-hud.toque { top: 96px; }
  .map:has(#bossHud.world.mini:not([hidden])) .gruta-hud.toque { top: 70px; }
  /* A lista no toque: cada linha tem 44 px; o que cabe sem chegar no direcional (e, com o Kryos, nas poções, que descem
     para cima do direcional): no celular alto em pé os 3 mais perto, nos outros só o mais perto; com a barra do Kryos,
     o mais perto só no celular alto (nos outros a lista some e fica o radar). */
  .gruta-hud.toque .gh-item:nth-child(n+2) { display: none; }
  @media (min-height: 800px) { .gruta-hud.toque .gh-item:nth-child(n+2) { display: grid; } }
  .map:has(#bossHud.world:not([hidden])) .gruta-hud.toque .gh-item:nth-child(n+2) { display: none; }
  @media (max-height: 799px) { .map:has(#bossHud.world:not([hidden])) .gruta-hud.toque .gh-lista { display: none; } }
  /* O mapa grande: por cima do mapa, o fundo escuro e o cartão com a moldura das janelas. */
  .gh-grande { position: absolute; z-index: var(--z-dialogo); inset: 0; display: flex; align-items: center; justify-content: center; background: var(--c-scrim); }
  .gh-grande[hidden] { display: none; }
  .gh-grande-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: var(--sp-2); width: min(94%, 640px); height: 96%; padding: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--c-window); border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-window), inset 0 1px 0 var(--c-line-hi); overflow: auto; }
  .gh-grande-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); width: 100%; }
  .gh-grande-head b { display: flex; align-items: center; gap: .45em; font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--c-title); }
  .gh-grande-head b::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-gold); transform: rotate(45deg); }
  .gh-grande-c { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; min-height: 0; image-rendering: pixelated; border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .gh-grande-info { display: grid; gap: var(--sp-1); width: 100%; }
  .gh-grande-info p { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--c-text); font-weight: var(--fw-bold); }
  .gh-grande-info p.covil { color: var(--c-accent-text); }
  .gh-grande-info p.tempo { color: var(--c-info); }
  .gh-leg { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; color: var(--c-text-muted); font-size: var(--fs-xs); }
  .gh-leg i { display: inline-block; width: 10px; height: 10px; margin-right: 3px; border-radius: var(--r-xs); vertical-align: -1px; }
  .gh-leg i.eu { background: var(--c-gold); border-radius: 50%; }
  .gh-leg i.seguro { background: var(--c-ok); }
  .gh-leg i.covil { background: var(--c-violet); }
  /* (o `.map canvas` do mapa estica todo canvas dentro do mapa: estes não) */
  .map .gruta-hud canvas, .map .gh-grande canvas { position: static; inset: auto; background: transparent; touch-action: manipulation; }
  .map .gruta-hud .gh-mini-c { width: 100%; height: 100%; }
  .map .gruta-hud .gh-radar-c { width: 96px; height: 96px; }
  .map .gruta-hud.toque .gh-radar-c { width: 72px; height: 72px; }
  .map .gh-grande .gh-grande-c { height: 100%; width: auto; max-width: 100%; }
  .gruta-hud.toque .gh-lista { width: 152px; gap: var(--sp-1); }
  /* Loja, Pools e o que mais mora aqui (Market largo, Spirits na Loja, Boost global do admin). Dono: market-loja.
     Tokens e componentes: docs/design.md (src/styles/tokens.css, kit.css). Valores soltos só com comentário. */

  /* Market: painel largo (a Loja e as Pools usam size: 'lg' no registro). */
  .topbar .res.clickable { cursor: pointer; } .topbar .res.clickable:hover { filter: brightness(1.25); }
  /* Botões antigos que outras janelas ainda usam (Templo, Spirits, staff). */
  button.gold { background: var(--c-gold-deep); border-color: var(--c-gold); color: #1b1405; }
  button.link { padding: 0; background: none; border: 0; color: var(--c-accent-text); text-decoration: underline; font: inherit; cursor: pointer; }
  /* Situação do PIX (Painel Admin › Financeiro). */
  .pix-st { justify-self: start; padding: .1em .5em; border-radius: var(--r-sm); background: var(--c-surface-3); color: var(--c-text-2); font-size: .82em; font-weight: var(--fw-bold); }
  .pix-st.st-aprovado { background: var(--c-ok-deep); color: var(--c-ok); }
  .pix-st.st-pendente, .pix-st.st-criando { background: var(--c-warn-deep); color: var(--c-gold); }
  .pix-st.st-em_revisao, .pix-st.st-estornado, .pix-st.st-contestado { background: var(--c-danger-deep); color: var(--c-danger-text); }
  /* Painel Admin › Pagamentos. */
  .pay-period { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
  .pay-period input[type=date] { padding: .35em .5em; }
  .pay-period button { padding: .35em .7em; font-size: .85em; }
  .sf-search.pay-search { grid-template-columns: minmax(0, 1fr) 13em auto; margin: .6em 0; }
  .pay-pkg input { width: 100%; padding: .35em .45em; }
  .pay-adj { display: grid; grid-template-columns: auto 10em auto; justify-content: start; gap: .6em; align-items: center; }
  .pay-adj .ac3-reason { grid-column: 1 / -1; }
  @media (max-width: 700px) { .pay-adj, .sf-search.pay-search { grid-template-columns: minmax(0, 1fr); } }

  /* ================= Loja (#panelVip) ================= */
  /* Tom de cada cartão e banner: --a (destaque) e --d (fundo da arte, o destaque bem escuro).
     Teal, rosa e bronze são cores da arte da Loja (sem token). */
  .t-violet { --a: var(--c-violet); } .t-blue { --a: var(--c-info); } .t-gold { --a: var(--c-gold); }
  .t-teal { --a: #4fd8b8; } .t-rose { --a: #ff8fab; } .t-bronze { --a: #e7a96a; }
  :is(.t-violet, .t-blue, .t-gold, .t-teal, .t-rose, .t-bronze) { --d: color-mix(in srgb, var(--a) 18%, var(--c-sunken)); }

  /* Topo: abas à esquerda, saldo e Recarregar à direita; na janela estreita, as abas na largura toda. */
  .lj-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .lj-top > .lj-tabs { flex: 0 1 26em; }
  .lj-wallet { display: flex; align-items: center; gap: var(--sp-2); }
  .lj-bal { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-md); padding: 0 var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-info-deep); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lj-bal .coin { width: 16px; height: 16px; }
  @container painel (max-width: 36em) {
    .lj-top > .lj-tabs { flex: 1 1 100%; }
    .lj-top > .lj-wallet { flex: 1 1 100%; justify-content: space-between; }
  }

  /* Aviso dentro da janela: faixa com a borda do tom (débito, teste, resultado do PIX, mensagens). */
  .lj-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-left: 3px solid var(--c-info); border-radius: var(--r-md); color: var(--c-text-2); line-height: var(--lh); }
  .lj-note b { color: var(--c-text-strong); }
  .lj-note.warn { background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-danger) 40%, var(--c-line)); border-left-color: var(--c-danger); }
  .lj-note.warn b { color: var(--c-danger-text); }
  .lj-note.test, .lj-note.ok { background: color-mix(in srgb, var(--c-ok) 7%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-ok) 35%, var(--c-line)); border-left-color: var(--c-ok); }
  .lj-note.test b, .lj-note.ok b { color: var(--c-ok); }

  /* Seções da aba Loja: uma faixa de botões com ícone (como as abas do kit, em letra de interface);
     na janela estreita, 3 por linha, com o ícone em cima do nome. */
  .lj-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-1); margin: 0 0 var(--sp-5); padding: var(--sp-1); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .lj-cats > button { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 0; min-height: var(--ctl-md); margin: 0; padding: 0 var(--sp-2); background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; color: var(--c-text-muted); font: var(--fw-semi) var(--fs-md)/1.1 var(--font-ui); }
  .lj-cats > button:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); filter: none; }
  .lj-cats > button.on { background: var(--c-violet-deep); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-violet); }
  .lj-cats .ico { flex: none; width: 24px; height: 24px; }
  .lj-cats .ico.atlas { display: inline-grid; place-items: center; }
  @container painel (max-width: 44em) {
    .lj-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lj-cats > button { flex-direction: column; gap: 2px; min-height: 3.75em; padding: var(--sp-1); font-size: var(--fs-sm); }
  }

  /* Títulos de seção: os do kit (.ui-h). O .lj-h é o mesmo desenho, para quem ainda usa (Templo). */
  #vipList > .ui-h, .lj-h { margin: 0 0 var(--sp-3); }
  .lj-h { display: flex; align-items: center; gap: .45em; font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; color: var(--c-accent-text); }
  .lj-h::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  .lj-sec { scroll-margin-top: 4.5em; padding-top: var(--sp-4); border-top: 1px solid var(--c-line-soft); }
  .lj-lead { margin: 0 0 var(--sp-4); max-width: 48em; color: var(--c-text-2); line-height: var(--lh); }
  .lj-fine { margin: var(--sp-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .lj-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }

  /* Banner de seção (Diamantes, Templo, Spirits). */
  .lj-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 10em; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); padding: var(--sp-5) var(--sp-6); overflow: hidden;
    background: radial-gradient(120% 140% at 85% 50%, color-mix(in srgb, var(--a) 26%, transparent), transparent 60%), linear-gradient(110deg, var(--d), var(--c-surface-1) 75%);
    border: 1px solid color-mix(in srgb, var(--a) 40%, var(--c-line)); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .lj-banner.no-art { grid-template-columns: minmax(0, 1fr); }
  .lj-banner-text { display: grid; justify-items: start; gap: var(--sp-2); }
  .lj-banner-text small { color: var(--a); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
  .lj-banner-text h3 { margin: 0; font: var(--fw-regular) var(--fs-d-xl)/1 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); overflow-wrap: anywhere; }
  .lj-banner-text p { margin: 0; max-width: 36em; color: var(--c-text-2); line-height: var(--lh); }
  .lj-banner-text > button { margin-top: var(--sp-1); }
  .lj-banner-art { display: grid; place-items: center; }
  .lj-banner-art span { font-size: 6em; line-height: 1; filter: drop-shadow(0 0 1.2rem color-mix(in srgb, var(--a) 70%, transparent)); }
  .lj-banner-art .pix { filter: drop-shadow(0 0 1rem color-mix(in srgb, var(--a) 55%, transparent)); }
  @container painel (max-width: 40em) {
    .lj-banner { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
    .lj-banner-art { display: none; }
    .lj-banner-text h3 { font-size: var(--fs-d-lg); }
  }

  /* Destaques: o banner com a arte em escala inteira e, embaixo, setas e pontos. */
  .lj-hero { margin-bottom: var(--sp-5); }
  .lj-hero2 { position: relative; width: var(--hw); height: var(--hh); max-width: 100%; margin: 0 auto; overflow: hidden; background: var(--c-bg-deep); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
  .lj-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lj-hero-text { position: absolute; left: 3%; top: 0; bottom: 0; width: 46%; display: grid; align-content: center; justify-items: start; gap: var(--sp-1); color: var(--c-text-strong); text-shadow: 0 2px 0 #000, 0 0 6px #000; }
  .lj-hero-text small { color: var(--c-gold); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
  .lj-hero-text h3 { margin: 0; font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); letter-spacing: .02em; }
  .lj-hero-text p { margin: 0; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.3; }
  .lj-hero-text > .ui-btn { margin-top: var(--sp-1); text-shadow: none; }
  .lj-hero2.cel .lj-hero-text { left: 4%; top: 7%; bottom: auto; width: 60%; align-content: start; }
  .lj-hero2.cel .lj-hero-text p { display: none; }
  .lj-dots { display: flex; justify-content: center; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
  /* Ponto: o botão é o alvo inteiro (32 px; 44 no toque) e o desenho é o tracinho no meio. */
  .lj-pip { display: grid; place-items: center; width: var(--ctl-sm); height: var(--ctl-sm); min-height: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .lj-pip::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-line-strong); transition: width var(--t-med) var(--ease), background-color var(--t-med); }
  .lj-pip:hover::before { background: var(--c-accent-text); }
  .lj-pip.on::before { width: 22px; background: var(--c-gold); }
  .lj-off { margin-left: .35em; padding: .05em .35em; background: var(--c-danger-deep); color: var(--c-text-strong); border-radius: var(--r-sm); font: var(--fw-bold) .5em/1.4 var(--font-ui); font-style: normal; vertical-align: middle; text-shadow: none; }

  /* Cartões de produto (também os do Templo e dos Spirits). Grade que se ajusta à largura. */
  .lj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
  .lj-grid.packs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr)); }
  .lj-card { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); transition: border-color var(--t-fast); }
  .lj-card:hover { border-color: color-mix(in srgb, var(--a, var(--c-violet)) 50%, var(--c-line)); }
  .lj-card.armed { border-color: var(--c-gold); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .25), var(--sh-glow-gold); }
  .lj-card.sold .lj-art > :not(.lj-fitas) { filter: grayscale(.7) brightness(.75); }
  .lj-art { position: relative; display: grid; place-items: center; height: 8em; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--a) 32%, transparent), transparent 65%), var(--d); border-bottom: 1px solid var(--c-line-soft); }
  .lj-card.pack .lj-art, .lj-card:has(.lj-obj) .lj-art { height: 140px; }
  .lj-art img.lj-obj { width: 128px; height: 128px; filter: drop-shadow(0 .2rem .5rem rgba(0, 0, 0, .5)); }
  .lj-card.boost .lj-art img.lj-obj { width: 64px; height: 64px; }
  .lj-art span { font-size: 3.6em; filter: drop-shadow(0 .2rem .6rem rgba(0, 0, 0, .5)); }
  .lj-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .lj-name { margin: 0; font: var(--fw-bold) var(--fs-lg)/var(--lh-tight) var(--font-ui); color: var(--c-text-strong); overflow-wrap: anywhere; }
  .lj-body p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .lj-body ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.35; }
  .lj-has li { position: relative; padding-left: 1em; }
  .lj-has li::before { content: ""; position: absolute; left: .1em; top: .5em; width: .38em; height: .38em; background: var(--a, var(--c-gold)); transform: rotate(45deg); }
  .lj-body p.lj-pack-text { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .lj-worth { display: flex; flex-wrap: wrap; align-items: center; gap: .25em; color: var(--c-text-2); font-size: var(--fs-xs); }
  .lj-worth s { color: var(--c-text-muted); } .lj-worth .coin { width: 12px; height: 12px; }
  .lj-left { color: var(--c-gold); font-size: var(--fs-xs); }
  .lj-have { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .lj-why { color: var(--c-danger-text); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  .lj-confirm { margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 8%, var(--c-surface-2)); border: 1px solid var(--c-gold-dark); border-radius: var(--r-sm); }
  .lj-body p.lj-confirm { color: var(--c-text); }
  /* O rodapé do cartão fica sempre embaixo: preço à esquerda, a ação à direita. */
  .lj-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
  /* Botões antigos dentro do cartão (Templo, Spirits): no tamanho do botão pequeno do kit. */
  .lj-foot button:not(.ui-btn) { min-height: var(--ctl-sm); padding: 0 var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
  .lj-price { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-info); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lj-price .coin { width: 14px; height: 14px; }
  .lj-price.big { font-size: var(--fs-d-lg); }
  .lj-price.gold { color: var(--c-gold); }
  .lj-foot.short .lj-price { color: var(--c-danger-text); }
  .lj-from { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .lj-card.soon .lj-price { color: var(--c-text-muted); }
  .lj-card.wide { grid-column: 1 / -1; grid-template-columns: 15em minmax(0, 1fr); grid-template-rows: none; }
  .lj-card.wide .lj-art { height: auto; min-height: 9em; border-bottom: 0; border-right: 1px solid var(--c-line-soft); }
  .lj-card.wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-5); }
  .lj-card.topup .lj-art { height: 8em; }
  @container painel (max-width: 40em) {
    .lj-card.wide { grid-template-columns: minmax(0, 1fr); }
    .lj-card.wide .lj-art { border-right: 0; border-bottom: 1px solid var(--c-line-soft); }
    .lj-card.wide ul { grid-template-columns: minmax(0, 1fr); }
  }
  /* Fitas e selo de desconto: a arte da Loja em pixel art, com o texto do HTML por cima. */
  .pix { image-rendering: pixelated; image-rendering: crisp-edges; }
  .pix.lj-x2 { width: 48px; height: 48px; } .pix.lj-x3 { width: 72px; height: 72px; } .pix.lj-x4 { width: 96px; height: 96px; }
  .lj-fitas { position: absolute; top: var(--sp-2); left: var(--sp-2); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .lj-fita { display: inline-block; box-sizing: border-box; min-width: 64px; height: 20px; padding: 1px 2px 0; border-style: solid; border-width: 0 10px; border-image: url(/img/loja/selos/selo_limitado.png) 0 10 fill / 0 10px round; image-rendering: pixelated; color: #fff; font: 700 12px/17px var(--font-ui); font-style: normal; text-align: center; text-shadow: 0 1px 0 #000, 0 0 2px #000; white-space: nowrap; }
  .lj-fita.novo { border-image-source: url(/img/loja/selos/selo_novo.png); }
  .lj-fita.conta { border-image-source: url(/img/loja/selos/selo_1_por_conta.png); }
  /* O selo é desenhado em 80 px (64 px na janela estreita); o texto, em px, acompanha a arte. */
  .lj-selo { position: absolute; top: var(--sp-1); right: var(--sp-1); display: grid; place-items: center; width: 80px; height: 80px; background: url(/img/loja/selos/selo_desconto.png) 0 0 / 80px 80px no-repeat; image-rendering: pixelated; }
  .lj-selo b { color: #fff; font: 700 15px/1 var(--font-ui); text-shadow: 0 1px 0 #000, 0 0 2px #000; }
  @container painel (max-width: 40em) {
    .lj-selo { width: 64px; height: 64px; background-size: 64px 64px; }
    .lj-selo b { font-size: 12px; }
  }

  /* Boosts › Como funciona. */
  .lj-rules { margin: 0 0 var(--sp-5); padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .lj-rules ul { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .lj-rules li { position: relative; padding-left: 1em; }
  .lj-rules li::before { content: ""; position: absolute; left: .1em; top: .55em; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  .lj-rules b { color: var(--c-text-strong); }

  /* ---- Aba Diamantes (recarga com PIX) ---- */
  .lj-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; counter-reset: passo; }
  .lj-steps li { counter-increment: passo; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-2); min-width: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.3; }
  .lj-steps li::before { content: counter(passo); grid-row: span 2; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: var(--r-pill); background: var(--c-info-deep); color: var(--c-info); font-weight: var(--fw-bold); }
  .lj-steps b { color: var(--c-text-strong); }
  /* Janela estreita: os três passos lado a lado, com o número em cima. */
  @container painel (max-width: 36em) {
    .lj-steps li { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 2px; padding: var(--sp-2); text-align: center; font-size: var(--fs-xs); }
    .lj-steps li::before { grid-row: auto; margin-bottom: 2px; }
  }
  .lj-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5em), 1fr)); gap: var(--sp-3); }
  .lj-pack { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--sp-1); min-width: 0; margin: 0; padding: var(--sp-4) var(--sp-2); background: linear-gradient(180deg, color-mix(in srgb, var(--c-info) 12%, var(--c-surface-1)), var(--c-surface-1) 70%); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); color: var(--c-text); text-align: center; cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); }
  .lj-pack:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c-info) 60%, var(--c-line)); filter: none; }
  .lj-pack.on { border-color: var(--c-gold); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .3), var(--sh-glow-gold); }
  /* Recarga fechada: os pacotes à mostra, sem cara de botão apagado (só não respondem). */
  .lj-pack:disabled { cursor: default; opacity: 1; }
  /* A gema cresce com o pacote (48, 72 e 96 px): o espaço é o da maior, alinhado embaixo. */
  .lj-pile { display: flex; align-items: flex-end; justify-content: center; height: 96px; }
  .lj-amount { color: var(--c-info); font: var(--fw-regular) var(--fs-d-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  .lj-pack small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .lj-pack strong { margin-top: var(--sp-1); color: var(--c-ok); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); }
  .lj-pack .ui-pill { white-space: normal; }
  .lj-tag { position: absolute; top: -.7em; left: 50%; transform: translateX(-50%); padding: 1px var(--sp-2); background: var(--c-gold); color: #2a1a05; border-radius: var(--r-sm); font: var(--fw-bold) var(--fs-xs)/1.4 var(--font-ui); font-style: normal; white-space: nowrap; }
  /* Rodapé preso da recarga: fundo próprio, encosta embaixo sem cobrir o último pacote (fica no fim do fluxo). */
  .lj-checkout { position: sticky; bottom: calc(-1 * var(--pb, 1em)); z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--c-window-head); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, .6); }
  .lj-sum { flex: 1 1 12em; display: grid; gap: 2px; align-self: center; }
  .lj-sum small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .lj-sum b { color: var(--c-info); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); }
  .lj-email { flex: 1 1 14em; }
  .lj-checkout > .ui-btn { flex: 0 0 auto; }
  @container painel (max-width: 36em) { .lj-checkout > .ui-btn { flex: 1 1 100%; } }

  /* PIX gerado. */
  .wl-pix { display: grid; gap: var(--sp-4); padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .wl-pix-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line-soft); }
  .wl-pix-what { display: grid; gap: 2px; }
  .wl-pix-what small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .wl-pix-what b { color: var(--c-info); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); }
  .wl-pix-head strong { color: var(--c-ok); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); }
  .wl-pix-row { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  .wl-qr { display: grid; place-items: center; width: 13em; height: 13em; padding: var(--sp-2); background: #fff; border-radius: var(--r-md); color: #4a4560; text-align: center; font-size: var(--fs-sm); }
  .wl-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
  .wl-pix-side { display: grid; gap: var(--sp-2); min-width: 0; }
  .wl-code { min-height: 5em; resize: none; font: var(--fs-xs)/1.35 ui-monospace, monospace; word-break: break-all; }
  .wl-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--c-gold); font-weight: var(--fw-bold); }
  .wl-dot { width: .6em; height: .6em; border-radius: var(--r-pill); background: var(--c-gold); animation: wl-pulse 1.4s ease-in-out infinite; }
  @keyframes wl-pulse { 50% { opacity: .3; } }
  @media (prefers-reduced-motion: reduce) { .wl-dot { animation: none; } }
  .wl-pix .lj-note { margin: 0; }
  .wl-act { margin: 0; }
  .wl-id { color: var(--c-text-muted); font-size: var(--fs-xs); }
  @container painel (max-width: 36em) {
    .wl-pix-row { grid-template-columns: minmax(0, 1fr); }
    .wl-qr { margin: 0 auto; }
    .wl-act > .ui-btn { flex: 1 1 100%; }
  }

  /* ---- Aba Extrato ---- */
  .lj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
  /* Cada número é o .ui-stat do kit; aqui só a grade e, na janela estreita, a lista. */
  /* Janela estreita: o resumo vira um quadro só, uma linha por número. */
  @container painel (max-width: 36em) {
    .lj-stats { grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--sp-1) 0; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
    .lj-stat { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: none; border: 0; border-radius: 0; box-shadow: none; }
    .lj-stat + .lj-stat { border-top: 1px solid var(--c-line-soft); }
    .lj-stat small { font-size: var(--fs-sm); }
  }
  .lj-sub { margin-bottom: var(--sp-3); }
  .lj-count { min-width: 1.6em; padding: 0 var(--sp-1); background: var(--c-surface-3); border-radius: var(--r-sm); color: var(--c-text-2); font: var(--fw-bold) var(--fs-xs)/1.5 var(--font-ui); text-align: center; }
  .lj-table-wrap { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; background: var(--c-sunken); }
  .lj-table th { background: var(--c-surface-1); }
  .lj-table td { overflow-wrap: break-word; }
  .lj-table td.num, .lj-table td.lj-when { white-space: nowrap; }
  .lj-table tbody tr:last-child td { border-bottom: 0; }
  .lj-table tr.click { cursor: pointer; }
  .lj-table tr.click:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
  .lj-table .lj-wide { min-width: 9em; }
  .lj-st { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .lj-delta.ok { color: var(--c-ok); } .lj-delta.no { color: var(--c-danger-text); } .lj-delta.muted { color: var(--c-text-muted); }
  @container painel (max-width: 40em) {
    .lj-table-wrap { border: 0; overflow: visible; background: none; }
    .lj-table.cards tr { margin-bottom: var(--sp-2); }
    .lj-table.cards td.lj-wide { grid-column: 1 / -1; }
    .lj-table.cards td.lj-title { order: -1; font-weight: var(--fw-semi); color: var(--c-text-strong); }
    .lj-table.cards td.lj-when { white-space: normal; }
    .lj-table.cards td.num { text-align: left; }
    .lj-table tr.click { border-color: color-mix(in srgb, var(--c-gold) 45%, var(--c-line)); }
  }

  /* ================= Spirits na Loja (as cartas como produtos) ================= */
  .sp-card-art { display: flex; justify-content: center; align-items: center; gap: 0; height: 140px; }
  .sp-card-art .sp-mini-card { width: 63px; height: 90px; margin: 0 -14px; }
  .sp-card-art .sp-mini-card:nth-child(2) { transform: translateY(-6px) rotate(4deg); }
  .sp-card-art .sp-mini-card:nth-child(3) { transform: translateY(-10px) rotate(9deg); }
  .sp-n { position: absolute; right: .6em; bottom: .5em; padding: .05em .4em; background: var(--c-gold); color: #1a1426; font: var(--fw-regular) 1.4em/1 var(--font-display); font-style: normal; }
  .sp-get { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em; margin: .8em 0; padding: .7em .9em; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .sp-get-txt p { margin: .2em 0 0; color: var(--c-text-2); font-size: .9em; }
  .sp-get-btns { display: flex; flex-wrap: wrap; gap: .4em; }

  /* ================= Templo dentro da Loja (o desenho é do Templo; aqui só o encaixe na Loja) ================= */
  /* Os números da regra não quebram no meio (a caixa de um negrito partido cobria o outro). */
  #vipList .tp-rules b { white-space: nowrap; }
  @media (pointer: coarse) { #vipList .tp-buy button { min-width: var(--touch); } }

  /* Painel Admin › Boost global. */
  .sf-boost { display: grid; gap: .5em; max-width: 34em; }
  .sf-boost h4 { margin: 0; }
  .sf-boost-now { display: grid; gap: .25em; padding: .5em .7em; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .sf-boost-row { display: flex; gap: .7em; } .sf-boost-row b { min-width: 3.5em; }

  /* ================= Pools da comunidade (#panelPools, docs/boosts.md) ================= */
  .pl-sec { margin: 0; }
  .pl-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-4); }
  .pl-how .lj-lead { margin-bottom: var(--sp-2); }
  .pl-facts { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  .pl-facts li { position: relative; padding-left: 1em; }
  .pl-facts li::before { content: ""; position: absolute; left: .1em; top: .55em; width: .34em; height: .34em; background: var(--c-gold); transform: rotate(45deg); }
  @container painel (max-width: 40em) {
    .pl-intro { grid-template-columns: minmax(0, 1fr); }
    .pl-wallet { justify-content: space-between; }
  }
  .pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16em), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .pl-card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); background: linear-gradient(180deg, color-mix(in srgb, var(--c-violet) 10%, var(--c-surface-1)), var(--c-surface-1) 55%); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .pl-card.on { border-color: var(--c-gold); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .25), var(--sh-glow-gold); }
  .pl-card.armed { border-color: var(--c-gold-dark); }
  .pl-head { display: flex; align-items: center; gap: var(--sp-3); }
  .pl-head img { flex: none; width: 64px; height: 64px; image-rendering: pixelated; }
  .pl-title { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .pl-title h4 { margin: 0; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; }
  .pl-title small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.3; }
  .pl-on { align-self: flex-start; }
  .pl-bar { position: relative; height: 12px; background: var(--c-bg-deep); border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
  .pl-bar i { position: absolute; inset: 0 auto 0 0; width: var(--fill); background: linear-gradient(90deg, var(--c-violet), var(--c-gold)); transition: width var(--t-slow) var(--ease); }
  .pl-need { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); margin-top: calc(-1 * var(--sp-1)); color: var(--c-text-2); font-size: var(--fs-sm); }
  .pl-need > span:first-child { display: inline-flex; align-items: center; gap: .3em; }
  .pl-need b { color: var(--c-text-strong); }
  .pl-need .coin { width: 12px; height: 12px; }
  .pl-count { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .pl-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(4em, 1fr)); gap: var(--sp-2); }
  .pl-quick > .ui-btn { padding: 0 var(--sp-2); }
  .pl-quick > .ui-btn.on { border-color: var(--c-violet); color: var(--c-text-strong); }
  /* O campo nunca encolhe abaixo de 6em (o "Confirmar: doar 10" comprido descia o campo a uma faixa
     que mostrava só o "1"): o botão comprido desce para a linha de baixo, na largura toda. */
  .pl-give { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .pl-give > .ui-input { flex: 1 1 6em; min-width: 6em; }
  .pl-give > .ui-btn { flex: 1 0 auto; min-width: 6.5em; }
  .pl-confirm { margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 8%, var(--c-surface-2)); border: 1px solid var(--c-gold-dark); border-radius: var(--r-sm); color: var(--c-text); font-size: var(--fs-sm); line-height: var(--lh); }
  .pl-round { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
  .pl-h { color: var(--c-accent-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  .pl-h.muted { color: var(--c-text-muted); font-weight: var(--fw-regular); }
  .pl-top { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
  .pl-top li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); background: var(--c-sunken); border-radius: var(--r-sm); }
  .pl-top span { min-width: 0; overflow-wrap: anywhere; }
  .pl-top b { color: var(--c-info); font-variant-numeric: tabular-nums; }
  .pl-rank { padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .pl-rank-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
  .pl-rank-head .ui-h { margin: 0; }
  .pl-when > button { font: var(--fw-semi) var(--fs-sm)/1 var(--font-ui); letter-spacing: 0; }
  .pl-tabs { margin-bottom: var(--sp-3); }
  .pl-ranklist { display: grid; gap: var(--sp-1); max-width: 34em; margin: 0; padding: 0; list-style: none; }
  .pl-ranklist li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); min-height: 2.5em; padding: var(--sp-1) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .pl-ranklist li em { color: var(--c-text-muted); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); font-style: normal; text-align: center; }
  .pl-ranklist li.top1 em { color: var(--c-gold); } .pl-ranklist li.top2 em { color: var(--rar-0); } .pl-ranklist li.top3 em { color: #e7a96a; /* bronze da arte da Loja */ }
  .pl-ranklist li.top1 { border-color: var(--c-gold-dark); }
  .pl-ranklist li span { min-width: 0; overflow-wrap: anywhere; }
  .pl-ranklist li b { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-info); font-variant-numeric: tabular-nums; }
  .pl-ranklist li .coin { width: 12px; height: 12px; }
  .pl-none { margin: 0; padding: var(--sp-3); color: var(--c-text-muted); text-align: center; }
  .pl-mine { margin: var(--sp-3) 0 0; color: var(--c-gold); font-size: var(--fs-sm); }
  @media (prefers-reduced-motion: reduce) { .lj-card, .lj-pack, .lj-pip::before, .pl-bar i { transition: none; } }
/* Janela Skins e Loja › Skins (docs/skins.md). Dono: market-loja (docs/organizacao.md).
   Tokens e componentes: docs/design.md. Os cartões da Loja › Skins são os .lj-card da Loja (shop.css). */

/* Prévia animada: uma linha da folha (a direção, --row), quadro de --fw x --fh ampliado --k vezes. */
.skp { --fw: 64px; --fh: 64px; flex: none; width: calc(var(--fw) * var(--k)); height: calc(var(--fh) * var(--k)); background-image: var(--img); background-repeat: no-repeat; background-size: calc(var(--fw) * var(--n) * var(--k)) auto; background-position: 0 calc(var(--fh) * var(--row) * var(--k) * -1); image-rendering: pixelated; animation: skp-anda var(--t) steps(var(--n)) infinite; }
@keyframes skp-anda { from { background-position-x: 0; } to { background-position-x: calc(var(--fw) * var(--n) * var(--k) * -1); } }
@media (prefers-reduced-motion: reduce) { .skp { animation: none; } }

/* Temas: a cor do cartão (como os .t-* da Loja). Cores da arte de cada skin (sem token). */
.t-berserker { --a: #ff5a46; --d: #2e1012; }
.t-viajante { --a: #4fe3ff; --d: #10203a; }
.t-lunar { --a: #b9a2ff; --d: #1d1530; }
.t-padrao { --a: var(--c-text-muted); --d: var(--c-sunken); }

.sk-lead b { color: var(--c-text-strong); }
/* Prévia: parado/andando/ataque (abas do kit) e Girar, numa linha. */
.sk-modes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sk-modes > .ui-tabs { flex: 1 1 18em; }

.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: var(--sp-3); }
.sk-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
.sk-card.on { border-color: color-mix(in srgb, var(--a) 70%, var(--c-line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 35%, transparent); }
.sk-art { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 150px; background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--a) 30%, transparent), transparent 66%), var(--d); border-bottom: 1px solid var(--c-line-soft); }
.lj-card.sk-shop .lj-art.sk-art { height: auto; min-height: 150px; }
.sk-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.sk-name { margin: 0; font: var(--fw-bold) var(--fs-lg)/var(--lh-tight) var(--font-ui); color: var(--c-text-strong); overflow-wrap: anywhere; }
.sk-class { color: color-mix(in srgb, var(--a) 70%, #fff); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.sk-body p { margin: var(--sp-1) 0 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
/* O rodapé fica sempre embaixo do cartão, alinhado entre os cartões da linha. */
.sk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: calc(var(--ctl-sm) + var(--sp-3)); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
.sk-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); }
.sk-more > div { display: grid; gap: 2px; min-width: 0; }
.sk-more b { color: var(--c-text-strong); }
.sk-more small { color: var(--c-text-muted); font-size: var(--fs-xs); }

/* Loja › Skins: filtro de classe e de gênero (abas do kit). */
.sk-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sk-filter > .sk-classes { flex: 1 1 26em; }
.sk-filter > .sk-gender { flex: 0 1 14em; }
.sk-filter .ui-tabs > button { font: var(--fw-semi) var(--fs-sm)/1 var(--font-ui); letter-spacing: 0; }
.lj-art.sk-art .sk-classtag { position: absolute; top: var(--sp-2); left: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-sm); background: rgba(6, 5, 11, .7); color: var(--c-text-strong); font-size: var(--fs-xs); font-weight: var(--fw-bold); filter: none; }
.lj-body .sk-class { margin-top: -2px; }
.sk-warn { color: var(--c-warn); font-size: var(--fs-xs); }
.lj-card.sk-shop.owned .lj-price { opacity: .55; }

/* Janela estreita: as cinco classes em grade (3 por linha), sem esconder nenhuma atrás da rolagem. */
@container painel (max-width: 40em) {
  .sk-filter > .sk-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex-basis: 100%; }
  .sk-filter > .sk-gender { flex: 1 1 100%; }
}
/* Janela Ranking (docs/ranking.md). Dono: boss-mapas. Tokens e componentes: docs/design.md.
   As abas (.ui-tabs), a escolha da Gruta e da classe (.ui-seg), os números da ficha (.ui-stat), o vazio
   e o carregando são do kit. Aqui: o pódio (personagem + pedestal), as linhas, o quadro "sua posição",
   o rodapé e a ficha. A arte (pedestais, coroa, medalhas, selo, classes, setas) é de
   tools/criar-ranking.lua: client/img/ui/pedestais.png e client/img/ui/ranking.png. */
#rankBody { display: grid; gap: var(--sp-3); }
.rk-seg, .rk-classes { justify-self: stretch; }
.rk-hint { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
.rk-foot { margin: 0; color: var(--c-text-faint); font-size: var(--fs-xs); text-align: center; }
.rk-foot b { color: var(--c-text-2); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }

/* Os ícones do atlas do ranking (16x16 numa linha; ordem em client/img/ui/ranking.json). */
.rk-ic { --ic: 16px; display: inline-block; flex: none; width: var(--ic); height: var(--ic); vertical-align: -3px; background: url('/img/ui/ranking.png') calc(var(--i, 0) * var(--ic) * -1) 0 / calc(var(--ic) * 12) var(--ic) no-repeat; image-rendering: pixelated; font-style: normal; }
.rk-ic.x2 { --ic: 32px; vertical-align: middle; }

/* O filtro de classe: ícone e nome; no celular só o ícone (o nome fica para o leitor de tela). */
.rk-classes button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); }
@media (max-width: 599px) {
  .rk-fl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Cores das três primeiras posições (ouro, prata, bronze) e do selo do top 10. Bronze e prata sem token: são só daqui. */
.rk-row, .rk-me, .rk-spot { --pc: var(--c-text-2); }
:is(.rk-row, .rk-me, .rk-spot).p1 { --pc: var(--c-gold); }
:is(.rk-row, .rk-me, .rk-spot).p2 { --pc: #c9c6dc; }
:is(.rk-row, .rk-me, .rk-spot).p3 { --pc: #e0975a; }
:is(.rk-row, .rk-me).top10 { --pc: var(--c-accent-text, #b9a8ff); }

/* Subiu (verde), desceu (vermelho), igual (cinza), novo (etiqueta de ouro). */
.rk-mv { display: inline-flex; align-items: center; gap: 1px; color: var(--c-text-muted); font: var(--fw-bold, 700) var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-mv.sobe { color: var(--c-ok); }
.rk-mv.desce { color: var(--c-danger-text, var(--c-danger)); }
.rk-mv.novo { padding: 2px 5px; color: var(--c-bg-deep); background: var(--c-gold); border-radius: var(--r-xs); font-size: 12px; letter-spacing: .02em; }

/* ---------------------------------------------------------------- o pódio */
/* 2º | 1º | 3º: o personagem (64x64 da arte) em cima do pedestal (48x40 da arte), os dois `--pk` vezes
   (2x; 3x em tela grande), sempre em pixel inteiro. */
.rk-podium { --pk: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--sp-1); margin: 0; padding: var(--sp-2) var(--sp-2) var(--sp-1); list-style: none;
  background: radial-gradient(ellipse 60% 70% at 50% 34%, color-mix(in srgb, var(--c-gold) 12%, transparent), transparent 72%), linear-gradient(var(--c-sunken), var(--c-bg-deep));
  border: 1px solid var(--c-line-soft); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
.rk-spot { grid-row: 1; min-width: 0; }
.rk-spot.p1 { grid-column: 2; }
.rk-spot.p2 { grid-column: 1; }
.rk-spot.p3 { grid-column: 3; }
.rk-spot-btn { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; padding: 0 0 var(--sp-1); background: none; border: 0; border-radius: var(--r-md); color: inherit; font: inherit; cursor: pointer; }
.rk-spot-btn:hover .rk-fig .skp, .rk-spot-btn:focus-visible .rk-fig .skp { filter: brightness(1.15) drop-shadow(0 0 4px color-mix(in srgb, var(--pc) 55%, transparent)); }
/* A caixa do desenho corta só dos lados (a arte tem folga transparente); o pé pisa na tampa do pedestal. */
.rk-fig { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; height: calc(64px * var(--pk)); margin-bottom: calc(-7px * var(--pk)); overflow-x: clip; }
.rk-fig .skp { --k: var(--pk) !important; }
.rk-crown { position: absolute; z-index: 2; top: calc(1px * var(--pk)); left: 50%; transform: translateX(-50%); }
.rk-ped { display: block; flex: none; width: calc(48px * var(--pk)); height: calc(var(--ph) * var(--pk) * 1px); background: url('/img/ui/pedestais.png') calc(var(--p) * -48px * var(--pk)) 100% / calc(144px * var(--pk)) calc(40px * var(--pk)) no-repeat; image-rendering: pixelated; font-style: normal; }
@media (min-width: 1600px) and (min-height: 900px) {
  .rk-podium { --pk: 3; }
  .rk-ic.rk-crown { --ic: 48px; }
}
.rk-spot-name { display: block; max-width: 100%; margin-top: var(--sp-1); color: var(--c-text-strong); font: var(--fw-regular) 1.15em/1.05 var(--font-display); letter-spacing: .01em; text-align: center; }
.rk-spot.p1 .rk-spot-name { color: var(--c-gold); }
.rk-spot-val { display: grid; justify-items: center; gap: 1px; margin-top: 2px; }
.rk-spot-val b { color: var(--pc); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.rk-spot-val small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.2; }
.rk-spot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 1.2em; margin-top: 3px; }
.rk-spot-foot .tag-role { margin: 0; }
.rk-spot-btn.mine .rk-spot-name { text-decoration: underline 2px var(--c-violet); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- as linhas (4º em diante) */
/* posição (e o subiu/desceu) | retrato | nome, classe e a barrinha | número */
.rk-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.rk-row { display: grid; grid-template-columns: 3em auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-3); width: 100%; min-height: var(--ctl-lg); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); color: inherit; font: inherit; text-align: left; background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); cursor: pointer; }
.rk-row:hover { border-color: var(--c-line-strong); background: color-mix(in srgb, var(--c-surface-2) 60%, var(--c-sunken)); }
.rk-row.top10 { border-color: color-mix(in srgb, var(--c-violet) 35%, var(--c-line-soft)); background: linear-gradient(90deg, color-mix(in srgb, var(--c-violet) 12%, var(--c-sunken)), var(--c-sunken) 40%); }
.rk-row:is(.p1, .p2, .p3) { border-color: color-mix(in srgb, var(--pc) 45%, var(--c-line-soft)); background: color-mix(in srgb, var(--pc) 7%, var(--c-sunken)); }
.rk-row.mine { border-color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 18%, var(--c-sunken)); box-shadow: inset 3px 0 0 var(--c-violet); }
.rk-pos { display: grid; justify-items: center; gap: 2px; color: var(--pc); text-align: center; }
.rk-num { font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
/* O selo do top 10 com a posição por cima. */
.rk-seal { position: relative; display: grid; place-items: center; width: 32px; height: 32px; }
.rk-seal .rk-ic { position: absolute; inset: 0; }
.rk-seal b { position: relative; margin-top: -3px; color: #fff6d8; font: var(--fw-regular) 18px/1 var(--font-display); text-shadow: 1px 0 #1c1250, -1px 0 #1c1250, 0 1px #1c1250, 0 -1px #1c1250; }
.rk-medal { display: grid; place-items: center; width: 32px; height: 32px; }
.rk-por.portrait { width: 2.4em; height: 2.4em; border-width: 1px; }
.rk-main { display: grid; gap: 2px; min-width: 0; }
.rk-name { display: flex; align-items: baseline; gap: var(--sp-1); min-width: 0; color: var(--c-text-strong); font-weight: var(--fw-semi); }
/* Nome de jogador: reticências numa lista, o nome inteiro na ficha (docs/design.md §4.7). */
.rk-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name .tag-role { flex: none; margin: 0; }
.rk-sub { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
.rk-sub .rk-ic { opacity: .95; }
.rk-sub span { min-width: 0; }
/* A barrinha de XP do nível (aba Nível). */
.rk-xp { display: block; height: 4px; margin-top: 2px; overflow: hidden; background: var(--c-bg-deep); border: 1px solid var(--c-line-soft); border-radius: 1px; }
.rk-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-violet-deep, #34248c), var(--c-violet)); }
.rk-xp.lg { height: 8px; }
.rk-val { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; }
.rk-val b { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 var(--c-gold-deep, #8a5a12); }
.rk-val small { color: var(--c-text-muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- sua posição */
.rk-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-3); color: inherit; font: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c-violet) 22%, var(--c-surface-1)), var(--c-surface-1) 55%); border: 2px solid var(--c-gold-dark); border-radius: var(--r-md); box-shadow: var(--sh-frame); }
.rk-me:hover { border-color: var(--c-gold); }
.rk-me.p1 { border-color: var(--c-gold); }
.rk-me-por.portrait { width: 3.2em; height: 3.2em; }
.rk-me-main { display: grid; gap: 2px; min-width: 0; }
.rk-me-l { color: var(--c-text-2); font-size: var(--fs-sm); }
.rk-me-pos { display: flex; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; flex-wrap: wrap; }
.rk-me-pos b { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); }
.rk-me-pos small { color: var(--c-text-muted); font-size: var(--fs-xs); }
.rk-me-val { display: grid; gap: 4px; justify-items: end; }
.rk-me-val .rk-xp { width: 6em; }
.rk-me.none { grid-template-columns: minmax(0, 1fr); cursor: default; }
.rk-me.none p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
.rk-me.none b { color: var(--c-text); }

/* O º do "12º" na letra da interface, pequeno e no alto (a Jersey 10 não tem o º). */
.rk-o { margin-left: 1px; font: var(--fw-semi) .55em/1 var(--font-ui); font-style: normal; vertical-align: .6em; }

/* ---------------------------------------------------------------- a ficha */
#rankBody.ficha { gap: var(--sp-3); }
.rk-back { justify-self: start; }
.rk-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3); background: var(--c-surface-1); border: 2px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-frame); }
/* O palco: o personagem (3x) num chão de luz. */
.rk-stage { position: relative; display: flex; justify-content: center; width: 168px; height: 176px; overflow: clip; border-radius: var(--r-sm);
  background: radial-gradient(ellipse 46% 10% at 50% 88%, color-mix(in srgb, var(--c-violet) 45%, transparent), transparent 100%), radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--c-violet) 16%, transparent), transparent 75%), var(--c-sunken); }
.rk-stage .skp { margin-top: -10px; }
.rk-id { display: grid; gap: var(--sp-2); min-width: 0; }
.rk-id-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); letter-spacing: .02em; }
.rk-id-name .tag-role { margin: 0; font: var(--fw-bold, 700) var(--fs-xs)/1.2 var(--font-ui); }
.rk-id-sub { display: flex; align-items: center; gap: var(--sp-1); margin: 0; color: var(--c-text-2); font-size: var(--fs-md); }
.rk-id-xp { display: grid; gap: 3px; max-width: 16em; }
.rk-id-xp small { color: var(--c-text-muted); font-size: var(--fs-xs); }
.rk-id-power { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; }
.rk-id-power small { color: var(--c-text-muted); font-size: var(--fs-sm); }
.rk-id-power b { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-xl)/1 var(--font-display); text-shadow: 0 1px 0 var(--c-gold-deep, #8a5a12); }
.rk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); gap: var(--sp-2); }
.rk-st { gap: 3px; }
.rk-st > b { color: var(--c-gold); }
.rk-st-sub, .rk-st-pos { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.25; }
.rk-st-pos { color: var(--c-text-2); }
/* As peças: 5 por linha, com a cor da raridade, o + e o Nv. */
.rk-gear { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); margin: 0; padding: 0; list-style: none; }
.rk-slot { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.rk-slot-ic { position: relative; display: grid; place-items: center; width: 3.4em; aspect-ratio: 1; max-width: 100%; border: 2px solid var(--c, var(--c-line-strong)); border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c, var(--c-surface-3)) 24%, var(--c-surface-2)), var(--c-sunken)); box-shadow: var(--sh-raised); }
.rk-slot-ic .ii { width: 78%; height: auto; aspect-ratio: 1; }
.rk-slot.empty .rk-slot-ic { border-style: dashed; }
.rk-slot.empty .ii { opacity: .3; filter: grayscale(1) brightness(1.4); }
.rk-plus { position: absolute; right: -4px; top: -6px; color: var(--c-text-strong); font: var(--fw-regular) 17px/1 var(--font-display); text-shadow: 1px 0 #0b0912, -1px 0 #0b0912, 0 1px #0b0912, 0 -1px #0b0912; }
.rk-lv { position: absolute; left: 2px; bottom: 1px; color: #e8e2ff; font: var(--fw-regular) 13px/1 var(--font-display); text-shadow: 1px 0 #0b0912, -1px 0 #0b0912, 0 1px #0b0912, 0 -1px #0b0912; white-space: nowrap; }
.rk-lv small { margin-right: 1px; color: #b9b0e6; font-size: 12px; }
.rk-slot > small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.15; }

/* ---------------------------------------------------------------- celular */
@media (max-width: 599px) {
  .rk-me { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-2); }
  .rk-me-val { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; }
  .rk-me-val .rk-xp { order: -1; width: auto; }
  .rk-me-val .rk-val { justify-items: end; }
  .rk-row { grid-template-columns: 2.6em auto minmax(0, 1fr) auto; gap: var(--sp-2); padding-inline: 2px var(--sp-2); }
  .rk-podium { padding-inline: 0; gap: 0; }
  .rk-spot-name { font-size: 1.05em; }
  .rk-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .rk-id { justify-items: center; }
  .rk-id-name, .rk-id-sub { justify-content: center; }
  .rk-id-xp { width: 100%; }
  .rk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-gear { gap: var(--sp-3) var(--sp-1); }
}
@media (max-height: 500px) and (min-width: 600px) {
  .rk-card { grid-template-columns: auto minmax(0, 1fr); }
}

/* Passe de Temporada (docs/passe.md): o título em uso embaixo do nome e a moldura do retrato
   (moldura_aurora.png, 9 partes com cantos de 6 px; tools/criar-passe.lua). */
.rk-titulo { display: block; overflow: hidden; color: #ffb8d8; font-size: var(--fs-xs); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rk-frame { box-sizing: content-box; display: inline-grid; flex: none; margin: -6px; border: 6px solid transparent; border-image: none 6 / 6px / 0 stretch; image-rendering: pixelated; }
/* Uma regra por moldura (a temporada nova acrescenta a dela). */
.rk-frame.moldura-aurora { border-image-source: url('/img/ui/passe/moldura_aurora.png'); }
.rk-frame > .portrait { border-color: transparent; border-radius: 0; }
.rk-frame.rk-me-por-f { margin: -8px; border-width: 8px; border-image-width: 8px; }
.rk-spot .rk-titulo { max-width: 100%; margin-top: 2px; text-align: center; white-space: normal; }
/* Janela Passe de Temporada (docs/passe.md). Dono: market-loja. Tokens e componentes: docs/design.md.
   As abas, os botões, as pílulas, o título de seção, o carregando e a confirmação são do kit. Aqui: o
   cabeçalho (brasão, nível, barra de XP, VIP), a trilha dos 50 níveis (faixa Grátis em cima, régua
   dos níveis no meio, faixa VIP embaixo), o detalhe do nível, os desafios e a coleção. A arte
   (client/img/ui/passe/) é de tools/criar-passe.lua: pixel art 1x, ampliada só por inteiro. */
#passeBody { display: grid; gap: var(--sp-3); min-width: 0; }
#passeBody .pix { image-rendering: pixelated; }
.pv-body { display: grid; gap: var(--sp-3); min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Os ícones do atlas do passe (16x16 numa linha; a ordem em client/img/ui/passe/icones.json). */
.pv-ic { --ic: 16px; display: inline-block; flex: none; width: var(--ic); height: var(--ic); vertical-align: -3px; background: url('/img/ui/passe/icones.png') calc(var(--i, 0) * var(--ic) * -1) 0 / calc(var(--ic) * 19) var(--ic) no-repeat; image-rendering: pixelated; font-style: normal; }
.pv-ic.x2 { --ic: 32px; vertical-align: middle; }

/* ---------------------------------------------------------------- cabeçalho */
/* brasão | temporada, prazo, nível e barra | VIP */
.pv-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3);
  background: radial-gradient(ellipse 50% 90% at 8% 40%, color-mix(in srgb, #ff8fb8 14%, transparent), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--c-violet) 22%, var(--c-sunken)), var(--c-sunken) 60%);
  border: 1px solid color-mix(in srgb, var(--c-gold) 30%, var(--c-line-soft)); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
.pv-brasao { width: 128px; height: 128px; margin: -8px 0; }
.pv-head-main { display: grid; gap: 2px; min-width: 0; }
.pv-kicker { color: var(--c-text-muted); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.pv-season { margin: 0; color: var(--c-gold); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); }
.pv-time { display: flex; align-items: center; gap: var(--sp-1); margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.pv-lvl { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); min-width: 0; }
.pv-lvl-n { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pv-lvl-n b { color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-xl)/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.pv-lvl-n small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.25; }
.pv-xp { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pv-xp small { color: var(--c-text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* A barra: moldura de 9 partes (barra.png, cantos de 4 px a 2x) e o ladrilho do preenchimento (barra_fill.png a 2x). */
.pv-bar { box-sizing: border-box; height: 28px; border: 8px solid transparent; border-image: url('/img/ui/passe/barra.png') 4 fill / 8px / 0 stretch; background: #120e1c padding-box; image-rendering: pixelated; }
.pv-bar > i { display: block; height: 100%; max-width: 100%; background: url('/img/ui/passe/barra_fill.png') 0 0 / 8px 12px repeat-x; image-rendering: pixelated; }
.pv-vip { display: grid; justify-items: end; gap: var(--sp-1); max-width: 17em; text-align: right; }
.pv-vip.on { justify-items: center; text-align: center; }
.pv-vip.on b { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); }
.pv-vip small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
.pv-vip-k { color: var(--c-gold) !important; letter-spacing: .06em; text-transform: uppercase; }
.pv-selo { width: 56px; height: 24px; }
.pv-price { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; }

/* ---------------------------------------------------------------- trilha */
.pv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.pv-actions .ui-hint { flex: 1 1 18em; margin: 0; }
/* A rolagem de lado é só da trilha (a janela não rola de lado: docs/design.md, regra 6). */
.pv-scroll { position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  border: 1px solid var(--c-line-soft); border-radius: var(--r-md); background: var(--c-bg-deep); }
.pv-scroll:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Faixa Grátis (96 px), a régua dos níveis (40 px, o trilho no meio) e a faixa VIP (96 px): os ladrilhos a 2x. */
.pv-track { --band: 96px; --ruler: 40px; display: flex; width: max-content; min-width: 100%;
  background:
    url('/img/ui/passe/faixa_gratis.png') 0 0 / 32px var(--band) repeat-x,
    url('/img/ui/passe/trilho.png') 0 calc(var(--band) + 12px) / 32px 16px repeat-x,
    url('/img/ui/passe/faixa_vip.png') 0 calc(var(--band) + var(--ruler)) / 32px var(--band) repeat-x,
    var(--c-bg-deep);
  image-rendering: pixelated; }
/* Os rótulos ficam presos à esquerda (por cima dos cartões que passam por baixo: de propósito, data-sobrepor). */
.pv-labels { position: sticky; left: 0; z-index: 4; display: grid; grid-template-rows: var(--band) var(--ruler) var(--band); flex: none; width: 104px;
  background: var(--c-bg-deep); box-shadow: 6px 0 8px -4px rgb(0 0 0 / .7); }
.pv-lbl { display: grid; place-items: center; }
.pv-rot { width: 96px; height: 96px; }
.pv-col { display: grid; grid-template-rows: var(--band) var(--ruler) var(--band); justify-items: center; align-items: center; flex: none; width: 84px; }
.pv-col:last-child { margin-right: var(--sp-3); }

/* O cartão: card_gratis/card_vip (36x44) a 2x; o ícone do prêmio no miolo; a quantidade embaixo. */
.pv-card { position: relative; isolation: isolate; display: grid; place-items: center; width: 72px; height: 88px; padding: 0 0 14px; color: inherit; font: inherit; cursor: pointer;
  background: url('/img/ui/passe/card_gratis.png') 0 0 / 72px 88px no-repeat; border: 0; border-radius: 6px; image-rendering: pixelated;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); }
.pv-card.vip { background-image: url('/img/ui/passe/card_vip.png'); }
.pv-card:hover { transform: translateY(-2px); }
@media (hover: none) { .pv-card:hover { transform: none; } }
.pv-card.sel { box-shadow: 0 0 0 2px var(--c-gold), var(--sh-glow-gold); }
.pv-card .pv-ri { position: relative; z-index: 1; }
.pv-cnt { position: absolute; left: 4px; right: 4px; bottom: 9px; z-index: 1; color: #fff6d8; font: var(--fw-regular) 15px/1 var(--font-display); text-align: center; white-space: nowrap; text-shadow: 1px 0 #120e1c, -1px 0 #120e1c, 0 1px #120e1c, 0 -1px #120e1c; }
.pv-more { position: absolute; top: 6px; right: 7px; z-index: 1; padding: 0 3px; color: var(--c-bg-deep); background: var(--c-gold); border-radius: var(--r-xs); font: 700 11px/1.3 var(--font-ui); }
.pv-glow { position: absolute; left: -4px; top: -4px; width: 80px; height: 96px; pointer-events: none; animation: pv-pulse 1.6s ease-in-out infinite; }
@keyframes pv-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pv-glow { animation: none; } .pv-card { transition: none; } }
.pv-st { position: absolute; z-index: 2; }
.pv-st.lock { right: 8px; bottom: 8px; }
.pv-card.st-resgatado .pv-ri, .pv-card.st-resgatado .pv-cnt, .pv-card.st-resgatado .pv-more { opacity: .45; }
.pv-card:is(.st-bloqueado, .st-vip) { filter: saturate(.55) brightness(.72); }
.pv-card:is(.st-bloqueado, .st-vip):hover { filter: saturate(.75) brightness(.85); }
/* O ícone do prêmio: 32 px no miolo (os ícones de item da mochila têm o tamanho deles). */
.pv-ri { display: grid; place-items: center; width: 40px; height: 40px; }
/* O Spirit (40x40 por quadro, 4 quadros x 4 direções na folha parada): o 1º de frente, com o aro da raridade. */
.pv-sp { border-radius: 4px; box-shadow: inset 0 0 0 2px var(--rc, transparent); background: color-mix(in srgb, var(--rc, transparent) 14%, transparent); }
.pv-sp-img { display: block; width: 40px; height: 40px; background: var(--img) 0 0 / 160px 160px no-repeat; image-rendering: pixelated; }

/* A régua: o nó de cada nível (gema 20x20 a 2x) com o número por cima. */
.pv-mark { display: grid; place-items: center; width: 40px; height: 40px; background: url('/img/ui/passe/marcador_futuro.png') 0 0 / 40px 40px no-repeat; image-rendering: pixelated; }
.pv-mark.done { background-image: url('/img/ui/passe/marcador.png'); }
.pv-mark.cur { background-image: url('/img/ui/passe/marcador_atual.png'); }
.pv-mark b { margin-top: -1px; color: #fff6d8; font: var(--fw-regular) 16px/1 var(--font-display); text-shadow: 1px 0 #120e1c, -1px 0 #120e1c, 0 1px #120e1c, 0 -1px #120e1c; }
.pv-mark:is(.fut, .next) b { color: var(--c-text-2); }

/* O detalhe do nível escolhido: Grátis | VIP. */
.pv-detail { display: grid; gap: var(--sp-2); }
.pv-detail .ui-h { margin: 0; }
.pv-dt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: var(--sp-2); }
.pv-dt { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
.pv-dt.vip { border-color: color-mix(in srgb, var(--c-gold) 40%, var(--c-line-soft)); background: linear-gradient(160deg, color-mix(in srgb, #ff8fb8 8%, var(--c-sunken)), var(--c-sunken) 60%); }
.pv-dt-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--ctl-sm); }
.pv-dt-free { color: #dcdaee; font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); }
.pv-dt-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.pv-dt-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--sp-2); color: var(--c-text); font-size: var(--fs-sm); line-height: var(--lh); }
.pv-dt.st-vip .pv-dt-list li, .pv-dt.st-bloqueado .pv-dt-list li { color: var(--c-text-2); }

/* ---------------------------------------------------------------- desafios */
.pv-src { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
.pv-src .ui-h { margin: 0; }
.pv-src-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pv-src-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh); color: var(--c-text-2); }
.pv-src-list b { color: var(--c-text-strong); }
.pv-src-list small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.pv-chs { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.pv-ch { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: var(--ctl-lg); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
.pv-ch.done { border-color: color-mix(in srgb, var(--c-ok) 40%, var(--c-line-soft)); background: color-mix(in srgb, var(--c-ok) 6%, var(--c-sunken)); }
.pv-ch-main { display: grid; gap: 3px; min-width: 0; }
.pv-ch-name { color: var(--c-text-strong); font-size: var(--fs-sm); }
.pv-ch-main small { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pv-ch-bar { display: block; height: 6px; margin: 2px 0; background: #120e1c; border: 1px solid var(--c-line-soft); border-radius: 2px; overflow: hidden; }
.pv-ch-bar > i { display: block; height: 100%; background: linear-gradient(var(--c-gold), var(--c-gold-strong)); }
.pv-ch.done .pv-ch-bar > i { background: var(--c-ok); }

/* ---------------------------------------------------------------- coleção */
.pv-cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: var(--sp-2); }
.pv-cos { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
.pv-cos:not(.owned) { opacity: .75; }
.pv-cos.on { border-color: var(--c-gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold) 30%, transparent); }
.pv-cos-body { display: grid; justify-items: start; gap: var(--sp-1); min-width: 0; }
.pv-cos-body h4 { margin: 0; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-sm)/1.05 var(--font-display); }
.pv-cos-body p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
.pv-inuse { color: var(--c-gold); font: var(--fw-semi, 600) var(--fs-xs)/1 var(--font-ui); }
.pv-title-prev { display: grid; place-items: center; min-width: 4.5em; padding: var(--sp-2); color: #ffd9ec; background: color-mix(in srgb, var(--c-violet) 25%, var(--c-bg-deep)); border: 1px solid color-mix(in srgb, #ff8fb8 45%, transparent); border-radius: var(--r-sm); font: var(--fw-regular) var(--fs-md)/1.05 var(--font-display); text-align: center; }
/* A moldura do ranking (9 partes, cantos de 6 px a 2x) em volta de um retrato. */
.pv-frame-prev { box-sizing: border-box; display: grid; place-items: center; width: 64px; height: 64px; border: 12px solid transparent; border-image: none 6 fill / 12px / 0 stretch; image-rendering: pixelated; }
.pv-frame-prev.moldura-aurora { border-image-source: url('/img/ui/passe/moldura_aurora.png'); }
.pv-frame-prev .pv-frame-in.portrait { width: 100%; height: 100%; border: 0; border-radius: 0; }
.pv-skin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(120deg, color-mix(in srgb, #ff8fb8 10%, var(--c-sunken)), var(--c-sunken) 70%); border: 1px solid color-mix(in srgb, var(--c-gold) 35%, var(--c-line-soft)); border-radius: var(--r-md); }
.pv-skin-art { width: 128px; height: 128px; overflow: hidden; }

/* ---------------------------------------------------------------- celular e tela pequena */
@media (max-width: 760px) {
  .pv-head { grid-template-columns: auto minmax(0, 1fr); }
  .pv-brasao { width: 64px; height: 64px; margin: 0; }
  .pv-vip { grid-column: 1 / -1; justify-items: stretch; max-width: none; text-align: left; }
  .pv-vip.on { justify-items: start; text-align: left; }
}
@media (max-width: 599px) {
  .pv-labels { width: 56px; }
  .pv-rot { width: 48px; height: 48px; }
  .pv-lvl { gap: var(--sp-2); }
  .pv-lvl-n b { font-size: var(--fs-d-lg); }
}

/* ---------------------------------------------------------------- Loja › Passe (e Destaques) */
.pv-shop { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  background: radial-gradient(ellipse 40% 90% at 6% 50%, color-mix(in srgb, #ff8fb8 16%, transparent), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--c-violet) 24%, var(--c-sunken)), var(--c-sunken) 65%);
  border: 1px solid color-mix(in srgb, var(--c-gold) 35%, var(--c-line-soft)); border-radius: var(--r-md); }
.pv-shop-art { width: 128px; height: 128px; image-rendering: pixelated; }
.pv-shop-text { display: grid; gap: var(--sp-1); min-width: 0; }
.pv-shop-text small { color: var(--c-text-muted); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.pv-shop-text h3 { margin: 0; color: var(--c-gold); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); }
.pv-shop-text p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
.pv-shop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
@media (max-width: 599px) { .pv-shop-art { width: 64px; height: 64px; } }
  /* Boosts ativos no canto do mapa (docs/boosts.md): um chip por boost, com o ícone, o nome curto
     e o tempo que falta. PC: uma coluna; celular: uma linha só com o ícone e o tempo. */
  .boost-hud { position: absolute; z-index: 3; top: 8px; left: 8px; display: grid; justify-items: stretch; gap: 4px; font-size: 13px; pointer-events: none; }
  .boost-hud[hidden], .touch .boost-hud[hidden] { display: none; }
  .bst-chip { position: relative; display: flex; align-items: center; gap: .45em; min-height: 0; padding: 2px 8px 2px 2px; background: rgba(15, 13, 26, .86); border: 1px solid #7b61ff; border-radius: 4px; box-shadow: 0 2px 0 rgba(6, 5, 11, .6); color: #fff; font: inherit; line-height: 1.1; text-align: left; cursor: pointer; pointer-events: auto; }
  .bst-chip:hover { background: rgba(32, 27, 58, .92); }
  .bst-chip:focus-visible { outline: 2px solid #b9a9ff; outline-offset: 1px; }
  .bst-chip.drop { border-color: #3fbf8f; }
  .bst-chip:is(.t-evento, .t-pool) { border-color: #ffd166; box-shadow: 0 2px 0 rgba(6, 5, 11, .6), inset 0 0 0 1px rgba(255, 209, 102, .25), 0 0 8px rgba(255, 209, 102, .25); }
  .bst-chip.t-doador { border-color: #5fd38d; }
  .bst-chip img { width: 32px; height: 32px; image-rendering: pixelated; }
  .bst-chip b { font-weight: 700; white-space: nowrap; }
  .bst-left { margin-left: auto; padding-left: .4em; color: #d9d4ee; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* O último minuto: o tempo fica vermelho. */
  .bst-chip.ending .bst-left { color: #ff8a7a; }
  .bst-tag { padding: 0 4px; background: #ffd166; color: #2a2110; border-radius: 2px; font: 700 10px/14px system-ui, sans-serif; font-style: normal; }
  .bst-pct { display: none; }
  .touch .bst-pct { display: block; position: absolute; left: 3px; bottom: 3px; padding: 1px 2px; background: rgba(6, 5, 11, .78); border-radius: 2px; color: #fff; font: 700 9px/1 system-ui, sans-serif; font-style: normal; pointer-events: none; }
  .bst-donor { display: inline-grid; place-items: center; min-width: 32px; height: 22px; margin: 5px 0 5px 2px; padding: 0 4px; background: #123326; border: 1px solid #5fd38d; border-radius: 3px; color: #5fd38d; font: 700 12px/1 system-ui, sans-serif; }
  /* Luta de boss: a barra do boss fica em cima, no meio; os chips descem para baixo dela. */
  .game.hud-boss .boost-hud { top: calc(var(--bhb, 106px) + 8px); }
  /* Celular na luta: a linha fica atrás dos avisos do boss (que passam por cima dela) e mais apagada. */
  .touch .game.hud-boss .bst-chip { opacity: .72; }
  /* Celular: uma linha embaixo do nome do mapa e das poções (que ficam em cima, à direita). */
  .touch .boost-hud { top: 60px; right: 8px; display: flex; flex-wrap: wrap; }
  .touch .bst-chip { gap: .3em; padding-right: 6px; font-size: 12px; }
  .touch .bst-chip b { display: none; }
  .touch .bst-chip:is(.t-evento, .t-pool)::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; background: #ffd166; border-radius: 50%; }
  .touch .bst-tag { display: none; }
  .touch .bst-left { padding-left: 0; }
  .hunt-stats .hunt-rate { grid-column: 1 / -1; }
  .hunt-rate em { display: block; margin-top: 3px; color: #ffd166; font: 700 12px/1.2 system-ui, sans-serif; font-style: normal; }
  .bst-preview { margin: .5em 0 0; padding: .45em .7em; background: #1b1735; border: 1px solid #4a3f86; border-radius: 4px; font-size: .9em; }
  .bst-preview.no { background: #2a1416; border-color: #7a3b3b; }
  .bst-preview p { margin: .15em 0; }
  .bst-ic { image-rendering: pixelated; }
  .tile .bst-ic { width: 32px; height: 32px; }
  .it-art .bst-ic { width: 64px; height: 64px; }
  .item .bst-ic, .mk-card .bst-ic, .ic .bst-ic { width: 32px; height: 32px; vertical-align: middle; }
  /* ---- Market (docs/design.md). Dono: market-loja. ----
     Só tokens e o kit (.ui-*). A janela é .sz-xl (registerPanel). Comprar: no PC, a coluna da
     esquerda com o tipo e os filtros e a lista à direita; no celular (janela estreita), tudo em
     uma coluna, com os filtros no botão Filtros. As listas (.mk-list) trocam a grade das linhas
     pela largura delas mesmas (container mklist): larga, uma linha com cabeçalho; estreita, o
     anúncio em duas ou três linhas. Tudo preso no #panelMarket (as regras antigas do Market no
     responsive.css não valem mais para estas classes; ver as pendências em docs/organizacao.md). */

  /* Comum a outras janelas (veio daqui antes do redesenho; a Loja e o Status usam): ficam. */
  select { font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid #453f63; background: #14121c; color: inherit; }
  .pc { display: grid; justify-items: end; gap: .2em; min-width: 0; }

  .mk [hidden] { display: none !important; }
  #panelMarket:not([hidden]) { position: relative; display: grid; gap: var(--sp-4); }
  #panelMarket section:not([hidden]) { min-width: 0; }

  /* ---------- Cabeçalho: abas, carteira e o "?" ---------- */
  .mk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .mk-nav { flex: 0 1 26em; min-width: 0; }
  .mk-nav > button { padding: 0 var(--sp-4); }
  .mk-count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; border-radius: var(--r-pill); background: var(--c-surface-3); color: var(--c-text-2); font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  :is(.mk-nav > button.on, .mk-filters-btn[aria-expanded="true"]) .mk-count { background: var(--c-violet); color: var(--c-text-strong); }
  .mk-wallet { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
  .mk-coin { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-md); padding: 0 var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-gold); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mk-coin .coin { width: 14px; height: 14px; }
  .mk-coin.dia { color: var(--c-info); }
  .mk-coin.debt { border-color: var(--c-danger); color: var(--c-danger-text); }
  .mk-q[aria-expanded="true"] { background: var(--c-violet-deep); border-color: var(--c-violet); color: var(--c-text-strong); }

  /* ---------- Ajuda: o quadro que abre no "?", logo abaixo do cabeçalho (empurra o resto; não cobre nada) ---------- */
  .mk-help { position: relative; display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-window-head); border: var(--bw) solid var(--c-line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-pop), inset 0 0 0 1px var(--c-line-hi); }
  .mk-help::before { content: ""; position: absolute; top: -8px; right: 14px; width: 12px; height: 12px; background: var(--c-window-head); border-left: var(--bw) solid var(--c-line-strong); border-top: var(--bw) solid var(--c-line-strong); transform: rotate(45deg); }
  .mk-help-top { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); }
  .mk-help-top > .ui-btn { flex: none; }
  .mk-help-top h4 { margin: 0 0 var(--sp-1); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--c-title); }
  .mk-help-top p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
  .mk-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; counter-reset: none; }
  .mk-how li { display: grid; align-content: start; gap: var(--sp-1); padding: var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .mk-how .n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-bottom: var(--sp-1); background: var(--c-violet-strong); border-radius: var(--r-sm); box-shadow: var(--sh-raised); color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); }
  .mk-how b { color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .mk-how p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .mk-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .mk-nums div { display: grid; align-content: start; justify-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); text-align: center; }
  .mk-nums div + div { border-left: 1px solid var(--c-line-soft); }
  .mk-nums strong { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; }
  .mk-nums span { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .mk-note { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 8%, transparent); border-left: 3px solid var(--c-gold-deep); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-text-2); font-size: var(--fs-sm); }
  .mk-note .mail-ic { flex: none; position: relative; width: 1.25em; height: .9em; border: 2px solid var(--c-gold); border-radius: 2px; }
  .mk-note .mail-ic::after { content: ""; position: absolute; left: 50%; top: -.28em; width: .62em; height: .62em; border-right: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold); transform: translateX(-50%) rotate(45deg); }

  /* ---------- Comprar: coluna dos filtros e a lista ---------- */
  #panelMarket #mkBuy { display: grid; grid-template-columns: 14em minmax(0, 1fr); grid-template-rows: auto; gap: var(--sp-4); align-items: start; column-gap: var(--sp-4); }
  #panelMarket #mkBuy > .mk-side { grid-column: 1; grid-row: 1; display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  #panelMarket #mkBuy > .mk-main { grid-column: 2; grid-row: 1; display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  /* Tipo: no PC, uma lista na coluna (o ligado com a faixa dourada); no Histórico e no celular, botões lado a lado. */
  .mk-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .mk-kinds > button { display: inline-flex; align-items: center; min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: none; color: var(--c-text-2); font: var(--fw-semi) var(--fs-sm)/1.2 var(--font-ui); white-space: nowrap; }
  .mk-kinds > button:hover:not(.on) { background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-text); filter: none; }
  .mk-kinds > button.on { background: var(--c-violet-deep); border-color: var(--c-violet); color: var(--c-text-strong); }
  .mk-side .mk-kinds { display: grid; gap: 2px; }
  .mk-side .mk-kinds > button { justify-content: flex-start; background: none; border-color: transparent; text-align: left; }
  .mk-side .mk-kinds > button.on { background: var(--c-violet-deep); border-color: var(--c-violet); box-shadow: inset 3px 0 0 var(--c-gold); }
  .mk-filters { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
  .mk-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
  #mkAfx { gap: var(--sp-2); }
  .mk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .mk-chips:empty { display: none; }
  .mk-chip { display: inline-flex; align-items: center; gap: 2px; padding-left: var(--sp-2); background: var(--c-violet-deep); border: 1px solid var(--c-violet); border-radius: var(--r-sm); color: var(--c-text-strong); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.6; }
  /* O × do selo: desenho pequeno, toque de 44 px por fora. */
  .mk .mk-chip-x { position: relative; display: grid; place-items: center; width: 1.7em; height: 1.7em; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--c-text-2); font: var(--fw-bold) 1em/1 var(--font-ui); }
  .mk .mk-chip-x:hover { color: var(--c-text-strong); filter: none; }
  .mk .mk-chip-x::after { content: ""; position: absolute; inset: -8px -4px; }
  .mk-clear { width: 100%; }
  .mk-find { display: flex; gap: var(--sp-2); }
  .mk-find .ui-search { flex: 1 1 auto; }
  .mk-filters-btn { display: none; }
  .mk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
  .mk-found { color: var(--c-text-muted); font-size: var(--fs-sm); }
  .mk-found b { color: var(--c-text); font-weight: var(--fw-bold); }
  .mk-tools { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
  .mk-tools .ui-select { width: auto; min-width: 10.5em; }
  /* Lista ou grade: o .ui-seg do kit, na altura da barra (34 px; com toque, 44). */
  .mk-view > button, .mk-hours > button { min-height: max(var(--ctl-sm), calc(var(--ctl-md) - 6px)); }
  /* Ícones de lista e grade, em CSS (12 px, na cor do texto). */
  .mk-view i { flex: none; width: 12px; height: 12px; background-repeat: no-repeat; }
  .mk-ic-list { background: linear-gradient(currentColor, currentColor) 0 1px / 100% 2px, linear-gradient(currentColor, currentColor) 0 5px / 100% 2px, linear-gradient(currentColor, currentColor) 0 9px / 100% 2px; }
  .mk-ic-grid { background: linear-gradient(currentColor, currentColor) 0 0 / 5px 5px, linear-gradient(currentColor, currentColor) 7px 0 / 5px 5px, linear-gradient(currentColor, currentColor) 0 7px / 5px 5px, linear-gradient(currentColor, currentColor) 7px 7px / 5px 5px; }
  .mk-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-sm); }
  .mk-pager:empty { display: none; }

  /* ---------- Listas (anúncios, meus anúncios, histórico) ---------- */
  .mk-list { container: mklist / inline-size; display: grid; min-width: 0; background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .mk-list:has(> .ui-empty, > .ui-loading), .mk-list.grid { background: none; border: 0; }
  .mk-line { display: grid; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 60px; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--c-line-soft); }
  .mk-line:first-child { border-top: 0; }
  .mk-line.head { min-height: 0; padding-block: var(--sp-2); background: var(--c-surface-2); border-radius: var(--r-md) var(--r-md) 0 0; color: var(--c-text-muted); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; }
  /* A letra menor só no texto: as colunas em em contam na letra da linha (senão o cabeçalho sai mais estreito). */
  .mk-line.head > span { font-size: var(--fs-xs); }
  .mk-line.mine { background: color-mix(in srgb, var(--c-violet) 7%, transparent); }
  .mk-line.open { background: color-mix(in srgb, var(--c-gold) 7%, transparent); }
  .mk-line > .a-ic { grid-area: ic; } .mk-line > .a-nm { grid-area: nm; } .mk-line > .a-sel { grid-area: sel; } .mk-line > .a-pr { grid-area: pr; }
  .mk-line > .a-end { grid-area: end; } .mk-line > .a-act { grid-area: act; } .mk-line > .a-when { grid-area: when; } .mk-line > .a-ev { grid-area: ev; } .mk-line > .a-det { grid-area: det; }
  .mk-line > :is(.a-pr, .a-end, .a-act) { justify-self: end; text-align: right; }
  #mkResults .mk-line { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 7.5em) 8em 6.5em 7.5em; grid-template-areas: "ic nm sel pr end act"; }
  #mkMine .mk-line { grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: "ic nm pr act" "ic end end act"; }
  #mkMine .mk-line > .a-end { justify-self: start; text-align: left; }
  #mkHistList .mk-line { grid-template-columns: 6.5em 44px minmax(0, 1fr) 7.5em 7em minmax(0, 11em); grid-template-areas: "when ic nm pr ev det"; }
  #mkHistList .mk-line > .a-ev { justify-self: start; }
  .mk-line .lbl { display: none; }
  #mkMine .mk-line .lbl { display: inline; }
  .c-sel, .c-end, .c-when, .c-det { color: var(--c-text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
  .c-end, .c-when { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
  .c-det { color: var(--c-text-muted); font-size: var(--fs-xs); }

  /* Item: ícone com a cor da raridade, nome, Nv · espaço · raridade · classe, o que soma e os selos. */
  .mk .ic { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c, var(--c-line)) 18%, var(--c-surface-1)), var(--c-sunken) 72%); border: 2px solid var(--c, var(--c-line)); border-radius: var(--r-sm); }
  .mk .ic .cnt, #mkPick .cnt { position: absolute; right: 2px; bottom: 1px; color: var(--c-text-strong); font: var(--fw-regular) 14px/1 var(--font-display); text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
  .mk .ic .pot-ic, #mkPick .pot-ic { transform: scale(1.3); }
  .mk .nm { display: grid; gap: 2px; min-width: 0; }
  .mk .nm .name { color: var(--c, var(--c-text)); font-weight: var(--fw-semi); line-height: var(--lh-tight); overflow-wrap: anywhere; }
  .mk .nm .name.stk { color: var(--c-text); }
  .mk .nm small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.35; overflow-wrap: anywhere; }
  .mk .nm .stats { color: var(--c-text-2); }
  .mk .nm .nv { color: var(--c-text); font-weight: var(--fw-bold); }
  /* Nv e classe não quebram no meio (um pedaço numa linha e outro na outra cobriria o vizinho). */
  .mk .nm .sub > span { white-space: nowrap; }
  .mk .nm .no { color: var(--c-danger-text); }
  /* O "?" dos atributos: 22 px de desenho; o toque de 44 px vem do ::before (forge.css). */
  .mk .afx-q.sm::before { inset: -12px; }
  .mk .nm .afx-chips { align-items: center; gap: var(--sp-1); margin-top: 2px; font-size: .95em; }
  /* Preço: valor em Jersey 10, ouro ou azul (diamantes); na pilha, "cada" e o total do lote embaixo. */
  .mk .pr { display: inline-flex; align-items: center; gap: 6px; color: var(--c-gold); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mk .pr.dia { color: var(--c-info); }
  .mk .pr .coin { width: 12px; height: 12px; }
  .mk .pr .un { margin-left: 2px; color: var(--c-text-muted); font: var(--fw-semi) var(--fs-xs)/1 var(--font-ui); letter-spacing: 0; }
  .mk .pc { display: grid; justify-items: end; gap: 2px; min-width: 0; }
  .mk .pc .lot { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; }
  .mk .pc .lot b { color: var(--c-text); font-weight: var(--fw-semi); }
  .mk .pc .lot .coin { width: 9px; height: 9px; }
  /* Ação da linha: o botão e, se ele está desligado, o porquê embaixo. */
  .mk-act { display: grid; justify-items: end; gap: 2px; }
  .mk-act > .ui-btn { min-width: 7em; }
  .mk-why { color: var(--c-warn); font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap; }
  .ui-btn.confirm.dia { background: var(--c-info-deep); border-color: var(--c-info); color: var(--c-text-strong); }

  /* Caixa da compra (pilha ou diamantes): quantidade, Máx., total, Confirmar, Cancelar e o aviso. */
  .mk-buybox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(44px + 2 * var(--sp-3)); background: color-mix(in srgb, var(--c-gold) 7%, transparent); border-top: 1px dashed var(--c-gold-dark); }
  .mk-buybox.dia { background: color-mix(in srgb, var(--c-info) 7%, transparent); border-top-color: var(--c-info-deep); }
  .mk-buybox .q { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .mk-buybox .ui-input { width: 6.5em; }
  .mk-buybox .tot { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--c-gold); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
  .mk-buybox .tot.dia { color: var(--c-info); }
  .mk-buybox .tot .coin { width: 12px; height: 12px; }
  .mk-buybox .warn { flex-basis: 100%; color: var(--c-text-muted); font-size: var(--fs-xs); }
  .mk-buybox .warn.bad { color: var(--c-warn); }
  .mk-buybox .warn.spend { color: var(--c-info); font-weight: var(--fw-semi); }

  /* Grade: um cartão por anúncio, com a raridade na faixa de cima. */
  .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr)); gap: var(--sp-2); }
  .mk-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-3); text-align: center; background: var(--c-surface-1); border: 1px solid var(--c-line); border-top: 3px solid var(--c, var(--c-line)); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .mk-card.mine { background: color-mix(in srgb, var(--c-violet) 8%, var(--c-surface-1)); }
  .mk-card.open { border-color: var(--c-gold-dark); border-top-color: var(--c, var(--c-line)); }
  .mk-card .ic { width: 72px; height: 72px; }
  .mk-card .ic .ii { width: 64px; height: 64px; }
  .mk-card .ic .pot-ic { transform: scale(2.4); }
  .mk-card .nm { justify-items: center; width: 100%; }
  .mk-card .nm .afx-chips { justify-content: center; }
  .mk-card .pc { justify-items: center; }
  .mk-card .meta { color: var(--c-text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
  .mk-card .mk-act { justify-items: stretch; width: 100%; margin-top: auto; text-align: center; }
  .mk-card .mk-act .ui-pill { justify-self: center; }
  .mk-card .mk-buybox { width: 100%; padding: var(--sp-2) 0 0; background: none; justify-content: center; }
  .mk-card .mk-buybox .tot { margin-left: 0; }

  /* ---------- Vender ---------- */
  #panelMarket #mkSell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-4); align-items: start; }
  .mk-box { display: grid; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .mk-box > .ui-h { margin: 0; }
  #mkMineInfo.full { color: var(--c-warn); }
  /* As três abas cabem na largura (dividem o espaço); se não couberem, a faixa rola só de lado. */
  .mk-sellkinds { gap: var(--sp-2); overflow-y: hidden; }
  .mk-sellkinds > button { flex: 1 1 auto; padding: 0 var(--sp-1); }
  /* A mochila numa grade que quebra a linha (nada rola de lado); o panel.ts (fitPick) mostra as
     3 primeiras linhas inteiras e o "Ver todas". */
  .mk-pick { display: grid; grid-template-columns: repeat(auto-fill, 48px); grid-auto-rows: 48px; justify-content: space-between; gap: var(--sp-1); padding: var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .mk-pick > button[hidden] { display: none; }
  .mk-pick-more { justify-self: center; margin-top: calc(-1 * var(--sp-2)); }
  .mk-pick > button { position: relative; width: 48px; height: 48px; display: grid; place-items: center; margin: 0; padding: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c, var(--c-line)) 16%, var(--c-surface-1)), var(--c-sunken) 72%); border: 2px solid color-mix(in srgb, var(--c, var(--c-line)) 70%, var(--c-sunken)); border-radius: var(--r-sm); box-shadow: none; }
  /* min-height: auto: com 0 (o toque do responsive.css), a linha da grade não acompanha o quadrado e os itens se cobrem. */
  #mkPick > button { min-height: 0; }
  .mk-pick > button:hover { filter: brightness(1.15); }
  .mk-pick > button.on { border-color: var(--c-gold); box-shadow: var(--sh-glow-gold); }
  .mk-pick .ii { width: 32px; height: 32px; }
  /* As colunas da grade são as daqui (o toque do responsive.css punha outras). */
  #mkPick { grid-template-columns: repeat(auto-fill, 48px); }
  #mkPick.none { display: block; }
  .mk-none { margin: 0; padding: var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-sm); text-align: center; }
  .mk-chosen { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .mk-chosen.empty { justify-content: center; border-style: dashed; color: var(--c-text-muted); font-size: var(--fs-sm); text-align: center; }
  .mk-qty { display: flex; gap: var(--sp-2); }
  .mk-qty .ui-input { flex: 1; }
  .mk-price { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .mk-price .ui-input { flex: 1; }
  .mk-cur { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 3.4em; min-height: var(--ctl-md); margin: 0; padding: 0 var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: none; }
  .mk-cur:hover { border-color: var(--c-violet); filter: none; }
  .mk-cur.dia { background: color-mix(in srgb, var(--c-info) 10%, var(--c-sunken)); border-color: var(--c-info-deep); }
  .mk-cur .coin { width: 16px; height: 16px; }
  .mk-cur i { width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid var(--c-text-muted); }
  /* O menu da moeda abre logo abaixo, empurrando o resto (não cobre o tempo à venda). */
  .mk-cur-menu { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: 2px; padding: var(--sp-1); background: var(--c-window-head); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-pop); }
  .mk-cur-menu button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); min-height: var(--ctl-md); margin: 0; padding: 0 var(--sp-3); background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; color: var(--c-text); font-weight: var(--fw-semi); text-align: left; }
  .mk-cur-menu button .coin { width: 14px; height: 14px; }
  .mk-cur-menu button:is(:hover, :focus-visible) { background: var(--c-surface-3); filter: none; }
  .mk-cur-menu button[aria-checked="true"] { background: var(--c-violet-deep); box-shadow: inset 3px 0 0 var(--c-gold); }
  .mk-cur-menu small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
  .mk-net { margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border-left: 3px solid var(--c-ok-deep); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-text-2); font-size: var(--fs-sm); }
  .mk-net:empty { display: none; }
  .mk-net b { color: var(--c-ok); }
  .mk-net b.dia { color: var(--c-info); }

  /* ---------- Histórico ---------- */
  #panelMarket #mkHistory { display: grid; gap: var(--sp-3); }

  /* ---------- Janela estreita (celular em pé, tablet): uma coluna ---------- */
  @container painel (max-width: 46em) {
    .mk-nav { flex: 1 1 100%; }
    .mk-wallet { margin-left: 0; flex: 1 1 100%; }
    .mk-wallet .mk-q { margin-left: auto; }
    /* Comprar: tipo, busca e Filtros, os filtros (abertos no botão), o resumo e a lista. */
    #panelMarket #mkBuy { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    #panelMarket #mkBuy > :is(.mk-side, .mk-main) { display: contents; }
    .mk-side .mk-kinds { order: 1; display: flex; flex-wrap: nowrap; gap: var(--sp-1); overflow: auto hidden; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: var(--sp-6); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-6)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-6)), transparent); }
    .mk-side .mk-kinds::-webkit-scrollbar { display: none; }
    .mk-side .mk-kinds > button { flex: none; background: var(--c-sunken); border-color: var(--c-line); }
    .mk-side .mk-kinds > button.on { background: var(--c-violet-deep); border-color: var(--c-violet); box-shadow: none; }
    .mk-find { order: 2; }
    .mk-filters-btn { display: inline-flex; }
    .mk-filters { order: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
    #mkBuy:not(.filters-open) .mk-filters { display: none; }
    .mk-filters > :is(#mkAfx, #mkLv, .mk-clear), .mk-filters > .ui-field:has(#mkMin) { grid-column: 1 / -1; }
    .mk-bar { order: 4; }
    #mkResults { order: 5; }
    .mk-pager { order: 6; }
    .mk-view button { width: var(--ctl-md); padding: 0; }
    .mk-view button span { display: none; }
    .mk-tools .ui-select { min-width: 0; }
    /* Vender: uma coluna. Ajuda: passos um embaixo do outro. */
    #panelMarket #mkSell { grid-template-columns: minmax(0, 1fr); }
    .mk-box { padding: var(--sp-3); }
    .mk-how { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .mk-how li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); }
    .mk-how .n { grid-row: span 2; margin: 0; }
    .mk-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-nums div:nth-child(3) { border-left: 0; }
    .mk-nums div:nth-child(n+3) { border-top: 1px solid var(--c-line-soft); }
  }

  /* Celular deitado (pouca altura): a mesma Comprar em uma coluna, para a lista aparecer logo (a coluna dos filtros não cabe em pé). */
  @media (max-height: 500px) and (min-width: 600px) {
    /* Comprar: tipo, busca e Filtros, os filtros (abertos no botão), o resumo e a lista. */
    #panelMarket #mkBuy { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    #panelMarket #mkBuy > :is(.mk-side, .mk-main) { display: contents; }
    .mk-side .mk-kinds { order: 1; display: flex; flex-wrap: nowrap; gap: var(--sp-1); overflow: auto hidden; overscroll-behavior-x: contain; scrollbar-width: none; padding-right: var(--sp-6); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-6)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-6)), transparent); }
    .mk-side .mk-kinds::-webkit-scrollbar { display: none; }
    .mk-side .mk-kinds > button { flex: none; background: var(--c-sunken); border-color: var(--c-line); }
    .mk-side .mk-kinds > button.on { background: var(--c-violet-deep); border-color: var(--c-violet); box-shadow: none; }
    .mk-find { order: 2; }
    .mk-filters-btn { display: inline-flex; }
    .mk-filters { order: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
    #mkBuy:not(.filters-open) .mk-filters { display: none; }
    .mk-filters > :is(#mkAfx, #mkLv, .mk-clear), .mk-filters > .ui-field:has(#mkMin) { grid-column: 1 / -1; }
    .mk-bar { order: 4; }
    #mkResults { order: 5; }
    .mk-pager { order: 6; }
    .mk-view button { width: var(--ctl-md); padding: 0; }
    .mk-view button span { display: none; }
    .mk-tools .ui-select { min-width: 0; }
  }

  /* Lista estreita: o anúncio em duas ou três linhas, sem cabeçalho (o rótulo vai junto do valor). */
  @container mklist (max-width: 44em) {
    .mk-line.head { display: none; }
    .mk-line { align-items: start; }
    .mk-line .lbl { display: inline; }
    #mkResults .mk-line { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic nm pr" "ic sel act" "ic end act"; }
    #mkResults .mk-line > :is(.a-sel, .a-end) { align-self: center; justify-self: start; text-align: left; }
    #mkResults .mk-line > .a-act { align-self: center; }
    #mkMine .mk-line { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic nm pr" "ic end act"; }
    #mkMine .mk-line > .a-end { align-self: center; }
    #mkHistList .mk-line { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic nm pr" "ic det ev" "ic when ev"; }
    #mkHistList .mk-line > .a-ev { justify-self: end; align-self: center; }
    .mk-buybox { padding-left: var(--sp-3); }
    .mk-buybox > :is(.confirm, .mk-cancel) { flex: 1 1 40%; }
  }

  /* Toque: o botão da linha (Comprar, Cancelar) com 48 px, e o "?" dos atributos maior (28 px; o toque chega a 48). */
  @media (pointer: coarse) {
    .mk .mk-act > .ui-btn { min-height: var(--ctl-lg); }
    .mk .afx-q.sm { width: 28px; height: 28px; font-size: 14px; }
    .mk .afx-q.sm::before { inset: -10px; }
  }
  /* Engrenagem no topo e a tela de Configurações. */
  .gear-btn { display: grid; place-items: center; width: 52px; padding: 0; background: var(--pane); border: 2px solid var(--line); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-hi), 0 2px 0 #06050b; color: #d9d2ff; }
  .gear-btn:hover { background: var(--pane-2); color: #fff; }
  .gear-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: transform .3s; }
  .gear-btn:hover svg { transform: rotate(45deg); }
  .role-btn[hidden] + .gear-btn { margin-left: auto; }
  @media (prefers-reduced-motion: reduce) { .gear-btn svg { transition: none; } }

  /* Configurações (docs/design.md): cada seção é um título do kit (.ui-h) e um quadro só, com as
     linhas separadas por um fio (as .cfg-row continuam filhas diretas da seção: o mundo põe a linha
     do WebGL em "Neste aparelho" olhando essa marcação). Embaixo, os atalhos em duas colunas e o
     rodapé com a versão. */
  .cfg-sec { display: grid; margin: 0 0 var(--sp-5); }
  .cfg-sec > .ui-h { margin-bottom: var(--sp-2); }
  .cfg-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 3.6em; padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); }
  .cfg-sec > .cfg-row:first-of-type { border-radius: var(--r-md) var(--r-md) 0 0; }
  .cfg-sec > .cfg-row:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
  .cfg-sec > .cfg-row:first-of-type:last-child { border-radius: var(--r-md); }
  .cfg-sec > .cfg-row + .cfg-row { border-top: 1px solid var(--c-line-soft); margin-top: -1px; }
  .cfg-text { display: grid; gap: 2px; min-width: 0; }
  .cfg-text b { color: var(--c-text); font-weight: var(--fw-semi); }
  .cfg-text small { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  /* Conta: o nome em destaque (Jersey), nível e classe embaixo. */
  .cfg-me .cfg-text b { color: var(--c-title); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  .cfg-row > button:not(.switch) { flex: none; }
  /* Os botões que outras partes põem nas linhas (Instalar, do PWA) com o desenho do botão secundário do kit. */
  .cfg-row > button.alt { min-height: var(--ctl-sm); padding: 0 var(--sp-3); background: var(--c-surface-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-raised); color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
  /* Sair: o 1º toque arma (o botão acende) e o 2º, em 4 s, sai. */
  .cfg-me .ui-btn.danger.armed { background: var(--c-danger); border-color: var(--c-danger-text); box-shadow: 0 0 0 3px rgba(229, 88, 107, .25), var(--sh-raised); }
  /* Atalhos: tecla e o que faz, em duas colunas quando cabe. */
  .cfg-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .cfg-key { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; gap: var(--sp-3); min-height: 2em; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh-tight); }
  .cfg-keys kbd { justify-self: start; min-width: 1.9em; padding: .25em .45em .2em; background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-bottom-width: 2px; border-radius: var(--r-sm); color: var(--c-text-strong); font: var(--fw-regular) 1.15em/1 var(--font-display); text-align: center; white-space: nowrap; }
  /* Rodapé: a versão à esquerda, os atalhos para o Log e o Suporte à direita. */
  .cfg-about { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
  .cfg-ver { color: var(--c-text-faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .cfg-links { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-inline: calc(-1 * var(--sp-3)); }
  .cfg-links .ui-btn { color: var(--c-accent-text); }

  /* O interruptor (.switch / .ui-switch) é do kit (styles/kit.css). A cor acesa vem de --ac. */
  /* Auto Helper (docs/design.md): cada parte é um cartão com cabeçalho (ícone, título, o que faz
     agora e o interruptor) e um corpo curto; a explicação longa fica no "?". A cor de cada parte
     vem em --ac (vida verde, mana azul, magias violeta, vendedor ouro, morte vermelha).
     Janela larga (PC): duas colunas, com as poções lado a lado e o vendedor ao lado de magias,
     morte e boss. Celular deitado: duas colunas com o vendedor na largura toda (as linhas dele
     cabem numa só). Estreita: uma coluna. */
  .ah-intro { margin: 0 0 var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  .ah-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  @container painel (min-width: 44em) {
    .ah-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; grid-template-areas: "hp mp" "sk sell" "dt sell" "boss sell"; }
    .ah-card.hp { grid-area: hp; } .ah-card.mp { grid-area: mp; } .ah-card.sk { grid-area: sk; }
    .ah-card.sell { grid-area: sell; } .ah-card.dt { grid-area: dt; } .ah-card.boss { grid-area: boss; }
  }
  @media (max-height: 500px) and (min-width: 600px) {
    @container painel (min-width: 44em) {
      .ah-grid { grid-template-rows: none; grid-template-areas: "hp mp" "sk dt" "sell sell" "boss boss"; }
    }
  }
  .ah-card { --ac: var(--c-text-muted); container: ahcard / inline-size; display: grid; align-content: start; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-frame); transition: border-color var(--t-med); }
  .ah-card.on { border-color: color-mix(in srgb, var(--ac) 45%, var(--c-line)); }
  .ah-card.hp { --ac: var(--c-ok); } .ah-card.mp { --ac: #6fb6ff; } .ah-card.sell { --ac: var(--c-gold); } .ah-card.sk { --ac: var(--rar-3); }
  /* Cabeçalho: ícone | título e estado | interruptor. Ligado, ganha a faixa na cor da parte. */
  .ah-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .ah-card.on .ah-head { background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 16%, var(--c-surface-2)), var(--c-surface-2) 75%); box-shadow: inset 3px 0 0 var(--ac); }
  .ah-art { display: grid; place-items: center; width: 2.6em; height: 2.6em; background: var(--c-bg); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); overflow: hidden; }
  .ah-card:not(.on) .ah-art > * { filter: grayscale(.9) brightness(.7); }
  .ah-art .pot-ic { transform: scale(1.4); }
  .ah-art .coin { width: 20px; height: 20px; }
  .ah-art .dt-ic { width: 30px; height: 30px; }
  .ah-art .ah-sk-wrap { font-size: .9em; line-height: 0; }
  .ah-boss-ic { width: 32px; height: 32px; background: center / contain no-repeat; image-rendering: pixelated; }
  .ah-ttl { display: grid; gap: 2px; min-width: 0; }
  .ah-ttl h4 { margin: 0; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  .ah-ttl small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh-tight); }
  .ah-card.on .ah-ttl small { color: color-mix(in srgb, var(--ac) 65%, #fff); }
  .ah-card .ah-ttl small.warn { color: var(--c-danger-text); font-weight: var(--fw-bold); }
  .switch.big { width: 3.4em; height: 1.9em; }
  .switch.big::after { width: calc(1.9em - 6px); height: calc(1.9em - 6px); }
  .switch.big[aria-pressed="true"]::after { transform: translateX(1.5em); }
  .ah-body { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .helper-panel :is(button, input):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  /* Linha curta com o "?" no fim; a dica abre fixa na tela (não na janela). */
  .ah-line { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .ah-line > span:first-child { min-width: 0; }
  .ah-help { flex: none; margin-left: auto; display: inline-grid; }
  .ah-help .tip { display: none !important; }
  .ah-chip { flex: none; padding: 2px var(--sp-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-sunken); color: var(--c-accent-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; }
  .ah-chip.manual { color: var(--c-gold); border-color: var(--c-gold-dark); }
  /* Poções: limite (a barra imita a de vida/mana do jogo), os frascos e a escolhida. */
  .ah-thr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-1) var(--sp-2); }
  .ah-thr label { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .ah-pct { min-width: 2.1em; color: var(--ac); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); text-align: right; font-variant-numeric: tabular-nums; }
  .ah-range { --f: .5; grid-column: 1 / -1; width: 100%; height: 1.7em; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .ah-range::-webkit-slider-runnable-track { height: 12px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--c-line-soft); background: linear-gradient(color-mix(in srgb, var(--ac) 80%, #fff), color-mix(in srgb, var(--ac) 70%, #000)) 0 0 / calc(7px + (100% - 14px) * var(--f)) 100% no-repeat, var(--c-bg); }
  .ah-range::-moz-range-track { height: 12px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--c-line-soft); background: linear-gradient(color-mix(in srgb, var(--ac) 80%, #fff), color-mix(in srgb, var(--ac) 70%, #000)) 0 0 / calc(7px + (100% - 14px) * var(--f)) 100% no-repeat, var(--c-bg); }
  .ah-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -5px; background: #f3f1fb; border: 2px solid var(--c-bg-deep); border-radius: var(--r-xs); box-shadow: var(--sh-raised); }
  .ah-range::-moz-range-thumb { width: 10px; height: 18px; background: #f3f1fb; border: 2px solid var(--c-bg-deep); border-radius: var(--r-xs); box-shadow: var(--sh-raised); }
  .ah-range:focus-visible { outline: none; }
  .ah-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  .ah-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  .ah-pots { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: var(--sp-1); }
  .ah-pot { position: relative; display: grid; justify-items: center; align-content: end; gap: var(--sp-1); min-width: 0; padding: var(--sp-2) 0 6px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--sh-raised); color: var(--c-text-muted); font: inherit; touch-action: manipulation; }
  .ah-pot:hover:not([aria-disabled]) { border-color: var(--c-line-strong); }
  .ah-flask { display: grid; place-items: end center; height: 36px; }
  .ah-flask .pot-ic { transform: scale(var(--s, 1.3)); transform-origin: 50% 100%; }
  .ah-pot-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
  .ah-qty { position: absolute; top: 3px; right: 3px; min-width: 1.5em; padding: 0 .25em; background: var(--c-bg-deep); border-radius: var(--r-xs); color: var(--c-text-strong); font: var(--fw-regular) 1.05em/1.15 var(--font-display); text-align: center; }
  .ah-qty.zero { color: var(--c-danger-text); }
  .ah-pot.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, var(--c-surface-2)); box-shadow: 0 0 0 1px var(--ac), var(--sh-raised); color: var(--c-text-strong); }
  .ah-pot.on .ah-pot-n { font-weight: var(--fw-bold); }
  .ah-pot.on.none { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 14%, var(--c-surface-1)); box-shadow: 0 0 0 1px var(--c-danger), var(--sh-raised); }
  .ah-pot[aria-disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
  .ah-pot[aria-disabled] .pot-ic { filter: grayscale(1); }
  /* A escolhida: nome, quanto recupera e quantas tem; a compra rápida à direita. */
  .ah-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .ah-pick-info { display: grid; gap: 2px; min-width: 0; }
  .ah-pick-info b { color: var(--c-text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .ah-pick-info small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .ah-pick-info .zero { color: var(--c-danger-text); font-weight: var(--fw-bold); }
  .ah-pick-info small span { white-space: nowrap; }
  .ah-buy { display: grid; grid-template-columns: repeat(3, auto); gap: var(--sp-1); }
  .ah-buy button { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 4.3em; min-height: var(--ctl-md); padding: var(--sp-1) var(--sp-2); background: var(--c-surface-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-raised); color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.1; }
  .ah-buy button:hover:not(:disabled) { border-color: var(--c-violet); filter: none; }
  .ah-buy button small { display: flex; align-items: center; gap: var(--sp-1); color: var(--c-gold); font-size: .85em; font-weight: var(--fw-semi); }
  .ah-buy .coin { width: 9px; height: 9px; box-shadow: 0 0 0 1px #6b4b00; }
  .ah-pick.empty { border-color: color-mix(in srgb, var(--c-danger) 55%, var(--c-line)); background: color-mix(in srgb, var(--c-danger) 8%, var(--c-sunken)); }
  .ah-warn { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; color: #ffb3bb; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .ah-warn i { display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; background: var(--c-danger); border-radius: var(--r-xs); color: #1a0c10; font: var(--fw-regular) 1.15em/1 var(--font-display); font-style: normal; }
  .ah-warn span { flex: 1 1 12em; min-width: 0; }
  /* Cartão estreito (celular): as poções em 3 colunas (2 linhas), para o nome inteiro caber ("Pequena", "Superior"). */
  @container ahcard (max-width: 25em) { .ah-pots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @container ahcard (max-width: 27em) {
    .ah-pick { grid-template-columns: minmax(0, 1fr); }
    .ah-buy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ah-warn .ui-btn { flex: 1 1 100%; }
  }
  /* Magias: os 4 espaços da barra (tecla no canto, marca quando ligada). */
  .ah-sks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .ah-line + .ah-sks { margin-top: var(--sp-1); }
  .ah-sk { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--sp-1); min-width: 0; padding: var(--sp-2) var(--sp-1) 6px; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--sh-raised); color: var(--c-text-muted); font: inherit; touch-action: manipulation; }
  .ah-sk:hover:not(.passive) { border-color: var(--c-line-strong); }
  .ah-sk-art { font-size: 1.15em; line-height: 0; }
  .ah-sk .sk-ic { box-shadow: 0 0 0 2px var(--c-bg-deep); }
  .ah-sk:not(.on, .passive) .sk-ic { filter: grayscale(1) brightness(.55); }
  .ah-sk.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 13%, var(--c-surface-2)); box-shadow: 0 0 0 1px var(--ac), var(--sh-raised); color: var(--c-text-strong); }
  .ah-sk-n { display: -webkit-box; max-width: 100%; min-height: 2.4em; overflow: hidden; font-size: var(--fs-xs); line-height: 1.2; text-align: center; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ah-key { position: absolute; top: 3px; left: 3px; padding: 0 .3em; background: var(--c-bg-deep); border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); color: var(--c-accent-text); font: var(--fw-regular) .95em/1.1 var(--font-display); }
  .ah-tick { position: absolute; top: 3px; right: 3px; width: 1.05em; height: 1.05em; border: 2px solid var(--c-line-strong); border-radius: var(--r-xs); background: var(--c-bg-deep); }
  .ah-sk.on .ah-tick { border-color: var(--ac); background: var(--ac); box-shadow: inset 0 0 0 2px var(--c-bg-deep); }
  .ah-sk.empty { background: transparent; border-style: dashed; box-shadow: none; }
  .ah-sk.empty .ah-sk-art { width: 2.4em; height: 2.4em; border-radius: var(--r-sm); background: var(--c-sunken); }
  .ah-sk.passive { opacity: .7; }
  /* Vendedor: uma linha por raridade, com Guardar | Vender | Desmontar e o
     quanto rende cada peça numa coluna própria (o que vale fica aceso). */
  .ah-fates { display: grid; gap: var(--sp-1); }
  .ah-fate { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 8.6em; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); background: var(--c-surface-2); border: 1px solid var(--c-line); border-left: 3px solid var(--rc); border-radius: var(--r-sm); }
  .ah-fate.head { padding-block: 0 2px; background: none; border-color: transparent; color: var(--c-text-muted); }
  .ah-fate.head span { font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  .ah-fate.head .ah-val { display: block; text-align: right; }
  .ah-rar { color: var(--rc); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
  .ah-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--c-sunken); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); overflow: hidden; }
  .ah-seg button { min-width: 0; min-height: 2.2em; padding: var(--sp-1) 2px; background: transparent; border: 0; border-radius: 0; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; touch-action: manipulation; }
  .ah-seg button + button { border-left: 1px solid var(--c-line-strong); }
  .ah-seg button:hover:not(.on) { color: var(--c-text-strong); background: var(--c-surface-2); filter: none; }
  .ah-seg button:focus-visible { outline-offset: -2px; }
  .ah-seg button.keep.on { background: var(--c-surface-3); color: var(--c-text-strong); }
  .ah-seg button.sell.on { background: #4a3a12; color: var(--c-gold); }
  .ah-seg button.dis.on { background: #3a2366; color: #e3ccff; }
  .ah-val { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); justify-items: end; font-size: var(--fs-sm); }
  .ah-val > span { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ah-val .coin { width: 9px; height: 9px; opacity: .55; }
  .ah-val .ah-ess { width: 14px; height: 14px; opacity: .55; }
  .ah-val .g.on { color: var(--c-gold); } .ah-val .e.on { color: #d4b8ff; }
  .ah-val .on :is(.coin, .ah-ess) { opacity: 1; }
  @container ahcard (max-width: 31em) {
    .ah-fate { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rar val" "seg seg"; gap: var(--sp-1) var(--sp-2); padding: 6px var(--sp-2) var(--sp-2); }
    .ah-fate .ah-rar { grid-area: rar; } .ah-fate .ah-seg { grid-area: seg; } .ah-fate .ah-val { grid-area: val; gap: var(--sp-3); }
    .ah-fate.head .ah-h-seg { display: none; }
  }
  .ah-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .ah-row.on { border-color: color-mix(in srgb, var(--ac) 45%, var(--c-line)); }
  .ah-row > div { display: grid; gap: 2px; min-width: 0; }
  .ah-row b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
  .ah-row small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh-tight); }
  .ah-loot-ic { display: grid; place-items: center; width: 2em; height: 2em; background: var(--c-bg); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); color: var(--c-gold); }
  .ah-loot-ic .loot-ic { width: 26px; height: 26px; image-rendering: pixelated; }
  .ah-hunt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm); color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.25; }
  .ah-hunt > small { grid-column: 1 / -1; font-size: 1em; font-weight: var(--fw-bold); }
  .ah-hunt strong { display: block; color: var(--c-gold); font: var(--fw-regular) 1.5em/1 var(--font-display); letter-spacing: .02em; }
  .ah-hunt strong.ess { color: #d4b8ff; }
  /* Morte: a bênção automática e o Templo (o cartão é do src/ui/hud/death/temple.ts). */
  .ah-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); text-align: left; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: inherit; font: inherit; }
  .ah-check > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
  .ah-check .ah-box { display: block; width: 1.1em; height: 1.1em; border: 2px solid var(--c-line-strong); border-radius: var(--r-xs); }
  .ah-check.on { border-color: color-mix(in srgb, var(--ac) 50%, var(--c-line)); }
  .ah-check.on .ah-box { border-color: var(--ac); background: var(--ac); box-shadow: inset 0 0 0 2px var(--c-surface-2); }
  .ah-check b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
  .ah-check small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh-tight); }
  .ah-check .count { color: var(--c-text-strong); font: var(--fw-regular) 1.35em/1 var(--font-display); text-align: right; }
  .ah-check .count small { display: block; font: .58em var(--font-ui); }
  /* "Abrir o Templo": o botão secundário pequeno do kit. */
  .ah-body .ah-mini { justify-self: start; }
  /* Recado curto (também na tela de morte). */
  .ah-note { margin: 0; color: var(--muted); font-size: .84em; }
  /* Toque: o "?" com 44 px de área por fora (sem mudar o desenho) e o Guardar | Vender | Desmontar com 44 px. */
  @media (pointer: coarse) {
    .ah-help .help::after { inset: -13px; }
    .ah-seg button { min-height: var(--touch); }
  }
  /* Celular deitado: sem o resumo e com o filtro baixo, para a lista dos Espólios caber. */
  @media (max-height: 500px) and (min-width: 600px) {
    /* A aba Caçada já mostra o ouro da caçada: aqui sobra espaço para a lista. */
    .loot-sum { display: none; }
    .loot-filter { margin-bottom: 4px; }
    #lootBox .loot-filter .chip { min-height: 28px; padding: 1px 9px; font-size: 12px; }
  }
  /* Atualização do servidor, dentro do mapa: painel com a contagem, tela de
     "atualizando" sobre o mapa e aviso de versão nova da página. */
  .upd-bar, .upd-new { position: absolute; z-index: 6; top: 12px; left: 50%; transform: translateX(-50%); width: min(30em, calc(100% - 24px)); background: var(--pane); border: 2px solid var(--line); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-hi), 0 2px 0 #06050b, 0 12px 28px rgba(0, 0, 0, .55); }
  .upd-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25em .85em; align-items: center; padding: .75em .9em .85em; border-color: #8a7130; }
  .upd-bar .num { grid-row: span 2; display: grid; place-items: center; width: 2.3em; height: 2.3em; background: #2a2110; border: 2px solid #a8892f; border-radius: 3px; box-shadow: 0 2px 0 #06050b; color: #ffd166; font: 400 2em/1 "Jersey 10", system-ui, sans-serif; }
  .upd-bar h3, .upd-new h3 { margin: 0; color: #fff; font: 400 1.4em/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .upd-bar p { margin: 0; color: #c5c1d6; font-size: .86em; line-height: 1.35; }
  .upd-track { grid-column: 1 / -1; height: 6px; margin-top: .45em; background: #110f1e; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
  .upd-track i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #a8892f, #ffd166); transition: width .25s linear; }
  .upd-screen { position: absolute; z-index: 7; inset: 0; display: grid; place-items: center; background: rgba(10, 8, 18, .78); }
  .upd-card { display: grid; justify-items: center; gap: .55em; width: min(22em, calc(100% - 24px)); padding: 1.3em 1.2em 1.4em; text-align: center; background: var(--pane); border: 2px solid #5b4bb0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-hi), 0 2px 0 #06050b, 0 14px 34px rgba(0, 0, 0, .6); }
  .upd-card h3 { margin: 0; color: #fff; font: 400 1.7em/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .upd-card p { margin: 0; color: var(--muted); font-size: .9em; }
  .upd-dots { display: flex; gap: 6px; margin-bottom: .15em; }
  .upd-dots i { width: 10px; height: 10px; background: #7b61ff; border-radius: 2px; animation: updPulse 1s infinite ease-in-out; }
  .upd-dots i:nth-child(2) { animation-delay: .15s; } .upd-dots i:nth-child(3) { animation-delay: .3s; }
  @keyframes updPulse { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
  @media (prefers-reduced-motion: reduce) { .upd-dots i { animation: none; opacity: .8; } }
  .upd-new { display: grid; justify-items: center; gap: .55em; padding: .9em 1em 1em; text-align: center; border-color: #5b4bb0; border-top: 3px solid #7b61ff; }
  .upd-new .tag { padding: .15em .55em; border-radius: 3px; background: #2a2160; color: #b9a9ff; font-size: .75em; font-weight: 700; }
  .upd-new p { margin: 0; color: #c5c1d6; font-size: .9em; }
  .upd-new .keys { display: flex; align-items: center; gap: .4em; color: var(--muted); }
  .upd-new kbd { min-width: 2.2em; padding: .3em .6em .35em; border: 1px solid #5b5378; border-bottom-width: 3px; border-radius: 4px; background: #1d1838; color: #fff; font: 400 1.3em/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .03em; }
  .upd-new small { color: var(--muted); font-size: .8em; }
  .upd-new .row { display: grid; grid-template-columns: 1fr 1.4fr; gap: .4em; width: 100%; margin-top: .15em; }
  .upd-new button { padding: .5em .9em; font-weight: 700; }
  /* Tela estreita ou baixa: o mapa fica pequeno; os avisos saem dele e
     ficam no topo da tela, sem cortar. */
  @media (max-width: 900px), (max-height: 640px) {
    .upd-bar, .upd-new { position: fixed; z-index: 60; top: 10px; }
    .upd-screen { position: fixed; z-index: 60; }
  }
  /* Tela de carregamento (docs/pwa.md › Carregamento sob demanda): ao entrar no jogo, trocar
     de mapa e entrar na arena, por cima de tudo (menos o aviso de atualização). O
     fundo é o da entrada (o mapa de lava, que já está no cache). */
  .load-screen { position: absolute; inset: 0; z-index: var(--z-carregando); display: grid; place-items: center; overflow: auto; font-size: 16px; padding: max(var(--sp-4), var(--safe-t)) max(var(--sp-4), var(--safe-r)) max(var(--sp-4), var(--safe-b)) max(var(--sp-4), var(--safe-l));
    /* A arte do fundo (a mesma da entrada, um pouco mais escura): cores próprias, sem token. */
    background: radial-gradient(ellipse 90% 55% at 50% 115%, rgba(255, 106, 30, .3), transparent 70%), linear-gradient(180deg, rgba(11, 10, 18, .86), rgba(11, 10, 18, .96) 80%), var(--c-bg) url(/img/mapas/mapa_lava_preview.png) center / 640px repeat; image-rendering: pixelated; opacity: 0; transition: opacity .2s ease; }
  .load-screen.on { opacity: 1; }
  .load-screen[hidden] { display: none; }
  .load-screen.bare .ls-card { visibility: hidden; }
  /* O cartão: o seu personagem num palco, para onde vai, a barra e uma dica. */
  .ls-card { display: grid; grid-template-areas: "spr" "kick" "title" "bar" "pct" "tip" "skip"; justify-items: center; gap: var(--sp-2); width: min(28em, 100%); padding: var(--sp-4) var(--sp-6) var(--sp-6); text-align: center; background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-1) 45%); border: var(--bw) solid var(--c-line); border-top: 3px solid var(--c-violet); border-radius: var(--r-md); box-shadow: var(--sh-frame), 0 24px 60px rgba(0, 0, 0, .55); }
  .ls-stage { grid-area: spr; position: relative; display: grid; place-items: end center; width: 9em; height: 6.5em; background: radial-gradient(ellipse 45% 30% at 50% 72%, rgba(123, 97, 255, .32), transparent 75%); }
  .ls-stage::before { content: ""; position: absolute; left: 30%; right: 30%; bottom: 8%; height: 10%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); }
  .ls-spr { position: relative; width: 96px; height: 96px; image-rendering: pixelated; }
  .ls-kicker { grid-area: kick; color: var(--c-accent-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; }
  .ls-title { grid-area: title; margin: 0; color: var(--c-gold); font: var(--fw-regular) clamp(1.8em, 6vw, 2.4em)/1 var(--font-display); letter-spacing: .02em; text-shadow: 0 3px 0 #3b1f6e; overflow-wrap: anywhere; text-wrap: balance; }
  .ls-bar { grid-area: bar; width: 100%; height: 18px; margin-top: var(--sp-2); padding: 3px; background: var(--c-sunken); border: var(--bw) solid var(--c-line-strong); border-radius: var(--r-sm); box-shadow: var(--sh-raised); }
  /* A barra em gomos dourados (arte da barra: os dois tons do ouro). */
  .ls-bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--c-gold) 0 10px, #ffb347 10px 12px); border-radius: 1px; box-shadow: var(--sh-glow-gold); transition: width .25s linear; }
  .ls-pct { grid-area: pct; margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  /* A dica: o rótulo em cima, o texto embaixo (nada um por cima do outro). */
  .ls-tip { grid-area: tip; display: grid; gap: var(--sp-1); width: 100%; min-height: 5.6em; align-content: start; margin: var(--sp-2) 0 0; padding: var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-left: 3px solid var(--c-violet); border-radius: var(--r-sm); color: var(--c-text); font-size: var(--fs-sm); line-height: 1.5; text-align: left; }
  .ls-tip b { color: var(--c-accent-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
  /* Demorando: "Jogar agora" e o aviso de que o resto continua chegando. */
  .ls-skip { grid-area: skip; display: grid; justify-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
  .ls-skip:has(> #lsSkip[hidden]) { display: none; }
  .ls-skip > small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #lsSkip { min-width: 12em; }
  #lsSkip[hidden] { display: none; }
  /* Celular deitado (pouca altura): o personagem à esquerda, o resto ao lado. */
  @media (max-height: 520px) and (orientation: landscape) {
    .ls-card { width: min(38em, 100%); grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "spr kick" "spr title" "spr bar" "spr pct" "tip tip" "skip skip"; column-gap: var(--sp-4); row-gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
    .ls-stage { align-self: center; width: 7em; height: 6em; }
    .ls-kicker, .ls-title, .ls-pct { justify-self: start; text-align: left; }
    .ls-title { font-size: 1.9em; }
    .ls-tip { min-height: 0; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
    .ls-skip { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: var(--sp-3); }
  }
  @media (prefers-reduced-motion: reduce) { .load-screen, .ls-bar i { transition: none; } }
  /* Janela aberta com os ícones ainda chegando: o espaço de cada um, apagado. */
  .modal.ic-wait .ii, .modal.ic-wait .sk-ic { background-color: rgba(185, 169, 255, .08); border-radius: 3px; }
  /* Cargos: etiqueta e cor vêm do cargo confirmado pelo servidor. */
  :root { --tutor: #4fd1e8; --admin: #ff5d5d; }
  .tag-role { display: inline-block; margin-right: .3em; padding: 0 .35em; border-radius: 3px; font: 700 .72em/1.5 system-ui, sans-serif; letter-spacing: .03em; vertical-align: .08em; }
  .tag-role.tutor { background: rgba(79, 209, 232, .16); color: var(--tutor); border: 1px solid rgba(79, 209, 232, .45); }
  .tag-role.admin { background: rgba(255, 93, 93, .15); color: var(--admin); border: 1px solid rgba(255, 93, 93, .5); }
  .role-tutor { color: var(--tutor) !important; }
  .role-admin { color: var(--admin) !important; }
  /* Botão do cargo, no canto direito do topo. */
  .role-btn { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--pane); border: 2px solid var(--line); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-hi), 0 2px 0 #06050b; color: #e8e6f0; font: 400 20px/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; position: relative; }
  .role-btn:hover { background: var(--pane-2); }
  .role-btn .ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: #2b2740; font: 700 14px/1 system-ui, sans-serif; }
  .role-btn.tutor { border-color: #2b7f8f; color: var(--tutor); } .role-btn.tutor .ic { background: rgba(79, 209, 232, .18); }
  .role-btn.admin { border-color: #8f2f2f; color: var(--admin); } .role-btn.admin .ic { background: rgba(255, 93, 93, .18); }
  .role-btn .badge { position: absolute; top: -8px; right: -8px; min-width: 20px; padding: 0 5px; border-radius: 10px; background: #e5586b; color: #fff; font: 700 11px/20px system-ui, sans-serif; }
  /* Painéis de suporte e staff. O Suporte usa a moldura .staff-panel (a largura); o painel da staff
     tem também o .sz-xl do registro (a mesma largura) e a altura fixa lá embaixo. */
  .panel.staff-panel { width: min(96%, 70em); }
  .sf-field { display: grid; gap: .3em; margin-bottom: .6em; }
  .sf-field > span { color: var(--muted); font-size: .82em; font-weight: 700; }
  .sf-field input, .sf-field textarea, .sf-field select { width: 100%; }
  .sf-field textarea { resize: vertical; min-height: 5.5em; font: inherit; padding: 9px 12px; border-radius: 8px; border: 1px solid #453f63; background: #14121c; color: inherit; }
  .sf-list { display: grid; gap: .45em; max-height: 30em; overflow: auto; }
  .sf-ticket { padding: .6em .7em; background: #1a1631; border: 1px solid var(--line); border-left: 3px solid var(--st, #5b5378); border-radius: 3px; }
  .sf-ticket.st0 { --st: #ffa94d; } .sf-ticket.st1 { --st: #6fb6ff; } .sf-ticket.st2 { --st: #5fd38d; }
  .sf-ticket header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em .7em; margin-bottom: .3em; font-size: .85em; color: var(--muted); }
  .sf-ticket header b { color: #e8e6f0; font-size: 1.1em; }
  .sf-ticket .st { margin-left: auto; padding: .1em .5em; border-radius: 3px; background: #241f40; color: var(--st); font-weight: 700; }
  .sf-ticket p { margin: 0; color: #d6d3e3; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sf-ticket .resp { margin-top: .5em; padding: .45em .6em; background: #14112a; border-radius: 3px; font-size: .92em; }
  .sf-ticket .resp b { display: block; margin-bottom: .15em; font-size: .85em; color: var(--muted); }
  .sf-ticket .tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .35em; margin-top: .5em; }
  .sf-ticket .tools input { min-width: 0; }
  .sf-ticket .tools button { padding: .4em .7em; font-size: .88em; }
  .sf-table { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
  .sf-row { display: grid; grid-template-columns: var(--cols); gap: .6em; align-items: center; padding: .45em .7em; border-top: 1px solid #262238; font-size: .9em; }
  .sf-row.head { border-top: 0; background: #14112a; color: var(--muted); font-size: .78em; font-weight: 700; }
  .sf-row.click { cursor: pointer; } .sf-row.click:hover { background: #1d1934; }
  .sf-row .muted { color: var(--muted); }
  .sf-row .ok { color: #5fd38d; } .sf-row .no { color: #ff8a8a; }
  .sf-row > * { min-width: 0; overflow-wrap: anywhere; }
  .sf-empty { padding: 1.4em .8em; text-align: center; color: var(--muted); }
  .sf-note { margin: 0; color: var(--muted); font-size: .84em; }
  .sf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .45em; }
  /* Avisos de moderação dentro do mapa. */
  .mod-card { position: absolute; z-index: 6; top: 12px; left: 50%; transform: translateX(-50%); width: min(28em, calc(100% - 24px)); display: grid; gap: .45em; padding: .85em 1em .95em; background: var(--pane); border: 2px solid var(--line); border-top: 3px solid var(--mc, #7b61ff); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-hi), 0 2px 0 #06050b, 0 12px 28px rgba(0, 0, 0, .55); }
  .mod-card.aviso { --mc: #ffd166; } .mod-card.silencio { --mc: #ffa94d; } .mod-card.anuncio { --mc: var(--admin); } .mod-card.cargo { --mc: #c79bff; } .mod-card.suporte { --mc: #5fd38d; }
  .mod-card h3 { margin: 0; color: #fff; font: 400 1.45em/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .mod-card p { margin: 0; color: #d6d3e3; white-space: pre-wrap; overflow-wrap: anywhere; }
  .mod-card .meta { color: var(--muted); font-size: .85em; }
  .mod-card .meta b { color: #e8e6f0; }
  .mod-card button { justify-self: end; padding: .45em 1.1em; font-weight: 700; }
  @media (max-width: 900px), (max-height: 640px) { .mod-card { position: fixed; z-index: 60; top: 10px; } }
  .panel-msg { color: #ffb37a; margin-top: .5em; overflow-wrap: anywhere; }
  .panel-msg:empty { display: none; }
  .panel.wide { width: min(94%, 40em); }
  /* ===== Painel da staff (Tutor e Admin), redesenho com o sistema de design (docs/design.md) =====
     Tudo dentro de #panelStaff: as classes sf-* que a Loja (extrato) e o Suporte também usam
     continuam com o desenho de antes lá fora (as regras de cima). Cores, letras, espaços e raios
     pelos tokens; botões são .ui-btn (parts.ts: button), abas de seção .ui-tabs, sub-abas
     .ui-tabs.line, filtros em fichas (.sf-chips). Hierarquia: seção > sub-aba > filtro. */
  /* Altura fixa no PC: trocar de aba não faz a janela pular de tamanho (no celular ela é tela cheia). */
  @media (min-width: 600px) and (min-height: 501px) { .panel.staff-panel.sz-xl { height: min(94%, 60em); } }
  #panelStaff { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
  #panelStaff .sf-body { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; min-height: 10em; }
  #panelStaff .sf-body > .ui-btn { justify-self: start; }

  /* -- Navegação: seções (caixa), sub-abas (linha dourada), filtros (fichas) -- */
  #panelStaff .sf-tabs { display: flex; width: auto; max-width: none; margin: 0; }
  #panelStaff .sf-tabs > button { flex: 1 0 auto; padding: 0 var(--sp-3); }
  #panelStaff .sf-sub { margin: 0; }
  #panelStaff :is(.sf-chips, .bal-tabs) { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
  #panelStaff :is(.sf-chips, .bal-tabs) > button { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: none; color: var(--c-text-2); font: var(--fw-semi) var(--fs-sm)/1.1 var(--font-ui); letter-spacing: 0; white-space: nowrap; }
  #panelStaff :is(.sf-chips, .bal-tabs) > button:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-text); filter: none; }
  #panelStaff :is(.sf-chips, .bal-tabs) > button.on { background: var(--c-violet-deep); border-color: var(--c-violet); color: var(--c-text-strong); }
  /* No celular as faixas rolam de lado (o nome nunca corta); a aberta fica à vista (parts.ts: tabBar). */
  @container painel (max-width: 40em) {
    #panelStaff .sf-tabs > button { padding: 0 var(--sp-2); }
    /* A borda direita some aos poucos: diz que a faixa continua; o espaço no fim deixa a última à vista. */
    #panelStaff :is(.sf-tabs, .sf-sub, .sf-chips, .bal-tabs, .sf-ptabs) { flex-wrap: nowrap; overflow: auto hidden; scrollbar-width: none; overscroll-behavior-x: contain; padding-right: var(--sp-6); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-6)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--sp-6)), transparent); }
    #panelStaff :is(.sf-sub, .sf-chips, .bal-tabs, .sf-ptabs)::-webkit-scrollbar { display: none; }
    #panelStaff :is(.sf-sub, .sf-chips, .bal-tabs, .sf-ptabs) > * { flex: none; }
  }

  /* -- Campos (o mesmo desenho do .ui-input/.ui-select do kit) -- */
  #panelStaff :where(input:not([type=checkbox]):not([type=radio]), select, textarea):not(.bal-in) { width: 100%; min-width: 0; min-height: var(--ctl-md); margin: 0; padding: 0 var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-text); font: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  #panelStaff textarea:not(.bal-in) { min-height: 6em; padding: var(--sp-2) var(--sp-3); line-height: var(--lh); resize: vertical; }
  #panelStaff select:not(.bal-in) { appearance: none; padding-right: 2.2em; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--c-text-muted) 50%); background-position: calc(100% - 1.1em) 52%, calc(100% - .75em) 52%; background-size: .35em .35em; background-repeat: no-repeat; cursor: pointer; }
  #panelStaff :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--c-violet) 55%, var(--c-line-strong)); }
  #panelStaff :is(input, select, textarea):focus { border-color: var(--c-violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-violet) 25%, transparent); outline: none; }
  #panelStaff :is(input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
  #panelStaff :is(input, textarea)::placeholder { color: var(--c-text-faint); }
  #panelStaff input[data-num].bad, #panelStaff .bal-in.bad { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); }
  #panelStaff .sf-field { display: grid; gap: var(--sp-1); margin: 0; min-width: 0; }
  #panelStaff .sf-field > span { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  #panelStaff .fin-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-sm); color: var(--c-text-2); font-weight: var(--fw-semi); cursor: pointer; white-space: nowrap; }
  #panelStaff .fin-check input { width: 1.15em; height: 1.15em; margin: 0; accent-color: var(--c-violet); }
  /* Campo + botão numa linha (procurar, filtrar, abrir carteira): o botão com a altura do campo. */
  #panelStaff .sf-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); margin: 0; }
  #panelStaff .sf-search > .ui-btn, #panelStaff .sf-search.pay-search > * { min-height: var(--ctl-md); }
  #panelStaff .sf-search.pay-search { grid-template-columns: minmax(0, 1fr) minmax(0, 14em) auto; }
  @container painel (max-width: 40em) { #panelStaff .sf-search.pay-search { grid-template-columns: minmax(0, 1fr) auto; } #panelStaff .sf-search.pay-search > input { grid-column: 1 / -1; } }

  /* -- Textos: notas, títulos de seção, etiquetas -- */
  #panelStaff .sf-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  #panelStaff .ui-h { margin: var(--sp-2) 0 0; }
  #panelStaff :is(.sf-card, .fin) > .ui-h:first-child { margin-top: 0; }
  #panelStaff :is(.sf-row .kind, .sf-row .ev2, .pix-st) { justify-self: start; display: inline-flex; align-items: center; padding: 2px var(--sp-2); background: var(--c-surface-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.35; white-space: nowrap; }
  #panelStaff :is(.sf-row .k-caca, .sf-row .k-venda_auto, .sf-row .k-venda_npc, .sf-row .ev2.ok, .pix-st.st-aprovado) { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, var(--c-surface-1)); }
  #panelStaff :is(.sf-row .k-mercado, .sf-row .ev2.open, .pix-st.st-pendente, .pix-st.st-criando) { color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); background: color-mix(in srgb, var(--c-warn) 10%, var(--c-surface-1)); }
  #panelStaff :is(.sf-row .k-correio, .sf-row .k-loja, .sf-row .k-pagamento) { color: var(--c-info); border-color: color-mix(in srgb, var(--c-info) 45%, transparent); background: color-mix(in srgb, var(--c-info) 10%, var(--c-surface-1)); }
  #panelStaff :is(.sf-row .k-pocao, .sf-row .k-staff, .sf-row .k-suporte, .pix-st.st-em_revisao, .pix-st.st-estornado, .pix-st.st-contestado) { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-1)); }
  #panelStaff :is(.sf-row .k-chat, .sf-row .ev2.buy) { color: var(--c-accent-text); border-color: color-mix(in srgb, var(--c-violet) 50%, transparent); background: color-mix(in srgb, var(--c-violet) 12%, var(--c-surface-1)); }

  /* -- Tabela (sfTable): cabeçalho no poço, linhas com respiro; vira cartões em janela estreita -- */
  #panelStaff .sf-table { background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); overflow: hidden; }
  #panelStaff .sf-row { gap: var(--sp-3); min-height: 2.75em; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--c-line-soft); color: var(--c-text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  /* O cabeçalho com a mesma letra da linha (as colunas em em ficam alinhadas); o texto menor fica nas células. */
  #panelStaff .sf-row.head { min-height: 0; padding-block: var(--sp-2); background: var(--c-sunken); border-top: 0; color: var(--c-text-muted); font-weight: var(--fw-bold); letter-spacing: .02em; text-transform: uppercase; }
  #panelStaff .sf-row.head > * { font-size: var(--fs-xs); overflow-wrap: normal; }
  #panelStaff .sf-row.click { cursor: pointer; transition: background-color var(--t-fast); }
  #panelStaff .sf-row.click:hover { background: var(--c-surface-2); }
  #panelStaff .sf-row.on { background: color-mix(in srgb, var(--c-violet) 10%, var(--c-surface-1)); }
  #panelStaff .sf-row b { font-weight: var(--fw-semi); }
  #panelStaff .sf-row :is(.muted, small) { color: var(--c-text-muted); }
  #panelStaff .sf-row .ok { color: var(--c-ok); }
  #panelStaff .sf-row .no { color: var(--c-danger-text); }
  #panelStaff .sf-row .gold { color: var(--c-gold); }
  #panelStaff .sf-row .dia { color: var(--c-info); }
  #panelStaff .sf-table > .sf-empty { padding: var(--sp-6) var(--sp-4); color: var(--c-text-muted); text-align: center; }
  #panelStaff .sf-item { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; font-weight: var(--fw-semi); }
  #panelStaff .sf-item .ii { margin: -4px 0; }
  @container painel (max-width: 860px) {
    #panelStaff .sf-table { display: grid; gap: var(--sp-2); background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
    #panelStaff .sf-row:not(.head) { grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: var(--sp-2) var(--sp-3); min-height: 0; padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
    #panelStaff .sf-cell[data-label]::before { margin-bottom: 2px; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; }
    #panelStaff .sf-table > .sf-empty { background: rgba(17, 15, 30, .55); border: 1px dashed var(--c-line); border-radius: var(--r-md); }
  }

  /* -- Números (statCard) -- */
  #panelStaff .sf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5em), 1fr)); gap: var(--sp-2); }
  /* Cada número é o .ui-stat do kit (statCard em parts.ts). */

  /* -- Estados: vazio e carregando (kit), aviso de dados novos no topo -- */
  #panelStaff .ui-empty, #panelStaff .ui-loading { min-height: 9em; }
  .sf-fresh { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 auto; min-width: 0; margin-left: auto; padding: 2px 2px 2px var(--sp-3); background: color-mix(in srgb, var(--c-violet) 14%, var(--c-window-head)); border: 1px solid var(--c-violet-strong); border-radius: var(--r-md); color: var(--c-text-2); font: var(--fw-semi) var(--fs-xs)/1.2 var(--font-ui); letter-spacing: 0; }
  .sf-fresh::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-gold); box-shadow: var(--sh-glow-gold); }
  .sf-fresh > span { min-width: 0; white-space: nowrap; }
  .sf-fresh > .ui-btn { flex: none; }
  @container painel (max-width: 50em) { .sf-fresh .more { display: none; } }

  /* -- Suporte (os cartões do Suporte, com as ferramentas da staff) -- */
  #panelStaff .sf-list { gap: var(--sp-2); max-height: none; overflow: visible; }
  #panelStaff .sf-ticket { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-left: 3px solid var(--st, var(--c-line-strong)); border-radius: var(--r-md); }
  #panelStaff .sf-ticket.st0 { --st: var(--c-warn); }
  #panelStaff .sf-ticket.st1 { --st: var(--c-info); }
  #panelStaff .sf-ticket.st2 { --st: var(--c-ok); }
  #panelStaff .sf-ticket header { gap: var(--sp-1) var(--sp-3); margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
  #panelStaff .sf-ticket header b { color: var(--c-text-strong); font-size: var(--fs-md); }
  #panelStaff .sf-ticket .st { padding: 2px var(--sp-2); border: 1px solid color-mix(in srgb, var(--st) 45%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--st) 10%, var(--c-surface-1)); color: var(--st); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  #panelStaff .sf-ticket p { color: var(--c-text); line-height: var(--lh); }
  #panelStaff .sf-ticket .resp { margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); font-size: var(--fs-sm); }
  #panelStaff .sf-ticket .resp b { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStaff .sf-ticket .tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); margin: 0; }
  #panelStaff .sf-ticket .tools.links { display: flex; flex-wrap: wrap; padding-top: var(--sp-2); border-top: 1px solid var(--c-line-soft); }
  @container painel (max-width: 40em) {
    #panelStaff .sf-ticket .tools:not(.links) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #panelStaff .sf-ticket .tools:not(.links) > input { grid-column: 1 / -1; }
  }

  /* -- Ficha do jogador: cartão com cabeçalho, abas em linha e o conteúdo -- */
  #panelStaff .sf-player { display: grid; gap: var(--sp-4); padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  #panelStaff .sf-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  #panelStaff .sf-head h3 { flex: 1 1 100%; margin: 0; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  #panelStaff .sf-head h3 .tag-role { font-size: .42em; vertical-align: .45em; }
  #panelStaff .sf-card { display: grid; gap: var(--sp-3); min-width: 0; }
  #panelStaff .sf-card > .ui-btn { justify-self: start; }
  #panelStaff .sf-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr)); gap: var(--sp-2); }
  #panelStaff .sf-facts > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  #panelStaff .sf-facts small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  #panelStaff .sf-facts b { color: var(--c-text); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
  #panelStaff .sf-equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: var(--sp-2); }
  #panelStaff .sf-slot { display: grid; align-content: start; gap: 2px; min-width: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-left: 3px solid var(--c, var(--c-line-strong)); border-radius: var(--r-sm); }
  #panelStaff .sf-slot > small:first-child { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; }
  #panelStaff .sf-slot .muted { color: var(--c-text-muted); font-size: var(--fs-sm); }

  /* -- Ações da ficha: o motivo em cima; cada grupo é uma lista alinhada (ação, o que faz, opção, botão) -- */
  #panelStaff .ac3 { display: grid; gap: var(--sp-4); }
  #panelStaff .ac3-reason { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--c-gold) 6%, var(--c-surface-1)); border: 1px solid var(--c-gold-dark); border-radius: var(--r-md); }
  #panelStaff .ac3-reason > span { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  #panelStaff .ac3-reason small { grid-column: 2; color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStaff .ac3-reason.need { background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface-1)); border-color: var(--c-danger); }
  #panelStaff .ac3-reason.need > span { color: var(--c-danger-text); }
  #panelStaff .ac3-group { overflow: hidden; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  #panelStaff .ac3-head { display: flex; align-items: center; gap: .45em; padding: var(--sp-2) var(--sp-4); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; }
  #panelStaff .ac3-head::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  #panelStaff .ac3-line { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) minmax(0, 17em) 9.5em; gap: var(--sp-3) var(--sp-4); align-items: center; min-height: 3.6em; padding: var(--sp-3) var(--sp-4); transition: background-color var(--t-fast); }
  #panelStaff .ac3-line + .ac3-line { border-top: 1px solid var(--c-line-soft); }
  #panelStaff .ac3-line:hover { background: color-mix(in srgb, var(--c-surface-2) 60%, transparent); }
  #panelStaff .ac3-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  #panelStaff .ac3-name i { flex: none; width: 4px; height: 1.4em; border-radius: var(--r-xs); background: var(--ac, var(--c-line-strong)); }
  #panelStaff .ac3-name b { color: var(--c-text-strong); font-weight: var(--fw-bold); }
  #panelStaff .ac3-line p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  #panelStaff .ac3-opt { min-width: 0; }
  #panelStaff .ac3-line > .ui-btn, #panelStaff .ac3-btns > .ui-btn { width: 100%; }
  #panelStaff .ac3-btns { display: grid; gap: var(--sp-2); }
  #panelStaff .ac3-grant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
  #panelStaff .ac3-grant .find { grid-column: 1 / -1; }
  #panelStaff .ac3-grant .pick { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 5em; gap: var(--sp-2); }
  /* Item, Nv e Qtd.: o item numa linha (os nomes são compridos), Nv e Qtd. embaixo. */
  #panelStaff .ac3-grant .pick:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #panelStaff .ac3-grant .pick:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; }
  #panelStaff .ac3-line.warn { --ac: var(--c-gold); }
  #panelStaff .ac3-line.mute { --ac: var(--c-warn); }
  #panelStaff :is(.ac3-line.kick, .ac3-line.ban) { --ac: var(--c-danger); }
  #panelStaff .ac3-line.role { --ac: var(--c-accent-text); }
  #panelStaff .ac3-line.grant { --ac: var(--c-ok); }
  #panelStaff .ac3-line.level { --ac: var(--c-info); }
  #panelStaff .ac3-line.skin { --ac: var(--rar-3); }
  /* Botão armado ("Confirmar", 4 s): vermelho cheio, para não passar batido. */
  #panelStaff .ui-btn[data-armed] { background: var(--c-danger); border-color: var(--c-danger-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-danger) 35%, transparent); }
  @container painel (max-width: 860px) {
    #panelStaff .ac3-line { grid-template-columns: minmax(0, 1fr) 9.5em; gap: var(--sp-2) var(--sp-3); }
    #panelStaff .ac3-line p { grid-column: 1 / -1; grid-row: 2; }
    #panelStaff .ac3-line .ac3-opt { grid-row: 3; }
    #panelStaff .ac3-line > :is(.ui-btn, .ac3-btns) { grid-row: 3; grid-column: 2; align-self: end; }
    #panelStaff .ac3-line .ac3-opt:empty { display: none; }
    #panelStaff .ac3-line:has(.ac3-opt:empty) > :is(.ui-btn, .ac3-btns) { grid-row: 1; }
    #panelStaff .ac3-line.grant .ac3-opt { grid-column: 1 / -1; }
    #panelStaff .ac3-line.grant > .ui-btn { grid-row: 4; grid-column: 1 / -1; }
  }
  @container painel (max-width: 30em) {
    #panelStaff .ac3-reason { grid-template-columns: minmax(0, 1fr); }
    #panelStaff .ac3-reason small { grid-column: 1; }
    #panelStaff .ac3-line { grid-template-columns: minmax(0, 1fr); }
    #panelStaff .ac3-line > :is(.ui-btn, .ac3-btns), #panelStaff .ac3-line:has(.ac3-opt:empty) > :is(.ui-btn, .ac3-btns) { grid-row: auto; grid-column: 1; }
    #panelStaff .ac3-line .ac3-opt { grid-row: auto; }
    #panelStaff .ac3-line.grant > .ui-btn { grid-row: auto; }
    #panelStaff .ac3-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  /* -- Servidor: anúncio e boost global -- */
  #panelStaff .sf-announce { display: grid; gap: var(--sp-3); max-width: 44em; }
  #panelStaff .sf-announce > .ui-btn { justify-self: start; }
  #panelStaff .sf-boost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); max-width: 44em; }
  #panelStaff .sf-boost > :is(.ui-h, .sf-boost-now, .sf-note, .ui-btn, .sf-field.wide) { grid-column: 1 / -1; }
  #panelStaff .sf-boost > .ui-btn { justify-self: start; }
  #panelStaff .sf-boost-now { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  #panelStaff .sf-boost-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); min-height: 1.8em; }
  #panelStaff .sf-boost-row b { min-width: 8em; color: var(--c-text-strong); font-weight: var(--fw-semi); }
  #panelStaff .sf-boost-row .muted { color: var(--c-text-muted); }
  @container painel (max-width: 30em) { #panelStaff .sf-boost { grid-template-columns: minmax(0, 1fr); } }

  /* -- Financeiro: mês, projeção, lançamento -- */
  #panelStaff .fin { display: grid; gap: var(--sp-4); min-width: 0; }
  #panelStaff .fin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  #panelStaff .fin-nav > b { min-width: 9em; text-align: center; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; }
  #panelStaff .fin-nav > .muted { color: var(--c-text-muted); font-size: var(--fs-sm); }
  #panelStaff .fin-nav > .ui-btn.icon { font-size: var(--fs-lg); }
  #panelStaff .fin-proj { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: color-mix(in srgb, var(--c-violet) 7%, var(--c-surface-1)); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
  #panelStaff .fin-proj .sf-stat { background: var(--c-surface-1); }
  #panelStaff .fin-bars { display: grid; gap: 3px; }
  #panelStaff .fin-bars i { display: block; height: 6px; min-width: 2px; border-radius: var(--r-xs); }
  #panelStaff .fin-bars i.in { background: var(--c-ok); }
  #panelStaff .fin-bars i.out { background: var(--c-danger-text); }
  #panelStaff .fin-form { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  #panelStaff .fin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  #panelStaff .fin-grid .sf-field:last-child { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #panelStaff .fin-grid .sf-field:last-child > span { grid-column: 1 / -1; }
  #panelStaff .fin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3) var(--sp-4); }
  #panelStaff .fin-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
  #panelStaff .pay-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  #panelStaff .pay-period > input { width: auto; flex: 0 1 11em; }
  #panelStaff .pay-period > .muted { color: var(--c-text-muted); font-size: var(--fs-sm); }
  #panelStaff .pay-pkg input { padding: 0 var(--sp-2); }
  #panelStaff .pay-adj { display: grid; grid-template-columns: auto minmax(0, 10em) auto; justify-content: start; gap: var(--sp-3); align-items: center; }
  #panelStaff .pay-adj .ac3-reason { grid-column: 1 / -1; }
  #panelStaff .pay-adj > b { color: var(--c-text-strong); font-weight: var(--fw-semi); }
  @container painel (max-width: 40em) {
    #panelStaff .fin-grid { grid-template-columns: minmax(0, 1fr); }
    #panelStaff .pay-adj { grid-template-columns: minmax(0, 1fr) auto; }
    #panelStaff .pay-adj > b { grid-column: 1 / -1; }
    #panelStaff .pay-period > input { flex: 1 1 8em; }
    #panelStaff .fin-actions { justify-content: space-between; }
  }
  @container painel (max-width: 860px) { #panelStaff .sf-row .fin-tools { justify-content: flex-start; } }
  #panelStaff .sf-stack { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  /* Nome na mochila da ficha: +, ícone, nome e Nv numa linha; as linhas extras embaixo. */
  #panelStaff .sf-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-width: 0; }
  #panelStaff .sf-inv > .afx { flex-basis: 100%; line-height: var(--lh); }
  /* Botão de um caractere (↑ ↓ ✎ ‹ ›) também com o alvo mínimo no toque. */
  #panelStaff .ui-btn { min-width: var(--ctl-sm); }
  /* Texto pequeno ao lado de um nome (" · mensal", "+3 diam.") quebra a linha inteiro, sem passar por cima. */
  #panelStaff .sf-row small { display: inline-block; }
  /* O motivo dentro de um formulário (carteira): sem caixa dentro de caixa. */
  #panelStaff .fin-form .ac3-reason { padding: 0 0 var(--sp-2); background: none; border: 0; border-bottom: 1px solid var(--c-line-soft); border-radius: 0; }
  #panelStaff .sf-stat .sf-stat-sub { color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  /* ---- Informações do personagem (#panelEquip) e Status (#panelStatus). Dono: mochila-forja. ----
     docs/design.md: tokens e kit. O anel de equipamento à esquerda (com o Poder e os números),
     o inventário à direita (abas, grade, páginas: ui/panels/bag/bag.css) e o detalhe da peça
     embaixo; no estreito, uma coluna só. As regras desta janela vêm escopadas pelo id: a moldura
     (styles/panels/frame.css) e o responsive.css (base) ainda têm regras antigas destas classes. */
  .panel.profile-panel { width: min(96%, 66em); }
  .profile { display: grid; grid-template-columns: 24em minmax(0, 1fr); gap: var(--sp-5) var(--sp-6); }

  /* ---------- O anel: os dez espaços numa volta em torno do personagem ----------
     A 40% do centro (o tamanho deles acompanha o do anel). Cabeça em cima; à esquerda, de cima
     para baixo, ombros, armadura, luvas e calça; à direita, brinco, anel e arma; botas embaixo. */
  .ring { container-type: inline-size; position: relative; width: min(100%, 23em); aspect-ratio: 1; margin: var(--sp-1) auto var(--sp-6); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-violet) 22%, var(--c-surface-1)) 0, var(--c-surface-1) 45%, var(--c-sunken) 70%); box-shadow: inset 0 0 0 2px var(--c-line), inset 0 0 40px rgba(0, 0, 0, .55); }
  .ring::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed var(--c-line-strong); opacity: .55; }
  .core { position: absolute; inset: 32%; border-radius: 50%; border: 3px solid var(--c-violet); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c-violet) 35%, var(--c-surface-1)), var(--c-sunken) 75%); box-shadow: var(--sh-glow-violet), inset 0 0 12px rgba(0, 0, 0, .65); overflow: hidden; }
  .core .portrait { width: 100%; height: 100%; border: 0; border-radius: 0; background-color: transparent; }
  .class-tag { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); padding: .15em .6em; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-sunken); box-shadow: var(--sh-raised); color: var(--c-title); font: var(--fw-regular) clamp(1em, 5.6cqw, 1.3em)/1 var(--font-display); letter-spacing: .03em; white-space: nowrap; }
  .slot { position: absolute; left: var(--x); top: var(--y); width: 16.5cqw; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border-radius: 50%; border: 3px solid var(--c, var(--c-line-strong)); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c, var(--c-surface-3)) 22%, var(--c-surface-2)), var(--c-sunken)); font-size: 1em; color: inherit; cursor: pointer; box-shadow: var(--sh-raised); }
  .slot .ii { width: 76%; height: auto; aspect-ratio: 1; }
  /* Espaço vazio: o ícone da peça Comum da classe, apagado, e o aro tracejado. */
  .slot.empty { border-style: dashed; }
  .slot.empty .ii { opacity: .3; filter: grayscale(1) brightness(1.4); }
  .slot .plus { position: absolute; right: -.3em; bottom: -.2em; font: var(--fw-regular) 1.25em/1 var(--font-display); color: var(--c-text-strong); text-shadow: 0 1px 2px #000, 0 0 4px #000; }
  .slot .label { position: absolute; top: 100%; margin-top: .2em; font-size: max(12px, .78em); line-height: 1.1; color: var(--c-text-muted); white-space: nowrap; text-shadow: 0 1px 2px var(--c-bg-deep); }
  .slot:not(.empty) .label { color: var(--c-text-2); }
  .slot:hover { filter: brightness(1.15); }
  .slot.sel { outline: 2px solid var(--c-gold); outline-offset: 3px; }
  .slot.fits { box-shadow: 0 0 0 3px rgba(255, 209, 102, .6), var(--sh-glow-gold); }
  .slot.over { box-shadow: 0 0 0 4px var(--c-gold), 0 0 22px var(--c-gold); }
  .slot[data-slot="6"] { --x: 50%; --y: 10%; }
  .slot[data-slot="5"] { --x: 73.51%; --y: 17.64%; }
  .slot[data-slot="4"] { --x: 88.04%; --y: 37.64%; }
  .slot[data-slot="1"] { --x: 88.04%; --y: 62.36%; }
  .slot[data-slot="10"] { --x: 73.51%; --y: 82.36%; }
  .slot[data-slot="3"] { --x: 50%; --y: 90%; }
  .slot[data-slot="8"] { --x: 26.49%; --y: 82.36%; }
  .slot[data-slot="9"] { --x: 11.96%; --y: 62.36%; }
  .slot[data-slot="2"] { --x: 11.96%; --y: 37.64%; }
  .slot[data-slot="7"] { --x: 26.49%; --y: 17.64%; }

  /* ---------- Poder, números e o "Distribuir pontos" ---------- */
  .power { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: linear-gradient(90deg, color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-2)), var(--c-surface-1)); border: 1px solid var(--c-gold-dark); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .power span { color: var(--c-text-2); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .03em; }
  .power b { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--c-bg-deep); }
  .pstats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: var(--sp-2) 0 0; padding: 0 var(--sp-1); }
  .pstats > :is(dt, dd) { display: flex; align-items: center; margin: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line-soft); }
  .pstats > :is(dt, dd):nth-last-child(-n + 2) { border-bottom: 0; }
  .pstats dt { gap: .35em; color: var(--c-text-muted); }
  .pstats dd { justify-content: flex-end; margin: 0; color: var(--c-text); font: var(--fw-regular) var(--fs-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  #profilePoints { width: 100%; margin-top: var(--sp-3); }
  #profilePoints[hidden] { display: none; }

  /* ---------- Cabeçalho do inventário: título, contagem e o "Equipar os melhores" ---------- */
  .inv-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); min-height: var(--ctl-sm); margin-bottom: var(--sp-3); }
  .inv-head strong { display: flex; align-items: center; gap: .4em; font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--c-title); }
  .inv-head strong::before { content: ""; flex: none; width: .3em; height: .3em; background: var(--c-violet); transform: rotate(45deg); }
  .inv-head small { flex: 1 1 12em; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; min-width: 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
  .inv-head small[hidden] { display: none; }
  .inv-head small b { color: var(--c-text); font-variant-numeric: tabular-nums; }
  .best-btn { flex: none; margin-left: auto; }
  .best-btn .ic { font-size: .9em; }
  .best-btn .n { min-width: 1.6em; padding: 0 .35em; border-radius: var(--r-pill); background: var(--c-ok); color: var(--c-bg-deep); font-size: var(--fs-xs); line-height: 1.5; }
  .best-btn.ready { background: color-mix(in srgb, var(--c-ok) 18%, var(--c-surface-2)); border-color: var(--c-ok); color: var(--c-ok); }
  .best-btn:disabled { opacity: 1; filter: none; background: transparent; border-color: var(--c-line); color: var(--c-text-muted); box-shadow: none; cursor: default; }
  .tile.best-up { box-shadow: 0 0 0 2px var(--c-ok), 0 0 10px rgba(95, 211, 141, .35); }
  .tile .up-badge { position: absolute; top: 2px; left: 3px; color: var(--c-ok); font: 700 12px/1 var(--font-ui); font-style: normal; text-shadow: 0 1px 0 #000; }
  .panel-msg.ok { color: var(--c-ok); }
  .tile[draggable="true"] { cursor: grab; }
  .tile.dragging { opacity: .4; }

  /* ---------- Detalhe da peça escolhida ----------
     Pilha: a largura toda, embaixo do anel e da mochila. Peça (.pc-on): as duas metades do
     detalhe entram nas colunas do perfil, cada uma logo depois do que tem em cima — a peça e as
     ações embaixo do anel; a comparação e os atributos extras embaixo da mochila —, sem buraco de
     nenhum lado. No estreito vira uma coluna só. */
  #panelEquip .item-detail { display: grid; gap: var(--sp-3); margin-top: 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--c-line); }
  #panelEquip .item-detail:empty { display: none; }
  .profile > #bagDetail { grid-column: 1 / -1; }
  .profile.pc-on > :first-child { grid-column: 1; grid-row: 1 / span 2; }
  .profile.pc-on > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .profile.pc-on > #bagDetail { display: contents; }
  .profile.pc-on .pc-main { grid-column: 1; grid-row: 3; }
  .profile.pc-on .pc-side { grid-column: 2; grid-row: 2 / span 2; }
  .profile.pc-on .pc-main:only-child { grid-column: 1 / -1; }
  .pc-main, .pc-side { display: grid; gap: var(--sp-3); min-width: 0; align-content: start; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
  .pc-side > .afx-box { margin-top: 0; }
  /* O cartão da peça: ícone em dobro, nome com o cadeado, etiquetas e o que ela soma. */
  #panelEquip .it-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3); background: radial-gradient(120% 140% at 0 0, color-mix(in srgb, var(--c) 12%, transparent), transparent 60%), var(--c-sunken); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--c-line)); border-radius: var(--r-md); }
  #panelEquip .it-card > div:last-child { display: grid; gap: var(--sp-2); min-width: 0; }
  #panelEquip .it-art { width: 72px; height: 72px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 24%, var(--c-surface-2)), var(--c-bg) 72%); border-radius: var(--r-md); }
  .pc-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  #panelEquip .pc-name .name { flex: 0 1 auto; min-width: 0; color: var(--c); font: var(--fw-regular) var(--fs-d-md)/1.05 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  #panelEquip .it-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; }
  #panelEquip .it-tags span { padding: 2px var(--sp-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.35; }
  #panelEquip .it-tags .rar { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--c-surface-1)); }
  #panelEquip .it-tags .lv { color: var(--c-title); border-color: var(--c-line-strong); background: color-mix(in srgb, var(--c-violet) 18%, var(--c-surface-1)); }
  #panelEquip .it-tags .no, #panelEquip .it-tags .lv.no { color: var(--c-danger-text); border-color: var(--c-danger-deep); background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface-1)); }
  #panelEquip .it-stats { margin: 0; gap: var(--sp-1) var(--sp-4); color: var(--c-text-2); }
  #panelEquip .it-stats b { color: var(--c-ok); }
  #panelEquip .item-detail small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  #panelEquip .item-detail small.enh-note { color: var(--c-gold); }
  #panelEquip .item-detail small.enh-note.bad { color: var(--c-danger-text); }
  /* Cadeado: aberto e apagado quando livre; dourado, com "Travada", quando travada. */
  .item-detail .pc-lock { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-width: 2em; min-height: 1.9em; padding: .2em .4em; background: var(--c-surface-1); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); box-shadow: none; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; }
  .item-detail .pc-lock:hover { border-color: var(--c-violet); filter: brightness(1.2); }
  .item-detail .pc-lock.on { background: color-mix(in srgb, var(--c-gold) 12%, var(--c-surface-1)); border-color: var(--c-gold-deep); color: var(--c-gold); }
  .pc-lock svg { display: block; }
  /* Ações: a principal (com o "⋯" do lado), o motivo quando não dá e as três melhorias. */
  .pc-acts { display: grid; gap: var(--sp-2); container: pcacts / inline-size; }
  .pc-row { display: flex; gap: var(--sp-2); }
  .item-detail .pc-go { flex: 1 1 auto; min-width: 0; min-height: var(--ctl-lg); font-size: var(--fs-lg); }
  /* Não equipa: o botão vira o aviso (vermelho), sem parecer só apagado. */
  .item-detail .pc-go:disabled { opacity: 1; filter: none; background: var(--c-sunken); border-color: var(--c-line); box-shadow: none; color: var(--c-danger-text); }
  .item-detail .pc-more { flex: none; width: var(--ctl-lg); min-height: var(--ctl-lg); font: var(--fw-regular) 1.6em/1 var(--font-display); letter-spacing: .04em; }
  .item-detail .pc-more[aria-expanded="true"] { background: var(--c-violet-deep); border-color: var(--c-violet); }
  .item-detail small.pc-why { margin-top: calc(-1 * var(--sp-1)); color: var(--c-danger-text); }
  .pc-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .item-detail .pc-tool { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-2); row-gap: 2px; align-items: center; min-width: 0; min-height: var(--ctl-lg); padding: var(--sp-2); background: var(--c-surface-1); border: 1px solid var(--tc, var(--c-line-strong)); border-radius: var(--r-md); box-shadow: var(--sh-raised); color: var(--c-text); text-align: left; font-size: var(--fs-sm); line-height: 1.1; }
  .item-detail .pc-tool:not(:disabled):hover { background: var(--c-surface-2); filter: none; }
  .pc-tool > .ii, .pc-tool > .forge-ic { grid-row: 1 / 3; width: 24px; height: 24px; }
  .pc-tool .lb { font-weight: var(--fw-bold); color: var(--tl, var(--c-text)); overflow-wrap: anywhere; }
  .item-detail .pc-tool small { color: var(--c-text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
  .pc-tool kbd { position: absolute; top: 2px; right: 3px; padding: 0 .25em; border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); background: var(--c-sunken); color: var(--c-text-muted); font: var(--fw-regular) 11px/1.1 var(--font-display); }
  /* Janela estreita (360 px): o ícone em cima e o nome embaixo, para "Aprimorar" caber sem partir. */
  @container painel (max-width: 25em) {
    .item-detail .pc-tool { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .pc-tool > .ii, .pc-tool > .forge-ic { grid-row: auto; }
  }
  .pc-tool.enh { --tc: var(--c-gold-dark); --tl: var(--c-gold); }
  .pc-tool.forge { --tc: var(--c-warn-deep); --tl: var(--c-warn); }
  .pc-tool.evo { --tc: var(--c-info-deep); --tl: var(--c-info); }
  /* Coluna estreita (celular deitado): ícone em cima, nome e estado embaixo, sem cortar. */
  @container pcacts (max-width: 20em) {
    .item-detail .pc-tool { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 2px; padding: var(--sp-2) var(--sp-1); text-align: center; }
    .pc-tool > .ii, .pc-tool > .forge-ic { grid-row: auto; width: 20px; height: 20px; }
    .pc-tool kbd { display: none; }
  }
  @media (pointer: coarse) { .item-detail .pc-lock { min-width: var(--touch); min-height: var(--touch); } }
  /* O "⋯": abre embaixo das ações, empurrando o resto (no celular não sai da tela). */
  .pc-menu { display: grid; gap: 2px; padding: var(--sp-1); background: var(--c-surface-1); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-pop); }
  .pc-menu[hidden] { display: none; }
  .item-detail .pc-menu-note { padding: var(--sp-1) var(--sp-2) 0; color: var(--c-danger-text); }
  .item-detail .pc-menu button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sp-3); min-height: var(--ctl-md); padding: var(--sp-2) var(--sp-3); background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; color: var(--c-text); font-weight: var(--fw-semi); text-align: left; }
  .pc-menu button:is(:hover, :focus-visible):not([aria-disabled="true"]) { background: var(--c-surface-3); filter: none; }
  .pc-menu button[aria-disabled="true"] { opacity: .45; cursor: default; }
  .pc-menu .mi { display: grid; place-items: center; width: 20px; height: 20px; }
  .pc-menu .mi .coin { width: 14px; height: 14px; }
  .pc-menu .mi .ii { width: 20px; height: 20px; }
  .pc-menu .val { font: var(--fw-regular) var(--fs-xl)/1 var(--font-display); letter-spacing: .02em; color: var(--c-gold); white-space: nowrap; }
  .pc-menu .val.ess { color: var(--c-accent-text); }
  .item-detail .pc-menu small.val { font: inherit; font-size: var(--fs-xs); color: var(--c-text-muted); }
  .pc-menu .del .lb { color: var(--c-danger-text); }
  .pc-menu .unlock .lb { color: var(--c-gold); }
  .item-detail .pc-menu button > small:last-child:not(.val) { grid-column: 2 / -1; color: var(--c-text-muted); font-size: var(--fs-xs); }
  /* Comparação com o equipado: o Poder em destaque e os que mais mudam; "ver todos" abre o resto. */
  .cmp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  .cmp .cmp-h { color: var(--c-text-muted); font-size: var(--fs-sm); }
  .cmp .cmp-list { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); flex: 1 1 100%; }
  .cmp .same { color: var(--c-text-muted); }
  .cmp.other { color: var(--c-danger-text); }
  .cmp-pw { padding: 2px var(--sp-2); border: 1px solid; border-radius: var(--r-sm); font: var(--fw-regular) var(--fs-xl)/1.1 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
  .cmp-pw.up { background: color-mix(in srgb, var(--c-ok) 12%, var(--c-sunken)); color: var(--c-ok); border-color: var(--c-ok-deep); }
  .cmp-pw.down { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-sunken)); color: var(--c-danger-text); border-color: var(--c-danger-deep); }
  .cmp-pw.same { background: var(--c-surface-1); color: var(--c-text-muted); border-color: var(--c-line); }
  .pc-cmp { display: grid; gap: var(--sp-2); }
  .pc-cmp .cmp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
  .pc-cmp .cmp-list { align-items: center; }
  .item-detail .cmp { font-size: var(--fs-sm); }
  .item-detail .up { color: var(--c-ok); }
  .item-detail .down { color: var(--c-danger-text); }
  .item-detail .cmp-all { min-height: 0; padding: 0 var(--sp-1); white-space: nowrap; color: var(--c-accent-text); }
  /* Toque: o "ver todos" desenha baixo; a área de toque cresce por fora (44 px de altura). */
  @media (pointer: coarse) { .item-detail .cmp-all { position: relative; } .item-detail .cmp-all::after { content: ""; position: absolute; inset: -16px -4px; } }
  @container painel (max-width: 820px) {
    .profile.pc-on > :is(:first-child, :nth-child(2)) { grid-column: auto; grid-row: auto; }
    .profile.pc-on > #bagDetail { display: grid; }
    .pc-main, .pc-side { display: contents; }
    .pc-detail .it-card { order: 1; }
    .pc-detail .pc-cmp { order: 2; }
    .pc-detail .pc-acts { order: 3; }
    .pc-detail .afx-box { order: 4; }
  }
  /* Celular deitado: as duas colunas de novo, como o perfil (pouca altura). */
  @media (max-height: 500px) and (min-width: 600px) {
    .profile.pc-on > :first-child { grid-column: 1; grid-row: 1 / span 2; }
    .profile.pc-on > :nth-child(2) { grid-column: 2; grid-row: 1; }
    .profile.pc-on > #bagDetail { display: contents; }
    .pc-main, .pc-side { display: grid; }
  }

  /* ---------- Selos das peças (valem em toda janela que mostra a peça) ---------- */
  .lv-badge { position: absolute; left: 2px; bottom: 1px; z-index: 1; white-space: nowrap; color: #e8e2ff; font: 400 13px/1 "Jersey 10", system-ui, sans-serif; text-shadow: 1px 0 #0b0912, -1px 0 #0b0912, 0 1px #0b0912, 0 -1px #0b0912; pointer-events: none; white-space: nowrap; }
  .lv-badge small { display: inline; font-size: max(12px, .72em); margin-right: 1px; color: #b9b0e6; }
  /* No detalhe da peça o "small" vira bloco (#panelEquip .item-detail small): o "Nv" do selo continua na mesma linha do número. */
  #panelEquip .item-detail .lv-badge small { display: inline; font-size: max(12px, .72em); line-height: inherit; color: #b9b0e6; }
  .lv-badge.high { color: #ff8a8a; }
  .lv-badge.big { left: 4px; bottom: 3px; font-size: 19px; }
  .tile .lv-badge ~ .lock-badge { bottom: 14px; }
  .slot .ring-lv { left: auto; right: -.3em; top: -.2em; bottom: auto; font-size: 14px; }
  .ii.ess-ic.sm, .ii.sm { width: 18px; height: 18px; flex: none; }

  /* Poder: conta até o novo, brilha e solta o "+X" (verde) ou "−X" (vermelho). */
  .power b.pw-up { animation: pwUp .9s ease-out; }
  .power b.pw-down { animation: pwDown .9s ease-out; }
  .pw-float { position: absolute; right: .8em; top: -.2em; font: 400 1.05em/1 "Jersey 10", system-ui, sans-serif; pointer-events: none; animation: pwFloat 1.25s ease-out forwards; }
  .pw-float.up { color: #8ff0b4; text-shadow: 0 0 6px rgba(95, 211, 141, .6); }
  .pw-float.down { color: #ff9aa5; }
  @keyframes pwUp { 0% { color: #fff; text-shadow: 0 0 14px #ffd166; transform: scale(1.18); } 100% { text-shadow: none; transform: none; } }
  @keyframes pwDown { 0% { color: #ff8a8a; } 100% { color: #ffd166; } }
  @keyframes pwFloat { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
  @media (prefers-reduced-motion: reduce) { .power b.pw-up, .power b.pw-down, .pw-float { animation: none; } .pw-float { display: none; } }

  /* ---------- Atributos detalhados: duas colunas; cada linha com ícone, nome, valor e o "?" ---------- */
  .details { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
  .details h3 { display: flex; align-items: center; gap: .4em; margin: 0 0 var(--sp-1); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--c-title); }
  .details h3::before { content: ""; width: .32em; height: .32em; background: var(--c-gold); transform: rotate(45deg); box-shadow: var(--sh-glow-gold); }
  .details h4 { display: flex; align-items: center; gap: .4em; margin: var(--sp-5) 0 var(--sp-2); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); color: var(--c-accent-text); letter-spacing: .02em; }
  .details h4::before { content: ""; width: .32em; height: .32em; background: var(--c-violet); transform: rotate(45deg); }
  .details-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  .attr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-3); }
  .attr { position: relative; display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto 1.6em; align-items: center; gap: var(--sp-2); min-height: 2.6em; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .attr .ico { text-align: center; }
  .attr .name { overflow-wrap: anywhere; color: var(--c-text); line-height: var(--lh-tight); }
  .attr .val { font: var(--fw-regular) var(--fs-xl)/1 var(--font-display); color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
  .attr.off { background: transparent; border-style: dashed; }
  .attr.off .name, .attr.off .val { color: var(--c-text-faint); }
  .attr.off .ico { opacity: .45; filter: grayscale(1); }
  /* O "?" com a dica ao passar o mouse: também o do Auto Helper (ui/panels/helper, .ah-help), que usa estas classes. */
  .help { width: 1.6em; height: 1.6em; padding: 0; border-radius: 50%; background: #2b2547; border: 1px solid #4a3f86; color: #c9c0ff; font: 700 .8em/1 system-ui, sans-serif; cursor: help; }
  .help:hover, .help:focus-visible { background: #3b3270; color: #fff; }
  .tip { display: none; position: absolute; z-index: 5; right: 0; bottom: calc(100% + 6px); width: min(19em, 86vw); padding: .6em .75em; background: #0f0d1c; border: 1px solid #6a5acd; border-radius: 4px; box-shadow: 0 6px 18px #000a; color: #dcd9e8; font-size: .85em; line-height: 1.4; }
  .tip em { display: block; margin-top: .35em; color: #ffb37a; font-style: normal; }
  .help:hover + .tip, .help:focus + .tip { display: block; }
.attr-grid .help { width: 1.6em; height: 1.6em; padding: 0; border-radius: 50%; background: var(--c-surface-2); border: 1px solid var(--c-line-strong); box-shadow: none; color: var(--c-accent-text); font: var(--fw-bold) .8em/1 var(--font-ui); cursor: help; }
  .attr-grid .help:hover, .attr-grid .help:focus-visible { background: var(--c-violet-deep); color: var(--c-text-strong); filter: none; }
  .attr-grid .tip { display: none; position: absolute; z-index: var(--z-janela); right: 0; bottom: calc(100% + 6px); width: min(19em, 86vw); padding: var(--sp-2) var(--sp-3); background: #0f0d1c; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-pop); color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .attr-grid .tip em { display: block; margin-top: var(--sp-1); color: var(--c-warn); font-style: normal; }
  .attr-grid .help:hover + .tip, .attr-grid .help:focus + .tip { display: block; }
  @container painel (max-width: 760px) { .attr-grid { grid-template-columns: minmax(0, 1fr); } }
  /* Toque: o "?" continua pequeno no desenho e cresce por fora até 44 px. */
  @media (pointer: coarse) { .attr-grid .help { position: static; } .attr-grid .help::after { content: ""; position: absolute; inset: -1px -1px -1px auto; width: var(--touch); } }

  /* Painel estreito (tablet em pé, celular): o anel em cima e a mochila embaixo, com a largura toda. */
  @container painel (max-width: 820px) {
    .profile { grid-template-columns: minmax(0, 1fr); }
    .profile > :first-child { width: min(100%, 28em); justify-self: center; }
    .ring { width: min(100%, 26em); }
  }
  /* Celular deitado: pouca altura, então o anel menor ao lado da mochila. */
  @media (max-height: 500px) and (min-width: 600px) {
    .profile { grid-template-columns: 19em minmax(0, 1fr); gap: var(--sp-4); }
    .profile > :first-child { width: auto; justify-self: stretch; }
    .ring { width: min(100%, 18em); }
  }

  /* ---------- Status (#panelStatus) ----------
     Topo: classe e nível, o Poder e os pontos livres; a barrinha de onde vem o Poder (a lista abre
     em "Ver de onde vem"). Abas de atributos, o passo do + (+1, +5, +10, Máx) e as linhas: ícone, nome
     com os pontos postos, efeito e próximo ponto, o total e o − / +. A prévia fica verde; o rodapé
     preso tem Desfazer e Confirmar. Sem pontos livres, o passo, os botões e o rodapé somem. */
  #panelStatus { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  #panelStatus > * { min-width: 0; }
  #panelStatus [hidden] { display: none !important; }
  /* Topo. */
  #panelStatus .st-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2) var(--sp-5); }
  #panelStatus .st-head > div { display: grid; gap: 2px; min-width: 0; }
  #panelStatus .st-head small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStatus .st-who b { color: var(--c-title); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; }
  #panelStatus .st-pw { grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: var(--sp-2); }
  #panelStatus .st-pw small { grid-column: 1 / -1; text-align: right; }
  #panelStatus .st-pw b { grid-column: 1; color: var(--c-gold); font: var(--fw-regular) var(--fs-d-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--c-bg-deep); }
  #panelStatus .st-pw .st-up { grid-column: 2; color: var(--c-ok); font: var(--fw-bold) var(--fs-sm)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
  #panelStatus .st-free { grid-template-columns: auto auto; align-items: baseline; column-gap: var(--sp-2); min-height: var(--ctl-lg); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  #panelStatus .st-free small { grid-column: 1 / -1; }
  #panelStatus .st-free b { color: var(--c-text-muted); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  #panelStatus .st-free .st-of { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStatus .st-free.on { background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-1)); border-color: var(--c-gold-deep); box-shadow: var(--sh-glow-gold); }
  #panelStatus .st-free.on small { color: var(--c-gold); }
  #panelStatus .st-free.on b { color: var(--c-gold); }
  /* De onde vem o Poder: uma linha fina; a lista só aberta. */
  #panelStatus .st-src { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  #panelStatus .st-src-top { display: grid; grid-template-columns: auto minmax(4em, 1fr) auto auto; align-items: center; gap: var(--sp-2) var(--sp-3); }
  #panelStatus .st-src-lbl { color: var(--c-text-2); font-size: var(--fs-sm); }
  #panelStatus .st-src-bar { display: flex; height: 6px; overflow: hidden; border-radius: var(--r-xs); background: var(--c-bg-deep); box-shadow: inset 0 0 0 1px var(--c-line); }
  #panelStatus .st-src-bar i { display: block; height: 100%; min-width: 2px; }
  #panelStatus .st-src-bar i + i { box-shadow: -1px 0 0 var(--c-bg-deep); }
  #panelStatus .st-help { position: relative; display: inline-grid; place-items: center; }
  #panelStatus .st-help .tip { top: calc(100% + 6px); bottom: auto; z-index: var(--z-dialogo); }
  #panelStatus .st-help .tip em { display: block; margin-top: var(--sp-1); color: var(--c-text-muted); font-style: normal; }
  #panelStatus .st-src-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr)); gap: var(--sp-2) var(--sp-6); padding-top: var(--sp-2); border-top: 1px solid var(--c-line-soft); }
  #panelStatus .st-src-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3.6em; align-items: center; gap: var(--sp-2); min-width: 0; }
  #panelStatus .st-src-row .dot { width: .7em; height: .7em; border-radius: 2px; }
  #panelStatus .st-src-row .nm { display: grid; gap: 1px; min-width: 0; color: var(--c-text); }
  #panelStatus .st-src-row .nm small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStatus .st-src-row b { color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  #panelStatus .st-src-row .pc { color: var(--c-text-muted); text-align: right; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  #panelStatus .st-src-row.zero { opacity: .55; }
  /* O passo do +. */
  #panelStatus .st-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); color: var(--c-text-2); font-size: var(--fs-sm); }
  /* As linhas. */
  #panelStatus .st-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25em), 1fr)); gap: var(--sp-2); align-items: stretch; }
  #panelStatus .st-sub-h { grid-column: 1 / -1; display: flex; align-items: center; gap: .4em; margin: var(--sp-2) 0 0; color: var(--c-accent-text); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  #panelStatus .st-sub-h::before { content: ""; flex: none; width: .32em; height: .32em; background: var(--c-violet); transform: rotate(45deg); }
  #panelStatus .st-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto auto; grid-template-areas: "ico main val btns"; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 4.2em; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); cursor: help; transition: border-color var(--t-fast), background-color var(--t-fast); }
  #panelStatus .st-row:hover { border-color: var(--c-line-strong); }
  #panelStatus .st-row.pend { background: color-mix(in srgb, var(--c-ok) 7%, var(--c-sunken)); border-color: color-mix(in srgb, var(--c-ok) 45%, var(--c-line)); }
  #panelStatus .st-ico { grid-area: ico; text-align: center; }
  #panelStatus .st-main { grid-area: main; display: grid; gap: 2px; min-width: 0; line-height: var(--lh-tight); }
  #panelStatus .st-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); color: var(--c-text); font-weight: var(--fw-semi); }
  #panelStatus .st-pts { padding: 1px 6px; background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-xs); color: var(--c-text-2); font: var(--fw-regular) var(--fs-xs)/1.3 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
  #panelStatus .st-row.pend .st-pts { border-color: color-mix(in srgb, var(--c-ok) 55%, var(--c-line)); }
  #panelStatus .up { color: var(--c-ok); }
  #panelStatus .st-eff { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStatus .st-next { color: var(--c-text-faint); font-size: var(--fs-xs); }
  #panelStatus .st-next b { color: var(--c-accent-text); font-weight: var(--fw-semi); }
  #panelStatus .st-next b.warn { color: var(--c-warn); }
  #panelStatus .st-val { grid-area: val; display: grid; justify-items: end; gap: 2px; min-width: 3em; text-align: right; }
  #panelStatus .st-val b { color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  #panelStatus .st-val b.up { color: var(--c-ok); }
  #panelStatus .st-val s { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  #panelStatus .st-val small { color: var(--c-text-faint); font-size: var(--fs-xs); }
  #panelStatus .st-btns { grid-area: btns; display: flex; gap: var(--sp-1); }
  #panelStatus .st-btns button { min-width: 2.6em; min-height: var(--ctl-sm); padding: 0 var(--sp-2); background: var(--c-surface-2); border: 1px solid color-mix(in srgb, var(--c-violet) 55%, var(--c-line)); border-radius: var(--r-sm); box-shadow: var(--sh-raised); color: var(--c-accent-text); font: var(--fw-bold) var(--fs-sm)/1 var(--font-ui); cursor: pointer; }
  #panelStatus .st-btns .st-sub { min-width: 2.2em; border-color: var(--c-line-strong); color: var(--c-text-2); }
  #panelStatus .st-btns button:hover:not(:disabled) { background: var(--c-violet-strong); border-color: var(--c-violet); color: var(--c-text-strong); filter: none; }
  #panelStatus .st-btns button:disabled { opacity: .35; box-shadow: none; cursor: not-allowed; }
  /* O rodapé preso: a prévia, Desfazer e Confirmar. */
  #panelStatus .st-foot { position: sticky; bottom: calc(-1 * var(--pb, 1em)); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: var(--sp-1) calc(-1 * var(--pr, 1em)) calc(-1 * var(--pb, 1em)) calc(-1 * var(--pl, 1em)); padding: var(--sp-3) var(--pr, 1em) max(var(--sp-3), var(--safe-b)) var(--pl, 1em); background: var(--c-window-head); border-top: 2px solid var(--c-violet); box-shadow: 0 -8px 16px rgba(0, 0, 0, .45); }
  #panelStatus .st-foot p { flex: 1 1 14em; margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh-tight); }
  #panelStatus .st-foot p b { color: var(--c-ok); }
  #panelStatus .st-foot p small { display: block; margin-top: 2px; color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStatus .st-foot .st-note { color: var(--c-warn); }
  #panelStatus .st-actions { display: flex; gap: var(--sp-2); margin-left: auto; }
  /* Janela estreita (celular): o topo em duas linhas e, na linha, o total em cima dos botões. */
  @container painel (max-width: 34em) {
    #panelStatus .st-head { grid-template-columns: minmax(0, 1fr) auto; }
    #panelStatus .st-who { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--sp-2); }
    #panelStatus .st-pw { justify-content: start; }
    #panelStatus .st-pw small { text-align: left; }
    #panelStatus .st-src-top { grid-template-columns: minmax(0, 1fr) auto auto; }
    #panelStatus .st-src-bar { grid-column: 1 / -1; grid-row: 2; }
    #panelStatus .st-row { grid-template-columns: 1.4em minmax(0, 1fr) auto; grid-template-areas: "ico main val" "ico main btns"; padding-left: var(--sp-2); }
    #panelStatus .st-btns { justify-self: end; }
    /* As 5 abas cabem lado a lado (nenhuma fora da vista); o contador da prévia vira um pontinho dourado. */
    #panelStatus .st-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #panelStatus .st-tabs > button { min-width: 0; padding: 0 2px; gap: 3px; font-size: 1em; }
    #panelStatus .st-tabs .ui-badge { width: 8px; min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; box-shadow: none; }
  }
  @media (pointer: coarse) {
    #panelStatus .st-btns :is(.st-add, .st-sub) { min-width: var(--touch); min-height: var(--touch); }
    #panelStatus .st-step .ui-seg > button { min-width: var(--touch); }
  }

  textarea { font: inherit; padding: 9px 12px; border-radius: 8px; border: 1px solid #453f63; background: #14121c; color: inherit; resize: vertical; }
  /* ---- Correio (docs/design.md). Dono: correio-suporte. Prefixo ml-; o desenho em ./panel.ts. ----
     Janela estreita: a barra, a lista e a carta aberta uma embaixo da outra. A partir de 44em de
     largura (PC e celular deitado): a lista à esquerda e a carta à direita; a carta nova ocupa as duas
     colunas. Uma rolagem só: a da janela (a lista cresce com as cartas). */
  #panelMail:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  #panelMail > :is(#mailDetail, #mailForm):empty { display: none; }

  /* Barra: o resumo à esquerda, Escrever e Coletar tudo à direita. */
  .ml-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: 0; }
  .ml-summary { color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .ml-bar-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
  #mailCompose[aria-pressed="true"] { border-color: var(--c-violet); color: var(--c-text-strong); }

  /* Lista: uma linha por carta. Não lida: ponto violeta e assunto em negrito; aberta: borda dourada. */
  .ml-list { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; }
  .ml-row { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--ctl-lg); margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); box-shadow: none; color: inherit; font: inherit; text-align: left; transition: background-color var(--t-fast), border-color var(--t-fast); }
  .ml-row:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-line-strong); filter: none; }
  .ml-row.unread { background: var(--c-surface-1); border-color: var(--c-line); }
  .ml-row.sel { background: color-mix(in srgb, var(--c-gold) 7%, var(--c-surface-1)); border-color: var(--c-gold-deep); box-shadow: inset 3px 0 0 var(--c-gold); }
  .ml-ic { font-size: 1.25em; line-height: 1; text-align: center; }
  .ml-row:not(.unread) .ml-ic { opacity: .7; }
  .ml-main { display: grid; gap: 2px; min-width: 0; }
  .ml-subject { color: var(--c-text-2); line-height: var(--lh-tight); overflow-wrap: anywhere; }
  .ml-row.unread .ml-subject { color: var(--c-text-strong); font-weight: var(--fw-bold); }
  .ml-dot { display: inline-block; width: 7px; height: 7px; margin-right: var(--sp-2); vertical-align: .12em; background: var(--c-violet); border-radius: 50%; box-shadow: var(--sh-glow-violet); }
  .ml-from { color: var(--c-text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
  .ml-date { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* A carta aberta: cabeçalho (assunto, quem mandou, data, prazo), o texto, os anexos e as ações. */
  .ml-detail { min-width: 0; }
  .ml-pick { display: none; }
  .ml-letter { display: grid; gap: var(--sp-4); min-width: 0; padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .ml-letter-head { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line-soft); }
  .ml-letter-title { margin: 0; color: var(--c-text-strong); font: var(--fw-bold) var(--fs-lg)/var(--lh-tight) var(--font-ui); overflow-wrap: anywhere; }
  .ml-letter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); color: var(--c-text-muted); font-size: var(--fs-sm); }
  .ml-letter-meta .ml-from { font-size: inherit; }
  .ml-letter-meta b { color: var(--c-accent-text); font-weight: var(--fw-semi); }
  .ml-body { color: var(--c-text); line-height: var(--lh); white-space: pre-wrap; overflow-wrap: anywhere; }
  .ml-att { display: grid; gap: var(--sp-2); }
  .ml-att > .ui-h { margin: 0; }
  .ml-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: var(--sp-2); }
  .ml-chip { --c: var(--c-text-2); display: flex; align-items: center; gap: var(--sp-2); min-width: 0; min-height: var(--ctl-md); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-text); font-weight: var(--fw-semi); }
  .ml-chip.coins { padding-left: var(--sp-3); }
  .ml-chip.item { border-color: color-mix(in srgb, var(--c) 50%, var(--c-line)); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 75%), var(--c-sunken); color: var(--c); }
  .ml-chip-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .ml-chip .nv { color: var(--c-text); font-weight: var(--fw-bold); white-space: nowrap; }
  .ml-att.done .ml-chip { opacity: .55; filter: grayscale(.4); }
  .ml-afx { display: grid; gap: var(--sp-2); }
  .ml-actions { padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); }
  .ml-del { margin-right: auto; }
  .ml-del:hover:not(:disabled) { color: var(--c-danger-text); }

  /* Carta nova: Para e Assunto lado a lado quando cabe; a contagem à direita do rótulo. */
  .ml-form { display: grid; gap: var(--sp-3); min-width: 0; }
  .ml-form > .ui-h { margin: 0; }
  .ml-form-row { display: grid; gap: var(--sp-3); }
  .ml-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
  .ml-count { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .ml-form .ui-error { margin: 0; }
  .ml-form .ui-input { font-size: var(--fs-md); }

  /* Celular em pé: a carta sem o recuo do cartão (a janela já tem o dela) e as ações da barra na largura toda. */
  @container painel (max-width: 30em) {
    .ml-letter { padding: var(--sp-3); }
    .ml-bar-actions { flex: 1 1 100%; }
    .ml-bar-actions > .ui-btn { flex: 1 1 0; }
  }
  @container painel (min-width: 34em) {
    .ml-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  }
  @container painel (min-width: 44em) {
    #panelMail:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--sp-4); }
    #panelMail > .ml-bar { grid-column: 1 / -1; }
    #panelMail > #mailList { grid-column: 1; grid-row: 2; }
    #panelMail > #mailDetail { grid-column: 2; grid-row: 2; }
    .ml-pick { display: block; }
    .ml-pick .ui-empty { padding: var(--sp-8) var(--sp-4); }
  }
  /* A carta nova ocupa a largura toda (ganha da regra do celular deitado em responsive.css). */
  .panel #panelMail.writing > #mailForm { grid-column: 1 / -1; grid-row: 2; }

  /* O "?" dos atributos extras (forge.css) dentro da carta: a área de toque passa de 44 px com folga. */
  #panelMail .afx-q::before { inset: -8px; }
  #panelMail .afx-q.sm::before { inset: -12px; }

  /* Caixa vazia ou carregando: o aviso ocupa a largura toda (não sobra uma coluna vazia à direita). */
  #panelMail:has(> #mailList > :is(.ui-empty, .ui-loading)) > #mailList { grid-column: 1 / -1; }
  /* ---- Suporte (docs/design.md). Dono: correio-suporte. Prefixo su-; o desenho em ../support/panel.ts. ----
     A fila da staff (sf-*) continua no staff.css. "Novo pedido" num cartão e "Meus pedidos" ao lado (a partir de
     44em) ou embaixo; cada pedido com a cor da situação na borda (aberto, em atendimento, resolvido). */
  .su-grid { display: grid; gap: var(--sp-5); align-items: start; }
  .su-new { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  .su-form { display: grid; gap: var(--sp-4); min-width: 0; padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .su-mine { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  :is(.su-new, .su-mine) > .ui-h { margin: 0; }
  .su-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
  .su-count { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .su-kinds > button { flex: 1 0 auto; }
  .su-new .ui-input { font-size: var(--fs-md); }
  .su-mute { padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, var(--c-danger) 45%, transparent); border-left: 3px solid var(--c-danger); border-radius: var(--r-sm); color: var(--c-text); line-height: var(--lh); overflow-wrap: anywhere; }
  .su-list { display: grid; gap: var(--sp-2); }
  .su-ticket { --st: var(--c-line-strong); display: grid; gap: var(--sp-2); min-width: 0; padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-left: 3px solid var(--st); border-radius: var(--r-sm); }
  .su-ticket.st0 { --st: var(--c-warn); }
  .su-ticket.st1 { --st: var(--c-info); }
  .su-ticket.st2 { --st: var(--c-ok); }
  .su-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
  .su-kind { color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .su-num { color: var(--c-text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .su-ticket-head > .ui-pill { margin-left: auto; }
  .su-meta { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
  .su-meta b { color: var(--c-text-2); font-weight: var(--fw-semi); }
  .su-msg { margin: 0; color: var(--c-text); line-height: var(--lh); white-space: pre-wrap; overflow-wrap: anywhere; }
  .su-resp { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .su-resp-by { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  .su-resp p { margin: 0; color: var(--c-text-2); line-height: var(--lh); white-space: pre-wrap; overflow-wrap: anywhere; }
  .su-resp.waiting { background: none; border-style: dashed; }
  @container painel (max-width: 30em) {
    .su-form { padding: var(--sp-3); }
    .su-form .ui-actions > .ui-btn { flex: 1 1 auto; }
  }
  @container painel (min-width: 44em) {
    .su-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  }
  /* ---- Log de Atualizações (docs/design.md). Dono: correio-suporte. Prefixo lg-; o desenho em ./panel.ts. ----
     Cada tipo de mudança tem a sua cor (rules.ts, LOG_TYPES): a bolinha da aba e a etiqueta da mudança. */
  #panelLog:not([hidden]) { display: grid; gap: var(--sp-3); }
  .lg-intro { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
  .lg-tabs > button { gap: var(--sp-2); }
  .lg-dot { flex: none; width: 8px; height: 8px; background: var(--c); border-radius: 50%; }
  .lg-n { color: var(--c-text-muted); font: var(--fw-semi) var(--fs-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
  .lg-tabs > button.on .lg-n { color: var(--c-text-2); }
  .lg-list { display: grid; gap: var(--sp-2); align-content: start; }
  .lg-list > .ui-h { margin: var(--sp-3) 0 0; }

  /* A mais recente: cartão em destaque, sempre aberto. */
  .lg-latest { display: grid; gap: var(--sp-2); padding: var(--sp-4); background: radial-gradient(120% 100% at 0 0, color-mix(in srgb, var(--c-violet) 16%, transparent), transparent 65%), var(--c-surface-1); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .lg-latest-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .lg-when, .lg-date { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .lg-latest-title { margin: 0; color: var(--c-title); font: var(--fw-regular) var(--fs-d-lg)/1.05 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  .lg-sum { margin: 0; color: var(--c-text-2); line-height: var(--lh); }
  .lg-latest > .lg-changes { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }

  /* As mudanças: a etiqueta do tipo numa coluna de largura fixa e o texto ao lado. */
  .lg-changes { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
  .lg-changes > li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: start; gap: var(--sp-3); }
  .lg-tag { justify-self: start; padding: 2px var(--sp-2); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: var(--r-sm); color: var(--c); font: var(--fw-bold) var(--fs-xs)/1.35 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .lg-text { color: var(--c-text); line-height: var(--lh); overflow-wrap: anywhere; }

  /* As anteriores: a data uma vez por dia e cada atualização numa linha que abre. */
  .lg-date { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
  .lg-date::after { content: ""; flex: 1; border-top: 1px solid var(--c-line-soft); }
  .lg-entry { background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .lg-entry.open { background: var(--c-surface-1); border-color: var(--c-line); }
  .lg-entry > .lg-changes { padding: var(--sp-1) var(--sp-4) var(--sp-4); }
  .lg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--ctl-lg); margin: 0; padding: var(--sp-3) var(--sp-4); background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; color: inherit; font: inherit; text-align: left; }
  .lg-head:hover:not(:disabled) { background: var(--c-surface-2); filter: none; }
  .lg-head-main { display: grid; gap: 2px; min-width: 0; }
  .lg-title { color: var(--c-text-strong); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
  .lg-head .lg-sum { font-size: var(--fs-sm); }
  .lg-head-side { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; }
  .lg-chev { width: .5em; height: .5em; margin-top: -.2em; border: solid var(--c-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-fast); }
  .lg-entry.open .lg-chev { margin-top: .2em; transform: rotate(-135deg); }

  /* As abas quebram a linha quando não cabem (.ui-tabs.wrap do kit). Janela estreita: a etiqueta em cima do texto. */
  @container painel (max-width: 30em) {
    .lg-changes > li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  }
  /* ---- Rede (docs/design.md). Dono: correio-suporte. Prefixo nt-; o desenho em ../net/panel.ts. ----
     A ida e volta em destaque, com a cor de como está; embaixo, uma linha por número (rótulo à esquerda, valor à direita). */
  #net.nt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nt-ping { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .nt-ping.ok { border-left-color: var(--c-ok); }
  .nt-ping.warn { border-left-color: var(--c-warn); }
  .nt-ping.danger { border-left-color: var(--c-danger); }
  .nt-ping dt { color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .nt-ping dd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); text-align: left; }
  .nt-ms { color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-xl)/1 var(--font-display); letter-spacing: .02em; }
  .nt-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--c-line-soft); }
  .nt-row:last-child { border-bottom: 0; }
  .nt-row dt { color: var(--c-text-2); }
  .nt-row dd { color: var(--c-text); font-weight: var(--fw-semi); white-space: nowrap; }
  .nt-hint { margin: var(--sp-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
  /* ---- Celular, tablet e telas grandes ----
     Arranjos do jogo pela tela (o JS guarda a aba aberta em data-sheet no .game):
     - computador: as três colunas lá de cima;
     - tablet em pé ou janela estreita (600 a 999 px): mapa em cima e, embaixo,
       a Caçada ao lado de um painel com abas (Chat, Personagem, Espólios);
     - celular em pé (até 599 px): mapa grande, a Caçada numa faixa embaixo dele
       e as abas, que abrem e fecham (fechadas, o mapa cresce);
     - celular deitado (até 500 px de altura): mapa à esquerda e, à direita, as
       quatro abas e a barra de telas.
     Nesses arranjos as colunas viram display: contents e cada seção vai para a
     sua área do grid. */
  html, body { overscroll-behavior: none; }
  button { -webkit-tap-highlight-color: transparent; }
  button, a, input, select, textarea, label, .skill, .feed, .modal, .panel { touch-action: manipulation; }
  .game { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .topbar, .dock, .sheet-tabs, .hunt-stats, .hunt-actions, .map, .slot, .tile, .mk-pick { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .feed, #lootList, #mailList, .mk-pick, .sf-list { overscroll-behavior: contain; }
  .mapframe { position: relative; }
  /* Textos que só valem para o mouse ou só para o toque. */
  html:not(.touch) .touch-only, html.touch .mouse-only { display: none !important; }

  /* Abas do painel de baixo (só no celular e no tablet). */
  .sheet-tabs { display: none; gap: 3px; padding: 3px; background: var(--pane); border: 2px solid var(--line); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-hi), 0 2px 0 var(--c-bg-deep); }
  .sheet-tabs button { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 4px 6px; background: none; border: 0; border-radius: 3px; color: var(--muted); font: 400 19px/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; }
  .sheet-tabs button.on { background: var(--c-violet-deep); color: #fff; box-shadow: inset 0 -2px 0 var(--violet); }
  .sheet-tabs em { flex: none; font-style: normal; font-size: 16px; line-height: 1; }
  .sheet-tabs span { overflow: hidden; text-overflow: ellipsis; }
  .sheet-tabs .badge { top: -5px; right: 1px; }
  .sheet-tabs .side-tog { display: none; }

  /* Direcional na tela de toque (na cidade e na caçada manual): arrasta a
     bolinha e o personagem anda, como no WASD. */
  .joy { display: none; position: absolute; z-index: 3; left: 14px; bottom: 14px; width: 116px; height: 116px; border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; background: radial-gradient(circle, rgba(123, 97, 255, .16) 0 30%, rgba(15, 13, 26, .58) 31% 100%); border: 2px solid rgba(185, 169, 255, .32); box-shadow: inset 0 0 0 1px rgba(6, 5, 11, .6), 0 2px 0 rgba(6, 5, 11, .6); }
  .joy::before { content: ""; position: absolute; inset: 21%; border-radius: 50%; border: 1px dashed rgba(185, 169, 255, .35); }
  .joy i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #a897ff, var(--c-violet-strong) 68%, #3b2a96); border: 2px solid #cbbfff; box-shadow: 0 3px 0 var(--c-bg-deep), 0 0 14px rgba(123, 97, 255, .55); transform: translate(var(--jx, 0px), var(--jy, 0px)); transition: transform .12s ease-out; }
  .joy.on { border-color: rgba(185, 169, 255, .65); }
  .joy.on i { transition: none; }
  .touch .game.can-walk .joy { display: block; }
  /* Tela baixa (celular pequeno ou deitado): direcional menor. */
  @media (max-height: 640px) {
    .joy { left: 10px; bottom: 10px; width: 100px; height: 100px; }
    .joy i { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  }
  /* Com o direcional à esquerda, as magias vão para a direita, logo à esquerda
     dos botões de zoom (em 2 x 2 se o mapa for estreito). */
  .touch .game.can-walk .skills { left: auto; right: 56px; transform: none; }
  @container mapa (max-width: 459px) { .touch .game.can-walk .skills { display: grid; grid-template-columns: repeat(2, auto); } }
  .touch .skill .key { display: none; }

  /* Dica por toque: o JS posiciona perto do que foi tocado. */
  .touch-tip { position: fixed; z-index: 90; max-width: min(20em, calc(100vw - 16px)); padding: .6em .75em; background: #0f0d1c; border: 1px solid #6a5acd; border-radius: 4px; box-shadow: 0 6px 18px #000a; color: #dcd9e8; font: 13.5px/1.4 system-ui, sans-serif; white-space: pre-line; pointer-events: none; }
  .touch-tip em { display: block; margin-top: .35em; color: #ffb37a; font-style: normal; }
  .touch .help + .tip { display: none !important; }

  /* Avisos presos no topo da tela respeitam o recorte da câmera do celular. */
  @media (max-width: 900px), (max-height: 640px) {
    .upd-bar, .upd-new, .mod-card { top: max(10px, env(safe-area-inset-top)); }
  }

  /* Escolha de classe: a tela rola quando não cabe; em pé e estreito, cada
     classe numa linha, com o retrato à esquerda. */
  #classCard { overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  @media (max-width: 459px) {
    .class-pick { grid-template-columns: minmax(0, 1fr); }
    .class-pick button { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 12px; text-align: left; }
    .class-pick .portrait { grid-row: span 3; width: 4.4em; height: 4.4em; }
  }
  @media (pointer: coarse) { #classCard button { min-height: 44px; } }
  @media (max-height: 500px) and (min-width: 600px) {
    #classCard .sub { margin: .2rem 0 .6rem; }
    .class-pick button { padding: 8px 8px; gap: 4px; }
    .class-pick .portrait { width: 3.6em; height: 3.6em; }
    .class-pick small { font-size: 12px; }
  }
  /* Entrar deitado: o nome do jogo à esquerda e o cartão à direita, sem rolar. */
  @media (max-height: 500px) and (min-width: 600px) {
    .ln-wrap { width: min(54rem, 100%); grid-template-columns: minmax(0, 1fr) minmax(19rem, 23.5rem); grid-template-areas: "hero card" "news card"; gap: .8rem 1.6rem; }
    .ln-hero { justify-items: start; gap: .5rem; text-align: left; }
    .ln-logo { font-size: clamp(2.6rem, 7vw, 3.6rem); }
    .ln-tag { font-size: .92rem; }
    .ln-card { gap: .6rem; padding: .75rem 1rem .9rem; }
    .auth-form { gap: .55rem; }
    .ln-title { font-size: 1.5rem; }
    .fld { gap: .2rem; }
    .fld input { height: 2.75rem; }
    .ln-go { height: 2.9rem; }
  }

  /* Arranjos com abas (celular e tablet): as colunas somem e cada seção vai
     para a sua área. Os títulos das seções que já têm aba saem. */
  @media (max-width: 999px), (max-height: 500px) {
    .col { display: contents; }
    .sheet-tabs { display: flex; grid-area: tabs; }
    #meBox h2, #lootBox h2, #chatBox h2 .h2-txt, #chatBox h2::before { display: none; }
    #meBox, #lootBox { padding-top: 10px; }
    .loot { grid-template-rows: auto minmax(0, 1fr) auto; }
    #chatBox h2 { padding-block: 5px; }
    #modeBtn[hidden] + #actionBtn { grid-column: 1 / -1; }
    .dock button { min-width: 0; }
    /* Escrevendo no chat (teclado do celular aberto), o chat fica à mostra. */
    .game.typing #chatBox { display: grid !important; }
    .game.typing #meBox, .game.typing #lootBox { display: none !important; }
  }
  /* Onde o botão é estreito, "Voltar à cidade" vira "Voltar" (o nome inteiro
     fica no aria-label e aparece segurando o dedo). */
  @media (max-width: 459px), (max-height: 500px) and (min-width: 600px) { .act-more { display: none; } }
  /* Abas do chat em colunas estreitas (computador médio, celular deitado). */
  @media (min-width: 1000px) and (max-width: 1250px), (max-height: 500px) and (min-width: 600px) {
    .chat-tabs button { padding-inline: 2px; font-size: 15px; }
  }

  /* Tablet em pé (e janela estreita): mapa em cima; embaixo, a Caçada ao lado
     das abas Chat, Personagem e Espólios. A linha das abas tem altura fixa: a
     Caçada ocupa as duas linhas e não pode esticar a das abas. */
  @media (min-width: 600px) and (max-width: 999px) and (min-height: 501px) {
    .game { gap: 5px; grid-template: "top top" auto "map map" minmax(0, 1fr) "hunt tabs" 54px "hunt sheet" minmax(0, 30%) "dock dock" auto / minmax(0, 1fr) minmax(0, 1.5fr); }
    #huntBox { grid-area: hunt; overflow: auto; }
    #chatBox, #meBox, #lootBox { grid-area: sheet; }
    #meBox, #lootBox, .game[data-sheet="me"] #chatBox, .game[data-sheet="loot"] #chatBox { display: none; }
    .game[data-sheet="me"] #meBox, .game[data-sheet="loot"] #lootBox { display: grid; }
    .sheet-tabs [data-sheet="hunt"] { display: none; }
    .topbar > .frame { padding: 6px 8px; }
    .me { flex: 1; width: auto; min-width: 0; }
    .me .portrait { width: 3.2em; height: 3.2em; }
    .res { min-width: 0; gap: 6px; }
    .res small { display: none; }
    .res span { font-size: 24px; }
    .hunt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hunt-stats div { padding: 5px 7px; }
    .hunt-stats span { font-size: 20px; }
    .dock { gap: 5px; }
    .dock button { padding: 9px 4px; }
  }
  @media (min-width: 600px) and (max-width: 759px) and (min-height: 501px) {
    .dock button { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 15px; }
  }

  /* Celular (em pé ou deitado): nome do mapa por cima do mapa, barra de telas
     só com os ícones e cada tela ocupando a tela inteira, com o topo preso. */
  @media (max-width: 599px), (max-height: 500px) {
    .mapframe { grid-template-rows: minmax(0, 1fr); }
    .map-head { position: absolute; z-index: 2; top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 4px 9px; background: rgba(15, 13, 26, .82); border: 1px solid var(--line); border-radius: 3px; pointer-events: none; }
    .map-head h2 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mapHint { display: none; }
    .skills { font-size: 14px; bottom: 8px; gap: 5px; padding: 5px; }
    .skill .cost { font-size: 12px; }
    #huntBox h2 { display: none; }
    #huntBox { padding-top: 8px; }
    .dock { gap: 2px; }
    .dock button { flex-direction: column; gap: 0; padding: 4px 1px; min-height: 46px; }
    .dock button span, .dock kbd { display: none; }
    .badge, .chat-tabs b { font-size: 12px; }
    .hbar span { font-size: 12px; }
    .msg time, .sys time, #lootList li small { font-size: 12px; }
    .msg .tag-role, .sys .tag-role { font-size: 11px; }
    /* Fundo opaco: o desfoque do que está atrás não aparece e só gastaria a GPU. */
    .modal { place-items: stretch; background: var(--c-window); backdrop-filter: none; }
    .modal .panel { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; --pt: max(.75em, env(safe-area-inset-top)); --pr: max(.9em, env(safe-area-inset-right)); --pb: max(1.2em, env(safe-area-inset-bottom)); --pl: max(.9em, env(safe-area-inset-left)); }
    /* Faixa do título abaixo do recorte da câmera; fechar com 44 px. */
    .panel-top { padding-top: max(calc(var(--pt) * .7), var(--safe-t)); }
    .panel-head button { width: var(--touch); height: var(--touch); font-size: 1.1em; }
    /* Título menor no celular: cabe numa linha e a faixa presa não come a tela. */
    .panel-head strong { font-size: var(--fs-d-md); }
  }
  /* Abas estreitas: só a aberta mostra o nome; as outras, o ícone. */
  @media (max-width: 459px), (max-height: 500px) and (min-width: 600px) {
    .sheet-tabs button:not(.on) span { display: none; }
    .sheet-tabs button.on { flex-grow: 2.6; }
  }

  /* Celular em pé: o mapa ocupa quase tudo. Embaixo dele, a faixa da Caçada e
     as abas (Caçada, Chat, Personagem, Espólios), paradas logo acima da barra
     de telas: a aba aberta toma o lugar da faixa da Caçada e tocar nela de novo
     volta para a Caçada. O mapa nunca fica com menos de 120 px. */
  @media (max-width: 599px) {
    .game { gap: 4px; padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
      grid-template: "top" auto "map" minmax(0, 1fr) "hunt" auto "tabs" auto "dock" auto / minmax(0, 1fr); }
    .game:not([data-sheet="hunt"]) { grid-template: "top" auto "map" minmax(min(120px, 30%), 1fr) "sheet" minmax(0, 44%) "tabs" auto "dock" auto / minmax(0, 1fr); }
    .game[data-sheet="me"] { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
    #huntBox { grid-area: hunt; }
    #chatBox, #meBox, #lootBox { grid-area: sheet; display: none; }
    .game:not([data-sheet="hunt"]) #huntBox { display: none; }
    .game[data-sheet="chat"] #chatBox, .game[data-sheet="me"] #meBox, .game[data-sheet="loot"] #lootBox { display: grid; }
    .sheet-tabs { padding: 2px; }
    /* Barra de cima: retrato, nome e barras; ouro e diamantes empilhados; o
       botão do cargo só com o ícone. */
    .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; }
    .topbar > .frame { padding: 4px 8px; }
    .me { grid-row: span 2; width: auto; min-width: 0; gap: 8px; }
    .me .portrait { width: 3em; height: 3em; }
    .me-info { gap: 3px; }
    .me-name { font-size: 19px; }
    .hbar { height: 14px; }
    .res { min-width: 0; gap: 7px; padding: 2px 10px 2px 9px; }
    .res small { display: none; }
    .res span { font-size: 20px; }
    .res .coin { width: 14px; height: 14px; }
    .role-btn { grid-column: 3; grid-row: 1; margin: 0; padding: 0; width: 44px; justify-content: center; }
    .gear-btn { grid-column: 3; grid-row: 2; width: 44px; }
    .role-btn[hidden] + .gear-btn { grid-row: 1 / span 2; margin: 0; }
    .role-btn .label { display: none; }
    /* Faixa da Caçada: os números numa linha e os botões noutra. */
    #huntBox { padding: 7px; gap: 7px; }
    #huntIdle { display: none; }
    .hunt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .hunt-stats div { padding: 2px 7px; }
    .hunt-stats span { font-size: 18px; }
    .hunt-actions { display: flex; gap: 6px; }
    .hunt-actions button { flex: 1 1 auto; min-width: 0; padding: 8px 10px; white-space: nowrap; }
    #meBox, #lootBox { padding: 10px; }
    #chatBox { padding: 0 8px 8px; gap: 8px; }
    #chatBox h2 { margin: 0 -8px; padding: 5px 6px; }
    .me-stats { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 12px; }
    /* Escrevendo no chat com o teclado aberto: só o mapa e o chat. */
    .touch .game.typing { grid-template: "map" minmax(0, 1fr) "sheet" minmax(0, 66%) / minmax(0, 1fr); }
    .touch .game.typing .topbar, .touch .game.typing #huntBox, .touch .game.typing .sheet-tabs, .touch .game.typing .dock { display: none; }
    #bossBox .bb-head { display: none; }
    .hunt-stats small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .touch .game.typing .map > :is(.skills, .buffs, .pot-hud, .zoom-ctl, .joy) { display: none; }
    .game:is([data-sheet="chat"], [data-sheet="me"], [data-sheet="loot"]) .pot-hud { display: none; }
    /* Faixa da Caçada recolhida (tocar de novo na aba Caçada): só o mapa. */
    .game[data-sheet="none"] { grid-template: "top" auto "map" minmax(0, 1fr) "tabs" auto "dock" auto / minmax(0, 1fr); }
    .game[data-sheet="none"] #huntBox { display: none; }
  }
  /* Celular bem estreito: o Auto Helper desce para uma linha própria. */
  @media (max-width: 359px) {
    .hunt-actions { flex-wrap: wrap; }
    .hunt-actions .helper-btn { flex-basis: 100%; }
  }

  /* Celular deitado: pouca altura. O mapa vai do topo ao pé, à esquerda; à
     direita, uma coluna com o personagem (nome, nível, vida, mana e XP), ouro e
     diamantes, as abas, o painel aberto e a barra de telas em 2 x 5. A coluna
     recolhe (botão » nas abas, ou tocar de novo na aba aberta) e vira um trilho
     só com os ícones das abas; o personagem passa para cima do mapa, pequeno. */
  @media (max-height: 500px) and (min-width: 600px) {
    .game { --side: clamp(236px, 35vw, 316px); --gp: max(4px, env(safe-area-inset-top)); --gl: max(6px, env(safe-area-inset-left)); gap: 4px; padding: var(--gp) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) var(--gl);
      grid-template: "map top" auto "map tabs" auto "map sheet" minmax(0, 1fr) "map dock" auto / minmax(0, 1fr) var(--side); }
    #huntBox, #chatBox, #meBox, #lootBox { grid-area: sheet; display: none; }
    .game[data-sheet="hunt"] #huntBox, .game[data-sheet="chat"] #chatBox, .game[data-sheet="me"] #meBox, .game[data-sheet="loot"] #lootBox { display: grid; }
    .game.typing #huntBox { display: none !important; }
    #huntBox, #meBox { overflow: auto; overscroll-behavior: contain; }
    #meBox, #lootBox { padding: 8px; }
    /* Abas: o » no fim recolhe a coluna. */
    .sheet-tabs { padding: 2px; gap: 2px; container: abas / inline-size; }
    .sheet-tabs button { min-height: 40px; padding-inline: 3px; gap: 4px; }
    .sheet-tabs .side-tog { display: flex; flex: 0 0 40px; font: 700 20px/1 system-ui, sans-serif; color: #c9c0ff; }
    /* Caçada em duas linhas baixas: os números e os três botões. */
    #huntBox { padding: 6px; gap: 6px; align-content: start; }
    .hunt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
    .hunt-stats div { padding: 2px 5px; }
    .hunt-stats small { font-size: 11px; }
    .hunt-stats span { font-size: 17px; }
    .hunt-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    #modeBtn[hidden] + #actionBtn { grid-column: span 2; }
    .hunt-actions button { min-width: 0; padding: 4px 3px; font-size: 13px; line-height: 1.1; overflow-wrap: anywhere; }
    .hunt-actions .helper-btn { grid-column: auto; flex-direction: column; gap: 4px; line-height: 1; }
    .hb-dots i { width: 6px; height: 6px; }
    #huntIdle { display: none; }
    /* Barra de telas em 2 linhas de 5 ícones. */
    .dock { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
    .dock button { min-height: 42px; }
    /* Personagem no topo da coluna, num quadro só: nome e nível, a vida na
       largura toda, mana e XP lado a lado e, no pé do quadro, ouro e diamantes.
       À direita, a engrenagem e o cargo (Suporte) um em cima do outro. */
    .topbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
    .topbar > .frame { padding: 3px 6px; }
    .topbar > .me { grid-row: 1 / -1; grid-column: 1 / 3; align-items: start; width: auto; min-width: 0; gap: 6px; padding: 4px 6px 30px; }
    .me .portrait { width: 2.6em; height: 2.6em; }
    .me-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 4px; }
    .me-name { grid-column: 1 / -1; font-size: 17px; }
    .hbar.hp { grid-column: 1 / -1; }
    .hbar { height: 14px; }
    .hbar span { font-size: 11px; }
    .hbar.xp span { font-size: 0; }
    .hbar.xp span::before { content: attr(data-pct); font-size: 11px; }
    .topbar > .res { grid-row: 2; align-self: end; z-index: 1; min-width: 0; height: 22px; margin: 0 0 5px; padding: 0 8px; gap: 6px; background: none; border: 0; box-shadow: none; pointer-events: none; }
    .topbar > .res:nth-of-type(2) { grid-column: 1; }
    .topbar > .res:nth-of-type(3) { grid-column: 2; }
    .res small { display: none; }
    .res span { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
    .res .coin { width: 13px; height: 13px; }
    .topbar .role-btn { grid-column: 3; grid-row: 2; min-height: 0; margin: 0; padding: 0; justify-content: center; }
    .role-btn .label { display: none; }
    .role-btn .ic { width: 22px; height: 22px; }
    .topbar .gear-btn { grid-column: 3; grid-row: 1; width: auto; min-height: 0; margin: 0; }
    .topbar .role-btn[hidden] + .gear-btn { grid-row: 1 / -1; }
    /* Chat aberto: a barra de telas sai e o chat fica com a altura toda. */
    .game[data-sheet="chat"]:not(.side-min) .dock { display: none; }
    /* Escrevendo no chat (teclado aberto, quase sem altura): o mapa e o chat
       lado a lado, sem o resto. */
    .touch .game.typing { grid-template: "map sheet" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1.25fr); }
    .touch .game.typing :is(.topbar, .sheet-tabs, .dock) { display: none; }
    .touch .game.typing #chatBox { padding: 0 6px 6px; gap: 4px; }
    .touch .game.typing #chatBox h2 { display: none; }
    .touch .game.typing #chatBox { grid-template-rows: minmax(0, 1fr) auto; }
    .touch .game.typing .map > :is(.skills, .buffs, .pot-hud, .zoom-ctl, .joy) { display: none; }

    /* Coluna recolhida: trilho com as abas em pé e o personagem por cima do mapa. */
    .game.side-min { grid-template: "map tabs" minmax(0, 1fr) / minmax(0, 1fr) 50px; }
    .game.side-min :is(#huntBox, #chatBox, #meBox, #lootBox, .dock, .topbar > :not(.me)) { display: none !important; }
    .game.side-min .sheet-tabs { flex-direction: column; justify-content: flex-start; padding: 3px; gap: 4px; }
    .game.side-min .sheet-tabs button { flex: 0 0 44px; min-height: 44px; padding: 0; }
    .game.side-min .sheet-tabs button span { display: none; }
    .game.side-min .sheet-tabs button.on { flex-grow: 0; background: none; box-shadow: none; color: var(--muted); }
    .game.side-min .sheet-tabs em { font-size: 19px; }
    .game.side-min .sheet-tabs .side-tog { order: -1; flex-basis: 44px; background: var(--c-violet-deep); color: #fff; }
    .game.side-min .topbar { grid-area: auto; position: absolute; z-index: 4; top: calc(var(--gp) + 4px); left: calc(var(--gl) + 4px); display: block; width: min(15.5rem, 34%); pointer-events: none; }
    .game.side-min .me { pointer-events: auto; padding: 3px 6px; background: rgba(15, 13, 26, .86); }
    .game.side-min .me .portrait { width: 2.3em; height: 2.3em; }
    .game.side-min .me-name { font-size: 16px; }
    .game.side-min .map-head { left: 50%; transform: translateX(-50%); max-width: 30%; }
    .game.side-min.typing #chatBox { display: grid !important; }
    /* Luta de boss: a barra do boss vai para a direita do personagem; na coluna,
       a caixa da luta sem o nome (já está na barra). */
    .game.side-min.hud-boss .topbar { width: 13.5rem; }
    .game.side-min.hud-boss .boss-hud { left: calc(13.5rem + 14px); right: 8px; width: auto; max-width: 440px; transform: none; }
    #bossBox .bb-head { display: none; }
    .hunt-stats small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  }

  /* Deitado com a barra do navegador (pouca altura): os números da Caçada
     numa linha baixa, com o nome ao lado do valor. */
  @media (max-height: 380px) and (min-width: 600px) {
    #hudHunt div { display: flex; align-items: baseline; gap: 4px; min-width: 0; padding: 1px 5px; }
    #hudHunt span { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #hudHunt small { flex: none; }
    .hunt-dead { display: none !important; }
    #hudHunt > div:first-child small { display: none; }
    /* O relógio (ampulheta do atlas da interface, quadro 38: ui/kit/icons.ts) antes do tempo da caçada. */
    #hudHunt > div:first-child span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: url('/img/ui/icones.png') -608px 0 / 768px 16px no-repeat; image-rendering: pixelated; }
  }

  /* Aprimorar e Troca de Classe em tela pequena: o título e os botões do pé
     ficam presos enquanto a janela rola (o botão principal sempre à vista). */
  @media (max-width: 599px), (max-height: 640px) {
    .enh-wrap .enh-box { padding: .7em; }
    .enh-wrap .enh-head { position: sticky; z-index: 2; top: -.7em; margin: -.7em -.7em 0; padding: .5em .7em .35em; background: #1b1828; }
    .enh-wrap .enh-head button { min-width: var(--touch); min-height: var(--touch); padding: 0; }
    .enh-wrap .enh-actions:last-child { position: sticky; z-index: 2; bottom: -.7em; margin: 0 -.7em -.7em; padding: .45em .7em .7em; background: #1b1828; box-shadow: 0 -8px 10px -6px #000a; }
  }
  /* Janelas no celular deitado (pouca altura): topo baixo, e o que é longo em
     duas colunas para os botões caberem sem rolar. */
  @media (max-height: 500px) and (min-width: 600px) {
    .modal .panel { --pt: max(.4em, env(safe-area-inset-top)); --pb: max(.8em, env(safe-area-inset-bottom)); --pr: max(1em, env(safe-area-inset-right)); --pl: max(1em, env(safe-area-inset-left)); scroll-padding-top: 3.4em; }
    .panel-top { margin-bottom: .6em; padding-bottom: .35em; }
    .panel-head { min-height: 0; }
    .panel-head strong { font-size: var(--fs-d-md); }
    /* Aprimorar e Troca de Classe: a janela usa a largura; topo e botões presos. */
    .enh-wrap .enh-box { width: min(100%, 52em); max-height: 100%; padding: .7em .9em; gap: .45em .9em; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; }
    .enh-wrap .enh-box > * { grid-column: 2; }
    .enh-wrap .enh-box > :is(.enh-head, .enh-actions:last-child, .enh-msg, .cc-from, .cc-done, .cc-pick, .cc-list, .cc-msg) { grid-column: 1 / -1; }
    .enh-wrap .enh-box > :is(.enh-hero, .enh-cmp), .enh-box > .enh-h:first-of-type { grid-column: 1; }
    .enh-wrap .enh-head { position: sticky; z-index: 2; top: -.7em; margin: -.7em -.9em 0; padding: .5em .9em .35em; background: #1b1828; }
    .enh-wrap .enh-head button { min-width: var(--touch); min-height: var(--touch); padding: 0; }
    .enh-wrap .enh-actions:last-child { position: sticky; z-index: 2; bottom: -.7em; margin: 0 -.9em -.7em; padding: .45em .9em .7em; background: #1b1828; box-shadow: 0 -8px 10px -6px #000a; }
    .enh-wrap .enh-art { width: 64px; height: 64px; }
    .enh-wrap .enh-art .ii.x2 { width: 52px; height: 52px; }
    .enh-wrap .cc-box > * { grid-column: 1 / -1; }
    .enh-wrap .cc-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .enh-wrap .cc-pick button { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 10px; row-gap: 2px; padding: 8px 10px; text-align: left; }
    .enh-wrap .cc-pick .portrait { grid-row: span 2; width: 3.2em; height: 3.2em; }
    .enh-wrap .cc-pick small { grid-column: 1 / -1; font-size: 12px; }
    .enh-wrap .cc-from { padding: .35em .6em; }
    .enh-wrap .cc-from .portrait { width: 2.6em; height: 2.6em; }
    /* Tela de morte: o que aconteceu à esquerda, as saídas à direita. */
    .death-screen .dt-card { width: min(50em, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "head opts" "loss opts" "auto opts" "foot foot"; align-items: start; gap: .6em .9em; padding: .75em .9em .8em; }
    .death-screen .dt-card > * { grid-column: 1 / -1; }
    .death-screen .dt-card > .dt-head { grid-area: head; }
    .death-screen .dt-card > .dt-loss { grid-area: loss; }
    .death-screen .dt-card > .dt-opts { grid-area: opts; }
    .death-screen .dt-card > .dt-auto { grid-area: auto; }
    .death-screen .dt-card > .dt-foot { grid-area: foot; padding-top: .45em; }
    .death-screen .dt-head h3 { font-size: 2em; }
    .death-screen .dt-loss { padding: .5em .7em; }
    .death-screen .dt-loss .big { font-size: 1.8em; }
    .death-screen .dt-opts { gap: .45em; }
    .death-screen .dt-opt { padding: .5em .65em .6em; }
    /* Codex: o resumo numa linha (com Bônus e Histórico à direita) e as 8
       categorias numa linha só. */
    .modal .cx-sum { grid-template-columns: auto minmax(0, 1fr) auto; padding: .3em .5em; }
    .modal .cx-side { grid-column: auto; }
    .modal .cx-ring { width: 2.7em; height: 2.7em; }
    .modal .cx-ring b { font-size: 1em; }
    .modal .cx-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .modal .cx-tabs .lg { display: none; }
    .modal .cx-tabs .sm { display: inline; }
    .modal .cx-tabs button { padding: .3em .15em; }
    .modal .cx-tabs button .lb { font-size: 1.1em; }
    /* Spirits: o principal menor e as abas numa linha baixa. */
    .modal .sp-head { padding: .3em .5em; gap: .6em; }
    .modal .sp-head-art { width: 2.9em; height: 2.9em; }
    .modal .sp-tabs button { grid-auto-flow: column; align-items: baseline; justify-content: center; gap: .5em; padding: .35em .3em; }
    /* Mochila: espaços de pelo menos 44 px na coluna do inventário. */
    .panel .bag-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    /* Correio: a lista à esquerda e a carta aberta (ou a carta nova) à direita. */
    .panel #panelMail:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: .8em; align-items: start; }
    .panel #panelMail > :is(#mailDetail, #mailForm) { grid-column: 2; grid-row: 2; margin-top: 0; }
    /* Os anúncios na coluna estreita: duas linhas por anúncio, como em pé. */
    .modal .sp-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .modal .sp-counters { grid-column: auto; }
    .modal .sp-open { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
    .modal .sp-open-info { justify-items: start; }
  }

  /* Abas estreitas demais para o nome da aberta (celular deitado pequeno): só ícones. */
  @container abas (max-width: 280px) { .sheet-tabs button span { display: none; } .sheet-tabs button.on { flex-grow: 1; } }

  /* Telas por dentro, no celular em pé: uma coluna, abas que não cabem rolam de
     lado dentro da própria faixa, listas do Market em duas linhas e nenhum
     texto abaixo de 12 px (as tabelas viram cartões no bloco seguinte). */
  @container tela (max-width: 599px) {
    .modal { font-size: 15px; }
    .panel .fin-grid { grid-template-columns: minmax(0, 1fr); }
    .panel .sf-equip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel .ac3-line { grid-template-columns: minmax(0, 1fr) 8.5em; gap: .45em .6em; }
    .panel .ac3-line p { grid-column: 1 / -1; grid-row: 2; }
    .panel .ac3-line .ac3-opt { grid-row: 3; }
    .panel .ac3-line > button { grid-row: 3; grid-column: 2; }
    .panel .ac3-line .ac3-opt:empty { display: none; }
    /* Presente: os campos (ouro, diamantes, busca e item) na largura toda, o botão embaixo. */
    .panel .ac3-line.grant .ac3-opt { grid-column: 1 / -1; }
    .panel .ac3-line.grant > button { grid-row: 4; grid-column: 2; }
    .panel .ac3-reason { grid-template-columns: minmax(0, 1fr); }
    .panel .ac3-reason small { grid-column: 1; }
    .panel .ah-grid { grid-template-columns: minmax(0, 1fr); }
    .panel .map-cards, .panel .map-card.city, .panel .map-card.city .mc-body { grid-template-columns: minmax(0, 1fr); }
    .panel .map-card.city .mc-banner { height: 5.4em; border-right: 0; border-bottom: 2px solid var(--line); }
    /* Mochila: espaços de pelo menos 52 px (o ícone fica com 48 px). */
    .panel .bag-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .35em; }
    /* Painel da staff: as seções numa linha só; sub-abas, abas da ficha e
       filtros rolam de lado dentro da própria faixa (a aba aberta fica à vista). */
    .panel .sf-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(6.2em, 100%), 1fr)); width: auto; }
    .panel .sf-tabs button { padding: .45em .15em; font-size: 1.05em; }
    .panel :is(.sf-sub, .sf-ptabs, .sf-chips) { flex-wrap: nowrap; overflow: auto hidden; scrollbar-width: none; overscroll-behavior-x: contain; padding-right: 1.6em; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.6em), transparent); }
    .panel :is(.sf-sub, .sf-ptabs, .sf-chips)::-webkit-scrollbar { display: none; }
    .panel :is(.sf-sub, .sf-ptabs, .sf-chips) > * { flex: none; }
    .panel .sf-sub button { margin-bottom: 0; }
    /* Listas do Market: duas linhas por anúncio, sem cabeçalho. */
    /* Pedidos de suporte: a resposta numa linha e os botões embaixo. */
    .panel .sf-ticket .tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .panel .sf-ticket .tools input { grid-column: 1 / -1; }
    /* Nada abaixo de 12 px. */
    .panel :is(.lj-tag, .tag-role, .pix-st, .mc-badges span, .sf-row .kind, .sf-row .ev2, .ev, .lj-cats small, .mk-card .meta), .upd-new .tag { font-size: 12px; }
    .panel :is(.mc-sec small, .sf-stat small, .sf-facts small, .sf-slot small, .slot .label, .sf-row small, .mail-row small) { font-size: max(12px, .78em); }
  }

  /* Tabelas da staff e da carteira em painel estreito (celular, tablet em pé,
     celular deitado): cada linha vira um cartão, com o nome da coluna em cima
     de cada valor (data-label, posto pelo sfTable). Vale pela largura do
     próprio painel. */
  @container painel (max-width: 860px) {
    .sf-table { display: grid; gap: .45em; border: 0; overflow: visible; }
    .sf-row.head { display: none; }
    .sf-row { grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); grid-auto-flow: row dense; gap: .5em .8em; padding: .6em .75em; border: 1px solid var(--line); border-radius: 4px; background: var(--c-surface-1); }
    .sf-cell[data-label]::before { content: attr(data-label); display: block; margin-bottom: .1em; color: var(--muted); font-size: max(12px, .8em); font-weight: 700; }
    .sf-cell.wide { grid-column: 1 / -1; }
    .sf-cell.blank { display: none; }
    .sf-row .fin-tools { justify-content: flex-start; flex-wrap: wrap; }
    .sf-table .sf-empty { border: 1px solid var(--line); border-radius: 4px; }
  }

  /* Toque: alvos de pelo menos 44 px, sem atalhos de teclado e campos com fonte
     de 16 px (abaixo disso o iPhone dá zoom na página ao focar). */
  @media (pointer: coarse) {
    .game button, .panel button { min-height: 44px; }
    .panel-head button { width: var(--touch); height: var(--touch); }
    .chat-tabs button { position: relative; min-height: 40px; }
    /* As abas do chat desenham 40 px (o quadro do chat não cresce); o toque pega 2 px a mais em cima e embaixo. */
    .chat-tabs button::after { content: ""; position: absolute; inset: -2px 0; }
    /* Controles que desenham menos de 44 px de propósito e ganham a área de toque por fora (::before/::after). */
    .panel :is(.tile, .slot, .switch, .help, .afx-q, .mk-pick button, button.link) { min-height: 0; }
    .panel :is(input:not([type=checkbox], [type=radio], [type=range]), select) { min-height: 44px; }
    /* Os diálogos por cima da janela (Aprimorar, Forja, Evoluir...) moram fora do .panel: mesmos campos de 44 px. */
    .enh-wrap :is(input:not([type=checkbox], [type=radio], [type=range]), select) { min-height: 44px; }
    /* Linhas de atributo com o "?" (Personagem): 44 px de altura, senão a área do "?" de uma linha invade a da outra. */
    .panel .attr { min-height: var(--touch); }
    /* Barras de arrastar (Auto Helper, Evoluir): a faixa de toque com 44 px; o desenho da barra continua no meio. */
    :is(.panel, .enh-wrap) input[type=range] { min-height: var(--touch); }
    .fin-nav button { min-width: 44px; }
    .pw .eye { width: 44px; height: 44px; }
    .bag-pages button { min-width: 44px; }
    .sp-cine-bar .cx-btn { min-height: 44px; }
    .skp-x { width: 32px; height: 32px; }
    .zoom-ctl button { width: 40px; height: 40px; }
    /* Zoom e o » da coluna (celular deitado) desenham 40 px; a área de toque chega a 44 por fora. */
    .zoom-ctl button, .sheet-tabs .side-tog { position: relative; }
    .zoom-ctl button::after { content: ""; position: absolute; inset: -3px; }
    .sheet-tabs .side-tog::after { content: ""; position: absolute; inset: -2px; }
    button.link { position: relative; }
    button.link::after { content: ""; position: absolute; inset: -12px -4px; }
    /* Controles pequenos e redondos: a área de toque cresce por fora, sem mudar o desenho. */
    .help { position: relative; }
    .help::after { content: ""; position: absolute; inset: -10px; }
    .help::after { inset: -11px -12px; }
    .switch { width: 3.3em; height: 1.85em; }
    .switch::before { content: ""; position: absolute; inset: -9px -6px; }
    .switch::after { width: calc(1.85em - 6px); height: calc(1.85em - 6px); }
    .switch[aria-pressed="true"]::after { transform: translateX(1.45em); }
    .help { width: 1.9em; height: 1.9em; }
    .ah-card input[type=range] { height: 2.2em; }
    .hbar span { font-size: 12px; }
    kbd { display: none; }
    input, textarea, select { font-size: 16px !important; }
  }
  /* Sem mouse, o botão responde ao toque com um brilho. */
  /* Sem mouse, o :hover gruda no último toque: os realces de passar o mouse
     não ficam acesos depois de tocar (o brilho do toque continua no :active). */
  @media (hover: none) {
    :is(.ln-go, #classOk, button.tile, .slot, .best-btn, .cx-rt, .cx-all, .cx-tbtn, .cx-mini, .cx-btn, .bs-act .bs-go):hover:not(:active) { filter: none; }
    .lj-pack:hover:not(:disabled) { border-color: #2c3f63; transform: none; }
    .gear-btn:hover { background: var(--pane); color: var(--c-title); }
    .gear-btn:hover svg { transform: none; }
    .dock button:hover { border-color: var(--line); background: var(--pane); }
    .dock button.vip:hover { border-color: var(--c-gold-dark); }
    .me:hover { border-color: var(--line); }
    .zoom-ctl button:hover:not(:disabled) { border-color: var(--line); }
    .role-btn:hover { background: var(--pane); }
  }
  @media (hover: none) { button:not(:disabled):active { filter: brightness(1.2); } }
  @media (prefers-reduced-motion: reduce) {
    .hbar i, .upd-track i, .switch::after, .ah-card, .joy i, .panel-top { transition: none; }
  }

  /* Telas grandes: a interface cresce junto, para não ficar miúda perto do mapa. */
  @media (min-width: 1880px) and (min-height: 1000px) {
    .game { gap: 8px; grid-template-columns: 20rem minmax(0, 1fr) 20rem; }
    .topbar, .col, .dock, .map-head { zoom: 1.14; }
    /* O zoom levaria o ícone do menu a 22,8 px: fica 1:1 (20 px do aparelho). */
    .dock button em { --ic: calc(20px / 1.14); }
    .map, .skills, .buffs, .modal { font-size: 16px; }
  }
  @media (min-width: 2300px) and (min-height: 1250px) {
    .game { gap: 10px; grid-template-columns: 24rem minmax(0, 1fr) 24rem; }
    .topbar, .col, .dock, .map-head { zoom: 1.36; }
    .dock button em { --ic: calc(20px / 1.36); }
    .map, .skills, .buffs { font-size: 19px; }
    .modal { font-size: 18px; }
  }
  /* Codex (docs/design.md): o resumo (progresso e os botões Bônus e Histórico), as 8 abas,
     o quadro de registro da aba, a busca e os filtros, a grade de cartões e o detalhe ao lado
     (no celular, no lugar da grade). Pixel art: bordas retas de 2 px nos quadros, raios
     pequenos, ícones pixelados em tamanho inteiro. Cores, letra e espaço pelos tokens.
     Os seletores começam em #panelCodex quando precisam ganhar de regras antigas de outros
     arquivos (dialogs.css, death.css, bag.css, responsive.css), que vêm depois na cascata. */
  .panel.codex-panel { width: min(97%, var(--win-2xl)); height: min(96%, 64em); display: flex; flex-direction: column; }
  #panelCodex { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; flex: 1; }
  #panelCodex > * { flex: none; }
  #panelCodex > .cx-body { flex: 1 1 0; }
  #panelCodex > :empty { display: none; }

  /* ---------- Resumo: anel de progresso, título, dica e os dois botões ---------- */
  #panelCodex .cx-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: var(--bw) solid var(--c-line); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .cx-ring { --p: 0; position: relative; display: grid; place-items: center; width: 3.6em; height: 3.6em; background: conic-gradient(var(--c-gold) calc(var(--p) * 1%), var(--c-surface-3) 0); clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%); }
  .cx-ring::before { content: ""; position: absolute; inset: 4px; background: var(--c-sunken); clip-path: inherit; }
  .cx-ring b { position: relative; font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
  .cx-head { display: grid; gap: var(--sp-1); min-width: 0; }
  .cx-head > b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; color: var(--c-title); }
  .cx-head > b small { font: var(--fw-semi) var(--fs-xs)/1.2 var(--font-ui); color: var(--c-text-muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .cx-hint { color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh-tight); }
  .cx-side { display: flex; gap: var(--sp-2); }
  .cx-side .cx-hist-btn { min-width: 6.5em; }

  /* ---------- Etiquetas de bônus (verdes = pontos fixos; violeta = %) ---------- */
  .cx-bonus { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .cx-bonus span, .cx-chip { display: inline-flex; align-items: center; padding: 1px var(--sp-2); background: color-mix(in srgb, var(--c-ok) 10%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, var(--c-ok) 40%, transparent); border-radius: var(--r-xs); color: #8ff0b3; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cx-bonus .none { background: var(--c-surface-1); border-color: var(--c-line); color: var(--c-text-muted); font-weight: var(--fw-regular); }
  .cx-bonus span.pct { background: color-mix(in srgb, var(--c-violet) 12%, var(--c-surface-1)); border-color: var(--c-line-strong); color: #c9bcff; }
  .cx-rw { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .cx-rw .once { background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-1)); border-color: var(--c-gold-dark); color: #ffd98a; }
  .cx-rw > .ui-btn { flex: none; }

  /* ---------- Abas: nome, feitos/total, a barrinha e quantos estão prontos ---------- */
  #panelCodex .cx-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-1); padding: var(--sp-1); background: var(--c-sunken); border: var(--bw) solid var(--c-line); }
  #panelCodex .cx-tabs button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: var(--ctl-lg); margin: 0; padding: var(--sp-1) var(--sp-2) calc(var(--sp-2) + 2px); background: var(--c-surface-1); border: 0; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--c-line-soft); color: var(--c-text-muted); filter: none; transition: background-color var(--t-fast), color var(--t-fast); }
  #panelCodex .cx-tabs button .lb { max-width: 100%; font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  #panelCodex .cx-tabs button small { font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--c-text-faint); }
  #panelCodex .cx-tabs button:hover:not(.on) { background: var(--c-surface-2); color: var(--c-text); }
  #panelCodex .cx-tabs button.on { background: var(--c-violet-deep); color: var(--c-text-strong); box-shadow: inset 0 0 0 1px var(--c-violet), inset 0 -2px 0 var(--c-violet); }
  #panelCodex .cx-tabs button.on small { color: var(--c-title); }
  #panelCodex .cx-tabs .cx-tbar { position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-1); height: 3px; background: var(--c-surface-3); }
  #panelCodex .cx-tabs .cx-tbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--c-violet); }
  #panelCodex .cx-tabs button.on .cx-tbar { background: rgba(6, 5, 11, .45); }
  #panelCodex .cx-tabs button.on .cx-tbar::after { background: var(--c-text-strong); }
  #panelCodex .cx-tabs button.full .cx-tbar::after { background: var(--c-ok); }
  #panelCodex .cx-tabs button.full:not(.on) small { color: var(--c-ok); }
  /* Prontos: o contador dourado do kit ao lado de feitos/total (nunca por cima do nome). */
  #panelCodex .cx-tabs button { grid-template-columns: auto auto; justify-content: center; column-gap: var(--sp-1); }
  #panelCodex .cx-tabs button .lb { grid-column: 1 / -1; }
  #panelCodex .cx-tabs button small { grid-column: 1; align-self: center; }
  #panelCodex .cx-tabs .cx-tready { grid-column: 2; grid-row: 2; align-self: center; height: 16px; min-width: 16px; padding: 0 4px; font-size: 12px; line-height: 16px; box-shadow: none; }
  #panelCodex .cx-tabs .sm { display: none; }

  /* ---------- Quadro de registro da aba (Equipamentos, Spirits): por raridade e Registrar todas ---------- */
  .cx-reg-sum { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--c-sunken); border: var(--bw) solid var(--c-line); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .cx-reg-sum header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
  .cx-reg-sum header b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; color: var(--c-accent-text); }
  .cx-reg-sum header b small { font: var(--fw-semi) var(--fs-xs)/1.2 var(--font-ui); color: var(--c-text-muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .cx-reg-sum .cx-bonus { flex: 1 1 auto; justify-content: flex-end; }
  .cx-rar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-1); }
  .cx-rt { --c: var(--rar-0); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-2); min-height: var(--ctl-md); margin: 0; padding: var(--sp-1) var(--sp-2) var(--sp-2); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-xs); box-shadow: inset 3px 0 0 var(--c); color: inherit; text-align: left; filter: none; }
  .cx-rt .n { min-width: 0; color: var(--c); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  /* Estreito (celular de 360 px): o número desce para a linha de baixo em vez de partir a palavra ("Inco/mum"). */
  .cx-rt { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .cx-rt .cx-bar { flex-basis: 100%; }
  .cx-rt b { font: var(--fw-regular) var(--fs-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--c-text); }
  .cx-rt .cx-bar { grid-column: 1 / -1; height: 4px; }
  .cx-rt .cx-bar i { background: var(--c); }
  .cx-rt.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--c-surface-1)); }
  .cx-rt:hover:not(.on) { background: var(--c-surface-2); filter: none; }
  #panelCodex .cx-enh-note { margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 5%, transparent); border: 1px dashed var(--c-gold-dark); border-radius: var(--r-sm); color: #e8d39a; font-size: var(--fs-sm); line-height: var(--lh); }
  /* Registrar todas (a ação principal do quadro) e o filtro das prontas, numa linha. */
  .cx-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .cx-reg-sum .cx-all { flex: 1 1 14em; }
  .cx-all .ct { min-width: 1.6em; padding: 1px var(--sp-2); border-radius: var(--r-pill); background: rgba(42, 26, 5, .85); color: var(--c-gold); font: var(--fw-bold) var(--fs-xs)/1.3 var(--font-ui); text-shadow: none; }
  .cx-reg-sum .cx-ready-note { flex: 0 1 auto; min-height: var(--ctl-lg); border-color: var(--c-gold-dark); color: #ffd98a; }
  .cx-reg-sum .cx-ready-note.on { background: color-mix(in srgb, var(--c-gold) 18%, var(--c-surface-2)); border-color: var(--c-gold); color: var(--c-gold); }
  .cx-all-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 7%, var(--c-sunken)); border: 1px solid var(--c-gold-dark); border-radius: var(--r-sm); }
  .cx-all-confirm span { flex: 1 1 16em; color: #ffd98a; font-size: var(--fs-sm); line-height: var(--lh); }
  .cx-all-confirm .cx-all { flex: 0 1 auto; min-height: var(--ctl-md); font-size: var(--fs-md); }

  /* ---------- Busca e filtros ---------- */
  .cx-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .cx-tools .cx-q { flex: 1 1 14em; }
  .cx-tools .ui-select { width: auto; flex: 0 1 auto; max-width: 100%; }
  /* Filtro segmentado: o .ui-seg do kit, que quebra a linha quando não cabe. */
  .cx-seg { flex-wrap: wrap; }
  #panelCodex .cxe-note { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .cxa-rule { display: grid; gap: .3em; margin: .4em 0 .6em; padding: .55em .7em; background: #17142a; border: 2px solid #4a3f86; }
  .cxa-rule p { margin: 0; font-size: .9em; }

  /* ---------- Corpo: a grade e o detalhe ao lado ---------- */
  .cx-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24em, 33em); grid-template-rows: minmax(0, 1fr); gap: var(--sp-3); min-height: 0; }
  .cx-list { overflow: auto; overscroll-behavior: contain; min-height: 0; padding-right: var(--sp-1); }
  .cx-list h5 { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); color: var(--c-accent-text); letter-spacing: .02em; }
  .cx-list h5::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  .cx-list h5 small { font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui); color: var(--c-text-muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .cx-list h5 small.all { color: var(--c-ok); }
  .cx-list h5::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
  .cx-list h5:not(:first-child) { margin-top: var(--sp-4); }

  /* ---------- Cartão compacto: desenho, nome na cor da raridade, estado, o que dá e a barra ---------- */
  .cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr)); gap: var(--sp-2); }
  .cx-pc { --c: var(--rar-0); position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; align-content: start; gap: var(--sp-2); min-width: 0; padding: var(--sp-2) var(--sp-2) var(--sp-2) calc(var(--sp-2) + 2px); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-xs); box-shadow: inset 3px 0 0 var(--c), var(--sh-raised); color: inherit; text-align: left; cursor: pointer; outline: none; transition: border-color var(--t-fast), background-color var(--t-fast); }
  .cx-pc:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
  .cx-pc:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
  .cx-pc.sel { border-color: var(--c-gold); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--c-gold), var(--sh-glow-gold); }
  .cx-pa { position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 22%, var(--c-surface-2)), var(--c-sunken) 75%); border: 1px solid var(--c-bg); }
  .cx-pa .ii { width: 32px; height: 32px; }
  .cx-pt { display: grid; gap: 3px; min-width: 0; }
  .cx-pt .nm { color: var(--c); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
  .cx-pt .st { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
  .cx-pt .rw { color: #7fae92; font-size: var(--fs-xs); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
  .cx-pt .rw:empty { display: none; }
  .cx-pt .rw.pct { color: var(--c-accent-text); }
  .cx-pc.ready .rw.pct { color: #ffd98a; }
  .cx-pt .cx-bar { margin-top: 2px; }
  .cx-pc .cx-mini { justify-self: start; max-width: 100%; margin: 1px 0; }
  .cx-pc.locked { background: var(--c-sunken); border-style: dashed; border-color: var(--c-line-soft); box-shadow: inset 3px 0 0 var(--c-line-soft); }
  .cx-pc.locked .nm { color: var(--c-text-faint); }
  .cx-pc.locked .cx-pa > * { filter: brightness(0) opacity(.55); }
  .cx-pc.locked .cx-pa > .cx-map { filter: grayscale(1) brightness(.4); }
  .cx-pc.seen .cx-pa > .ii, .cx-pc.equipped .cx-pa > .ii { opacity: .8; }
  .cx-pc.equipped .st, .cx-pc.progress .st { color: #9fc3ff; }
  #panelCodex .cx-pc.enhanced .st { color: var(--c-gold); }
  .cx-pc.ready { border-color: var(--c-gold-dark); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px rgba(255, 209, 102, .2), var(--sh-raised); }
  .cx-pc.ready.sel { border-color: var(--c-gold); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--c-gold), var(--sh-glow-gold); }
  .cx-pc.ready .st { color: var(--c-gold); }
  .cx-pc.done { background: color-mix(in srgb, var(--c-ok) 7%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-ok) 35%, var(--c-line)); }
  .cx-pc.done .st, .cx-pc.done .rw { color: var(--c-ok); }
  /* Marcas no desenho: registrado (✓), quantos na mochila (×N) e metas prontas (N). */
  .cx-seal { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; font: var(--fw-bold) 11px/1 var(--font-ui); font-style: normal; color: #0d2318; background: var(--c-ok); box-shadow: 0 0 0 2px var(--c-bg); }
  /* Metas prontas (N): embaixo do desenho, na coluna dele; o nome fica com a largura toda. */
  .cx-flag { position: absolute; top: calc(var(--sp-2) + 44px + 8px); left: calc(var(--sp-2) + 2px + 22px); transform: translateX(-50%); display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); font: var(--fw-bold) 12px/1 var(--font-ui); font-style: normal; color: #2a1a05; background: var(--c-gold); }
  .cx-pc:has(> .cx-flag) .cx-pa { margin-bottom: 28px; }
  .cx-flag.lock { background: var(--c-surface-3); color: var(--c-text-muted); }
  .cx-cnt { position: absolute; right: -4px; bottom: -4px; padding: 0 3px; font: var(--fw-bold) 11px/14px var(--font-ui); font-style: normal; color: var(--c-gold); background: var(--c-bg); border: 1px solid var(--c-gold-dark); font-variant-numeric: tabular-nums; }
  .cx-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-line-soft); }
  .cx-act .cx-warn { flex: 1 1 100%; margin: 0; }
  .cx-act .cx-btn { flex: 1 1 0; min-width: max-content; }
  .cx-act .cxs-other { flex: 1 1 100%; }
  .cx-warn { margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c-warn) 40%, transparent); border-radius: var(--r-sm); color: #ffcf9e; font-size: var(--fs-sm); line-height: var(--lh); }

  /* ---------- Desenhos e barras ---------- */
  .cx-spr { display: block; background-repeat: no-repeat; image-rendering: pixelated; }
  .cx-glyph { display: block; image-rendering: pixelated; shape-rendering: crispEdges; }
  .cx-map { display: block; width: 56px; height: 56px; background-size: cover; background-position: center; image-rendering: pixelated; border: 2px solid var(--c-bg); }
  .cx-bar { position: relative; width: 100%; height: 6px; background: var(--c-bg); border: 1px solid var(--c-line-soft); }
  .cx-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: repeating-linear-gradient(90deg, var(--c-violet) 0 4px, #6a52e6 4px 6px); }
  .cx-pc.done .cx-bar i, .cx-bar.ok i { background: repeating-linear-gradient(90deg, var(--c-ok) 0 4px, #4bbd79 4px 6px); }
  .cx-pc.ready .cx-bar i { background: repeating-linear-gradient(90deg, var(--c-gold) 0 4px, #e9b947 4px 6px); }

  /* ---------- Detalhe ---------- */
  .cx-det { display: grid; align-content: start; gap: var(--sp-3); overflow: auto; overscroll-behavior: contain; min-height: 0; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--c-sunken); border: var(--bw) solid var(--c-line); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .cx-det .hd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
  .cx-det .big { --c: var(--rar-0); position: relative; display: grid; place-items: center; width: 96px; height: 96px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 26%, var(--c-surface-2)), var(--c-bg) 75%); border: var(--bw) solid var(--c); box-shadow: 0 0 0 2px var(--c-bg-deep); }
  .cx-det .big .ii { width: 64px; height: 64px; }
  .cx-det .big .cx-seal { width: 22px; height: 22px; font-size: 14px; right: -7px; bottom: -7px; }
  .cx-det.locked .big > :not(.cx-seal) { filter: brightness(0) opacity(.6); }
  .cx-det.locked .big > .cx-map { filter: grayscale(1) brightness(.4); }
  .cx-det h3 { margin: 0; font: var(--fw-regular) var(--fs-d-md)/1.05 var(--font-display); letter-spacing: .02em; color: var(--c, var(--c-text-strong)); overflow-wrap: anywhere; }
  .cx-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
  .cx-tags span { padding: 1px var(--sp-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); background: var(--c-surface-1); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.4; }
  .cx-tags .rar { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, var(--c-line-strong)); }
  .cx-tags .st-locked { color: var(--c-text-muted); }
  .cx-tags .st-progress, .cx-tags .st-seen, .cx-tags .st-equipped { color: #9fc3ff; }
  .cx-tags .st-ready { color: var(--c-gold); border-color: var(--c-gold-dark); }
  .cx-tags .st-done { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); }
  .cx-det p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .cx-det h4 { display: flex; align-items: center; gap: .45em; margin: var(--sp-1) 0 0; font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); color: var(--c-accent-text); letter-spacing: .02em; }
  .cx-det h4::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  .cx-det > .ui-btn { justify-self: start; }
  .cx-box { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .cx-box > h4 { margin: 0; }
  .cx-box.ready { border-color: var(--c-gold-dark); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .12); }
  .cx-box.done { border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); background: color-mix(in srgb, var(--c-ok) 6%, var(--c-surface-1)); }
  .cx-box .ln, .cx-req .ln { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); }
  .cx-box .ln b, .cx-req .ln b { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cx-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
  .cx-kv div { display: grid; gap: 2px; padding: var(--sp-1) var(--sp-2); background: var(--c-surface-1); border: 1px solid var(--c-line-soft); border-radius: var(--r-xs); min-width: 0; }
  .cx-kv small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .cx-kv b { font: var(--fw-regular) var(--fs-lg)/1.05 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .cx-req { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line-soft); border-left: 3px solid var(--c-line-strong); border-radius: var(--r-xs); }
  .cx-req.ok { border-left-color: var(--c-ok); }
  .cx-stage { --c: var(--rar-0); display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--c-line)); border-radius: var(--r-sm); }
  .cx-stage header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
  .cx-stage header b { color: var(--c); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); }
  .cx-stage header .cx-tags { margin: 0; }
  .cx-claim { display: grid; gap: var(--sp-2); }
  .cx-claim .row2 { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .cx-claim .row2 > .ui-btn { flex: 1 1 0; min-width: max-content; }
  .cx-claim > .ui-btn { width: 100%; min-height: var(--ctl-lg); }
  /* Concluído: um selo verde, não um botão apagado. */
  .cx-claim > .cx-done:disabled { opacity: 1; filter: none; background: color-mix(in srgb, var(--c-ok) 10%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); color: var(--c-ok); box-shadow: none; cursor: default; }
  /* Pendente: apagado, mas legível (o motivo vem no aviso de cima e nos requisitos). */
  .cx-claim > .cx-pending:disabled { opacity: 1; filter: none; background: var(--c-surface-1); border-color: var(--c-line); border-style: dashed; color: var(--c-text-muted); box-shadow: none; }
  .cx-back { display: none; justify-self: start; }
  .cx-entry { display: grid; gap: var(--sp-2); }
  .cx-det .muted, .cx-stage .muted, .cx-req .muted, .cx-box .muted, .cx-claim .muted { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  /* Vazio, carregando, erro: os do kit, no lugar da grade. */
  .cx-empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--c-text-muted); border: 1px dashed var(--c-line); border-radius: var(--r-md); }
  .cx-empty .cx-glyph { opacity: .7; }
  .cx-det > .cx-empty { padding: var(--sp-6) var(--sp-4); line-height: var(--lh); }
  .cx-wait .ui-loading { padding: 0; }
  /* Sem o catálogo (carregando ou erro): só o aviso, sem os quadros vazios em volta. */
  #panelCodex > .cx-sum:empty, #panelCodex > .cx-tabs:empty, #panelCodex > .cx-tools:empty { display: none; }
  #panelCodex:not(.loaded) .cx-body { grid-template-columns: minmax(0, 1fr); align-content: start; }
  #panelCodex:not(.loaded) .cx-body > :not(.cx-list) { display: none; }

  /* ---------- Metas sem fim (monstro, material, boss): a atual, o bônus e o botão; a seguinte apagada; as feitas ---------- */
  .cx-tier { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--c-violet); }
  .cx-tier.ready { border-color: var(--c-gold-dark); box-shadow: inset 3px 0 0 var(--c-gold); }
  .cx-tier h4 { margin: 0; }
  .cx-tier .hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
  .cx-tier .hd b { font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; color: var(--c-text); }
  .cx-tier .hd .num { font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--c-text-2); }
  .cx-tier.ready .hd .num { color: var(--c-gold); }
  .cx-tier .cx-bar { height: 8px; }
  .cx-tier.ready .cx-bar i { background: repeating-linear-gradient(90deg, var(--c-gold) 0 4px, #e9b947 4px 6px); }
  .cx-tier .nx { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .cx-tgains { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .cx-tgain { padding: 1px var(--sp-2); background: color-mix(in srgb, var(--c-violet) 12%, var(--c-surface-1)); border: 1px solid var(--c-line-strong); border-radius: var(--r-xs); color: var(--c-title); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cx-tier.ready .cx-tgain { background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-1)); border-color: var(--c-gold-dark); color: #ffd98a; }
  .cx-tier .nx .left { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  .cx-tier > .cx-btn { justify-self: stretch; }
  .cx-tier .after { padding: var(--sp-1) var(--sp-2); border: 1px dashed var(--c-line); border-radius: var(--r-xs); color: var(--c-text-faint); font-size: var(--fs-xs); line-height: var(--lh); }
  .cx-tier .lbl { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; }
  .cx-tdone { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .cx-tchip { padding: 1px var(--sp-2); background: color-mix(in srgb, var(--c-ok) 8%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, var(--c-ok) 35%, transparent); border-radius: var(--r-xs); color: #8ff0b3; font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cx-tchip.more { background: var(--c-surface-1); border-color: var(--c-line); color: var(--c-text-muted); }
  .cx-tchip.old { background: var(--c-surface-1); border-color: var(--c-line-strong); color: var(--c-text-2); white-space: normal; }

  /* ---------- Bônus: os totais (apagados em 0) e de onde vem cada um ---------- */
  .cx-bn { display: grid; gap: var(--sp-3); }
  .cx-bn > h5 { margin: var(--sp-1) 0 0; }
  .cx-bn > h5:not(:first-child) { margin-top: var(--sp-4); }
  .cx-bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: var(--sp-2); }
  .cx-bt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--sp-2); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-ok) 8%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, var(--c-ok) 40%, transparent); border-radius: var(--r-xs); }
  .cx-bt .n { overflow-wrap: anywhere; line-height: var(--lh-tight); color: #c5e8d2; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
  .cx-bt b { font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); color: #8ff0b3; font-variant-numeric: tabular-nums; }
  .cx-bt small { grid-column: 1 / -1; color: #7fae92; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .cx-bt.pct { background: color-mix(in srgb, var(--c-violet) 10%, var(--c-surface-1)); border-color: var(--c-line-strong); }
  .cx-bt.pct .n { color: var(--c-title); }
  .cx-bt.pct b { color: var(--c-accent-text); }
  .cx-bt.pct small { color: var(--c-text-muted); }
  .cx-bt.zero { background: var(--c-sunken); border-color: var(--c-line-soft); border-style: dashed; }
  .cx-bt.zero .n, .cx-bt.zero b, .cx-bt.zero small { color: var(--c-text-faint); }
  .cx-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .cx-orig { background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .cx-orig[open] { border-color: var(--c-line-strong); }
  .cx-orig summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: var(--ctl-lg); padding: var(--sp-2) var(--sp-3); cursor: pointer; list-style: none; border-radius: var(--r-sm); }
  .cx-orig summary:hover { background: var(--c-surface-2); }
  .cx-orig summary::-webkit-details-marker { display: none; }
  .cx-orig .hd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
  .cx-orig .hd::before { content: ""; flex: none; width: 0; height: 0; border: 5px solid transparent; border-left: 6px solid var(--c-violet); border-right: 0; transition: transform var(--t-fast); }
  .cx-orig[open] .hd::before { transform: rotate(90deg); }
  .cx-orig .hd b { min-width: 0; font: var(--fw-regular) var(--fs-d-sm)/1.05 var(--font-display); letter-spacing: .02em; color: var(--c-text); overflow-wrap: anywhere; }
  .cx-orig .hd small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  .cx-orig summary .cx-bonus { justify-content: flex-end; }
  .cx-orig.zero .hd b, .cx-orig.zero .cx-glyph { opacity: .55; }
  .cx-orig > .cx-note { padding: 0 var(--sp-3) var(--sp-3); }
  .cx-orow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: var(--ctl-md); margin: 0 var(--sp-2) var(--sp-1); padding: var(--sp-1) var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-xs); cursor: pointer; }
  .cx-orow:last-child { margin-bottom: var(--sp-2); }
  .cx-orow:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
  .cx-oart { display: grid; place-items: center; width: 34px; height: 34px; }
  .cx-oart .ii { width: 32px; height: 32px; }
  .cx-orow .nm { min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
  .cx-orow .cx-bonus { justify-content: flex-end; }

  /* ---------- Histórico ---------- */
  .cx-hist { display: grid; gap: var(--sp-1); }
  .cx-hist div { display: grid; grid-template-columns: 8em 16px minmax(0, 1fr); gap: var(--sp-3); align-items: center; min-height: var(--ctl-md); padding: var(--sp-1) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line-soft); border-radius: var(--r-xs); font-size: var(--fs-sm); }
  .cx-hist time { color: var(--c-text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
  .cx-hist .cx-empty { display: grid; grid-template-columns: none; min-height: 0; padding: var(--sp-8) var(--sp-4); background: none; border: 1px dashed var(--c-line); }

  /* ---------- Aprimoramento: um bloco por peça, uma célula por + (as regras de antes em dialogs.css e death.css) ---------- */
  #panelCodex .cxe { gap: var(--sp-3); }
  #panelCodex .cxe-blk { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  #panelCodex .cxe-slot { gap: var(--sp-3); }
  #panelCodex .cxe-ic { background: var(--c-sunken); border-color: var(--c-line-strong); border-radius: var(--r-xs); }
  #panelCodex .cxe-slot .tx b { font: var(--fw-regular) var(--fs-d-sm)/1.05 var(--font-display); color: var(--c-text); letter-spacing: .02em; }
  #panelCodex .cxe-slot .tx small { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: normal; overflow: visible; text-overflow: clip; }
  #panelCodex .cxe-cells { gap: var(--sp-1); }
  #panelCodex .cxe-cell { gap: 2px; min-height: 3.8em; padding: var(--sp-1); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-top: 2px solid color-mix(in srgb, var(--c) 55%, var(--c-line)); border-radius: var(--r-xs); transition: border-color var(--t-fast); }
  #panelCodex .cxe-cell:hover, #panelCodex .cxe-cell.sel { border-color: color-mix(in srgb, var(--c) 70%, var(--c-line-strong)); }
  #panelCodex .cxe-cell.sel { box-shadow: 0 0 0 1px var(--c); }
  #panelCodex .cxe-n { font-size: var(--fs-d-sm); }
  #panelCodex .cxe-rw { color: #8fe0a8; font-size: max(11px, .72em); }
  #panelCodex .cxe-cell .cx-mini { justify-self: stretch; min-width: 0; padding: 0 2px; white-space: nowrap; line-height: 1.05; }
  #panelCodex .cxe-cell.locked { opacity: .55; }
  #panelCodex .cxe-cell.locked .cxe-rw { color: var(--c-text-muted); }
  #panelCodex .cxe-cell.ready { background: color-mix(in srgb, var(--c-gold) 8%, var(--c-sunken)); border-color: var(--c-gold-dark); box-shadow: 0 0 0 1px rgba(255, 209, 102, .2); }
  #panelCodex .cxe-cell.ready .cxe-st { color: var(--c-gold); }
  #panelCodex .cxe-cell.done { background: color-mix(in srgb, var(--c-ok) 8%, var(--c-sunken)); border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); }
  #panelCodex .cxe-cell.done .cxe-st { color: var(--c-ok); }
  #panelCodex .cxe-cell.faded { opacity: .25; }
  #panelCodex .cxe-confirm { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 7%, var(--c-sunken)); border-color: var(--c-gold-dark); border-radius: var(--r-sm); }
  #panelCodex .cxe-confirm .ui-btn { flex: 0 1 auto; }
  /* Conjuntos */
  #panelCodex .cxs-grid { grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: var(--sp-2); }
  #panelCodex .cxs { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-left: 3px solid color-mix(in srgb, var(--c) 70%, var(--c-line)); border-radius: var(--r-xs); }
  #panelCodex .cxs:hover, #panelCodex .cxs.sel { border-color: color-mix(in srgb, var(--c) 70%, var(--c-line-strong)); }
  #panelCodex .cxs.ready { background: color-mix(in srgb, var(--c-gold) 7%, var(--c-surface-1)); border-color: var(--c-gold-dark); }
  #panelCodex .cxs.done { background: color-mix(in srgb, var(--c-ok) 7%, var(--c-surface-1)); border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); }
  #panelCodex .cxs-hd .nm { font-size: var(--fs-md); }
  #panelCodex .cxs-st { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelCodex .cxs-st.done { color: var(--c-ok); }
  #panelCodex .cxs-part { border-radius: var(--r-xs); font-size: var(--fs-xs); }

  /* ---------- Spirits no Codex ---------- */
  .cx-pa .sp-art.cx-spa { animation-play-state: paused; }
  .cx-pc:hover .cx-pa .sp-art.cx-spa, .cx-det .sp-art.cx-spa { animation-play-state: running; }
  .cx-pc.locked .cx-pa > .sp-art { filter: brightness(0) opacity(.55); }
  .cxs-lv { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
  .cxs-lv i { padding: 0 var(--sp-1); border: 1px solid var(--c-line); border-radius: var(--r-xs); color: var(--c-text-muted); font-size: max(11px, .72em); font-style: normal; font-weight: var(--fw-bold); white-space: nowrap; }
  .cxs-lv i.done { border-color: color-mix(in srgb, var(--c-ok) 40%, transparent); color: #8ff0b3; background: color-mix(in srgb, var(--c-ok) 8%, transparent); }
  .cxs-lv i.ready { border-color: var(--c-gold); color: var(--c-gold); }
  .cxs-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .cxs-opt { display: grid; justify-items: center; gap: 2px; min-width: 5em; min-height: var(--touch); margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--c-sunken); border: var(--bw) solid var(--c-line); border-radius: var(--r-xs); color: inherit; filter: none; }
  .cxs-opt:hover:not(.on) { border-color: var(--c-line-strong); }
  .cxs-opt.on { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold); }
  .cxs-opt small { color: var(--c-text-muted); font-size: var(--fs-xs); }

  @keyframes cxIdle { to { background-position-x: var(--x1); } }
  .cx-det .big .cx-spr.anim { animation: cxIdle var(--t) steps(var(--n)) infinite; }
  @keyframes cxBreathe { 50% { transform: scale(.985, 1.03); } }
  .cx-det .big .cx-spr.breathe { transform-origin: 50% 100%; animation: cxBreathe 1.8s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .cx-det .big .cx-spr.anim, .cx-det .big .cx-spr.breathe { animation: none; } }

  /* ---------- Janela estreita (celular, tablet em pé): a janela inteira rola, a grade ocupa
     tudo e o detalhe abre no lugar dela, com o Voltar ---------- */
  @container painel (max-width: 760px) {
    #panelCodex { display: block; flex: none; }
    #panelCodex > * + * { margin-top: var(--sp-2); }
    .cx-list, .cx-det { overflow: visible; }
    #panelCodex .cx-tabs .lg { display: none; }
    #panelCodex .cx-tabs .sm { display: inline; }
    #panelCodex .cx-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #panelCodex .cx-tabs button { padding-left: var(--sp-1); padding-right: var(--sp-1); }
    .cx-ring { width: 3.2em; height: 3.2em; }
    #panelCodex .cx-sum { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); padding: var(--sp-2); }
    .cx-side { grid-column: 1 / -1; }
    .cx-side .cx-hist-btn { flex: 1; }
    .cx-bt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cx-orig summary { grid-template-columns: minmax(0, 1fr); }
    .cx-orig summary .cx-bonus, .cx-orow .cx-bonus { justify-content: flex-start; }
    .cx-orow { grid-template-columns: 34px minmax(0, 1fr); }
    .cx-orow .cx-bonus { grid-column: 2; }
    .cx-pc .cx-mini { justify-self: stretch; }
    .cx-rar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cx-reg-sum .cx-bonus { justify-content: flex-start; }
    .cx-tools .cx-q { flex-basis: 100%; }
    /* Cada filtro com a largura da opção mais comprida: dois numa linha quando cabem, senão um por linha
       (nada de "Todas as raridade" cortado). */
    .cx-tools .ui-select { flex: 1 1 auto; }
    .cx-seg { flex: 1 1 100%; }
    .cx-seg button { flex: 1; padding: 0 var(--sp-2); }
    .cx-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .cx-body .cx-det { display: none; }
    .cx-body.open .cx-list { display: none; }
    .cx-body.open .cx-det { display: grid; padding: var(--sp-3); }
    .cx-back { display: inline-flex; }
    .cx-grid { grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr)); }
    .cx-hist div { grid-template-columns: 16px minmax(0, 1fr); gap: 2px var(--sp-2); }
    .cx-hist time { grid-column: 1 / -1; }
    .cx-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Aprimoramento: 4 + por linha (o botão Registrar cabe na célula). */
    #panelCodex .cxe-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* Celular deitado: o resumo numa linha (Bônus e Histórico à direita) e as 8 abas numa linha só.
     Como no celular em pé, a janela inteira rola (com 390 px de altura, resumo, abas e filtros presos
     em cima deixavam a lista numa faixa de 80 px) e o detalhe abre no lugar da grade, com o Voltar. */
  @media (max-height: 500px) and (min-width: 600px) {
    #panelCodex { display: block; flex: none; }
    #panelCodex > * + * { margin-top: var(--sp-2); }
    #panelCodex .cx-list, #panelCodex .cx-det { overflow: visible; }
    #panelCodex .cx-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    #panelCodex .cx-body .cx-det { display: none; }
    #panelCodex .cx-body.open .cx-list { display: none; }
    #panelCodex .cx-body.open .cx-det { display: grid; padding: var(--sp-3); }
    #panelCodex .cx-back { display: inline-flex; }
    #panelCodex .cx-sum { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--sp-1) var(--sp-2); }
    #panelCodex .cx-side { grid-column: auto; }
    #panelCodex .cx-ring { width: 2.7em; height: 2.7em; }
    #panelCodex .cx-ring b { font-size: var(--fs-md); }
    #panelCodex .cx-hint { display: none; }
    #panelCodex .cx-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    #panelCodex .cx-tabs .lg { display: none; }
    #panelCodex .cx-tabs .sm { display: inline; }
    #panelCodex .cx-tabs button { padding: var(--sp-1) 2px calc(var(--sp-1) + 4px); min-height: var(--touch); }
    #panelCodex .cx-tabs button .lb { font-size: var(--fs-md); }
  }
  @media (max-width: 599px), (max-height: 500px) { .modal .panel.codex-panel { height: 100%; } }

  /* ---------- Base do Codex de aprimoramento (.cxe) e dos conjuntos (.cxs) ----------
     Vieram do dialogs.css e do death.css (ficavam depois deste arquivo na cascata: por isso no fim). O desenho
     do redesenho, mais forte (#panelCodex), está acima. */
  /* Um bloco por peça com uma célula por + (+1 a +20,
     a grade se ajusta à largura) e os conjuntos em cartões. */
  .cxe { display: grid; gap: .55em; }
  .cx-grid > .cxe, .cx-grid > .cxs-grid { grid-column: 1 / -1; }
  .cxe-note { margin: 0; color: #b9b3cc; font-size: .9em; }
  .cxe-blk { display: grid; gap: .3em; padding: .4em; background: #120f22; border: 1px solid #262238; border-radius: 3px; }
  .cxe-slot { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(5em, 9em); align-items: center; gap: .5em; min-width: 0; }
  .cxe-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: #0f0d1a; border: 1px solid #322c52; border-radius: 3px; }
  .cxe-ic .ii { opacity: .85; }
  .cxe-slot .tx { display: grid; min-width: 0; }
  .cxe-slot .tx b { font-size: .95em; }
  .cxe-slot .tx small { color: #8d86ad; font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cxe-cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .25em; }
  .cxe-cell { position: relative; display: grid; align-content: start; gap: .1em; min-width: 0; min-height: 3.6em; padding: .25em .3em; background: #17142a; border: 1px solid #2c2748; border-top: 2px solid color-mix(in srgb, var(--c) 55%, #2c2748); border-radius: 3px; cursor: pointer; }
  .cxe-cell:hover, .cxe-cell.sel { border-color: color-mix(in srgb, var(--c) 70%, #3a3452); }
  .cxe-cell.sel { box-shadow: 0 0 0 1px var(--c); }
  .cxe-top { display: flex; justify-content: space-between; align-items: baseline; gap: .2em; }
  .cxe-n { color: var(--c); font: 400 1.3em/1 "Jersey 10", system-ui, sans-serif; }
  .cxe-st { font-size: .8em; }
  .cxe-rw { color: #8fe0a8; font-size: .7em; line-height: 1.2; overflow-wrap: anywhere; }
  .cxe-cell .cx-mini { justify-self: stretch; min-height: 1.5em; padding: .1em .2em; font-size: .9em; text-align: center; }
  .cxe-cell.locked { opacity: .6; }
  .cxe-cell.locked .cxe-rw { color: #9a95ad; }
  .cxe-cell.ready { background: #221d10; border-color: #8a6d24; box-shadow: 0 0 0 1px rgba(255, 209, 102, .25); }
  .cxe-cell.ready .cxe-st { color: #ffd166; font-weight: 700; }
  .cxe-cell.done { background: #12221a; border-color: #2f6b47; }
  .cxe-cell.done .cxe-st { color: #5fd38d; font-weight: 700; }
  .cxe-cell.faded { opacity: .25; }
  .cxe-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; padding: .45em .5em; background: #221d10; border: 1px solid #8a6d24; border-radius: 3px; }
  .cxe-confirm .cx-warn { flex: 1 1 14em; margin: 0; }
  .cxs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5em, 1fr)); gap: .45em; }
  .cxs { display: grid; align-content: start; gap: .4em; min-width: 0; padding: .5em .55em; background: #17142a; border: 1px solid #2c2748; border-left: 3px solid color-mix(in srgb, var(--c) 70%, #2c2748); border-radius: 3px; cursor: pointer; }
  .cxs:hover, .cxs.sel { border-color: color-mix(in srgb, var(--c) 70%, #3a3452); }
  .cxs.sel { box-shadow: 0 0 0 1px var(--c); }
  .cxs.ready { background: #221d10; border-color: #8a6d24; }
  .cxs.done { background: #12221a; border-color: #2f6b47; }
  .cxs-hd { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-width: 0; }
  .cxs-hd .nm { min-width: 0; color: var(--c); font-size: .95em; overflow-wrap: anywhere; }
  .cxs-hd .cx-mini { flex: none; }
  .cxs-st { flex: none; color: #8d86ad; font-size: .78em; white-space: nowrap; }
  .cxs-st.done { color: #5fd38d; font-weight: 700; }
  .cxs-parts { display: flex; flex-wrap: wrap; gap: .25em; }
  .cxs-part { display: inline-flex; align-items: center; gap: .3em; padding: .1em .4em .1em .15em; background: #241517; border: 1px solid #6a2f36; border-radius: 3px; color: #f0c4c9; font-size: .8em; }
  .cxs-part.ok { background: #12221a; border-color: #2f6b47; color: #bfeccf; }
  .cxs-part small { color: #e58f99; font-size: .9em; }
  .cxs-part.ok small { color: #5fd38d; }
  .cxs-ic { display: grid; place-items: center; width: 20px; height: 20px; }
  .cxs-ic .ii { width: 20px; height: 20px; }
  @container painel (max-width: 900px) {
    .cxe-cells { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
  @container painel (max-width: 560px) {
    .cxe-slot { grid-template-columns: auto minmax(0, 1fr); }
    .cxe-slot .cx-bar { grid-column: 1 / -1; }
    .cxe-cells { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .cxs-grid { grid-template-columns: minmax(0, 1fr); }
  }
  /* ===== Painel Admin: Codex, Assistente e Balanceamento (docs/design.md) =====
     Dono: staff. Só dentro de #panelStaff; tokens do sistema de design, botões .ui-btn
     (parts.ts: button). Este arquivo vem depois do responsive.css na cascata. */

  /* ---------- Codex (registros, monstros, limites) ---------- */
  #panelStaff .cxa-wrap { display: grid; gap: var(--sp-3); min-width: 0; }
  #panelStaff .cxa-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; margin: 0; }
  #panelStaff .cxa-top > .ui-btn { min-height: var(--ctl-md); }
  #panelStaff .cxa-list { display: grid; gap: var(--sp-1); }
  #panelStaff .cxa-row { display: grid; grid-template-columns: 2.6em minmax(0, 1.6fr) minmax(0, 1.8fr) minmax(0, 1.4fr) 5em auto; gap: var(--sp-2) var(--sp-3); align-items: center; margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: var(--fs-sm); }
  #panelStaff .cxa-row.off { opacity: .55; }
  #panelStaff .cxa-row.bad { border-color: var(--c-danger-deep); box-shadow: inset 3px 0 0 var(--c-danger); }
  #panelStaff .cxa-row b { font-weight: var(--fw-semi); }
  #panelStaff .cxa-row .tools { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: flex-end; }
  #panelStaff :is(.cxa-row, .cxa-form, .cxa-rule) .muted { color: var(--c-text-muted); font-size: var(--fs-sm); }
  #panelStaff .cxa-row .no { color: var(--c-danger-text); font-size: var(--fs-sm); }
  #panelStaff .cxa-row .cx-rw { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  #panelStaff .cx-warn { margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-warn) 8%, var(--c-surface-1)); border: 1px solid var(--c-warn-deep); border-radius: var(--r-sm); color: var(--c-warn); font-size: var(--fs-sm); line-height: var(--lh); }
  #panelStaff .cxa-pieces, #panelStaff .cxa-rule { display: grid; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--c-sunken); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
  #panelStaff .cxa-rule > b { color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; }
  #panelStaff .cxa-rule > p { margin: 0; line-height: var(--lh); }
  #panelStaff .cxa-mats { display: grid; gap: var(--sp-1); }
  #panelStaff .cxa-pieces .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  #panelStaff .cxa-pieces .row b { flex: 1 1 auto; color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); }
  #panelStaff .cxa-form { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-violet-strong); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi), var(--sh-glow-violet); }
  #panelStaff .cxa-form > .ui-h:first-child { margin-top: 0; }
  #panelStaff .cxa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr)); gap: var(--sp-3); }
  #panelStaff .cxa-form label { display: grid; gap: var(--sp-1); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  #panelStaff .cxa-form label.chk { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-sm); }
  #panelStaff .cxa-form label.chk input { width: 1.15em; height: 1.15em; margin: 0; accent-color: var(--c-violet); }
  #panelStaff .cxa-form label small { font-weight: var(--fw-regular); }
  #panelStaff .cxa-req { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) 6.5em auto; gap: var(--sp-2); align-items: center; }
  #panelStaff .cxa-form .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  #panelStaff .cxa-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10em), 1fr)); gap: var(--sp-3); }
  @container painel (max-width: 760px) {
    #panelStaff .cxa-row { grid-template-columns: 2.6em minmax(0, 1fr) auto; }
    #panelStaff .cxa-row > :nth-child(3), #panelStaff .cxa-row > :nth-child(4), #panelStaff .cxa-row > :nth-child(5) { grid-column: 2 / -1; }
    #panelStaff .cxa-req { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  @container painel (max-width: 30em) {
    #panelStaff .cxa-row { grid-template-columns: 2.6em minmax(0, 1fr); }
    #panelStaff .cxa-row > :is(:nth-child(3), :nth-child(4), :nth-child(5), .tools, input, .sf-field, .ui-btn) { grid-column: 1 / -1; }
    #panelStaff .cxa-row .tools { justify-content: flex-start; }
    #panelStaff .cxa-top { grid-template-columns: minmax(0, 1fr); }
    /* Requisito e item da recompensa: cada lista (tipo, monstro, item) numa linha inteira; quantidade e ✕ embaixo. */
    #panelStaff .cxa-req { grid-template-columns: minmax(0, 1fr) auto; }
    #panelStaff .cxa-req > select { grid-column: 1 / -1; }
  }

  /* ---------- Assistente (Claude, só leitura; docs/assistente-admin.md) ---------- */
  #panelStaff .as { display: grid; gap: var(--sp-3); min-width: 0; }
  #panelStaff .as-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  #panelStaff .as-top .sp { flex: 1 1 0; }
  #panelStaff .as-pill { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border: 1px solid; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; }
  #panelStaff .as-pill.on { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, var(--c-surface-1)); }
  #panelStaff .as-pill.off { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-1)); }
  #panelStaff .as-ro { color: var(--c-text-muted); font-size: var(--fs-sm); }
  #panelStaff .as-off { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, var(--c-danger) 45%, transparent); border-left: 3px solid var(--c-danger); border-radius: var(--r-md); color: var(--c-text); overflow-wrap: anywhere; }
  #panelStaff .as-off > b { color: var(--c-danger-text); }
  #panelStaff .as-off code { color: var(--c-gold); }
  #panelStaff .as-log { display: grid; gap: var(--sp-3); align-content: start; min-height: 12em; max-height: min(60vh, 34em); overflow-y: auto; padding: var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); overscroll-behavior: contain; }
  #panelStaff .as-log > .ui-empty { min-height: 0; background: none; border: 0; }
  #panelStaff .as-msg { min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); overflow-wrap: anywhere; line-height: var(--lh); }
  #panelStaff .as-msg.user { justify-self: end; max-width: min(42em, 92%); background: var(--c-violet-deep); border: 1px solid var(--c-violet-strong); color: var(--c-text-strong); white-space: pre-wrap; }
  #panelStaff .as-msg.bot { justify-self: stretch; background: var(--c-surface-1); border: 1px solid var(--c-line); color: var(--c-text); }
  #panelStaff .as-msg.err { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); background: color-mix(in srgb, var(--c-danger) 7%, var(--c-surface-1)); color: var(--c-danger-text); }
  #panelStaff .as-msg :is(h3, h4, h5) { margin: var(--sp-2) 0 var(--sp-1); color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; }
  #panelStaff .as-msg :is(h3, h4, h5):first-child { margin-top: 0; }
  #panelStaff .as-msg p { margin: var(--sp-1) 0; white-space: pre-line; }
  #panelStaff .as-msg :is(ul, ol) { margin: var(--sp-1) 0; padding-left: 1.4em; }
  #panelStaff .as-msg li { margin: 2px 0; }
  #panelStaff .as-msg code { padding: 0 var(--sp-1); background: var(--c-surface-2); border-radius: var(--r-xs); color: var(--c-gold); font-size: .92em; }
  #panelStaff .as-msg b { color: var(--c-text-strong); }
  #panelStaff .as-code { position: relative; margin: var(--sp-2) 0; }
  #panelStaff .as-code pre { margin: 0; padding: var(--sp-2) var(--sp-3); padding-right: 6em; overflow-x: auto; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: #d9f7e3; /* verde de terminal: só no código */ font-size: .88em; line-height: var(--lh); white-space: pre; }
  #panelStaff .as-code pre code { padding: 0; background: none; color: inherit; font-size: 1em; }
  #panelStaff .as-code > .ui-btn { position: absolute; top: var(--sp-1); right: var(--sp-1); }
  #panelStaff .as-tools { margin: 0 0 var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); }
  #panelStaff .as-tools summary { cursor: pointer; user-select: none; }
  #panelStaff .as-tools ul { margin: var(--sp-1) 0 0; padding-left: 1.2em; }
  #panelStaff .as-tools li.no { color: var(--c-danger-text); }
  #panelStaff .as-foot { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-line-soft); color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStaff .as-foot .sp { flex: 1 1 0; }
  #panelStaff .as-think { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); }
  #panelStaff .as-think .upd-dots { margin: 0; }
  #panelStaff .as-sugg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  #panelStaff .as-sugg > .ui-btn { white-space: normal; text-align: left; }
  #panelStaff .as-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
  #panelStaff .as-form textarea { min-height: 3.4em; max-height: 12em; }
  #panelStaff .as-form > .ui-btn { min-height: var(--ctl-lg); padding: 0 var(--sp-5); }
  #panelStaff .as-form small { grid-column: 1 / -1; color: var(--c-text-muted); font-size: var(--fs-xs); }
  @container painel (max-width: 40em) {
    #panelStaff .as-log { max-height: 55vh; padding: var(--sp-2); }
    #panelStaff .as-msg.user { max-width: 100%; }
    #panelStaff .as-form { grid-template-columns: minmax(0, 1fr); }
    #panelStaff .as-form > .ui-btn { width: 100%; }
    #panelStaff .as-sugg > .ui-btn { flex: 1 1 100%; justify-content: flex-start; }
    #panelStaff .as-code { display: grid; gap: var(--sp-1); }
    #panelStaff .as-code > .ui-btn { position: static; justify-self: end; order: -1; }
    #panelStaff .as-code pre { padding-right: var(--sp-3); font-size: .8em; }
  }

  /* ---------- Balanceamento (docs/balanceamento.md) ---------- */
  #panelStaff .bal { display: grid; gap: var(--sp-3); min-width: 0; }
  #panelStaff .bal-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; }
  #panelStaff .bal-ver { color: var(--c-text-muted); font-size: var(--fs-sm); }
  #panelStaff .bal-ver b { color: var(--c-text-strong); font-weight: var(--fw-bold); }
  #panelStaff .bal-pill { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border: 1px solid; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; }
  #panelStaff .bal-pill.on { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, var(--c-surface-1)); }
  #panelStaff .bal-pill.off { color: var(--c-text-2); border-color: var(--c-line-strong); background: var(--c-surface-2); }
  #panelStaff .bal-top .sp { flex: 1 1 0; }
  #panelStaff .bal-top > .ui-btn.go { background: var(--c-ok-deep); border-color: var(--c-ok); }
  #panelStaff .bal-warn { margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 8%, var(--c-surface-1)); border: 1px solid var(--c-gold-dark); border-left: 3px solid var(--c-gold); border-radius: var(--r-sm); color: var(--c-text); font-size: var(--fs-sm); overflow-wrap: anywhere; }
  #panelStaff .bal-badge { display: inline-block; padding: 1px var(--sp-1); border-radius: var(--r-xs); background: var(--c-gold); color: #2a1a05; /* texto escuro sobre o ouro (o mesmo do .ui-badge.gold) */ font: var(--fw-bold) 11px/1.3 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; }
  #panelStaff .bal-badge.pend { background: var(--c-surface-2); color: var(--c-gold); box-shadow: inset 0 0 0 1px var(--c-gold); }
  #panelStaff .bal-card { display: grid; gap: var(--sp-3); min-width: 0; margin: 0; padding: var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  #panelStaff .bal-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0; }
  #panelStaff .bal-head > h4 { flex: 1 1 auto; margin: 0; }
  /* Visual | Código: o .ui-seg do kit, em versalete pequeno. */
  #panelStaff .bal-mode { flex: none; }
  #panelStaff .bal-mode > button { font: var(--fw-bold) var(--fs-xs)/1 var(--font-ui); letter-spacing: .06em; }
  #panelStaff :is(.bal-keys, .bal-note) { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); overflow-wrap: anywhere; }
  #panelStaff .bal-keys b { color: var(--c-gold); font-weight: var(--fw-semi); }
  #panelStaff .bal-sub { margin: var(--sp-2) 0 0; color: var(--c-title); font-size: var(--fs-d-sm); }
  #panelStaff .bal-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-2); }
  #panelStaff .bal-tools > input { flex: 1 1 12em; width: auto; }
  #panelStaff .bal-tools > .ui-btn { min-height: var(--ctl-md); }
  #panelStaff .bal-cols { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-2); padding: var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  #panelStaff .bal-cols > .ui-btn:not(.on):not(.act) { background: var(--c-surface-1); border-color: var(--c-line); color: var(--c-text-muted); box-shadow: none; }
  #panelStaff .bal-cols > .ui-btn.on { background: var(--c-violet-deep); border-color: var(--c-violet); }
  #panelStaff .bal-cols > .ui-btn.act { background: var(--c-surface-3); border-color: var(--c-line-strong); }
  #panelStaff .bal-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  #panelStaff .bal-split.open { grid-template-columns: minmax(0, 1fr) minmax(17em, 23em); }
  /* A tabela rola só de lado (a janela é que rola para baixo: uma rolagem vertical só). */
  #panelStaff .bal-scroll { overflow: auto hidden; overscroll-behavior-x: contain; background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  #panelStaff .bal-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  #panelStaff .bal-table th { position: sticky; top: 0; z-index: 2; padding: var(--sp-2); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-align: left; white-space: nowrap; text-transform: uppercase; }
  #panelStaff .bal-table td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--c-line-soft); vertical-align: middle; white-space: nowrap; }
  #panelStaff .bal-table tbody tr:hover td { background: var(--c-surface-1); }
  #panelStaff .bal-table .ent { position: sticky; left: 0; z-index: 1; min-width: 11em; max-width: 15em; padding-left: var(--sp-3); background: var(--c-sunken); border-right: 1px solid var(--c-line); }
  #panelStaff .bal-table th.ent { z-index: 3; background: var(--c-surface-2); }
  #panelStaff .bal-table .ent b { display: block; color: var(--c-text); font-weight: var(--fw-semi); white-space: normal; overflow-wrap: anywhere; }
  #panelStaff .bal-table .ent small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStaff .bal-table tr.chg .ent b::after { content: " ●"; color: var(--c-gold); font-size: .7em; vertical-align: .15em; }
  #panelStaff .bal-table tr.sel :is(td, .ent) { background: color-mix(in srgb, var(--c-violet) 16%, var(--c-sunken)); }
  #panelStaff .bal-table .pen { width: 2.6em; padding: 0 var(--sp-1); }
  #panelStaff .bal-table .pen > .ui-btn { width: var(--ctl-sm); padding: 0; }
  #panelStaff .bal-scroll.form { width: fit-content; max-width: 100%; }
  #panelStaff .bal-table.form { min-width: 0; }
  #panelStaff .bal-table.form td.lab { min-width: 16em; max-width: 26em; color: var(--c-text); white-space: normal; }
  #panelStaff .bal-table.form td.lab small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStaff .bal-table.form td.def { color: var(--c-text-muted); }
  #panelStaff .bal-in { width: 6.5em; min-height: var(--ctl-sm); padding: 0 var(--sp-2); background: var(--c-bg); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); color: var(--c-text); font: inherit; text-align: right; }
  #panelStaff .bal-in.text { width: 11em; text-align: left; }
  #panelStaff .bal-in.pairs { width: 10em; text-align: left; }
  #panelStaff select.bal-in { width: auto; text-align: left; }
  #panelStaff .bal-in.mod { border-color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 12%, var(--c-bg)); color: var(--c-title); }
  #panelStaff .bal-in.dirty { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold); }
  #panelStaff .bal-chk { display: inline-grid; place-items: center; width: 2.4em; min-height: var(--ctl-sm); padding: 0; }
  #panelStaff .bal-ro { color: var(--c-text-muted); }
  #panelStaff .bal-drawer { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-violet-strong); border-radius: var(--r-md); box-shadow: var(--sh-glow-violet); }
  #panelStaff .bal-drawer header { display: flex; align-items: baseline; gap: var(--sp-2); }
  #panelStaff .bal-drawer h5 { flex: 1; margin: 0; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; }
  #panelStaff .bal-drawer header small { color: var(--c-text-muted); }
  #panelStaff .bal-drawer label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-2); align-items: center; padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-line-soft); color: var(--c-text); font-size: var(--fs-sm); }
  #panelStaff .bal-drawer label small { grid-column: 1 / -1; color: var(--c-text-muted); font-size: var(--fs-xs); }
  #panelStaff .bal-drawer .final { padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-ok) 8%, var(--c-sunken)); border: 1px solid var(--c-ok-deep); border-radius: var(--r-sm); color: var(--c-ok); font-size: var(--fs-sm); line-height: var(--lh); }
  #panelStaff .bal-drawer .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-1); }
  #panelStaff .bal-json { display: grid; gap: var(--sp-2); }
  #panelStaff .bal-json textarea { min-height: 24em; padding: var(--sp-3); background: var(--c-bg); font: .85em/1.45 ui-monospace, Consolas, monospace; }
  #panelStaff .bal-json .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  #panelStaff .bal-prev td { text-align: right; }
  #panelStaff .bal-prev td.ent { text-align: left; }
  /* Rodapé preso embaixo da janela: fundo próprio, nunca cobre o último item (fica no fim do fluxo). */
  #panelStaff .bal-foot { position: sticky; bottom: calc(-1 * var(--pb)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 calc(-1 * var(--pr)) calc(-1 * var(--pb)) calc(-1 * var(--pl)); padding: var(--sp-3) var(--pr) max(var(--sp-3), var(--safe-b)) var(--pl); background: var(--c-window-head); border-top: 1px solid var(--c-line-strong); box-shadow: 0 -8px 14px -6px rgba(0, 0, 0, .6); }
  #panelStaff .bal-foot .cnt { flex: 1 1 auto; color: var(--c-text-muted); font-weight: var(--fw-semi); }
  #panelStaff .bal-foot .cnt.has { color: var(--c-gold); }
  #panelStaff .bal-foot > .ui-btn.save { min-height: var(--ctl-md); padding: 0 var(--sp-6); background: var(--c-ok-deep); border-color: var(--c-ok); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .08em; }
  #panelStaff .bal-ask { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: center; padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-gold-dark); border-left: 3px solid var(--c-gold); border-radius: var(--r-md); }
  #panelStaff .bal-ask p { grid-column: 1 / -1; margin: 0; color: var(--c-text); font-size: var(--fs-sm); }
  #panelStaff .bal-ask.short { display: flex; flex-wrap: wrap; }
  #panelStaff .bal-ask.short p { flex-basis: 100%; }
  @container painel (max-width: 40em) {
    #panelStaff .bal-split.open { grid-template-columns: minmax(0, 1fr); }
    #panelStaff .bal-drawer { position: static; }
    #panelStaff .bal-table.form td.lab { min-width: 9em; }
    #panelStaff .bal-ask { grid-template-columns: minmax(0, 1fr) auto; }
    #panelStaff .bal-ask input { grid-column: 1 / -1; }
    #panelStaff .bal-foot .cnt { flex-basis: 100%; }
    #panelStaff .bal-foot > .ui-btn { flex: 1 1 auto; }
  }
  [hidden] { display: none !important; }
  #panelStaff .cxa-wrap > .ui-btn { justify-self: start; }
  /* No celular (e na tela deitada, baixa) o rodapé do Balanceamento fica no fim do fluxo: preso, ele
     cobriria um terço da tela. As pendências continuam no número de cada aba. */
  @media (max-width: 599px), (max-height: 500px) {
    #panelStaff .bal-foot { position: static; margin-bottom: 0; padding-bottom: var(--sp-3); box-shadow: none; }
  }
  /* ---- Mochila (#panelEquip, à direita do anel) e os selos das peças. Dono: mochila-forja. ----
     docs/design.md: tokens e kit. Abas (.ui-tabs), a barra do Selecionar, a grade, as páginas, o
     detalhe das pilhas, a barra de baixo do modo Selecionar e a confirmação (#bagWrap). */

  /* Aprimoramento: selo +N nos ícones (span, porque o `i` da mochila é o selo E) e os ícones dos
     consumíveis; valem em toda janela que mostra a peça (Market, Correio, Codex). */
  .enh-badge { position: absolute; top: 1px; right: 2px; z-index: 1; color: #ffe08a; font: 400 15px/1 "Jersey 10", system-ui, sans-serif; text-shadow: 1px 0 #2a1a05, -1px 0 #2a1a05, 0 1px #2a1a05, 0 -1px #2a1a05, 0 0 4px rgba(255, 196, 64, .55); pointer-events: none; }
  .enh-badge.big { top: 3px; right: 5px; font-size: 22px; }
  .it-art { position: relative; }
  .it-tags .enh { color: var(--c-gold); border-color: var(--c-gold-dark); }
  .enh-txt { color: var(--c-gold); font-weight: var(--fw-bold); }
  :is(.mk-chosen, .mk-card) .ic, #mkPick button { position: relative; }
  .scroll-ic { image-rendering: pixelated; }
  .scroll-ic.blessed { filter: drop-shadow(0 0 3px rgba(255, 214, 90, .7)); }
  .pot-ic { display: inline-block; flex: none; width: 16px; height: 22px; image-rendering: pixelated;
    background: linear-gradient(var(--pc), var(--pc)) 3px 9px / 10px 11px no-repeat, linear-gradient(#e8e6f0, #e8e6f0) 5px 4px / 6px 5px no-repeat, linear-gradient(#8a5a2b, #8a5a2b) 5px 1px / 6px 3px no-repeat, linear-gradient(#e8e6f0, #e8e6f0) 1px 8px / 14px 14px no-repeat; }

  /* ---------- Abas: Equipamentos | Consumíveis | Materiais | Loot (o .ui-tabs do kit) ----------
     O número de cada uma fica apagado ao lado; na coluna estreita vai para baixo do nome. */
  #panelEquip .bag-tabs { margin-bottom: var(--sp-3); touch-action: manipulation; }
  #panelEquip .bag-tabs > button { flex: 1 1 auto; }
  #panelEquip .bag-tabs > button em { color: var(--c-text-faint); font-style: normal; font-size: .8em; }
  #panelEquip .bag-tabs > button.on em { color: inherit; opacity: .75; }
  @container painel (max-width: 34em) {
    #panelEquip .bag-tabs > button { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: var(--ctl-lg); padding: var(--sp-1); font-size: 1.1em; }
    #panelEquip .bag-tabs > button em { font-size: .75em; line-height: 1; }
  }

  /* ---------- A barra de cima: Selecionar, a dica, os filtros e o aviso ---------- */
  .bag-tools { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .bag-tools:empty { display: none; }
  .bag-tools-head { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
  .bag-tools-head > small { flex: 1 1 14em; min-width: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .bag-tools-head .bag-sel { flex: none; }
  .bag-tools-head .bag-sel.on { background: var(--c-violet-deep); border-color: var(--c-violet); color: var(--c-text-strong); }
  /* Filtros do Selecionar: etiquetas que se tocam (cor da raridade no texto e na borda). */
  .bag-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
  .bag-chips .chip, .bag-chips .chip-sel { --c: var(--c-text-2); display: inline-flex; align-items: center; justify-content: center; min-width: var(--ctl-sm); min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-3); background: var(--c-surface-1); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--c-line)); border-radius: var(--r-sm); box-shadow: none; color: var(--c); font: var(--fw-semi) var(--fs-sm)/1.1 var(--font-ui); white-space: nowrap; }
  .bag-chips .chip:hover:not(:disabled) { background: var(--c-surface-2); filter: none; }
  .bag-chips .chip.on { background: color-mix(in srgb, var(--c) 22%, var(--c-surface-1)); border-color: var(--c); color: var(--c-text-strong); }
  .bag-chips .chip:disabled { opacity: .4; cursor: not-allowed; }
  .bag-chips .chip-sel { --c: var(--c-text); appearance: none; padding-right: 2em; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--c-text-muted) 50%); background-position: calc(100% - 1em) 52%, calc(100% - .7em) 52%; background-size: .32em .32em; background-repeat: no-repeat; background-color: var(--c-surface-1); border-color: var(--c-line-strong); cursor: pointer; }
  .bag-hint { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .bag-msg { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-danger-deep); border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-sunken)); color: var(--c-danger-text); font-size: var(--fs-sm); }
  .bag-msg.ok { border-color: var(--c-ok-deep); background: color-mix(in srgb, var(--c-ok) 10%, var(--c-sunken)); color: var(--c-ok); }
  /* Vender itens (dos Espólios): a dica em cima, dourada. */
  .bag-tools-head > small.bag-sell-hint { color: var(--c-gold); font-size: var(--fs-sm); }

  /* ---------- A grade e as páginas ---------- */
  #panelEquip .bag-grid { gap: var(--sp-1); }
  .tile .lock-badge { position: absolute; left: 1px; bottom: 1px; display: flex; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
  .tile.pick .pick-box { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; display: grid; place-items: center; border: 2px solid var(--c-title); border-radius: var(--r-sm); background: rgba(11, 9, 18, .75); color: var(--c-bg-deep); font: 700 12px/1 var(--font-ui); pointer-events: none; }
  .tile.pick.picked { outline: 2px solid var(--c-gold); outline-offset: 1px; }
  .tile.pick.picked .pick-box { background: var(--c-gold); border-color: var(--c-gold); }
  .tile.pick.nopick { opacity: .45; }
  .tile.pick.nopick .pick-box, .tile.pick .up-badge { display: none; }
  .tile .pick-n { position: absolute; right: 2px; top: 2px; padding: 1px 3px; border-radius: var(--r-xs); background: var(--c-gold); color: var(--c-bg-deep); font: 700 12px/1 var(--font-ui); pointer-events: none; }
  #panelEquip .bag-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
  #panelEquip .bag-pages:empty { display: none; }
  #panelEquip .bag-pages button { display: grid; place-items: center; min-width: var(--ctl-sm); min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: none; color: var(--c-text-faint); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); touch-action: manipulation; }
  #panelEquip .bag-pages button.has { color: var(--c-text-2); }
  #panelEquip .bag-pages button:hover:not(:disabled) { border-color: var(--c-line-strong); color: var(--c-text); filter: none; }
  #panelEquip .bag-pages button.on { background: var(--c-violet-strong); border-color: var(--c-violet); color: var(--c-text-strong); }
  #panelEquip .bag-pages button:disabled { opacity: .35; cursor: default; }
  /* Coluna estreita: as páginas numa linha só (os números já levam a qualquer página; as setas saem). */
  @container painel (max-width: 34em) {
    #panelEquip .bag-pages { flex-wrap: nowrap; }
    #panelEquip .bag-pages button { flex: 1 1 0; min-width: 0; max-width: var(--ctl-lg); padding: 0; }
    #panelEquip .bag-pages button.arrow { display: none; }
  }

  /* ---------- Pilhas (consumíveis, materiais, loot): o mesmo quadrado das peças, com a quantidade ---------- */
  .cons-tile { --c: #6b5520; }
  .cons-tile .ii { width: 70%; height: auto; aspect-ratio: 1; }
  .cons-tile .pot-ic { transform: scale(1.4); }
  .cons-tile .dt-ic { width: 60%; height: 60%; }
  .cons-tile .cnt, .it-art .cnt, :is(.mk-card, .mk-chosen) .ic .cnt, #mkPick .cnt { position: absolute; right: 2px; bottom: 1px; color: #fff; font: 400 14px/1 "Jersey 10", system-ui, sans-serif; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
  .it-art .cnt { right: 5px; bottom: 3px; font-size: 20px; }
  .it-art .pot-ic { transform: scale(2.4); }
  .it-art .dt-ic { width: 56px; height: 56px; }
  /* Materiais dos monstros (Codex, aba Materiais): ícones do atlas itens/materiais.png. */
  .mat-tile { --c: #3d5a2a; }
  /* Itens do Templo (Pena, bênção): a borda clara do Templo. */
  .tmp-tile { --c: #8a7bd0; }
  .cons-tile.ess-tile { --c: #8a5ad0; }
  .cons-tile.loot-tile { --c: #6b6680; }
  /* Aba vazia: o .ui-empty do kit, dentro da grade. */
  .bag-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); background: rgba(17, 15, 30, .55); border: 1px dashed var(--c-line); border-radius: var(--r-md); color: var(--c-text-muted); text-align: center; line-height: var(--lh); }
  .bag-empty b { display: block; color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; }
  /* O detalhe da pilha: texto, de onde vem, as ações e a quantidade. */
  .it-text { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .it-from { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .it-from b { color: var(--c-text-2); font-weight: var(--fw-semi); }
  #panelEquip .item-detail .actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  #panelEquip .item-detail .actions > .ui-btn { flex: 0 1 auto; }
  .bag-qty-box { display: grid; gap: var(--sp-2); }
  .bag-qty { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .bag-qty .lbl { margin-right: var(--sp-1); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .bag-qty input { width: 6em; min-height: var(--ctl-sm); padding: 0 var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); text-align: center; font-variant-numeric: tabular-nums; }
  .bag-qty button { display: grid; place-items: center; min-width: var(--ctl-sm); min-height: var(--ctl-sm); padding: 0 var(--sp-2); }
  .lj-have { color: #b9b3cc; }

  /* ---------- Botões de cor própria: Essência (violeta), Evoluir (azul), "Vender todo o loot" (ouro) ---------- */
  .ui-btn.ess-btn { background: color-mix(in srgb, var(--c-violet) 30%, var(--c-surface-2)); border-color: var(--c-violet); color: var(--c-text-strong); }
  .ui-btn.evo-open { background: var(--c-info-deep); border-color: var(--c-info); color: var(--c-text-strong); }
  .ui-btn.loot-all { flex-direction: column; align-items: flex-start; gap: 2px; margin-left: auto; min-height: var(--ctl-lg); padding: var(--sp-1) var(--sp-4); line-height: 1.1; }
  .ui-btn.loot-all small { font-size: var(--fs-xs); font-weight: var(--fw-semi); opacity: .85; }

  /* ---------- Barra de baixo do Selecionar: o que está marcado e as ações, presa no pé da janela ---------- */
  .bag-bar { position: sticky; bottom: calc(-1 * var(--pb, 1em)); z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin: var(--sp-3) calc(-1 * var(--pr, 1em)) 0 calc(-1 * var(--pl, 1em)); padding: var(--sp-3) var(--pr, 1em) max(var(--sp-3), var(--safe-b)) var(--pl, 1em); background: var(--c-window-head); border-top: 2px solid var(--c-violet); box-shadow: 0 -8px 16px rgba(0, 0, 0, .45); }
  .bag-bar[hidden] { display: none; }
  .bag-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px .3em; min-width: 0; color: var(--c-text-2); }
  .bag-count > small { flex-basis: 100%; }
  .bag-sell-total { white-space: nowrap; }
  .bag-count b { color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .bag-count small { color: var(--c-danger-text); font-size: var(--fs-xs); }
  .bag-sell-total b { color: var(--c-gold); }
  .bag-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .bag-acts .ui-btn { flex-direction: column; gap: 0; min-height: var(--ctl-lg); padding: var(--sp-1) var(--sp-3); white-space: normal; line-height: 1.15; }
  .bag-acts .ui-btn small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); opacity: .85; }
  .bag-acts .ess-btn .ii { display: none; }
  .bag-acts.sell-only { flex: 1 1 18em; }
  .bag-acts.sell-only .ui-btn { flex: 1 1 auto; }

  /* ---------- Confirmar vender, desmontar ou descartar (#bagWrap, a moldura dos diálogos) ---------- */
  .enh-wrap > .enh-box.bag-box { width: min(100%, 28em); }
  .enh-wrap > .enh-box.bag-box.danger { --dlg: var(--c-danger); --dlg-ink: var(--c-danger-text); }
  .enh-wrap > .enh-box.bag-box.ess { --dlg: var(--c-violet); --dlg-ink: var(--c-accent-text); }
  .bag-what { margin: 0; color: var(--c-text-2); line-height: var(--lh); }
  .bag-list { margin: 0; padding: var(--sp-2) var(--sp-3); list-style: none; display: grid; gap: var(--sp-1); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  .bag-list li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
  .bag-list li b { color: var(--c-gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .bag-list li b.ess { color: var(--c-accent-text); }
  .bag-list li.val span::after { content: " ★"; color: var(--c-danger-text); }
  .bag-list li.more { color: var(--c-text-muted); }
  .bag-skip { margin: 0; color: var(--c-danger-text); font-size: var(--fs-sm); }
  .bag-total { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 9%, var(--c-sunken)); border: 1px solid var(--c-gold-dark); border-radius: var(--r-md); color: var(--c-text-2); }
  .bag-total b { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
  .bag-total.ess { background: color-mix(in srgb, var(--c-violet) 12%, var(--c-sunken)); border-color: var(--c-line-strong); }
  .bag-total.ess b { display: inline-flex; align-items: center; gap: .3em; color: var(--c-accent-text); }
  .bag-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  .bag-warn { margin: 0; color: var(--c-danger-text); font-size: var(--fs-sm); line-height: var(--lh); }
  .bag-extra { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-danger-deep); border-radius: var(--r-md); background: color-mix(in srgb, var(--c-danger) 10%, var(--c-sunken)); color: var(--c-text); font-size: var(--fs-sm); line-height: var(--lh); cursor: pointer; }
  .bag-extra input { width: 1.3em; height: 1.3em; flex: none; margin: .1em 0 0; accent-color: var(--c-danger); }

  @media (pointer: coarse) {
    .bag-chips .chip, .bag-chips .chip-sel { min-height: var(--touch); }
    .tile.pick .pick-box { width: 20px; height: 20px; font-size: 14px; }
    .bag-extra input { width: 1.6em; height: 1.6em; }
    .bag-qty input { min-height: var(--touch); }
  }
  /* Celular em pé: a barra de baixo com os botões dividindo a largura. */
  @media (max-width: 459px) {
    .bag-bar { justify-content: stretch; }
    .bag-acts { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .bag-acts.sell-only { grid-template-columns: minmax(0, 1fr); }
    .bag-acts .ui-btn { padding-inline: var(--sp-1); }
  }
  /* Celular deitado: pouca altura, os filtros rolam de lado numa linha só. */
  @media (max-height: 500px) and (min-width: 600px) {
    .bag-chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
    .bag-chips > * { flex: none; }
    .bag-hint { display: none; }
    .bag-bar { padding-block: var(--sp-2); }
  }

  /* O fundo dos diálogos (a moldura deles está em ui/dialogs/dialogs.css): por cima da janela. */
  .enh-wrap { position: absolute; inset: 0; z-index: var(--z-dialogo); display: grid; place-items: center; padding: var(--sp-4); background: var(--c-scrim); }
  .enh-wrap[hidden] { display: none; }
  /* ---- Diálogos da área Personagem (docs/design.md) ----
     Aprimorar, Evoluir, Forja, Troca de classe, Atributos da peça e a confirmação da mochila usam a
     moldura das janelas em ponto menor: faixa do título presa no topo (losango e título na cor do
     diálogo, fechar quadrado), corpo em coluna no ritmo de 12 px e a barra de botões presa embaixo.
     A cor de cada um: --dlg (a borda de cima e o losango) e --dlg-ink (o título). O fundo escuro
     (.enh-wrap) está em ui/panels/bag/bag.css. No celular em pé vira folha de baixo para cima. */
  .enh-wrap > .enh-box { --dlg: var(--c-gold); --dlg-ink: var(--c-gold); --px: var(--sp-4); width: min(100%, 27em); max-height: 100%; overflow: auto; overscroll-behavior: contain; scroll-padding: 4em 0 5em; display: grid; grid-auto-rows: max-content; gap: var(--sp-3); align-content: start; padding: 0 var(--px) var(--sp-4); background: var(--c-window); border: var(--bw) solid var(--c-line-strong); border-top-color: var(--dlg); border-radius: var(--r-lg); box-shadow: var(--sh-window), inset 0 0 0 1px var(--c-line-hi); }
  .enh-wrap > .enh-box:has(> .enh-actions:last-child) { padding-bottom: 0; }
  .enh-wrap .enh-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 3.25em; margin: 0 calc(-1 * var(--px)); padding: var(--sp-2) var(--px); background: var(--c-window-head); border-bottom: 1px solid var(--c-line); box-shadow: inset 0 1px 0 var(--c-line-hi); }
  .enh-wrap .enh-head strong { display: flex; align-items: center; gap: .4em; min-width: 0; font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--dlg-ink); overflow-wrap: anywhere; text-shadow: 0 2px 0 var(--c-bg-deep); }
  .enh-wrap .enh-head strong::before { content: ""; flex: none; width: .3em; height: .3em; background: var(--dlg); transform: rotate(45deg); }
  .enh-wrap .enh-head > .enh-x { flex: none; display: grid; place-items: center; width: var(--ctl-sm); height: var(--ctl-sm); min-width: 0; min-height: 0; padding: 0; background: var(--c-surface-1); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); color: var(--c-text-2); font: var(--fw-bold) 1em/1 var(--font-ui); }
  .enh-wrap .enh-head > .enh-x:hover:not(:disabled) { background: var(--c-danger-deep); border-color: var(--c-danger); color: var(--c-text-strong); filter: none; }
  /* A barra de botões: a última do diálogo fica presa embaixo, com fundo próprio (nada passa por baixo dela). */
  .enh-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .enh-actions > .ui-btn { flex: 1 1 auto; }
  .enh-actions > .enh-cost { flex-basis: 100%; margin: 0; }
  .enh-actions > .ui-btn.secondary { flex: 0 1 auto; }
  .enh-actions > .ui-btn:only-child { flex: 1 1 auto; }
  .enh-wrap .enh-box > .enh-actions:last-child { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--px)); padding: var(--sp-3) var(--px) max(var(--sp-3), var(--safe-b)); background: var(--c-window); border-top: 1px solid var(--c-line); box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .6); }
  /* Rótulos de botão compridos ("Fundir 1 Proteção: 10 normais + 12.800 de ouro") quebram a linha em vez de cortar. */
  .enh-box .ui-btn { white-space: normal; line-height: 1.2; padding-block: var(--sp-1); }
  .enh-box .ui-btn > small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); opacity: .85; }
  /* Cabeçalho de seção: o .ui-h do kit, colado no que ele apresenta. */
  .enh-h { display: flex; align-items: center; gap: .4em; margin: var(--sp-1) 0 calc(-1 * var(--sp-1)); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; color: var(--c-accent-text); }
  .enh-h::before { content: ""; flex: none; width: .32em; height: .32em; background: var(--c-violet); transform: rotate(45deg); }

  /* A peça em destaque: ícone em dobro com o +, nome na cor da raridade e o resultado embaixo. */
  .enh-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: radial-gradient(120% 140% at 0 50%, color-mix(in srgb, var(--c) 18%, transparent), transparent 62%), var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); overflow: hidden; }
  .enh-art { position: relative; display: grid; place-items: center; width: 76px; height: 76px; background: var(--c-bg); border: var(--bw) solid var(--c); border-radius: var(--r-md); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 28%, transparent); }
  .enh-lv { position: absolute; right: 3px; top: 1px; color: var(--c-gold); font: var(--fw-regular) 26px/1 var(--font-display); text-shadow: 2px 0 var(--c-bg-deep), -2px 0 var(--c-bg-deep), 0 2px var(--c-bg-deep), 0 -2px var(--c-bg-deep); }
  .enh-name { min-width: 0; display: grid; gap: var(--sp-1); }
  .enh-name b { color: var(--c); font: var(--fw-regular) var(--fs-d-md)/1.05 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
  .enh-name small { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-tight); }
  .enh-res { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid; border-radius: var(--r-sm); }
  .enh-res b { font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; }
  .enh-res.ok { background: color-mix(in srgb, var(--c-gold) 12%, var(--c-sunken)); border-color: var(--c-gold-deep); color: var(--c-text); }
  .enh-res.ok b { color: var(--c-gold); text-shadow: var(--sh-glow-gold); }
  .enh-res.kept, .enh-res.down { background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-text-2); }
  .enh-res.kept b, .enh-res.down b { color: var(--c-accent-text); }
  .enh-res.broke { background: color-mix(in srgb, var(--c-danger) 14%, var(--c-sunken)); border-color: var(--c-danger-deep); color: var(--c-text); }
  .enh-res.broke b { color: var(--c-danger-text); }
  .res-broke .enh-art .ii { filter: grayscale(1) brightness(.5); opacity: .6; }
  .enh-crack { position: absolute; inset: 10%; background: linear-gradient(118deg, transparent 46%, var(--c-danger) 47% 50%, transparent 51%), linear-gradient(62deg, transparent 47%, var(--c-danger) 48% 50%, transparent 51%); pointer-events: none; }
  /* Animações curtas do resultado (paradas com prefers-reduced-motion). */
  .enh-hero.anim.res-ok::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 50%, rgba(255, 224, 140, .75), transparent 55%); animation: enh-flash .9s ease-out forwards; pointer-events: none; }
  .enh-hero.anim.res-ok .enh-art { animation: enh-pop .6s ease-out; }
  .enh-hero.anim.res-ok .enh-lv { animation: enh-lv .7s ease-out; }
  .enh-hero.anim:is(.res-kept, .res-down) .enh-art { animation: enh-shake .45s ease-in-out; }
  .enh-hero.anim.res-broke .enh-art { animation: enh-break .7s ease-in; }
  .enh-hero.anim .enh-res { animation: enh-in .35s ease-out; }
  @keyframes enh-flash { from { opacity: 1; } to { opacity: 0; } }
  @keyframes enh-pop { 0% { transform: scale(1); } 35% { transform: scale(1.14); box-shadow: 0 0 28px #ffd166; } 100% { transform: scale(1); } }
  @keyframes enh-lv { 0% { transform: translateY(8px) scale(1.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
  @keyframes enh-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
  @keyframes enh-break { 0% { transform: none; } 30% { transform: rotate(-4deg) scale(1.05); } 60% { transform: rotate(3deg); } 100% { transform: scale(.94); } }
  @keyframes enh-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes dlg-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .enh-hero.anim .enh-art, .enh-hero.anim .enh-lv, .enh-hero.anim .enh-res { animation: none; }
    .enh-hero.anim.res-ok::after { display: none; }
  }

  /* Agora × próximo: uma tabela de três colunas num poço. */
  .enh-cmp { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  .enh-cmp .h { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
  .enh-cmp .k { color: var(--c-text-2); }
  .enh-cmp b { font: var(--fw-regular) var(--fs-xl)/1 var(--font-display); color: var(--c-text); font-variant-numeric: tabular-nums; }
  .enh-cmp b.up { color: var(--c-ok); }
  /* A chance: o número grande, a barra e a frase do risco. */
  .enh-odds { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  .enh-pct { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
  .enh-pct small { color: var(--c-text-2); font-size: var(--fs-sm); }
  .enh-pct b { color: var(--c-gold); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  .enh-odds.safe .enh-pct b { color: var(--c-ok); }
  .enh-meter { height: 8px; overflow: hidden; background: var(--c-bg-deep); border: 1px solid var(--c-line); border-radius: var(--r-xs); }
  .enh-meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--c-gold) 0 4px, var(--c-gold-strong) 4px 6px); }
  .enh-odds.safe .enh-meter i { background: repeating-linear-gradient(90deg, var(--c-ok) 0 4px, var(--c-ok-deep) 4px 6px); }
  .enh-tag { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh); }
  .enh-tag.safe { background: color-mix(in srgb, var(--c-ok) 10%, var(--c-sunken)); border-color: var(--c-ok-deep); color: var(--c-ok); }
  .enh-tag.mid { background: color-mix(in srgb, var(--c-gold) 9%, var(--c-sunken)); border-color: var(--c-gold-dark); color: var(--c-gold); }
  .enh-tag.bad { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-sunken)); border-color: var(--c-danger-deep); color: var(--c-danger-text); }
  /* Escolhas (pergaminho, Proteção): linhas que se tocam inteiras; a marcada ganha a borda dourada. */
  .enh-scrolls { display: grid; gap: var(--sp-2); }
  .enh-opt, .enh-prot { display: grid; align-items: center; gap: var(--sp-3); min-height: var(--ctl-lg); margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
  .enh-opt { grid-template-columns: auto minmax(0, 1fr) auto; }
  .enh-prot { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .enh-opt:hover:not(:disabled), .enh-prot:not(.off):hover { border-color: var(--c-line-strong); background: var(--c-surface-2); filter: none; }
  .enh-opt.on { border-color: var(--c-gold-deep); background: color-mix(in srgb, var(--c-gold) 7%, var(--c-surface-2)); box-shadow: inset 3px 0 0 var(--c-gold); }
  .enh-opt.none .tx, .enh-opt.none .ii { opacity: .55; }
  .enh-opt .tx, .enh-prot span { display: grid; gap: 2px; min-width: 0; }
  .enh-opt .tx b, .enh-prot span b { font-weight: var(--fw-semi); color: var(--c-text); }
  .enh-opt .tx small, .enh-prot small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh-tight); }
  .enh-opt .have, .enh-prot .have { font: var(--fw-regular) var(--fs-xl)/1 var(--font-display); color: var(--c-text); font-variant-numeric: tabular-nums; }
  .enh-prot.off { opacity: .55; cursor: default; }
  .enh-prot input { width: 1.15em; height: 1.15em; margin: 0; accent-color: var(--c-gold); }
  .enh-note { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .enh-note.bad { color: var(--c-danger-text); }
  .enh-note.ok { color: var(--c-ok); }
  .enh-msg { margin: 0; color: var(--c-warn); }
  /* Ferreiro: os dois "Fundir", um embaixo do outro, na largura toda. */
  .enh-fuse { flex-direction: column; }
  .enh-fuse > .ui-btn { flex: none; width: 100%; }
  .enh-admin .sf-row .ok { color: var(--c-ok); }

  /* Troca de classe (Pergaminho de Troca de Classe): os cartões da escolha de classe do início, em violeta. */
  .enh-wrap > .enh-box.cc-box { --dlg: var(--c-violet); --dlg-ink: var(--c-accent-text); width: min(100%, 46em); }
  .lj-art .cc-ic { width: 72px; height: 72px; filter: drop-shadow(0 .2rem .6rem rgba(0, 0, 0, .55)); }
  .cc-pick { grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: var(--sp-3); }
  .cc-pick > button { align-content: start; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-raised); color: inherit; transition: border-color var(--t-fast), background-color var(--t-fast); }
  .cc-pick > button:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); filter: none; }
  .cc-pick > button.on { border-color: var(--c-violet); background: color-mix(in srgb, var(--c-violet) 14%, var(--c-surface-2)); box-shadow: inset 0 0 0 1px var(--c-violet), var(--sh-glow-violet); }
  .cc-pick b { color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .cc-pick em { color: var(--c-gold); font-size: var(--fs-xs); }
  .cc-pick small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .cc-from { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); color: var(--c-text-2); line-height: var(--lh); }
  .cc-from .portrait { flex: none; width: 3.4em; height: 3.4em; }
  .cc-swap > span:last-child { color: var(--c-text-strong); font-weight: var(--fw-bold); }
  .cc-arrow { color: var(--c-accent-text); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); }
  .cc-list { margin: 0; padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 1.1em); display: grid; gap: var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .cc-list b { color: var(--c-text-strong); }
  .cc-msg { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-danger-deep); border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-sunken)); color: var(--c-danger-text); line-height: var(--lh); }
  .cc-done { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3); text-align: center; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c-violet) 26%, transparent), var(--c-sunken) 70%); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); }
  .cc-done .portrait { width: 6em; height: 6em; }
  .cc-done b { color: var(--c-accent-text); font: var(--fw-regular) var(--fs-d-lg)/1 var(--font-display); letter-spacing: .02em; }
  .cc-done p { margin: 0; color: var(--c-text-2); line-height: var(--lh); }
  @media (max-width: 459px) { .cc-pick { grid-template-columns: minmax(0, 1fr); } }

  /* Celular em pé: todo diálogo vira folha de baixo para cima (até 92% da altura), na largura toda. */
  @media (max-width: 599px) {
    .enh-wrap { place-items: end stretch; padding: 0; }
    .enh-wrap > .enh-box, .enh-wrap > .enh-box.cc-box { width: 100%; max-height: 92%; border-width: var(--bw) 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; animation: dlg-sheet var(--t-slow) var(--ease); }
    .enh-wrap > .enh-box:not(:has(> .enh-actions:last-child)) { padding-bottom: max(var(--sp-4), var(--safe-b)); }
    .enh-art { width: 64px; height: 64px; }
    .enh-art .ii.x2 { width: 52px; height: 52px; }
  }
  @media (prefers-reduced-motion: reduce) { .enh-wrap > .enh-box, .enh-wrap > .enh-box.cc-box { animation: none; } }
  /* Celular deitado: pouca altura; o responsive.css põe o corpo em duas colunas. Aqui só o recuo menor. */
  @media (max-height: 500px) and (min-width: 600px) {
    .enh-wrap { padding: var(--sp-2); }
    .enh-wrap > .enh-box { --px: var(--sp-3); width: min(100%, 52em); gap: var(--sp-2) var(--sp-4); }
    .enh-wrap .enh-head { min-height: 2.8em; padding-block: var(--sp-1); }
    .enh-wrap .enh-box > .enh-actions:last-child { padding-block: var(--sp-2); }
    .enh-art { width: 60px; height: 60px; }
    .enh-art .ii.x2 { width: 48px; height: 48px; }
  }
  /* ---------- Evoluir (azul): a escolha da peça, os níveis e o custo ---------- */
  .enh-wrap > .enh-box.evo-box { --dlg: var(--c-info); --dlg-ink: var(--c-info); width: min(100%, 32em); }
  .evo-a, .evo-b { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  .evo-b:empty { display: none; }
  /* Faixa de peças (também a da Forja): quadrados de 56 px (cabem o ícone, o "Nv 100", o +N e o E sem
     encostar) em duas linhas que rolam de lado: o diálogo já rola em pé, e uma rolagem dentro da outra
     prende o dedo. Com a mochila cheia, uma grade em pé com linhas automáticas encolhia os quadrados. */
  .evo-pick { --t: 56px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, var(--t)); grid-auto-columns: var(--t); align-content: start; gap: var(--sp-1); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: var(--sp-1) var(--sp-1) var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  .evo-pick > .tile { scroll-snap-align: start; width: var(--t); height: var(--t); min-width: var(--t); min-height: var(--t); aspect-ratio: auto; justify-self: center; }
  .evo-pick > small { grid-row: 1 / -1; width: max-content; align-self: center; padding: var(--sp-2); color: var(--c-text-muted); }
  .evo-pick .tile.sel { outline: 2px solid var(--c-info); outline-offset: -1px; box-shadow: 0 0 10px rgba(143, 216, 255, .45); }
  .evo-pick .tile.maxed { opacity: .55; }
  /* Filtros e atalhos: as etiquetas do Selecionar, em azul. */
  .evo-filt, .evo-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
  :is(.evo-filt, .evo-quick) .chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: var(--ctl-sm); min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-3); background: var(--c-surface-1); border: 1px solid color-mix(in srgb, var(--c-info) 40%, var(--c-line)); border-radius: var(--r-sm); box-shadow: none; color: var(--c-info); font: var(--fw-semi) var(--fs-sm)/1.1 var(--font-ui); white-space: nowrap; }
  :is(.evo-filt, .evo-quick) .chip:hover:not(:disabled) { background: var(--c-surface-2); filter: none; }
  :is(.evo-filt, .evo-quick) .chip.on { background: var(--c-info-deep); border-color: var(--c-info); color: var(--c-text-strong); }
  .evo-filt .chip b { color: inherit; opacity: .75; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
  .evo-tip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-info) 8%, var(--c-sunken)); border: 1px solid var(--c-info-deep); border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .evo-tip > span { flex: 1 1 14em; min-width: 0; }
  .evo-have { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); color: var(--c-text-2); font-size: var(--fs-sm); }
  .evo-have span { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .evo-have b { color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
  .evo-jump { display: flex; align-items: baseline; gap: .4em; font: var(--fw-regular) var(--fs-xl)/1 var(--font-display); }
  .evo-jump span { color: var(--c-text-2); }
  .evo-jump i { color: var(--c-info); font-style: normal; }
  .enh-name .evo-jump b { color: var(--c-ok); font: inherit; }
  .evo-lv { display: flex; justify-content: space-between; align-items: baseline; color: var(--c-text-2); }
  .evo-lv b { color: var(--c-info); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); }
  .evo-box input[type=range] { width: 100%; max-width: 20em; margin: 0; accent-color: var(--c-info); }
  /* O valor e a variação ficam juntos; no celular estreito a variação desce inteira para a linha de baixo. */
  .enh-cmp .evo-d { display: inline-block; }
  /* em é a letra do número (Jersey grande): .62em dá a letra de apoio da janela. */
  .enh-cmp .evo-d { margin-left: .4em; color: var(--c-ok); font: var(--fw-semi) max(12px, .62em)/1 var(--font-ui); white-space: nowrap; }
  .evo-pw { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
  .evo-cost { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .evo-cost > div { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  .evo-cost > div b { display: inline-flex; align-items: center; gap: .3em; color: var(--c-text-strong); font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); font-variant-numeric: tabular-nums; }
  .evo-cost > div small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .evo-cost > div.bad { border-color: var(--c-danger-deep); background: color-mix(in srgb, var(--c-danger) 10%, var(--c-sunken)); }
  .evo-cost > div.bad b { color: var(--c-danger-text); }
  .enh-box .ui-btn.armed { box-shadow: 0 0 0 2px var(--c-gold), var(--sh-glow-gold); }
  @media (pointer: coarse) { :is(.evo-filt, .evo-quick) .chip { min-width: var(--touch); min-height: var(--touch); } }
  /* Celular deitado: a peça à esquerda; os níveis, os atributos e o custo à direita. */
  @media (max-height: 500px) and (min-width: 600px) {
    .enh-wrap > .enh-box.evo-box { width: min(100%, 56em); }
    .enh-wrap .evo-box > .evo-a { grid-column: 1; grid-row: 2 / span 6; }
    .enh-wrap .evo-box > .evo-b { grid-column: 2; }
    .enh-wrap .evo-box > :is(.cc-msg, .enh-tag) { grid-column: 2; }
  }
  /* ---- Morte na caçada (docs/morte.md) ----
     Tela de morte por cima do mapa (o chat e os menus continuam usáveis),
     a faixa da volta automática, a bênção no canto do mapa e o Templo da Loja. */
  .dt-ic { display: inline-block; flex: none; width: 24px; height: 24px; background: center / contain no-repeat; image-rendering: pixelated; vertical-align: middle; }
  .dt-ic.bless { background-image: url(/img/morte/bencao.png); }
  .dt-ic.feather { background-image: url(/img/morte/pena.png); }
  .pot.bless { --pc: #ffd166; }
  .pot.bless i { width: 24px; height: 24px; background: url(/img/morte/bencao.png) center / 24px 24px no-repeat; }
  .pot.bless.empty i { filter: grayscale(1) brightness(.7); }
  .death-screen { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; overflow: auto; padding: 10px; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(90, 8, 20, .5), rgba(6, 5, 11, .9) 75%); animation: dtFade .6s ease-out both; }
  @keyframes dtFade { from { opacity: 0; } }
  .dt-card { display: grid; gap: .8em; width: min(31em, 100%); padding: 1.1em 1.2em 1.2em; background: linear-gradient(180deg, #221327, #17142a 45%); border: 2px solid #3e2a4a; border-top: 3px solid #e5586b; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 140, 160, .06), 0 3px 0 #06050b, 0 24px 60px rgba(0, 0, 0, .6); font-size: clamp(13px, 1.5cqw, 15px); animation: dtRise .5s .15s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes dtRise { from { transform: translateY(14px); opacity: 0; } }
  .dt-head { display: grid; justify-items: center; gap: .3em; text-align: center; }
  .dt-head h3 { margin: 0; color: #ff6b7a; font: 400 2.9em/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .03em; text-shadow: 0 3px 0 #3a0a14, 0 0 22px rgba(255, 70, 90, .45); }
  .dt-head p { margin: 0; color: var(--c-text-2); font-size: max(12px, .92em); }
  .dt-head p b { color: var(--c-text-strong); }
  .dt-loss { display: flex; align-items: center; justify-content: center; gap: .8em; padding: .7em .9em; background: rgba(229, 88, 107, .08); border: 1px solid rgba(229, 88, 107, .35); border-radius: 3px; text-align: left; }
  .dt-loss .big { font: 400 2.2em/1 "Jersey 10", system-ui, sans-serif; color: #ff8a8a; white-space: nowrap; }
  .dt-loss small { display: block; margin-top: .2em; color: var(--c-text-2); font-size: max(12px, .86em); line-height: 1.4; }
  .dt-loss b { color: var(--c-text-strong); }
  .dt-loss.blessed { background: rgba(255, 209, 102, .08); border-color: rgba(255, 209, 102, .45); }
  .dt-loss.blessed .big { color: #ffd166; }
  .dt-loss.safe { background: rgba(95, 211, 141, .07); border-color: rgba(95, 211, 141, .35); }
  .dt-loss.safe .big { color: #5fd38d; }
  .dt-loss .dt-ic { width: 40px; height: 40px; }
  .dt-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55em; }
  .dt-opt { display: grid; align-content: start; gap: .4em; padding: .75em .8em .8em; text-align: left; background: var(--c-sunken); border: 1px solid var(--c-line); border-top: 3px solid var(--oc, #5b5378); border-radius: var(--r-md); color: inherit; font: inherit; transition: border-color var(--t-fast), background-color var(--t-fast); }
  .dt-opt b.t { color: var(--c-text-strong); font: 400 1.45em/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .dt-opt small { color: var(--c-text-muted); font-size: max(12px, .86em); line-height: 1.4; }
  .dt-opt small b { color: var(--c-text); }
  .dt-opt.city { --oc: #8d86ad; cursor: pointer; }
  .dt-opt.city:hover:not(:disabled) { border-color: var(--c-violet); border-top-color: var(--c-accent-text); background: var(--c-surface-1); filter: none; }
  .dt-opt.here { --oc: #ffd166; }
  .dt-opt.here.off { opacity: .6; }
  .dt-free { justify-self: start; padding: .05em .45em; border: 1px solid color-mix(in srgb, var(--c-ok) 45%, transparent); border-radius: var(--r-xs); background: color-mix(in srgb, var(--c-ok) 12%, var(--c-sunken)); color: var(--c-ok); font-size: max(12px, .8em); font-weight: 700; }
  .dt-pay { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .2em; }
  .dt-pay button { display: inline-flex; align-items: center; gap: .35em; min-height: 2.5em; padding: 0 .8em; border: 1px solid var(--c-violet); border-radius: var(--r-md); box-shadow: var(--sh-raised), inset 0 1px 0 rgba(255, 255, 255, .14); font-weight: 700; }
  .dt-pay button.gold { background: linear-gradient(#ffdf8f, var(--c-gold-strong)); border-color: var(--c-gold); color: #2a1a05; text-shadow: 0 1px 0 rgba(255, 255, 255, .3); box-shadow: var(--sh-raised), inset 0 1px 0 rgba(255, 255, 255, .35); }
  .dt-pay .coin { width: 12px; height: 12px; }
  .dt-pay .dt-ic { width: 18px; height: 18px; }
  .dt-opt small.dt-timer { color: var(--c-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
  .dt-auto { margin: 0; padding: .55em .75em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45em .8em; background: rgba(123, 97, 255, .09); border: 1px solid rgba(123, 97, 255, .3); border-radius: var(--r-md); color: var(--c-title); font-size: max(12px, .9em); }
  .dt-auto button, .dt-foot button { min-height: 2.4em; padding: 0 .85em; background: var(--c-surface-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-raised); color: var(--c-text); font-size: max(12px, .92em); font-weight: 600; }
  .dt-foot { display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; padding-top: .65em; border-top: 1px solid var(--c-line-soft); color: var(--c-text-2); font-size: max(12px, .9em); }
  .dt-foot span { display: inline-flex; align-items: center; gap: .4em; }
  .dt-back { position: absolute; z-index: 5; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: .7em; max-width: calc(100% - 20px); padding: .5em .6em .5em .8em; background: rgba(23, 20, 42, .94); border: 2px solid #322c52; border-left: 3px solid #ffd166; border-radius: 4px; box-shadow: 0 2px 0 #06050b, 0 10px 24px rgba(0, 0, 0, .5); color: #e8e6f0; font-size: clamp(12px, 1.4cqw, 14px); }
  .dt-back b { color: #ffd166; }
  .dt-back button { padding: .3em .7em; font-size: .92em; white-space: nowrap; }
  .tp-rules { display: grid; gap: .5em; margin: 0 0 .9em; padding: .8em .95em; background: #14112a; border: 1px solid var(--line); border-left: 3px solid #e5586b; border-radius: 4px; }
  .tp-rules h4 { margin: 0; color: #fff; font: 400 1.35em/1 "Jersey 10", system-ui, sans-serif; letter-spacing: .02em; }
  .tp-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35em; }
  .tp-bands div { display: grid; gap: .1em; padding: .45em .5em; background: #1a1631; border: 1px solid var(--line); border-radius: 3px; text-align: center; }
  .tp-bands div.on { border-color: #ffd166; box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .35); }
  .tp-bands small { color: var(--muted); font-size: .78em; }
  .tp-bands b { font: 400 1.5em/1 "Jersey 10", system-ui, sans-serif; color: #ff8a8a; }
  .tp-bands div:first-child b { color: #5fd38d; }
  .tp-rules p { margin: 0; color: #a9a3c4; font-size: .88em; line-height: 1.45; }
  .tp-rules p b { color: #fff; }
  .lj-card.temple .lj-art { --a: #ffd166; --d: #2a1f0c; }
  .lj-card.temple.feather .lj-art { --a: #ff8a24; --d: #2a1208; }
  .lj-card.temple .lj-art .dt-ic { width: 72px; height: 72px; filter: drop-shadow(0 .2rem .6rem rgba(0, 0, 0, .55)); }
  .tp-buy { display: flex; flex-wrap: wrap; gap: .3em; }
  .tp-buy button { display: inline-flex; align-items: center; gap: .3em; padding: .38em .7em; font-weight: 700; }
  .tp-buy .coin { width: 11px; height: 11px; }
  .tp-meter { display: flex; gap: 3px; }
  .tp-meter i { flex: 1; height: 7px; border-radius: 2px; background: #2a2440; }
  .tp-meter i.on { background: linear-gradient(#ffe27a, #d9a21a); box-shadow: 0 0 4px rgba(255, 209, 102, .6); }
  .tp-meter.feather i.on { background: linear-gradient(#ffb03a, #c8401a); box-shadow: 0 0 4px rgba(255, 138, 36, .5); }
  .pstats dt.dt-row { display: flex; align-items: center; gap: .35em; }
  .pstats dt.dt-row .dt-ic { width: 18px; height: 18px; }
  .pstats dd.link { cursor: pointer; color: #ffd166; }
  @media (max-width: 599px), (max-height: 500px) {
    .dt-opts { grid-template-columns: minmax(0, 1fr); }
    .dt-head h3 { font-size: 2.3em; }
    .tp-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (prefers-reduced-motion: reduce) { .death-screen, .dt-card { animation: none; } }
  /* Toque: os botões da tela de morte com 44 px (o desenho em em acima é do PC). */
  @media (pointer: coarse) { .death-screen button, .dt-back button { min-height: var(--touch); } }
  .ah-card.dt { --ac: #ff6b7a; }
  .lj-banner-art .dt-ic { width: 112px; height: 112px; filter: drop-shadow(0 0 1.2rem rgba(255, 209, 102, .45)); }
  .hunt-stats .hunt-dead { display: block; margin-top: 2px; color: var(--c-danger-text); font-size: 12px; }
/* PvP da Gruta de Gelo (docs/pvp.md): a faixa discreta ao trocar de zona e o nome da zona no título
   do mapa. Dono: hud-chat (docs/organizacao.md). A faixa fica no alto do mapa, abaixo das poções, some sozinha em 3 s e não pega clique (o mapa continua tocável embaixo dela). */
  .pvp-zone { position: absolute; z-index: var(--z-hud-alto); left: 50%; top: 62px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .15em; max-width: calc(100% - 32px); padding: .45em 1.1em .5em; background: rgba(15, 13, 26, .86); border: 2px solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--c-bg-deep), var(--sh-pop); color: var(--c-text); text-align: center; pointer-events: none; font-size: clamp(11px, 1.3cqw, 13px); opacity: 0; }
  .pvp-zone .t { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 1.75em; letter-spacing: .04em; line-height: 1; }
  .pvp-zone .s { color: var(--c-text-2); }
  .pvp-zone.pvp { border-color: color-mix(in srgb, var(--c-danger) 55%, var(--c-line)); }
  .pvp-zone.pvp .t { color: var(--c-danger-text); }
  .pvp-zone.safe { border-color: color-mix(in srgb, var(--c-ok) 45%, var(--c-line)); }
  .pvp-zone.safe .t { color: var(--c-ok); }
  .pvp-zone.show { animation: pvp-zone 3.2s ease-out forwards; }
  @keyframes pvp-zone { 0% { opacity: 0; transform: translate(-50%, -6px); } 10%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
  @media (prefers-reduced-motion: reduce) { .pvp-zone.show { animation: none; opacity: 1; } }
  /* O nome da zona depois do nome do mapa (title do mapa: "Gruta de Gelo · Área de PvP"). */
  #hudWhere[data-pvp]::after { content: ' · ' attr(data-pvp); font-size: .8em; color: var(--c-danger-text); }
  #hudWhere[data-pvp='Zona segura']::after { color: var(--c-ok); }
  /* A tela de morte na Gruta (docs/pvp.md): uma opção só (voltar para a cidade). */
  .dt-opts.one { grid-template-columns: minmax(0, 1fr); }
  /* Celular: o título do mapa e as poções ficam por cima do mapa, no alto. A faixa desce para baixo
     deles e o nome da zona no título some (a faixa já avisa; não cabe ao lado das poções). */
  @media (max-width: 599px), (max-height: 500px) {
    .pvp-zone { top: 64px; padding: .3em .8em .35em; font-size: 11px; }
    #hudWhere[data-pvp]::after { content: none; }
  }
  /* ---- Spirits (docs/design.md): a janela (Coleção, Cartas, Juntar), a Loja › Spirits e a
     cinemática das cartas. Cores, letra e espaço pelos tokens; --rc é a cor da raridade. ---- */
  .panel.spirit-panel { width: min(97%, 72em); }
  #panelSpirits { display: grid; gap: var(--sp-3); }
  /* Folhas com as 4 direções em linhas (baixo, esquerda, direita, cima): a interface mostra a de baixo (--row 0). */
  .sp-art { --s: 1; --n: 4; --t: .72s; --row: 0; display: inline-block; flex: none; width: calc(40px * var(--s)); height: calc(40px * var(--s)); background: var(--img) 0 calc(-40px * var(--s) * var(--row)) / calc(40px * var(--s) * var(--n)) calc(160px * var(--s)) no-repeat; image-rendering: pixelated; animation: spSheet var(--t) steps(var(--n)) infinite; }
  .sp-art.once { animation-iteration-count: 1; animation-fill-mode: forwards; }
  .sp-art.none { background: radial-gradient(circle, var(--c-surface-3) 30%, transparent 32%); }
  @keyframes spSheet { to { background-position-x: calc(-40px * var(--s) * var(--n)); } }

  /* ---------- Cabeça: o principal, quem é e os contadores ---------- */
  .sp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: var(--bw) solid var(--c-line); box-shadow: inset 0 0 0 1px var(--c-line-hi); }
  .sp-head-art { --rc: var(--c-surface-3); display: grid; place-items: center; width: 4.2em; height: 4.2em; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%), var(--c-surface-1); border: var(--bw) solid var(--rc); }
  .sp-q { font: var(--fw-regular) 2em/1 var(--font-display); color: var(--c-text-faint); }
  .sp-head-who { display: grid; gap: 2px; min-width: 0; }
  .sp-head-who small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; }
  .sp-head-who b { font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); overflow-wrap: anywhere; }
  .sp-head-who span { color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh-tight); }
  .sp-counters { display: flex; gap: var(--sp-2); }
  .sp-ct { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-xs); }
  .sp-ct i { grid-row: span 2; width: 1.3em; height: 1.7em; }
  .sp-ct b { font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
  .sp-ct small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .sp-ico-card { background: url(/img/spirits/cartas/verso.png) 0 0 / auto 100% no-repeat; image-rendering: pixelated; }
  .sp-ico-ess { background: radial-gradient(circle at 50% 55%, #c9f3ff 0 18%, #6fd6ff 19% 38%, rgba(111, 214, 255, .25) 39% 60%, transparent 61%); }

  /* ---------- Abas ---------- */
  .sp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); padding: var(--sp-1); background: var(--c-sunken); border: var(--bw) solid var(--c-line); }
  .sp-tabs button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: var(--ctl-lg); margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--c-surface-1); border: 0; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--c-line-soft); color: var(--c-text-muted); filter: none; }
  .sp-tabs button:hover:not(.on) { background: var(--c-surface-2); color: var(--c-text); }
  .sp-tabs button .lb { font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .sp-tabs button small { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
  .sp-tabs button.on { background: var(--c-violet-deep); color: var(--c-text-strong); box-shadow: inset 0 0 0 1px var(--c-violet), inset 0 -2px 0 var(--c-violet); }
  .sp-tabs button.on small { color: var(--c-title); }
  .sp-tabs .sp-tbadge { position: absolute; top: var(--sp-1); right: var(--sp-1); box-shadow: none; }

  /* ---------- Filtros (fichas) ---------- */
  .sp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
  .sp-chip { --rc: var(--c-text-muted); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: var(--ctl-sm); min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-3); border-radius: var(--r-xs); background: var(--c-surface-1); border: 1px solid var(--c-line); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); filter: none; font-variant-numeric: tabular-nums; }
  .sp-chip:hover:not(:disabled):not(.on) { background: var(--c-surface-2); border-color: var(--c-line-strong); }
  .sp-chip.on { background: color-mix(in srgb, var(--rc) 20%, var(--c-surface-1)); border-color: var(--rc); color: var(--c-text-strong); }
  span.sp-chip { min-height: 0; padding: 2px var(--sp-2); }
  .sp-relbtn { margin-left: auto; }
  .sp-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-sm); padding: 0 var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); cursor: pointer; }
  .sp-check input { width: 1.1em; height: 1.1em; margin: 0; accent-color: var(--c-violet); }

  /* ---------- Coleção: a grade à esquerda e o detalhe à direita ---------- */
  .sp-col { display: grid; grid-template-columns: minmax(0, 1fr) 22em; gap: var(--sp-3); align-items: start; }
  .sp-col.sp-col-empty { grid-template-columns: minmax(0, 1fr); }
  .sp-col-list { display: grid; gap: var(--sp-2); min-width: 0; }
  .sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.6em, 1fr)); gap: var(--sp-2); }
  .sp-tile { --rc: var(--c-text-muted); position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; margin: 0; padding: var(--sp-2) var(--sp-1); border-radius: var(--r-xs); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, var(--c-surface-1)), var(--c-sunken) 70%); border: var(--bw) solid color-mix(in srgb, var(--rc) 45%, var(--c-line)); color: inherit; filter: none; transition: border-color var(--t-fast); }
  .sp-tile:hover { border-color: var(--rc); }
  .sp-tile.on { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), 0 0 14px color-mix(in srgb, var(--rc) 40%, transparent); }
  .sp-tile-art { position: relative; display: grid; place-items: center; width: 60px; height: 60px; }
  /* O nome inteiro: quebra em até duas linhas (nada de reticências). */
  .sp-tile-name { max-width: 100%; min-height: 2em; display: grid; align-items: center; font: var(--fw-regular) var(--fs-md)/1 var(--font-display); letter-spacing: .02em; color: var(--rc); text-align: center; overflow-wrap: anywhere; }
  .sp-tile small { color: var(--c-text-muted); font-size: var(--fs-xs); text-align: center; }
  .sp-star { position: absolute; top: -2px; left: -4px; color: var(--c-gold); font-style: normal; font-size: 1.1em; text-shadow: 0 1px 0 #000; }
  .sp-flag { position: absolute; top: var(--sp-1); right: var(--sp-1); padding: 1px var(--sp-1); border-radius: var(--r-xs); background: var(--c-gold); color: #2a1a05; font-size: max(11px, .62em); font-weight: 800; line-height: 1.3; }
  /* Selo do Codex: a espécie ainda pode ser registrada. */
  .sp-cx { position: absolute; top: var(--sp-1); left: var(--sp-1); padding: 1px var(--sp-1); border-radius: var(--r-xs); background: var(--c-violet-deep); border: 1px solid var(--c-violet); color: var(--c-title); font-size: max(11px, .6em); font-weight: 800; line-height: 1.3; letter-spacing: .02em; }
  .sp-count { position: absolute; right: -4px; bottom: -2px; padding: 0 var(--sp-1); background: var(--c-bg); border: 1px solid var(--rc); color: var(--c-text-strong); font: var(--fw-bold) 11px/1.4 var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums; }
  /* Libertar vários: marcado em vermelho, o principal travado, + e − nos grupos. */
  .sp-tile.pick { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); background: linear-gradient(180deg, color-mix(in srgb, var(--c-danger) 22%, var(--c-surface-1)), var(--c-sunken) 70%); }
  .sp-tile.locked { opacity: .45; cursor: not-allowed; }
  .sp-pickn { position: absolute; top: var(--sp-1); right: var(--sp-1); padding: 1px var(--sp-1); border-radius: var(--r-xs); background: var(--c-danger); color: #fff; font-size: max(11px, .66em); font-weight: 800; }
  .sp-step { display: flex; gap: var(--sp-1); margin-top: var(--sp-1); }
  .sp-stepb { min-width: var(--ctl-sm); min-height: var(--ctl-sm); margin: 0; padding: 0; border-radius: var(--r-xs); background: var(--c-surface-3); border: 1px solid var(--c-line-strong); color: var(--c-text-strong); font-weight: 800; filter: none; }
  .sp-relbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-danger) 8%, var(--c-sunken)); border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent); border-radius: var(--r-sm); }
  .sp-relbar > b { flex: 1 1 100%; font-size: var(--fs-sm); line-height: var(--lh); }
  .sp-relbar > span:not(.sp-warn) { flex: 1 1 100%; color: var(--c-text-2); font-size: var(--fs-sm); }
  .sp-empty { padding: var(--sp-6) var(--sp-4); }
  .sp-empty-art { position: relative; display: block; width: 72px; height: 100px; margin-bottom: var(--sp-2); }
  .sp-empty-art .sp-back:nth-child(2) { transform: translate(8px, -6px) rotate(6deg); }
  .sp-none { padding: var(--sp-5) var(--sp-4); }
  .sp-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .sp-warn { margin: 0; color: var(--c-warn); font-size: var(--fs-sm); line-height: var(--lh); }

  /* ---------- Detalhe do Spirit ---------- */
  .sp-detail { --rc: var(--c-text-muted); display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-sunken); border: var(--bw) solid color-mix(in srgb, var(--rc) 55%, var(--c-line)); box-shadow: inset 0 3px 0 var(--rc); }
  .sp-detail-empty { color: var(--c-text-muted); font-size: var(--fs-sm); text-align: center; padding: var(--sp-8) var(--sp-4); }
  .sp-d-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
  .sp-d-art { display: grid; place-items: center; width: 128px; height: 128px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 68%), var(--c-bg); border: 1px solid var(--c-line); }
  .sp-d-who { display: grid; gap: var(--sp-2); justify-items: start; min-width: 0; }
  .sp-d-who b { font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); overflow-wrap: anywhere; }
  .sp-rar { padding: 1px var(--sp-2); border-radius: var(--r-xs); background: color-mix(in srgb, var(--rc) 22%, var(--c-sunken)); border: 1px solid var(--rc); color: var(--rc); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .sp-lv { color: var(--c-text); font-weight: var(--fw-bold); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .sp-evo { display: flex; gap: var(--sp-1); }
  .sp-evo i { width: .7em; height: .7em; transform: rotate(45deg); background: var(--c-surface-3); border: 1px solid var(--c-line-strong); }
  .sp-evo i.on { background: var(--c-gold); border-color: #fff0bf; }
  .sp-xp { display: grid; gap: var(--sp-1); }
  .sp-xp small, .sp-pity small { color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  .sp-bar { height: 8px; background: var(--c-bg); border: 1px solid var(--c-line); }
  .sp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-violet), var(--c-accent-text)); transition: width .4s; }
  .sp-stats { display: grid; gap: var(--sp-1); }
  .sp-stats h4, .sp-h, .sp-chances h4 { display: flex; align-items: center; gap: .45em; margin: 0 0 var(--sp-1); color: var(--c-accent-text); font: var(--fw-regular) var(--fs-d-sm)/1.05 var(--font-display); letter-spacing: .02em; }
  .sp-stats h4::before, .sp-h::before, .sp-chances h4::before { content: ""; flex: none; width: .36em; height: .36em; background: var(--c-violet); transform: rotate(45deg); }
  .sp-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2); align-items: baseline; padding: var(--sp-1) var(--sp-2); background: var(--c-surface-1); border: 1px solid var(--c-line-soft); border-radius: var(--r-xs); font-size: var(--fs-sm); }
  .sp-stat b { font: var(--fw-regular) var(--fs-lg)/1 var(--font-display); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
  .sp-stat.on b { color: #8ff0b3; }
  .sp-stat small { color: #8ff0b3; font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  .sp-stats > .sp-note { margin-top: var(--sp-1); }
  .sp-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .sp-acts .sp-warn { flex: 1 1 100%; }
  .sp-detail > .sp-acts > .ui-btn { flex: 1 1 auto; }
  .sp-box { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .sp-box.gold { border-color: var(--c-gold-dark); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .12); }
  .sp-box > b { font: var(--fw-regular) var(--fs-d-sm)/1.05 var(--font-display); letter-spacing: .02em; color: var(--c-text); }
  .sp-box.gold > b { color: #ffe08a; }
  .sp-cxbox { border-color: var(--c-line-strong); background: color-mix(in srgb, var(--c-violet) 7%, var(--c-surface-1)); }
  .sp-box p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .sp-box > .ui-btn { justify-self: start; }
  .sp-feed { display: flex; gap: var(--sp-2); }
  .sp-feed .ui-input { width: 6em; flex: 0 0 auto; }
  .sp-feed .ui-btn { flex: 1 1 auto; }
  .sp-feed .ui-btn.sm { flex: 0 0 auto; min-height: var(--ctl-md); }
  .sp-free { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding-top: var(--sp-2); border-top: 1px solid var(--c-line-soft); color: var(--c-danger-text); font-size: var(--fs-sm); }
  .sp-free > span { flex: 1 1 100%; line-height: var(--lh); }
  .sp-free .sp-link { color: var(--c-danger-text); padding: 0 var(--sp-2); }
  .sp-free .sp-link:hover:not(:disabled) { background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: #ffb3b3; }

  /* ---------- Cartas ---------- */
  .sp-cards { display: grid; gap: var(--sp-3); }
  .sp-open { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: center; padding: var(--sp-4) var(--sp-5); background: radial-gradient(ellipse at 15% 50%, rgba(123, 97, 255, .22), transparent 60%), var(--c-sunken); border: var(--bw) solid var(--c-line); }
  .sp-deck { position: relative; width: 112px; height: 160px; margin-right: 14px; }
  .sp-back { position: absolute; inset: 0; background: url(/img/spirits/cartas/verso.png) 0 0 / auto 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 3px 0 var(--c-bg-deep)); }
  .sp-back:nth-child(2) { transform: translate(6px, -5px) rotate(4deg); }
  .sp-back:nth-child(3) { transform: translate(12px, -10px) rotate(8deg); }
  .sp-back.empty { opacity: .3; filter: grayscale(1); }
  .sp-open-info { display: grid; gap: var(--sp-2); justify-items: start; }
  .sp-open-info > b { font: var(--fw-regular) var(--fs-d-md)/1.05 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); }
  .sp-open-info p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .sp-open-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
  .sp-open-btns .ui-btn { min-width: 8em; }
  .sp-get { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .sp-get-txt { display: grid; gap: var(--sp-1); flex: 1 1 20em; min-width: 0; }
  .sp-get-txt b { font: var(--fw-regular) var(--fs-d-sm)/1.05 var(--font-display); letter-spacing: .02em; color: var(--c-text); }
  .sp-get-txt p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .sp-get-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  /* Loja › Spirits: as ofertas usam o cartão da Loja (lj-*); aqui só o que é dos Spirits. */
  .sp-mini-card { width: 42px; height: 60px; background: url(/img/spirits/cartas/verso.png) 0 0 / auto 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 0 var(--c-bg-deep)); }
  .sp-shop-open { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .sp-shop-open > span { flex: 1 1 14em; color: var(--c-text-2); font-size: var(--fs-sm); }
  .sp-shop-open .ui-btn { flex: 0 0 auto; }
  .sp-chances { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .sp-chances ul { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
  .sp-chances li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 4.5em; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
  .sp-chances li span { color: var(--rc); font-weight: var(--fw-bold); }
  .sp-chances li i { height: 8px; background: linear-gradient(90deg, var(--rc) var(--p), var(--c-surface-1) 0); border: 1px solid var(--c-line); min-width: 0; }
  .sp-chances li b { text-align: right; font-variant-numeric: tabular-nums; }

  /* ---------- Juntar ---------- */
  .sp-fuse { display: grid; gap: var(--sp-3); }
  .sp-fuse-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12em, 18em); gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 12%, var(--c-sunken)), color-mix(in srgb, var(--rn) 14%, var(--c-sunken))); border: var(--bw) solid var(--c-line); }
  .sp-fuse-info b { font: var(--fw-regular) var(--fs-d-sm)/1.05 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); }
  .sp-fuse-info p { margin: var(--sp-1) 0 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  .sp-pity { display: grid; gap: var(--sp-1); }
  .sp-pity .sp-bar i { background: linear-gradient(90deg, var(--c-gold-deep), var(--c-gold)); }
  .sp-pity.ready small { color: var(--c-gold); }
  .sp-pity.ready .sp-bar { box-shadow: var(--sh-glow-gold); }
  .sp-slots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); }
  .sp-slot { --rc: var(--c-line-strong); display: grid; justify-items: center; align-content: center; gap: var(--sp-1); width: 8.4em; height: 7.4em; margin: 0; padding: var(--sp-1); border-radius: var(--r-xs); background: var(--c-surface-1); border: var(--bw) dashed var(--c-line-strong); color: var(--c-text-2); filter: none; }
  .sp-slot.full { border-style: solid; border-color: var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, var(--c-surface-1)), var(--c-surface-1)); }
  .sp-slot.result { border-style: solid; border-color: var(--rc); box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); }
  .sp-slot small { font-size: var(--fs-xs); text-align: center; line-height: var(--lh-tight); }
  .sp-slot:disabled { opacity: 1; filter: none; cursor: default; }
  .sp-plus { font: var(--fw-regular) 2em/1 var(--font-display); color: var(--c-violet); }
  .sp-fuse > .sp-acts { justify-content: center; }
  .sp-fuse > .sp-acts > .ui-btn.lg { min-width: 12em; }
  .sp-fuse > .sp-acts > .sp-warn { text-align: center; }
  .sp-many-box .sp-filters small { margin-right: var(--sp-1); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  .sp-many-box > .sp-acts > .ui-btn { flex: 0 1 auto; }

  @container painel (max-width: 46em) {
    .sp-col { grid-template-columns: minmax(0, 1fr); }
    .sp-fuse-info { grid-template-columns: minmax(0, 1fr); }
    .sp-head { grid-template-columns: auto minmax(0, 1fr); }
    .sp-counters { grid-column: 1 / -1; }
    .sp-counters .sp-ct { flex: 1 1 0; }
    .sp-open { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-4); text-align: center; }
    .sp-open-info { justify-items: center; }
    .sp-open-btns { justify-content: center; }
    .sp-get-btns { flex: 1 1 100%; }
    .sp-get-btns .ui-btn { flex: 1 1 auto; }
    .sp-grid { grid-template-columns: repeat(auto-fill, minmax(6.6em, 1fr)); }
    .sp-relbtn { margin-left: 0; }
    .sp-slot { width: 6em; height: 6.4em; }
    .sp-plus { font-size: 1.6em; }
    .sp-slots { gap: var(--sp-1); padding: var(--sp-2) var(--sp-1); }
  }
  /* Celular deitado: o principal menor e as abas numa linha baixa (as regras de antes em responsive.css). */
  @media (max-height: 500px) and (min-width: 600px) {
    #panelSpirits .sp-tabs button { grid-auto-flow: column; align-items: baseline; justify-content: center; gap: var(--sp-2); min-height: var(--touch); padding: var(--sp-1) var(--sp-2); }
    /* O retrato menor (responsive.css): o desenho encolhe junto, sem passar por cima do nome. */
    #panelSpirits .sp-head-art { width: 3.4em; height: 3.4em; overflow: hidden; }
    #panelSpirits .sp-head-art > .sp-art { transform: scale(.75); }
  }
  @keyframes spBob { 50% { transform: translateY(-4px); } }

  /* ---------- Juntar vários: o resultado por cima de tudo ---------- */
  .sp-many { position: fixed; inset: 0; z-index: var(--z-topo); display: grid; place-content: center; justify-items: center; gap: var(--sp-4); padding: max(var(--sp-4), var(--safe-t)) max(var(--sp-4), var(--safe-r)) max(var(--sp-4), var(--safe-b)) max(var(--sp-4), var(--safe-l)); background: rgba(8, 6, 14, .9); text-align: center; }
  .sp-many-t { font: var(--fw-regular) 2em/1 var(--font-display); color: var(--c-gold); }
  .sp-many-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4em, 1fr)); gap: var(--sp-2); width: min(40em, 92vw); max-height: 55vh; overflow: auto; }
  .sp-many-card { --rc: var(--c-text-muted); position: relative; display: grid; justify-items: center; gap: 2px; padding: var(--sp-1); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 20%, var(--c-surface-1)), var(--c-sunken)); border: var(--bw) solid var(--rc); animation: spManyIn .45s var(--d) both ease-out; }
  .sp-many-card small { max-width: 100%; color: #e8e2ff; font-size: max(11px, .66em); line-height: 1.15; overflow-wrap: anywhere; }
  .sp-many-card.up { box-shadow: 0 0 12px var(--rc); }
  .sp-many-card em { position: absolute; top: 2px; right: 4px; color: var(--c-gold); font-style: normal; font-weight: 800; }
  .sp-many-sum { max-width: 40em; margin: 0; color: #e8e2ff; line-height: var(--lh); }
  .sp-many > .ui-btn { min-width: 10em; }
  @keyframes spManyIn { from { opacity: 0; transform: rotateY(90deg) scale(.7); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .sp-many-card { animation: none; } }

  /* ---------- Cinemática: tela escura em foco, raios na cor que vai saindo, partículas
     no canvas e a carta 3D (verso e frente). ---------- */
  .sp-cine { --gc: var(--c-violet); position: fixed; inset: 0; z-index: var(--z-cinematica); display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 42%, color-mix(in srgb, var(--gc) 20%, rgba(24, 18, 46, .9)), rgba(4, 3, 8, .97) 72%); animation: spFade .35s ease-out both; font-size: clamp(12px, 2.4vw, 15px); }
  .sp-cine[hidden] { display: none; }
  .sp-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gc) 26%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 45%); mask: radial-gradient(circle, #000 0, transparent 45%); opacity: .55; animation: spSpin 24s linear infinite; transition: opacity .4s; pointer-events: none; }
  .sp-cine.flash .sp-rays { opacity: 1; }
  .sp-cine.flash::after { content: ""; position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 50% 42%, #fff, color-mix(in srgb, var(--gc) 60%, transparent) 40%, transparent 70%); pointer-events: none; animation: spFlash .7s ease-out forwards; }
  .sp-cine.fail.flash::after { background: radial-gradient(circle at 50% 42%, rgba(160, 155, 180, .55), transparent 60%); }
  .sp-cine.fail .sp-rays { opacity: .15; }
  .sp-fx { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
  .sp-stage { position: relative; z-index: 2; display: grid; place-items: center; align-content: center; gap: var(--sp-4); min-height: 0; padding: max(var(--sp-4), var(--safe-t)) max(var(--sp-4), var(--safe-r)) var(--sp-4) max(var(--sp-4), var(--safe-l)); overflow: auto; }
  /* A barra de botões: fundo próprio que esmaece para cima, sempre à vista, longe do gesto de casa. */
  .sp-cine-bar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); padding: var(--sp-3) max(var(--sp-4), var(--safe-r)) max(var(--sp-4), var(--safe-b)) max(var(--sp-4), var(--safe-l)); background: linear-gradient(transparent, rgba(4, 3, 8, .7)); }
  .sp-cine-bar .ui-btn { flex: 0 0 auto; min-width: 9em; }
  .sp-one { display: grid; justify-items: center; gap: var(--sp-4); }
  .sp-cine.single .sp-one > .sp-card.in { animation: spFloat 2.6s ease-in-out 1.1s infinite; }
  .sp-card { --cs: 3; --rc: var(--rar-0); --gc: var(--c-violet); position: relative; width: calc(56px * var(--cs)); height: calc(80px * var(--cs)); perspective: 1000px; opacity: 0; transform: translateY(45vh) scale(.35) rotate(-10deg); transition: transform 1s cubic-bezier(.18, .9, .25, 1.05), opacity .35s; }
  .sp-card.in { opacity: 1; transform: none; }
  .sp-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-900deg); transition: transform 1.05s cubic-bezier(.2, .75, .25, 1); }
  .sp-card.in .sp-flip { transform: rotateY(0); }
  .sp-card.open .sp-flip { transform: rotateY(180deg); transition: transform .5s cubic-bezier(.3, 1.4, .4, 1); }
  .sp-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; image-rendering: pixelated; }
  .sp-face.back { background: url(/img/spirits/cartas/verso.png) 0 0 / auto 100% no-repeat; }
  .sp-face.front { transform: rotateY(180deg); background: var(--front) 0 0 / auto 100% no-repeat; }
  .sp-win { position: absolute; left: calc(6px * var(--cs)); top: calc(10px * var(--cs)); width: calc(44px * var(--cs)); height: calc(44px * var(--cs)); display: grid; place-items: center; }
  .sp-card-name { position: absolute; left: calc(6px * var(--cs)); right: calc(6px * var(--cs)); top: calc(58px * var(--cs)); height: calc(11px * var(--cs)); display: grid; place-items: center; overflow: hidden; color: #fff; font: 400 calc(6.2px * var(--cs))/1 var(--font-display); letter-spacing: .02em; text-align: center; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
  .sp-glow { position: absolute; inset: -28%; border-radius: 50%; background: radial-gradient(closest-side, var(--gc), color-mix(in srgb, var(--gc) 40%, transparent) 55%, transparent); opacity: 0; filter: blur(6px); transition: opacity .3s, background .3s; }
  .sp-card.charge .sp-glow { opacity: .95; animation: spPulse .45s ease-in-out infinite alternate; }
  /* Reflexo atravessando a carta (quadros 1 a 6 da folha; o 0 é o parado). */
  .sp-card.charge .sp-face.back { animation: spShine .36s steps(6) infinite; }
  .sp-card.open.r3 .sp-face.front, .sp-card.open.r4 .sp-face.front { animation: spShine .42s steps(6) .5s 2; }
  @keyframes spShine { from { background-position-x: calc(-56px * var(--cs)); } to { background-position-x: calc(-392px * var(--cs)); } }
  .sp-card.open .sp-glow { opacity: .7; --gc: var(--rc); animation: spPulse 1.4s ease-in-out infinite alternate; }
  .sp-card.open.r0 .sp-glow { opacity: .35; }
  .sp-card.charge:not(.open).shake1 .sp-flip { animation: spShake .22s linear infinite; }
  .sp-card.charge:not(.open).shake2 .sp-flip { animation: spShake .14s linear infinite; }
  .sp-card.charge:not(.open).shake3 .sp-flip { animation: spShakeBig .1s linear infinite; }
  /* A revelação: título da raridade, o nome grande, a etiqueta e os atributos. */
  .sp-reveal { --rc: #fff; display: grid; justify-items: center; gap: var(--sp-2); max-width: 32em; text-align: center; animation: spUp .45s ease-out both; }
  .sp-reveal > b { color: #fff; font: var(--fw-regular) 2.3em/1 var(--font-display); letter-spacing: .03em; text-shadow: 0 0 14px var(--rc), 0 2px 0 #000; overflow-wrap: anywhere; }
  .sp-reveal-t { color: var(--c-gold); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-xs); }
  .sp-reveal-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); max-width: 30em; margin-top: var(--sp-1); }
  .sp-reveal-stats span { padding: 2px var(--sp-2); border-radius: var(--r-xs); background: color-mix(in srgb, var(--c-ok) 12%, rgba(6, 5, 11, .8)); border: 1px solid color-mix(in srgb, var(--c-ok) 45%, transparent); color: #8ff0b3; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
  .sp-reveal-stats span.dim { background: rgba(6, 5, 11, .7); border-color: var(--c-line); color: var(--c-text-2); font-weight: var(--fw-semi); }
  .sp-merge { display: grid; justify-items: center; gap: var(--sp-1); animation: spUp .4s ease-out both; }
  .sp-merge-pair { display: flex; gap: 2.4em; }
  .sp-merge-pair .sp-art:first-child { animation: spSheet var(--t) steps(var(--n)) infinite, spMergeL 1.2s ease-in forwards; }
  .sp-merge-pair .sp-art:last-child { animation: spSheet var(--t) steps(var(--n)) infinite, spMergeR 1.2s ease-in forwards; }
  .sp-merge-t { color: #fff; font: var(--fw-regular) 1.7em/1 var(--font-display); letter-spacing: .03em; opacity: 0; animation: spIn .4s ease-out 1.1s forwards; }
  @keyframes spIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .sp-cine.calm .sp-merge-t { opacity: 1; }
  .sp-merge.up .sp-merge-t { color: var(--c-gold); text-shadow: 0 0 12px rgba(255, 209, 102, .6); }
  .sp-merge.same .sp-merge-t { color: var(--rar-0); }
  .sp-pack { --cs: 1.5; display: grid; grid-template-columns: repeat(6, auto); gap: .7em; }
  @media (min-width: 1100px) and (min-height: 760px) { .sp-pack { --cs: 2; gap: .9em; } }
  .sp-pack-t { color: #fff; font: var(--fw-regular) 2em/1 var(--font-display); letter-spacing: .04em; text-shadow: 0 0 14px var(--gc), 0 2px 0 #000; }
  .sp-pack .sp-card { --cs: inherit; cursor: pointer; transform: translateY(-30px) scale(.8); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s; }
  .sp-pack .sp-card.in { transform: none; }
  .sp-pack .sp-card .sp-flip { transform: rotateY(0); transition: transform .45s cubic-bezier(.3, 1.4, .4, 1); }
  .sp-pack .sp-card.open .sp-flip { transform: rotateY(180deg); }
  .sp-pack .sp-card.open.r3, .sp-pack .sp-card.open.r4 { z-index: 1; animation: spPop .5s ease-out; }
  .sp-pack .sp-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
  /* O resumo do pacote: quantas de cada raridade e a melhor. */
  .sp-sum { display: grid; justify-items: center; gap: var(--sp-2); min-height: 3em; }
  .sp-sum-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); align-items: center; }
  .sp-sum-row .sp-chip { background: color-mix(in srgb, var(--rc) 18%, rgba(6, 5, 11, .85)); }
  .sp-best { flex: 1 1 100%; color: var(--c-gold); font-weight: 800; font-size: var(--fs-sm); text-align: center; }
  .sp-sum > .sp-note { color: var(--c-text-2); }
  .sp-sum > .sp-reveal { animation: none; }
  @media (max-width: 760px) { .sp-pack { grid-template-columns: repeat(4, auto); --cs: 1.3; } }
  @media (max-width: 460px) { .sp-pack { grid-template-columns: repeat(3, auto); --cs: 1.25; gap: .5em; } .sp-card { --cs: 2.5; } .sp-reveal > b { font-size: 2em; } }
  /* Celular deitado: a carta ao lado do nome e dos atributos, e o pacote menor, para caber com o botão embaixo. */
  @media (max-height: 500px) and (min-width: 600px) {
    .sp-stage { padding: var(--sp-2) max(var(--sp-4), var(--safe-r)) var(--sp-2) max(var(--sp-4), var(--safe-l)); gap: var(--sp-2); }
    .sp-one { grid-auto-flow: column; align-items: center; gap: 1.4em; }
    .sp-one > .sp-card { --cs: 2.2; }
    .sp-reveal > b { font-size: 1.9em; }
    .sp-pack { grid-template-columns: repeat(6, auto); --cs: 1.1; gap: .45em; }
    .sp-pack-t { font-size: 1.5em; }
    .sp-cine-bar { padding-top: var(--sp-2); padding-bottom: max(var(--sp-2), var(--safe-b)); }
  }
  @keyframes spFade { from { opacity: 0; } }
  @keyframes spSpin { to { transform: rotate(360deg); } }
  @keyframes spFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes spPulse { from { transform: scale(.94); } to { transform: scale(1.06); } }
  @keyframes spFloat { 50% { transform: translateY(-10px); } }
  @keyframes spShake { 25% { transform: translate(-2px, 1px) rotate(-1deg); } 75% { transform: translate(2px, -1px) rotate(1deg); } }
  @keyframes spShakeBig { 25% { transform: translate(-4px, 2px) rotate(-2deg); } 75% { transform: translate(4px, -2px) rotate(2deg); } }
  @keyframes spUp { from { opacity: 0; transform: translateY(12px); } }
  @keyframes spPop { 40% { transform: scale(1.15); } }
  @keyframes spMergeL { 70% { transform: translateX(2.2em) scale(1.1); opacity: 1; } 100% { transform: translateX(2.8em) scale(.4); opacity: 0; } }
  @keyframes spMergeR { 70% { transform: translateX(-2.2em) scale(1.1); opacity: 1; } 100% { transform: translateX(-2.8em) scale(.4); opacity: 0; } }
  /* Movimento reduzido: sem giro, tremor nem partículas; só esmaece. */
  .sp-cine.calm, .sp-cine.calm *, .sp-cine.calm *::after { animation: none !important; }
  .sp-cine.calm .sp-card, .sp-cine.calm .sp-flip { transform: none !important; transition: opacity .25s !important; }
  .sp-cine.calm .sp-face.front { transform: none; opacity: 0; transition: opacity .25s; }
  .sp-cine.calm .sp-card.open .sp-face.front { opacity: 1; }
  .sp-cine.calm .sp-card.open .sp-face.back { opacity: 0; }
  .sp-cine.calm .sp-art { animation: spSheet var(--t) steps(var(--n)) infinite !important; }
  @media (prefers-reduced-motion: reduce) { .sp-art { animation-duration: 2s; } }
  /* ---- Bosses (docs/bosses.md): aba Boss, HUD da luta, resultado ----
     Com os tokens e o kit (docs/design.md). --bc é a cor do boss (roxo da Aranha, azul do Kiaron,
     âmbar do Grish, brasa do Infernal). Perigo é sempre vermelho, seguro é verde (contrato, seção 6.6).
     O HUD da luta mora por cima do mapa: o lugar e o tamanho dele (top, left, width, as regras de
     celular) são do layout da tela principal e não mudam; aqui muda só o acabamento por dentro. */

  /* ---------- Peças que outras partes usam (retrato, chave, ícones da interface do boss) ---------- */
  .key-ic { image-rendering: pixelated; background-repeat: no-repeat; }
  .bs-pt { position: relative; display: inline-grid; place-items: center; flex: none; background: center bottom / contain no-repeat; image-rendering: pixelated; }
  .bs-pt.none { opacity: .85; }
  .bs-uic { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; background: center / contain no-repeat; image-rendering: pixelated; font-size: 12px; line-height: 1; }
  .bs-uic.txt { color: var(--bc, var(--c-gold)); }
  #lootList li .lt.mail { background: #1d2a3a; color: var(--c-info); }
  .ah-card.boss { --ac: #b98cff; }

  /* ---------- Janela do Boss ---------- */
  #panelBoss { display: grid; gap: var(--sp-4); }
  #panelBoss.art-bg { padding: var(--sp-3); background: url(/img/bosses/ui/aba_fundo.png) 0 0 / 64px repeat; image-rendering: pixelated; border-radius: var(--r-md); }
  .bs-loading { display: grid; place-items: center; min-height: 12em; }
  .bs-intro { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-surface-1); border: 1px solid var(--c-line); border-left: 3px solid var(--c-violet); border-radius: var(--r-md); box-shadow: var(--sh-frame); }
  #panelBoss.art-bg .bs-intro { background: rgba(23, 20, 42, .95); }
  .bs-intro p { margin: 0; color: var(--c-text-2); line-height: var(--lh); }
  .bs-intro p b { color: var(--c-text-strong); }
  .bs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .bs-reset { padding: var(--sp-1) var(--sp-3); }
  .bs-dodge { font-weight: var(--fw-semi); }
  .bs-dodge.on { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 45%, var(--c-line)); }
  .bs-dodge.off { color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 45%, var(--c-line)); }
  .bs-list { display: grid; gap: var(--sp-4); }

  /* Cartão de um boss: banner em cima; embaixo o lado (chave, dados, Entrar) e as abas. */
  /* Cartões fora da tela só são montados ao chegar perto (abrir a aba levava quase 2 s no celular). */
  .bs-card { content-visibility: auto; contain-intrinsic-size: auto 760px; }
  .bs-card { --bc: #b98cff; display: grid; background: var(--c-surface-1); border: var(--bw) solid color-mix(in srgb, var(--bc) 30%, var(--c-line)); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-raised); scroll-margin-top: 4.5em; }
  .bs-card.yours { border-color: color-mix(in srgb, var(--bc) 70%, var(--c-line)); box-shadow: var(--sh-raised), 0 0 18px color-mix(in srgb, var(--bc) 22%, transparent); }
  .bs-card.framed { border: 16px solid transparent; border-image: url(/img/bosses/ui/cartao_moldura.png) 16 / 16px stretch; image-rendering: pixelated; box-shadow: 0 3px 0 var(--c-bg-deep); }
  .bs-banner { position: relative; height: 8.4em; overflow: hidden; background: radial-gradient(ellipse 60% 120% at 78% 100%, color-mix(in srgb, var(--bc) 34%, transparent), transparent 70%), linear-gradient(110deg, #0e0c18 0%, color-mix(in srgb, var(--bc) 14%, var(--c-surface-1)) 55%, var(--c-bg) 100%); image-rendering: pixelated; border-bottom: 1px solid color-mix(in srgb, var(--bc) 35%, var(--c-line)); }
  .bs-card.framed .bs-banner { border-bottom-color: var(--c-line); }
  .bs-banner.art { background-size: cover; background-position: center 35%; }
  .bs-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 18, .88) 0%, rgba(11, 10, 18, .4) 45%, transparent 70%), linear-gradient(transparent 55%, rgba(11, 10, 18, .72)); pointer-events: none; }
  .bs-banner .bs-pt.sil { position: absolute; right: 6%; bottom: -.2em; width: 9em !important; height: 9em !important; opacity: .9; filter: drop-shadow(0 0 1.2em color-mix(in srgb, var(--bc) 55%, transparent)); }
  .bs-card.locked .bs-banner { filter: grayscale(.8) brightness(.6); }
  .bs-ptbox { position: absolute; z-index: 1; left: var(--sp-3); bottom: var(--sp-3); display: grid; place-items: center; width: 72px; height: 72px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bc) 30%, var(--c-surface-2)), var(--c-bg) 75%); border: var(--bw) solid color-mix(in srgb, var(--bc) 65%, var(--c-line)); border-radius: var(--r-md); box-shadow: var(--sh-raised); }
  .bs-id { position: absolute; z-index: 1; left: calc(72px + var(--sp-3) * 2); bottom: 2.3em; right: var(--sp-4); }
  .bs-id h3 { margin: 0; font: var(--fw-regular) 2em/1 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); text-shadow: 0 2px 0 #000, 0 0 14px color-mix(in srgb, var(--bc) 50%, transparent); }
  .bs-id small { color: color-mix(in srgb, var(--bc) 55%, var(--c-text)); font-size: var(--fs-sm); font-style: italic; text-shadow: 0 1px 0 #000; }
  .bs-tags { position: absolute; z-index: 1; left: calc(72px + var(--sp-3) * 2); right: var(--sp-3); bottom: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .bs-tags span { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-sm); background: rgba(11, 10, 18, .86); border: 1px solid var(--c-line); color: var(--c-text-2); font: var(--fw-bold) var(--fs-xs)/1.35 var(--font-ui); }
  .bs-tags .lv { color: var(--c-gold); border-color: var(--c-gold-dark); }
  .bs-tags .lv.locked { color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-line)); }
  .bs-tags .yours { color: var(--c-bg); background: var(--bc); border-color: var(--bc); }
  .bs-tags .win { color: var(--c-gold); border-color: var(--c-gold-dark); }
  .bs-tags .best { color: var(--c-info); }

  .bs-body { display: grid; grid-template-columns: minmax(15em, 19em) minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); }
  .bs-side { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  /* A chave: quantas você tem e de onde vem. */
  .bs-keys { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-left: 3px solid var(--bc); border-radius: var(--r-sm); }
  .bs-keys.none { border-left-color: var(--c-line-strong); }
  .bs-keys .kh { display: flex; align-items: center; gap: var(--sp-3); }
  .bs-keys .kh b { display: block; font: var(--fw-regular) var(--fs-d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); }
  .bs-keys.none .kh b { color: var(--c-text-muted); }
  .bs-keys .kh small { color: color-mix(in srgb, var(--bc) 60%, var(--c-text)); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .bs-keys p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  /* Os dados: rótulo em cima, o valor embaixo (o valor longo quebra a linha sem ficar torto). */
  .bs-facts { display: grid; background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .bs-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); row-gap: 2px; align-items: center; padding: var(--sp-2) var(--sp-3); }
  .bs-fact + .bs-fact { border-top: 1px solid var(--c-line-soft); }
  .bs-fact > .bs-uic { grid-row: 1 / span 2; }
  .bs-fact-k { color: var(--c-text-muted); font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
  .bs-fact-v { color: var(--c-text); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.3; }
  .bs-fact-v small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
  .bs-fact.bad .bs-fact-v { color: var(--c-danger-text); }
  /* Entrar (ação principal, em ouro) e o porquê embaixo. */
  .bs-act { display: grid; gap: var(--sp-2); }
  .bs-why { color: var(--c-danger-text); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-align: center; }
  .bs-why.ok { color: var(--c-text-muted); font-weight: var(--fw-regular); }
  .bs-confirm { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: color-mix(in srgb, var(--c-gold) 7%, var(--c-sunken)); border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent); border-radius: var(--r-md); }
  .bs-confirm p { margin: 0; color: var(--c-text); font-size: var(--fs-sm); line-height: var(--lh); }
  .bs-msg { margin: 0; padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-danger) 45%, transparent); border-radius: var(--r-sm); color: #ffb3bc; font-size: var(--fs-sm); }

  /* Abas do cartão (.ui-tabs.line) e o conteúdo delas. */
  .bs-main { container: bsmain / inline-size; display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  .bs-tabs > button { flex: 1 0 auto; }
  .bs-main > .ui-h { margin: var(--sp-1) 0 0; }
  .bs-mechs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .bs-mech { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-2) var(--sp-3) var(--sp-3) var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); }
  .bs-mech .nm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
  .bs-mech .nm b { color: var(--c-text-strong); font-size: var(--fs-md); font-weight: var(--fw-bold); }
  .bs-mech .nm .ui-pill { padding: 0 var(--sp-1); line-height: 1.3; }
  .bs-mech p { margin: var(--sp-1) 0 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.35; }
  .bs-mic { display: block; width: 32px; height: 32px; background: var(--c-bg) center / 24px 24px no-repeat; border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); image-rendering: pixelated; }
  .bs-mic.art { background-size: auto; }
  .bs-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: var(--lh); }
  .bs-loot { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }
  .bs-loot li { padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-left: 3px solid color-mix(in srgb, var(--bc) 70%, var(--c-line)); border-radius: var(--r-sm); font-size: var(--fs-sm); }
  .bs-first { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 8%, var(--c-sunken)); border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent); border-radius: var(--r-sm); color: #ffe9a8; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .bs-first.done { opacity: .75; }

  /* Vitrine das recompensas (BossInfo.reward_table): o ícone de cada coisa que
     pode cair, com a chance no selo e a quantidade no canto, como as tabelas de
     espólio dos MMORPGs. Tocar numa raridade abre as peças (ou livros) dela. */
  .bp { display: grid; gap: var(--sp-2); }
  .bp-cur { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .bp-cur > span { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: var(--fw-regular) var(--fs-d-sm)/1.1 var(--font-display); letter-spacing: .02em; color: var(--c-gold); }
  .bp-cur > span.xp { color: var(--c-accent-text); }
  .bp-cur .coin { width: 14px; height: 14px; }
  .coin.xp { background: radial-gradient(circle at 35% 35%, #efe8ff, #8f78ff 55%, #4a35b8); box-shadow: 0 0 0 2px #2c1f6e; }
  .bp-g { display: grid; gap: var(--sp-2); min-width: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-left: 3px solid color-mix(in srgb, var(--bc) 70%, var(--c-line)); border-radius: var(--r-sm); }
  .bp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); }
  .bp-h h6 { margin: 0; font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); }
  .bp-h small { flex-basis: 100%; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.35; }
  .bp-h .qty { padding: 1px var(--sp-2); border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-gold) 10%, var(--c-surface-1)); border: 1px solid var(--c-gold-dark); color: #ffe9a8; font-weight: var(--fw-bold); font-size: var(--fs-xs); white-space: nowrap; }
  .bp-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-start; }
  .bp-cell { display: grid; justify-items: center; gap: var(--sp-1); min-width: 3.5em; max-width: 6.5em; }
  .bp-cell > small { max-width: 100%; color: var(--c, var(--c-text-2)); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
  .tile.bp-t { width: 3.2em; }
  .tile.bp-t .bp-pct { position: absolute; top: 1px; right: 1px; padding: 1px 3px; border-radius: var(--r-xs); background: rgba(8, 6, 16, .88); color: #fff; font: 700 12px/1.1 var(--font-ui); pointer-events: none; }
  .tile.bp-t .cnt { position: absolute; right: 2px; bottom: 1px; color: #fff; font: 400 14px/1 var(--font-display); text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
  .tile.bp-t.on { outline: 2px solid var(--c-gold); outline-offset: 1px; }
  .tile.bp-t .pot-ic { transform: scale(1.4); }
  .bp-sep { align-self: stretch; width: 1px; margin: 0 var(--sp-1); background: var(--c-line-soft); }
  .bp-peek { display: grid; gap: var(--sp-2); padding: var(--sp-2); background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--c-line-soft)); border-radius: var(--r-sm); }
  .bp-peek p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.35; }
  .bp-peek p b { color: var(--c); }
  /* Flex (não grid): o quadrado tem overflow hidden, e numa grade com altura
     máxima as linhas encolhiam e cortavam os ícones. A lista cresce com o conteúdo
     (a janela é que rola: uma rolagem só). */
  .bp-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sp-1); }
  .bp-grid > .tile.bp-t { width: 2.9em; flex: none; }
  .bp-tip { display: grid; gap: 2px; white-space: normal; }
  .bp-tip b { color: var(--c); font-size: 1.05em; }
  .bp-tip small { color: var(--c-text-muted); }
  .bp-tip .it-stats { display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); }
  .bs-first.bp-first { display: grid; gap: var(--sp-2); align-items: stretch; }
  .bp-fh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
  .bp-seal { padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--c-gold); color: #2a1a05; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
  .bs-first.done .bp-seal { background: var(--c-ok); }
  .bp-first .bp-row { align-items: center; }
  .bp-first .bp-note { margin: 0; color: #e9dcb4; font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.35; }
  /* Na confirmação do Entrar: uma linha só, sem nomes. */
  .bp.mini { gap: var(--sp-2); }
  .bp.mini > small { color: #e9dcb4; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
  .bp.mini .bp-row { gap: var(--sp-1); align-items: center; }
  .bp.mini .bp-cur > span { padding: 2px var(--sp-2); font-size: 1.05em; }
  .bp.mini .tile.bp-t { width: 2.6em; }
  .bp.mini .tile.bp-t .bp-pct { font-size: 9px; }
  @container painel (max-width: 420px) {
    .bp-cell { min-width: 3.2em; }
    .tile.bp-t { width: 3em; }
    .bp-cur > span { padding: 2px var(--sp-2); font-size: 1.15em; }
  }

  /* Ranking: a sua posição, os 10 melhores tempos e as suas tentativas. */
  .bs-me { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: color-mix(in srgb, var(--c-gold) 6%, var(--c-sunken)); border: 1px solid color-mix(in srgb, var(--c-gold) 30%, var(--c-line-soft)); border-radius: var(--r-sm); }
  .bs-me span { color: var(--c-text-muted); font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
  .bs-me b { color: var(--c-gold); font: var(--fw-bold) var(--fs-lg)/1.2 var(--font-ui); font-variant-numeric: tabular-nums; }
  .bs-none { margin: 0; padding: var(--sp-3); background: var(--c-sunken); border: 1px dashed var(--c-line); border-radius: var(--r-sm); color: var(--c-text-muted); font-size: var(--fs-sm); }
  .bs-table { display: grid; gap: 2px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .bs-table > div { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 3em 5.6em 3.8em 6.6em; gap: var(--sp-2); align-items: center; min-height: 2.4em; padding: 0 var(--sp-3); }
  .bs-table > .hd { min-height: 0; padding-bottom: var(--sp-1); color: var(--c-text-muted); font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
  .bs-table > .row { background: var(--c-sunken); border-radius: var(--r-xs); }
  .bs-table > .row.mine { background: color-mix(in srgb, var(--bc) 12%, var(--c-sunken)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 70%, transparent); }
  .bs-table .pos { color: var(--c-gold); font-weight: var(--fw-bold); }
  .bs-table .nm { min-width: 0; overflow-wrap: anywhere; color: var(--c-text-strong); font-weight: var(--fw-semi); line-height: 1.2; }
  .bs-table .lv, .bs-table .cl { color: var(--c-text-2); }
  .bs-table .t { color: var(--c-info); }
  .bs-table .dt { color: var(--c-text-muted); }
  .bs-runs { display: grid; gap: 2px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  /* Coluna das abas estreita (celular, ou a janela de lado com o lado do cartão): sem Classe e Data. */
  @container bsmain (max-width: 34em) {
    .bs-table > div { grid-template-columns: 2.4em minmax(0, 1fr) 2.8em 3.8em; }
    .bs-table > div > :nth-child(4), .bs-table > div > :nth-child(6) { display: none; }
  }
  /* Mais estreito (celular de 360 px): sem o nível também, para o nome caber sem partir. */
  @container bsmain (max-width: 22em) {
    .bs-table > div { grid-template-columns: 2em minmax(0, 1fr) 3.8em; padding-inline: var(--sp-2); }
    .bs-table > div > :nth-child(3) { display: none; }
  }
  .bs-runs > .row { display: grid; grid-template-columns: 7.6em minmax(0, 1fr) 4em; gap: var(--sp-2); align-items: center; min-height: 2.4em; padding: 0 var(--sp-3); background: var(--c-sunken); border-left: 3px solid var(--c-line-strong); border-radius: var(--r-xs); }
  .bs-runs .win { border-left-color: var(--c-ok); }
  .bs-runs .win b { color: var(--c-ok); }
  .bs-runs .lose b { color: var(--c-danger-text); }
  .bs-runs .srv { border-left-color: var(--c-info); }
  .bs-runs .dt { color: var(--c-text-muted); }
  .bs-runs .t { text-align: right; color: var(--c-text-2); }

  /* Janela estreita (celular, tablet em pé): banner em grade e uma coluna só. */
  @container painel (max-width: 760px) {
    .bs-banner { height: auto; min-height: 7.5em; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: end; column-gap: var(--sp-3); row-gap: var(--sp-2); padding: var(--sp-3); }
    .bs-ptbox, .bs-id, .bs-tags { position: relative; left: auto; right: auto; bottom: auto; }
    .bs-ptbox { grid-row: span 2; align-self: end; }
    .bs-id h3 { font-size: 1.6em; }
    .bs-banner .bs-pt.sil { opacity: .45; }
    .bs-body { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3); }
    .bs-mechs { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- HUD da luta: barra grande do boss no topo do mapa ---------- */
  /* Translúcida e sem pegar o clique (só os botões): o que está embaixo dela
     aparece, e a câmera desce o personagem na altura dela (a seta de zona segura
     conta o retângulo dela como fora da tela). ▴ recolhe: só nome, vida e relógio. */
  .boss-hud { --bc: #b98cff; position: absolute; z-index: 4; top: 6px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 16px)); display: grid; gap: 3px; padding: 5px 7px 6px; background: linear-gradient(180deg, rgba(23, 20, 42, .66), rgba(15, 13, 26, .58)); border: 2px solid color-mix(in srgb, var(--bc) 40%, rgba(50, 44, 82, .7)); border-radius: var(--r-md); box-shadow: 0 2px 0 rgba(6, 5, 11, .6), 0 6px 16px rgba(0, 0, 0, .3); font-size: clamp(11px, 1.5cqw, 14px); pointer-events: none; }
  .boss-hud button, .boss-hud .bh-confirm { pointer-events: auto; }
  .boss-hud button { position: relative; cursor: pointer; transition: filter var(--t-fast), background-color var(--t-fast); }
  .boss-hud button:hover { filter: brightness(1.15); }
  .bh-min { flex: none; padding: .1em .5em; background: var(--c-surface-1); border: 1px solid var(--c-line-strong); color: var(--c-text-2); font-size: .85em; font-weight: var(--fw-bold); border-radius: var(--r-sm); line-height: 1.2; }
  .boss-hud.mini { gap: 2px; padding: 3px 6px 4px; width: min(420px, calc(100% - 16px)); }
  .boss-hud.mini .bh-pt, .boss-hud.mini .bh-id small, .boss-hud.mini .bh-sub, .boss-hud.mini .bh-phase { display: none; }
  .boss-hud.mini .bh-id b { font-size: 1.2em; }
  .boss-hud.mini .bh-clock { font-size: 1.35em; min-width: 2.8em; }
  .boss-hud.mini .bh-bar.art { max-height: 24px; }
  .boss-hud.fury { border-color: #ff3b30; box-shadow: 0 2px 0 var(--c-bg-deep), 0 0 18px rgba(255, 40, 40, .45); animation: bhFury 1s ease-in-out infinite; }
  @keyframes bhFury { 50% { box-shadow: 0 2px 0 var(--c-bg-deep), 0 0 26px rgba(255, 40, 40, .7); } }
  .bh-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .bh-head .bs-pt { width: 34px !important; height: 34px !important; flex: none; background-color: var(--c-bg); border: 1px solid color-mix(in srgb, var(--bc) 60%, var(--c-line)); border-radius: var(--r-sm); }
  .bh-id { flex: 1; min-width: 0; display: grid; }
  .bh-id b { font: var(--fw-regular) 1.55em/1 var(--font-display); letter-spacing: .02em; color: var(--c-text-strong); text-shadow: 0 1px 0 #000, 0 0 10px color-mix(in srgb, var(--bc) 60%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bh-id small { color: color-mix(in srgb, var(--bc) 60%, var(--c-text-2)); font-size: .82em; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bh-phase { flex: none; padding: .15em .5em; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bc) 28%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, var(--bc) 60%, var(--c-line)); color: var(--c-text-strong); font-weight: var(--fw-bold); font-size: .85em; white-space: nowrap; }
  .bh-clock { flex: none; min-width: 3.2em; text-align: right; font: var(--fw-regular) 1.9em/1 var(--font-display); color: var(--c-text-strong); text-shadow: 0 2px 0 #000; font-variant-numeric: tabular-nums; }
  .bh-clock.low { color: var(--c-warn); }
  .bh-clock.fury { color: #ff5a4a; animation: bhPulse .6s ease-in-out infinite; }
  @keyframes bhPulse { 50% { transform: scale(1.12); } }
  .bh-bar { position: relative; height: 16px; background: var(--c-bg); border: 1px solid #000; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--c-line-soft), 0 0 0 1px color-mix(in srgb, var(--bc) 35%, transparent); }
  .bh-track { position: absolute; inset: 0; }
  .bh-bar.marks-art .bh-marks i { top: -5px; bottom: -5px; width: 6px; margin-left: -3px; background: url(/img/bosses/ui/fase_marca.png) center / 100% 100% no-repeat; box-shadow: none; image-rendering: pixelated; }
  .bh-track i { position: absolute; inset: 0 auto 0 0; width: 100%; }
  /* Com a arte (barra_boss.png, 320x28): a moldura por cima, o miolo (304x12 em 8,8) por baixo. */
  .bh-bar.art { justify-self: center; width: 100%; height: auto; aspect-ratio: 320 / 28; max-height: 36px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .bh-bar.art .bh-track { inset: 28.57% 2.5%; background: var(--c-bg); }
  .bh-bar.art::after { content: ""; position: absolute; inset: 0; background: url(/img/bosses/ui/barra_boss.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; }
  .bh-bar.art .bh-hp { z-index: 1; }
  .bh-fill { background: linear-gradient(#ff6a6a, #c42a3c 55%, #8e1a2a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
  .bh-lag { background: #ffe9c8; opacity: .55; }
  .bh-marks i { position: absolute; z-index: 1; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #ffd23f; box-shadow: 0 0 4px #ffd23f; }
  .bh-hp { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-text-strong); font: var(--fw-bold) 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000, 0 0 3px #000; }
  .bh-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .bh-dodge { flex: 0 1 auto; min-width: 0; padding: .2em .55em; border-radius: var(--r-sm); background: var(--c-surface-1); border: 1px solid var(--c-line-strong); color: var(--c-text-2); font-size: .8em; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bh-dodge.on { color: #b6ffcf; border-color: var(--c-ok-deep); }
  .bh-fury { flex: 1; min-width: 0; color: #ffb3a8; font-size: .8em; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  .boss-hud.fury .bh-fury { color: #ff5a4a; }
  .bh-quit { flex: none; padding: .2em .7em; background: #3a1520; border: 1px solid var(--c-danger-deep); color: #ffb3bc; font-size: .8em; font-weight: var(--fw-bold); border-radius: var(--r-sm); }
  .bh-confirm { display: grid; gap: .45em; padding: .5em .6em; background: rgba(58, 21, 32, .94); border: 1px solid var(--c-danger-deep); border-radius: var(--r-sm); }
  .bh-confirm p { margin: 0; color: #ffd6dc; font-size: .9em; line-height: 1.35; }
  .bs-confirm .row, .bh-confirm .row { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
  .bh-confirm button { padding: .4em; font-weight: var(--fw-bold); border-radius: var(--r-sm); }
  .bh-confirm button.danger, .hunt-actions button.danger { background: var(--c-danger-deep); border-color: #b3273a; color: #fff; }
  .bh-cast, .bh-note, .bh-count { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); pointer-events: none; text-align: center; white-space: nowrap; }
  .bh-cast { top: calc(var(--bhb, 106px) + 12px); padding: .15em .8em; font: 400 clamp(20px, 3.2cqw, 30px)/1 var(--font-display); letter-spacing: .03em; color: #fff; text-shadow: 0 2px 0 #000, 0 0 14px var(--bc), 0 0 2px var(--bc); }
  .bh-cast.pop { animation: bhPop .35s cubic-bezier(.2, .9, .3, 1.3) both; }
  .bh-note { top: calc(var(--bhb, 106px) + 54px); max-width: 86%; white-space: normal; padding: .2em .9em; background: rgba(10, 8, 18, .55); border-top: 2px solid var(--bc); border-bottom: 2px solid var(--bc); font: 400 clamp(18px, 3cqw, 30px)/1.1 var(--font-display); letter-spacing: .03em; color: #fff; text-shadow: 0 2px 0 #000; animation: bhNote 2.8s ease-out both; }
  .bh-note.phase { color: color-mix(in srgb, var(--bc) 50%, #fff); }
  .bh-note.fury { color: #ff5a4a; border-color: #ff3b30; }
  .bh-note.win { color: var(--c-gold); border-color: var(--c-gold); }
  .bh-note.lose { color: var(--c-danger-text); border-color: #b3273a; }
  .bh-note.go { color: #b6ffcf; border-color: #3cff9a; }
  @keyframes bhNote { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
  .bh-count { top: 34%; font: 400 clamp(64px, 14cqw, 128px)/1 var(--font-display); color: var(--c-gold); text-shadow: 0 4px 0 #3b1f6e, 0 0 24px rgba(255, 209, 102, .6); }
  .bh-count.pop { animation: bhCount .9s ease-out both; }
  @keyframes bhCount { 0% { opacity: 0; transform: translateX(-50%) scale(1.8); } 25% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: .55; transform: translateX(-50%) scale(.9); } }
  @keyframes bhPop { from { opacity: 0; transform: translateX(-50%) scale(1.4); } }
  /* Arena: a barra do boss ocupa o topo e as magias o meio de baixo; as poções
     ficam numa coluna em cima dos botões de zoom (numa linha ao lado do zoom,
     entravam por cima da barra de magias com o mapa estreito). */
  .game.in-boss .pot-hud { top: auto; right: 8px; bottom: 78px; flex-direction: column; align-items: flex-end; }
  .game.in-boss .pot.bless { display: none; }
  /* Toque, em pé: em cima do direcional (a direita de baixo é das magias e do
     zoom; embaixo da barra do boss elas sumiam quando a barra crescia). */
  .touch .game.in-boss .pot-hud { left: 14px; right: auto; bottom: 138px; flex-direction: row; }
  @media (max-height: 640px) { .touch .game.in-boss .pot-hud { left: 10px; bottom: 116px; } }
  /* Pouco mapa embaixo da barra (confirmação de Desistir ou aviso de reinício
     abertos numa tela baixa): o nome do golpe e o aviso cairiam em cima das
     magias e do direcional; ficam escondidos até a barra encolher. */
  .map.bh-tight .bh-cast, .map.bh-tight .bh-note { display: none; }
  /* A barra do boss já mostra o reinício com a contagem: a faixa de atualização
     (no topo do mapa, por cima da barra) fica escondida enquanto isso. */
  .game.bh-restart-on .upd-bar { display: none; }
  /* Aviso da staff (cargo, silêncio, anúncio) na luta: logo abaixo da barra do
     boss, não por cima dela (o nome do golpe e o aviso somem enquanto ele está
     aberto). No celular em pé, embaixo, por cima da caixa da luta e dos menus
     (no meio do mapa ele cobria o direcional e as magias); deitado, na coluna
     da direita, fora do mapa. */
  .game.hud-boss .mod-card { top: calc(var(--bhb, 106px) + 8px); }
  @media (max-width: 900px), (max-height: 640px) { .game.hud-boss .mod-card { top: calc(var(--bhv, 120px) + 8px); } }
  @media (max-width: 599px) { .game.hud-boss .mod-card { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); } }
  @media (max-height: 500px) { .game.hud-boss .mod-card { top: 60px; bottom: auto; left: auto; right: max(8px, env(safe-area-inset-right)); transform: none; width: min(24em, 35vw); } }
  /* Faixa do resultado (janela fechada): logo abaixo da barra do boss. Embaixo
     ela batia nos bufs (em cima das magias); no celular, na barra e nas poções. */
  .game.hud-boss .boss-mini { top: calc(var(--bhb, 106px) + 8px); bottom: auto; }
  /* Toque: os botões da barra (▴, Desistir, Desviar) e da faixa ficam com o mesmo desenho,
     e a área de toque cresce por fora até 44 px (docs/design.md, regra 2 do celular). */
  @media (pointer: coarse) {
    .boss-hud button { min-height: 34px; }
    :is(.bh-min, .bh-quit, .bh-dodge)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--touch)); height: max(100%, var(--touch)); transform: translate(-50%, -50%); }
    .bh-dodge { overflow: visible; }
    .bh-min { min-width: 30px; }
    .tile.bp-t { width: max(3.2em, var(--touch)); }
    .bp-grid > .tile.bp-t { width: max(2.9em, var(--touch)); }
    .bh-confirm button { min-height: var(--touch); }
  }
  .game.in-boss .map-head .threat-key { display: none; }

  /* Caixa da luta (coluna da esquerda). */
  .boss-box { display: grid; gap: 8px; }
  .bb-head { display: flex; align-items: center; gap: 8px; }
  .bb-head .bs-pt { width: 32px !important; height: 32px !important; background-color: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .bb-head b { display: block; font: 400 20px/1 var(--font-display); color: var(--c-text-strong); }
  .bb-head small { color: var(--c-text-muted); font-size: 12px; }
  /* Os quatro números da luta numa linha (celular): o rótulo "Vida do boss" cabe sem reticências. */
  .boss-box .hunt-stats small { overflow: visible; text-overflow: clip; white-space: nowrap; letter-spacing: -.02em; }
  .boss-box .hunt-stats div { min-width: 0; padding-inline: 5px; }

  /* ---------- Resultado da luta, por cima do mapa ---------- */
  .boss-result { position: absolute; z-index: 6; inset: 0; display: flex; align-items: safe center; justify-content: center; overflow: auto; padding: 10px; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(20, 14, 40, .55), rgba(6, 5, 11, .88) 75%); animation: dtFade .5s ease-out both; }
  /* Cabe na altura do mapa: a lista do espólio encolhe (e rola) para os botões
     ficarem sempre à vista (com o zoom do navegador, eles iam para fora). */
  .br-card { --bc: #b98cff; display: flex; flex-direction: column; max-height: 100%; overflow: auto; gap: var(--sp-3); width: min(33em, 100%); padding: var(--sp-4); background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface-1) 45%); border: var(--bw) solid var(--c-line); border-top: 3px solid var(--bc); border-radius: var(--r-md); box-shadow: 0 3px 0 var(--c-bg-deep), 0 24px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--c-line-hi); font-size: clamp(12px, 1.5cqw, 15px); animation: dtRise .32s cubic-bezier(.2, .8, .2, 1) both; }
  .br-card.win { border-top-color: var(--c-gold); background: linear-gradient(180deg, #2a2312, var(--c-surface-1) 45%); }
  .br-card.lose { border-top-color: var(--c-danger); background: linear-gradient(180deg, #221327, var(--c-surface-1) 45%); }
  .br-card.srv { border-top-color: var(--c-info); }
  .br-card > * { flex: none; }
  .br-head { display: flex; align-items: center; gap: var(--sp-3); }
  .br-head .bs-pt { background-color: var(--c-bg); border: var(--bw) solid color-mix(in srgb, var(--bc) 60%, var(--c-line)); border-radius: var(--r-md); }
  .br-head h3 { margin: 0; font: var(--fw-regular) 2.6em/1 var(--font-display); letter-spacing: .03em; }
  .br-card.win h3 { color: var(--c-gold); text-shadow: 0 3px 0 #3b2a05, 0 0 22px rgba(255, 209, 102, .45); }
  .br-card.lose h3 { color: #ff6b7a; text-shadow: 0 3px 0 #3a0a14, 0 0 22px rgba(255, 70, 90, .45); }
  .br-card.srv h3 { color: var(--c-info); }
  .br-head p { margin: var(--sp-1) 0 0; color: var(--c-text-2); line-height: 1.35; }
  .br-badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .br-badges .ui-pill { white-space: normal; line-height: 1.3; }
  .br-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
  .br-stats div { display: grid; grid-template-rows: 1fr auto; align-items: center; gap: 2px; padding: var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-sm); text-align: center; }
  .br-stats small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.2; }
  .br-stats b { font: var(--fw-regular) 1.5em/1 var(--font-display); color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
  .br-rw { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .br-rw .cur { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: var(--fw-regular) 1.35em/1.1 var(--font-display); letter-spacing: .02em; color: var(--c-gold); }
  .br-rw .cur.xp { color: var(--c-accent-text); }
  .br-rw .coin { width: 14px; height: 14px; }
  .br-card > .ui-h { margin: 0; }
  /* Espólio: o prêmio inteiro, sem rolagem própria. Cada coisa é um quadro com o ícone na moldura
     da raridade, o nome inteiro embaixo e o nível; o que caiu com atributo extra tem a estrela e o
     "?" no canto. Se não couber, quem rola é o cartão inteiro (uma rolagem só). */
  .br-loot { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6em, 1fr)); gap: var(--sp-1); padding-block: var(--sp-1); }
  .br-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: var(--sp-1) 2px var(--sp-2); background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c) 16%, var(--c-sunken)), var(--c-sunken) 70%); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--c-line-soft)); border-bottom: 3px solid var(--c); border-radius: var(--r-sm); text-align: center; }
  .br-it > :first-child { flex: none; }
  .br-it .nm { color: var(--c); font-weight: var(--fw-semi); font-size: var(--fs-xs); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
  .br-it small { color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.25; }
  .br-it .br-mail { color: var(--c-info); font-weight: var(--fw-semi); }
  .br-it.piece { cursor: pointer; }
  .br-it.piece:hover { border-color: var(--c); }
  .br-afx { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; gap: 2px; }
  .br-afx .afx-q.sm { width: 28px; height: 28px; min-height: 0; font-size: 14px; }
  .br-afx .afx-q.sm::before { inset: -9px; }
  .br-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line-soft); color: var(--c-text-2); font-size: var(--fs-sm); }
  .br-leave { color: var(--c-gold); font-weight: var(--fw-bold); }
  .br-btns > .ui-btn { flex: 1 1 8em; min-width: 0; white-space: normal; }
  .br-btns .armed { animation: bhPulse .8s ease-in-out infinite; }
  .br-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }

  /* Faixa do resultado (janela fechada, olhando a arena). */
  .boss-mini { --bc: #b98cff; position: absolute; z-index: 5; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2); max-width: calc(100% - 20px); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); background: rgba(23, 20, 42, .96); border: var(--bw) solid var(--c-line); border-left: 3px solid var(--bc); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--c-bg-deep), 0 10px 24px rgba(0, 0, 0, .5); font-size: clamp(12px, 1.4cqw, 14px); }
  .boss-mini b { font: var(--fw-regular) 1.3em/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; }
  .boss-mini b.win { color: var(--c-gold); }
  .boss-mini b.lose { color: var(--c-danger-text); }
  .boss-mini small { color: var(--c-text-muted); white-space: nowrap; }
  .boss-mini .ui-btn { white-space: nowrap; }

  /* Mapa estreito (celular em pé) ou baixo (deitado): HUD de duas linhas e os botões do resultado em cima. */
  @media (max-height: 500px) {
    .boss-hud { top: 4px; gap: 3px; padding: 4px 6px 5px; width: min(440px, calc(100% - 16px)); background: linear-gradient(180deg, rgba(23, 20, 42, .88), rgba(15, 13, 26, .84)); }
    .bh-head .bs-pt, .bh-id small, .bh-sub { display: none; }
    .bh-clock { font-size: 1.5em; }
    .bh-cast { top: calc(var(--bhb, 54px) + 10px); }
    .bh-note { top: calc(var(--bhb, 54px) + 38px); }
    /* Deitado: poções numa linha em cima das magias; bufs em cima do direcional. */
    .touch .game.in-boss .pot-hud { left: auto; right: 46px; bottom: 76px; flex-direction: row; }
    .touch .game.in-boss .buffs { left: 10px; right: auto; bottom: 116px; }
    .game.in-boss .bh-note { max-width: calc(100% - 240px); }
    .br-head { order: 0; }
    .br-btns { order: 1; }
    .br-card > :not(.br-head):not(.br-btns) { order: 2; }
  }
  /* Deitado com o mapa estreito (magias em 2 x 2): as poções e os bufs sobem
     para cima do direcional, à esquerda. */
  @media (max-height: 500px) and (min-width: 600px) {
    @container mapa (max-width: 459px) {
      .touch .game.in-boss .pot-hud { left: 10px; right: auto; bottom: 118px; }
      .touch .game.in-boss .buffs { bottom: 170px; }
    }
  }
  @container mapa (max-width: 520px) {
    .br-head { order: 0; }
    .br-btns { order: 1; }
    .br-card > :not(.br-head):not(.br-btns) { order: 2; }
    .bh-sub { display: none; }
    .br-card { gap: var(--sp-2); padding: var(--sp-3); }
    .br-head h3 { font-size: 2em; }
    .br-loot { gap: var(--sp-1); }
    .br-stats b { font-size: 1.25em; }
    /* Celular: a barra já é pequena; mais opaca para o nome do mapa por trás não embaralhar o texto. */
    .boss-hud { top: 4px; gap: 3px; padding: 4px 6px 5px; background: linear-gradient(180deg, rgba(23, 20, 42, .88), rgba(15, 13, 26, .84)); }
    .bh-head .bs-pt { display: none; }
    .bh-id small, .bh-fury { display: none; }
    .bh-clock { font-size: 1.6em; }
    .bh-cast { top: calc(var(--bhb, 84px) + 12px); }
    .bh-note { top: calc(var(--bhb, 84px) + 40px); }
    .boss-mini small { display: none; }
    .br-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Celular: o nome do mapa (por cima, no canto) some enquanto a barra do boss
     está aberta: os dois ficavam um em cima do outro. */
  @media (max-width: 599px), (max-height: 500px) { .game.hud-boss .map-head { display: none; } }
  /* Reinício anunciado no meio da luta (docs/bosses.md 4.5). */
  .bh-restart { padding: .25em .5em; border-left: 3px solid var(--c-gold); background: rgba(60, 40, 0, .55); color: #ffe7a3; font-size: .82em; line-height: 1.3; white-space: normal; }
  .bh-restart[hidden] { display: none; }
  .bh-restart .short { display: none; }
  @container mapa (max-width: 520px) { .bh-restart .long { display: none; } .bh-restart .short { display: inline; } }
  @media (max-height: 500px) { .bh-restart .long { display: none; } .bh-restart .short { display: inline; } }
  @media (prefers-reduced-motion: reduce) { .bh-note, .bh-count.pop, .bh-cast.pop, .boss-hud.fury, .bh-clock.fury, .boss-result, .br-card { animation: none; } }
  /* Gruta de Gelo: o Kryos (boss de mundo do covil, boss/covil.ts). A mesma barra, com a vida
     em "?" (ninguém sabe a vida dele), o tempo até ele ir embora e o seu lugar no ranking. */
  .boss-hud.world .bh-hp { font-size: 13px; letter-spacing: .1em; }
  .boss-hud.world .bh-dodge, .boss-hud.world .bh-quit { display: none; }
  .boss-hud.world .bh-fury { color: var(--c-info); }
  /* Com a barra do Kryos no topo, as poções saem do canto de cima (a barra passava por cima delas):
     o mesmo lugar da arena (coluna em cima do zoom; no toque, em cima do direcional). */
  .game:has(#bossHud.world:not([hidden])) .pot-hud { top: auto; right: 8px; bottom: 78px; flex-direction: column; align-items: flex-end; }
  .touch .game:has(#bossHud.world:not([hidden])) .pot-hud { left: 14px; right: auto; bottom: 138px; flex-direction: row; }
  /* Pegar o item do chão ao alcance (G; no celular, o botão). */
  .covil-pick { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 92px); transform: translateX(-50%); z-index: var(--z-hud-alto); max-width: 80%; background: rgba(15, 13, 26, .9); border: 1px solid var(--gc, var(--rar-0)); box-shadow: 0 2px 0 var(--c-bg-deep), 0 0 10px color-mix(in srgb, var(--gc, var(--rar-0)) 45%, transparent); color: var(--c-text-strong); }
  .covil-pick:active:not(:disabled) { transform: translate(-50%, 1px); }
  .covil-pick-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .covil-pick[hidden] { display: none; }
  .touch .covil-pick { bottom: calc(var(--safe-b) + 126px); min-height: var(--touch); padding: 0 var(--sp-5); font-size: var(--fs-md); }
  /* App instalável (PWA): botão discreto na entrada (celular) e a escolha de
     orientação nas Configurações. */
  .ln-install { display: grid; justify-items: center; gap: .45rem; padding-top: .8rem; border-top: 1px dashed #322c52; text-align: center; }
  .ln-install[hidden], .ln-install p[hidden], .ln-install button[hidden] { display: none; }
  .ln-install button { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; background: transparent; border: 1px solid #453f63; border-radius: 4px; color: #d9d2ff; font-size: .9rem; }
  .ln-install button:hover { border-color: #7b61ff; color: #fff; }
  .ln-install svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ln-install p { margin: 0; max-width: 20rem; color: #a49fba; font-size: .85rem; }
  .cfg-orient { display: flex; flex: none; gap: 4px; }
  .cfg-orient button { padding: .45em .7em; background: #2b2740; border-color: #453f63; }
  .cfg-orient button[aria-pressed="true"] { background: #5b3fd1; border-color: #5b3fd1; }
  /* ---- Atributos extras e a Forja (docs/atributos.md 3 e 6) ----
     Selos F1–F5 (itens/forja_faixas.png), a estrela da Faixa 5, a roleta
     (moldura e blocos em border-image, arte em pixel: sempre 1x ou 2x). */
  .afx-seal { display: inline-block; flex: none; width: 16px; height: 16px; background: url('/img/itens/forja_faixas.png') 0 0 / 80px 16px no-repeat; image-rendering: pixelated; vertical-align: middle; }
  .afx-seal.f2 { background-position: -16px 0; }
  .afx-seal.f3 { background-position: -32px 0; }
  .afx-seal.f4 { background-position: -48px 0; }
  .afx-seal.f5 { background-position: -64px 0; }
  .afx-star { display: inline-block; flex: none; width: 11px; height: 11px; background: url('/img/itens/forja_estrela.png') 0 0 / 100% 100% no-repeat; image-rendering: pixelated; vertical-align: middle; filter: drop-shadow(0 0 2px rgba(255, 210, 74, .7)); }
  .afx-star.sm { width: 9px; height: 9px; }
  .forge-ic { display: inline-block; flex: none; width: 24px; height: 24px; background: url('/img/itens/forja_24.png') 0 0 / 100% 100% no-repeat; image-rendering: pixelated; vertical-align: middle; }
  .forge-ic.big { width: 32px; height: 32px; margin-right: .3em; background-image: url('/img/itens/forja.png'); }
  .forge-ic.sm { width: 16px; height: 16px; background-image: url('/img/itens/forja_16.png'); }
  .ii.stone-ic { image-rendering: pixelated; }
  .ii.stone-ic.sm { width: 20px; height: 20px; }
  .ui-btn.forge-open { background: var(--c-warn-deep); border-color: var(--c-warn); color: var(--c-text-strong); }
  .ui-btn.forge-open .forge-ic { margin: -2px 0; }
  /* Quadrado da mochila: ★ (linha no máximo) no canto de cima. */
  .afx-mark { position: absolute; top: 2px; left: 2px; z-index: 1; width: 11px; height: 11px; background: url('/img/itens/forja_estrela.png') 0 0 / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 210, 74, .85)); }
  .tile.best-up .afx-mark { left: 15px; }
  .tile.pick .afx-mark { left: 21px; }
  /* Bloco "Atributos extras" do detalhe da peça. */
  .afx-box { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-sunken); border: 1px solid var(--c-line-soft); border-radius: var(--r-md); }
  .afx-head { display: flex; align-items: center; gap: var(--sp-2); }
  .afx-head b { color: var(--c-title); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .afx-head small { flex: 1; min-width: 0; color: var(--c-text-muted); font-size: var(--fs-xs); }
  .afx-q { position: relative; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--c-surface-2); border: 1px solid var(--c-line-strong); box-shadow: none; color: var(--c-accent-text); font: 800 15px/1 system-ui, sans-serif; cursor: help; }
  .afx-q::before { content: ""; position: absolute; inset: -8px; }
  .afx-q:hover, .afx-q:focus-visible { background: var(--c-violet-deep); color: var(--c-text-strong); filter: none; }
  .afx-q.sm { width: 22px; height: 22px; font-size: 12px; }
  .afx-q.sm::before { inset: -11px; }
  .afx-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .afx-line { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; gap: .45em; padding: .15em .35em; border-left: 3px solid var(--tc); background: color-mix(in srgb, var(--tc) 7%, transparent); border-radius: 0 2px 2px 0; }
  .afx-line.t5 { grid-template-columns: 16px minmax(0, 1fr) auto auto 11px; background: color-mix(in srgb, var(--tc) 14%, transparent); }
  .afx-line .nm { min-width: 0; overflow-wrap: anywhere; color: var(--c-text); }
  .afx-line .v { color: var(--tc); font: 400 1.3em/1 "Jersey 10", system-ui, sans-serif; }
  .afx-line .rg { color: #9a95ad; font-size: .82em; white-space: nowrap; }
  .afx-line .rg i { font-style: normal; color: color-mix(in srgb, var(--tc) 70%, #9a95ad); }
  .afx-line.t5 .v { text-shadow: 0 0 6px rgba(255, 210, 74, .65); }
  .afx-none { margin: 0; color: var(--c-text-muted); font-style: italic; font-size: .9em; }
  .afx-note { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh); }
  .afx-intro { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh); }
  /* Selos curtos do Market e das listas ("Crítico +90"). */
  .afx-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
  .afx-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 .35em; border: 1px solid color-mix(in srgb, var(--tc) 55%, #2c2748); border-radius: 3px; background: #14112a; color: var(--tc); font-size: max(12px, .78em); font-weight: 600; line-height: 1.45; white-space: nowrap; }
  .afx-chip.t5 { box-shadow: 0 0 6px rgba(255, 210, 74, .35); }
  /* Janela "Atributos da peça" (o "?"): por cima de tudo (vale também no prêmio do boss). */
  .enh-wrap.afx-wrap { z-index: var(--z-ficha); font-size: clamp(12px, 2.6cqw, 15px); }
  .enh-wrap > .enh-box.afx-sheet { --dlg: var(--c-violet); --dlg-ink: var(--c-accent-text); width: min(100%, 36em); }
  .afx-sec { display: grid; gap: .3em; padding: .45em .55em; background: #14112a; border: 1px solid #2c2748; border-left: 3px solid var(--tc); border-radius: 3px; }
  .afx-sec-h { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .45em; }
  .afx-sec-h b { color: var(--tc); font: 400 1.35em/1 "Jersey 10", system-ui, sans-serif; }
  .afx-sec-h small { color: #9a95ad; }
  .afx-sec-h .fx { color: var(--tc); font-weight: 700; }
  .afx-sec-h .max { margin-left: auto; color: #ffd24a; font-style: normal; font-weight: 700; }
  .afx-tiers { display: grid; gap: 1px; }
  .afx-tr { display: grid; grid-template-columns: 16px minmax(0, 1fr) 4.2em 4.6em; align-items: center; gap: .5em; padding: .12em .35em; border-radius: 2px; color: #b9b3cc; font-size: .9em; }
  .afx-tr .pc { text-align: right; }
  .afx-tr .here { color: var(--tc); font-weight: 700; white-space: nowrap; }
  .afx-tr.on { background: color-mix(in srgb, var(--tc) 18%, #14112a); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px var(--tc); }
  .afx-eff { margin: 0; color: #c5c1d6; font-size: .88em; }
  .afx-pool { display: grid; gap: 1px; font-size: .88em; }
  .afx-pr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 5em; align-items: center; gap: .5em; padding: .15em .4em; border-radius: 2px; color: #c5c1d6; }
  .afx-pr > :nth-child(n+3) { text-align: right; }
  .afx-pr.head { color: #7f7a94; font-size: .9em; }
  .afx-pr b { color: #e9e6f5; font-weight: 700; }
  .afx-pr.has { background: #1f1a3a; color: #fff; }
  .afx-pr .nm i { color: #5fd38d; font-style: normal; font-weight: 700; }
  /* Janela Forja: a peça e as linhas à esquerda; a roleta, as chances, a pedra e o resultado à direita. */
  .enh-wrap > .enh-box.forge-box { --dlg: var(--c-warn); --dlg-ink: var(--c-warn); width: min(100%, 50em); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: var(--sp-3) var(--sp-4); }
  /* A mesma altura nas três abas (Refinar, Transmutar, Fundir): a janela não pula nem muda de lugar ao trocar de aba; o que não couber rola dentro dela (a única rolagem). */
  @media (min-width: 760px) and (min-height: 501px) { .enh-wrap > .enh-box.forge-box { height: min(100%, 46em); grid-template-rows: auto minmax(max-content, 1fr) auto; } }
  .forge-box > * { grid-column: 1 / -1; }
  .forge-box > .fg-a { grid-column: 1; }
  .forge-box > .fg-b { grid-column: 2; }
  .forge-box .enh-head strong { display: inline-flex; align-items: center; }
  .forge-box .enh-head strong::before { display: none; }
  .fg-a, .fg-b { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
  .fg-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fg-swap { align-self: start; }

  .forge-box .enh-head { gap: var(--sp-3); }
  .fg-tabs { flex: 1; display: flex; gap: var(--sp-1); max-width: 30em; margin-left: auto; padding: var(--sp-1); background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .fg-tabs button { flex: 1; min-height: var(--ctl-sm); margin: 0; padding: 0 var(--sp-2); background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; color: var(--c-text-muted); font: var(--fw-regular) var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .fg-tabs button:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); filter: none; }
  .fg-tabs button.on { background: var(--c-warn-deep); color: var(--c-text-strong); box-shadow: inset 0 -2px 0 var(--c-warn); }
  .forge-box.busy .fg-tabs button:not(.on) { opacity: .5; }
  .fg-lines { display: grid; gap: 3px; }
  .fg-line { display: grid; grid-template-columns: 12px 16px minmax(0, 1fr) auto auto; align-items: center; gap: .45em; min-height: var(--ctl-md); padding: .3em .5em; background: #17142a; border: 1px solid #3a3452; border-left: 3px solid var(--tc); border-radius: 3px; color: inherit; text-align: left; font-weight: 400; }
  .fg-line.t5 { grid-template-columns: 12px 16px minmax(0, 1fr) auto auto 11px; }
  .fg-line .dot { width: 12px; height: 12px; border: 2px solid #6b6390; border-radius: 50%; }
  .fg-line .nm { min-width: 0; overflow-wrap: anywhere; color: var(--c-text); }
  .fg-line b { color: var(--tc); font: 400 1.3em/1 "Jersey 10", system-ui, sans-serif; }
  .fg-line small { color: #9a95ad; white-space: nowrap; }
  .fg-line.on { background: #2a2116; border-color: #ffd166; border-left-color: var(--tc); }
  .fg-line.on .dot { background: #ffd166; border-color: #ffd166; box-shadow: 0 0 6px #ffd166; }
  .fg-line:disabled { opacity: .55; cursor: default; }
  .fg-line.max:disabled { opacity: .8; }
  /* A roleta: moldura (2x) e os 5 blocos (apagado / aceso); o ponteiro anda com o destaque. */
  .fg-wheel { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 22px 2px 2px; border: 20px solid transparent; border-image: url('/img/forja/roleta_moldura.png') 10 fill / 20px / 0 stretch; image-rendering: pixelated; }
  .fg-blk { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 4.6em; padding: 4px 1px; border: 10px solid transparent; border-image: url('/img/forja/roleta_faixa_f1.png') 5 fill / 10px / 0 stretch; image-rendering: pixelated; color: #cfc9e6; text-align: center; }
  .fg-blk.f2 { border-image-source: url('/img/forja/roleta_faixa_f2.png'); }
  .fg-blk.f3 { border-image-source: url('/img/forja/roleta_faixa_f3.png'); }
  .fg-blk.f4 { border-image-source: url('/img/forja/roleta_faixa_f4.png'); }
  .fg-blk.f5 { border-image-source: url('/img/forja/roleta_faixa_f5.png'); }
  .fg-blk.lit.f1, .fg-wheel.idle .fg-blk.cur.f1 { border-image-source: url('/img/forja/roleta_faixa_f1_aceso.png'); }
  .fg-blk.lit.f2, .fg-wheel.idle .fg-blk.cur.f2 { border-image-source: url('/img/forja/roleta_faixa_f2_aceso.png'); }
  .fg-blk.lit.f3, .fg-wheel.idle .fg-blk.cur.f3 { border-image-source: url('/img/forja/roleta_faixa_f3_aceso.png'); }
  .fg-blk.lit.f4, .fg-wheel.idle .fg-blk.cur.f4 { border-image-source: url('/img/forja/roleta_faixa_f4_aceso.png'); }
  .fg-blk.lit.f5, .fg-wheel.idle .fg-blk.cur.f5 { border-image-source: url('/img/forja/roleta_faixa_f5_aceso.png'); }
  .fg-blk b { color: #fff; font: 400 1.2em/1 "Jersey 10", system-ui, sans-serif; overflow-wrap: anywhere; text-shadow: 0 1px 0 #000; }
  .fg-blk small { color: #e9e6f5; font-size: .78em; font-weight: 700; text-shadow: 0 1px 0 #000; }
  .fg-blk b.roll { color: #ffe08a; font-size: 1.5em; }
  .fg-ptr { position: absolute; z-index: 2; left: 50%; top: -34px; width: 42px; height: 30px; margin-left: -21px; background: url('/img/forja/roleta_ponteiro.png') 0 0 / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; }
  .fg-blk.stop::after { content: ""; position: absolute; inset: -10px; border: 10px solid transparent; border-image: url('/img/forja/roleta_parada_borda_1.png') 5 / 10px / 0 stretch; image-rendering: pixelated; animation: fgFlash .6s ease-out forwards; pointer-events: none; }
  .fg-burst { position: absolute; z-index: 3; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; background: url('/img/forja/roleta_parada.png') 0 0 / 576px 96px no-repeat; image-rendering: pixelated; pointer-events: none; animation: fgBurst .36s steps(6) forwards; }
  .fg-shine { position: absolute; z-index: 4; right: -22px; top: -26px; width: 64px; height: 64px; background: url('/img/itens/forja_brilho.png') 0 0 / 256px 64px no-repeat; image-rendering: pixelated; pointer-events: none; animation: fgShine .4s steps(4) infinite; }
  .fg-res .fg-shine { right: 6px; top: 50%; margin-top: -32px; }
  @keyframes fgBurst { to { background-position: -576px 0; } }
  @keyframes fgShine { to { background-position: -256px 0; } }
  @keyframes fgFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
  /* Transmutar: a coluna dos nomes que gira (ponteiro de lado). */
  .fg-names { position: relative; display: grid; gap: 2px; max-height: 14.5em; overflow: auto; overscroll-behavior: contain; padding: 4px 4px 4px 24px; border: 20px solid transparent; border-image: url('/img/forja/roleta_moldura.png') 10 fill / 20px / 0 stretch; image-rendering: pixelated; }
  .fg-name { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 4.2em; align-items: center; gap: .5em; padding: .2em .45em; border-radius: 2px; color: #cfc9e6; }
  .fg-name .nm { min-width: 0; overflow-wrap: anywhere; }
  .fg-name small { color: #9a95ad; }
  .fg-name b { text-align: right; color: #ffd166; }
  .fg-name.lit { background: #3a2f12; color: #fff; box-shadow: inset 0 0 0 1px #ffd166; }
  .fg-name.stop { background: #4a3a10; }
  .fg-ptr.side { left: -21px; top: 50%; width: 15px; height: 21px; margin: -10px 0 0; background-image: url('/img/forja/roleta_ponteiro_lado.png'); }
  .fg-name .fg-burst { left: 30%; }
  .fg-odds .enh-pct.sub b { font-size: 1.35em; color: #ffd24a; }
  .fg-odds .enh-pct.up b { color: #8ff0b4; }
  .fg-odds .enh-pct.down b { color: #ff8a96; }
  /* Refinar: melhorar (verde) · sair igual (cinza) · piorar (vermelho). */
  .fg-meter { display: flex; height: 8px; background: #0c0a14; border: 1px solid #322c52; }
  .fg-meter i { display: block; height: 100%; }
  .fg-meter .up { background: repeating-linear-gradient(90deg, #5fd38d 0 4px, #3fae6c 4px 6px); }
  .fg-meter .eq { background: #4a4468; }
  .fg-meter .dn { background: repeating-linear-gradient(90deg, #ff6b78 0 4px, #c2414f 4px 6px); }
  .enh-res.worse { background: #2a0f15; border-color: #c2414f; color: #ffc2c8; }
  .enh-res.worse b { color: #ff6b78; }
  .fg-res .ba { font-weight: 700; white-space: nowrap; }
  .fg-stone { display: grid; gap: .35em; }
  .fg-cost { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; padding: .35em .55em; background: #17142a; border: 1px solid #3a3452; border-radius: 3px; }
  .fg-cost b { color: #ffe0b8; }
  .fg-cost small { margin-left: auto; color: #9a95ad; }
  .fg-cost.none { border-color: #7a2331; background: #22101a; }
  .fg-spick { display: flex; flex-wrap: wrap; gap: .35em; }
  .fg-sopt { display: inline-flex; align-items: center; gap: .3em; min-height: 36px; padding: .2em .55em; background: #17142a; border: 1px solid #3a3452; color: inherit; font-weight: 600; }
  .fg-sopt .ii { width: 24px; height: 24px; }
  .fg-sopt.on { border-color: #ffd166; background: #2a2116; }
  .fg-go { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }
  .forge-box .armed { box-shadow: 0 0 0 2px #ffd166, 0 0 12px rgba(255, 209, 102, .45); }
  .fg-res { position: relative; }
  .fg-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .45em; align-items: stretch; }
  .fg-card { display: grid; gap: .25em; align-content: start; padding: .5em .6em; background: #14112a; border: 1px solid #2c2748; border-top: 3px solid var(--tc); border-radius: 3px; }
  .fg-card > small:first-child { color: #9a95ad; text-transform: uppercase; letter-spacing: .05em; font-size: .78em; font-weight: 700; }
  .fg-card.new { box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 35%, transparent); }
  .fg-card-v { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }
  .fg-card-v b { color: var(--tc); font: 400 1.35em/1.05 "Jersey 10", system-ui, sans-serif; }
  .fg-card .rg { color: #b9b3cc; }
  .fg-vs { align-self: center; color: #ffd166; font-size: 1.4em; }
  .fg-fuse { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5em, 1fr)); gap: .45em; }
  .fg-fcard { display: grid; gap: .3em; align-content: start; padding: .5em .6em; background: #14112a; border: 1px solid #2c2748; border-radius: 3px; }
  .fg-fcard.refino { border-top: 3px solid #e0a040; }
  .fg-fcard.transmutacao { border-top: 3px solid #9a7bff; }
  .fg-ftop { display: flex; align-items: center; gap: .5em; }
  .fg-ftop > div { display: grid; min-width: 0; }
  .fg-ftop small { color: #9a95ad; }
  .fg-fcost { margin: 0; color: #e9e6f5; font-size: .9em; }
  .fg-ftot { color: #b9b3cc; }
  .fg-ftot.bad { color: #ff9aa5; }
  .fg-qty input { width: 4.2em; }
  .fg-fbtns { display: flex; gap: .35em; }
  .fg-fbtns button { flex: 1; }
  .forge-box > .fg-a:empty, .forge-box > .fg-b:empty { display: none; }
  .forge-box.fuse > .fg-b, .enh-wrap .forge-box.fuse > .fg-b { grid-column: 1 / -1; }
  .fg-fhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4em 1em; }
  .fg-fhead .afx-note { flex: 1 1 22em; }
  .fg-card-v { flex-wrap: nowrap; align-items: flex-start; }
  .fg-card-v .afx-seal { margin-top: .15em; }
  .fg-card .pw { color: #b9b3cc; font-weight: 700; }
  .fg-card .pw.up { color: #8ff0b4; }
  .fg-card .pw.down { color: #ff9aa5; }
  .fg-blk.got::after { content: ""; position: absolute; inset: -10px; border: 10px solid transparent; border-image: url('/img/forja/roleta_parada_borda_2.png') 5 / 10px / 0 stretch; image-rendering: pixelated; pointer-events: none; }
  .fg-blk.got small { color: #fff; }
  /* Market: filtro por atributo (até 3) e faixa mínima. */
  #mkAfx > select { flex: 1 1 9em; width: auto; }
  #mkAfxChips:empty { display: none; }
  .mk-card .nm .afx-chips { font-size: .95em; }
  .mail-afx { display: grid; gap: .4em; margin-top: .4em; }
  .br-it.piece { cursor: pointer; }
  .loot-max { color: #ffd24a; font-weight: 700; }
  @media (prefers-reduced-motion: reduce) {
    .fg-burst, .fg-shine, .fg-blk.stop::after { animation: none; }
    .fg-burst, .fg-blk.stop::after { display: none; }
  }
  /* Tela estreita (abaixo de 760 px): Forja numa coluna só. */
  @media (max-width: 759px) {
    .enh-wrap > .enh-box.forge-box { grid-template-columns: minmax(0, 1fr); }
    .forge-box > .fg-a, .forge-box > .fg-b { grid-column: 1; }
  }
  /* Celular em pé: a Forja e o "?" viram folha de baixo para cima (92% da altura,
     rolagem por dentro, título e botões presos); a roleta em 1x para caber em 360 px. */
  @media (max-width: 599px) {
    .fg-wheel { gap: 3px; padding: 20px 0 0; border-width: 10px; border-image-width: 10px; }
    .fg-blk { min-height: 4.4em; padding: 2px 0; border-width: 5px; border-image-width: 5px; }
    .fg-blk b { font-size: 1.05em; }
    .fg-blk .afx-seal { width: 14px; height: 14px; background-size: 70px 14px; }
    .fg-blk .afx-seal.f2 { background-position: -14px 0; }
    .fg-blk .afx-seal.f3 { background-position: -28px 0; }
    .fg-blk .afx-seal.f4 { background-position: -42px 0; }
    .fg-blk .afx-seal.f5 { background-position: -56px 0; }
    .fg-ptr { top: -26px; width: 28px; height: 20px; margin-left: -14px; }
    .fg-blk.stop::after, .fg-blk.got::after { inset: -5px; border-width: 5px; border-image-width: 5px; }
    .fg-names { border-width: 10px; border-image-width: 10px; padding-left: 20px; }
    .fg-line { min-height: 44px; }
    .fg-tabs button { min-height: 44px; }
    .forge-box .enh-head { flex-wrap: wrap; row-gap: .4em; }
    .forge-box .enh-head .fg-tabs { order: 3; flex-basis: 100%; max-width: none; }
    .afx-tr { grid-template-columns: 16px minmax(0, 1fr) 3.6em 3.8em; gap: .35em; }
    .afx-pr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 4.4em 4em; gap: .35em; font-size: .95em; }
    .fg-fuse { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 459px) {
    .fg-cards { grid-template-columns: minmax(0, 1fr); }
    .fg-vs { justify-self: center; transform: rotate(90deg); }
    .afx-line .rg i { display: none; }
  }
  /* Celular deitado: duas colunas (a peça e as linhas | a roleta, a pedra e o botão); cabeçalho de uma linha. */
  @media (max-height: 500px) and (min-width: 600px) {
    .enh-wrap > .enh-box.forge-box { width: min(100%, 60em); grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
    .enh-wrap .forge-box > .fg-a { grid-column: 1; }
    .enh-wrap .forge-box > .fg-b { grid-column: 2; }
    .enh-wrap .forge-box .fg-hero { padding: .35em .5em; }
    .enh-wrap .forge-box .fg-tabs button { min-height: var(--ctl-sm); padding: 0 var(--sp-2); }
    .enh-wrap .forge-box .enh-head strong { font-size: 1.35em; }
    .enh-wrap .forge-box .forge-ic.big { width: 24px; height: 24px; }
    .enh-wrap .afx-sheet > * { grid-column: 1 / -1; }
    .enh-wrap > .enh-box.afx-sheet { width: min(100%, 44em); grid-template-columns: minmax(0, 1fr); }
    .fg-wheel { padding-top: 20px; border-width: 14px; border-image-width: 14px; }
    .fg-blk { min-height: 3.9em; }
    .fg-names { max-height: 9em; }
  }
  /* ---- Tutorial (docs/tutorial.md). Dono: tutorial. ----
     A camada por cima do jogo (#tutLayer, --z-tutorial): não pega clique, só a fala da Maren e os
     botões dela. A posição da fala, do contorno e da seta vem do panel.ts (left/top em px). */
  .tut-layer { position: fixed; inset: 0; z-index: var(--z-tutorial); pointer-events: none; font: var(--fw-regular) clamp(12.5px, 1.05vw, 14px)/var(--lh) var(--font-ui); color: var(--c-text); }
  .tut-layer[hidden], .tut-layer [hidden] { display: none !important; }

  /* O contorno do alvo: borda dourada que pulsa e um véu leve no resto da tela. */
  .tut-ring { position: fixed; border: 2px solid var(--c-gold); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--c-gold-dark), 0 0 14px 2px rgba(240, 192, 48, .55), 0 0 0 200vmax rgba(6, 5, 11, .28); transition: left var(--t-fast) var(--ease), top var(--t-fast) var(--ease), width var(--t-fast) var(--ease), height var(--t-fast) var(--ease); animation: tut-pulse 1.4s var(--ease) infinite; }
  @keyframes tut-pulse { 50% { border-color: var(--c-gold-strong); box-shadow: 0 0 0 1px var(--c-gold-dark), 0 0 22px 5px rgba(240, 192, 48, .75), 0 0 0 200vmax rgba(6, 5, 11, .28); } }

  /* A seta (pixel art, 16x16 em 2x) e o nome do que tocar. */
  .tut-point { position: fixed; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; --ax: 50%; }
  .tut-point[data-side="below"] { flex-direction: column-reverse; }
  .tut-arrow { width: 32px; height: 32px; margin-left: calc(var(--ax) - 16px); image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(6, 5, 11, .8)); animation: tut-bob .9s var(--ease) infinite alternate; }
  .tut-point[data-side="below"] .tut-arrow { transform: rotate(180deg); animation-name: tut-bob-up; }
  @keyframes tut-bob { to { transform: translateY(5px); } }
  @keyframes tut-bob-up { from { transform: rotate(180deg); } to { transform: rotate(180deg) translateY(5px); } }
  .tut-tip { order: -1; max-width: min(16em, calc(100vw - 16px)); padding: 3px 8px; background: var(--c-gold-deep); border: 1px solid var(--c-gold); border-radius: var(--r-sm); box-shadow: var(--sh-pop); color: #fff8dc; font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; }
  .tut-point[data-side="below"] .tut-tip { order: 1; }

  /* A fala (aberta) e o rastreador (recolhido), no canto de cima do mapa. */
  .tut-card { position: fixed; display: block; overflow: auto; overscroll-behavior: contain; pointer-events: auto; background: var(--c-window); border: var(--bw) solid var(--c-line-strong); border-left: 3px solid var(--c-gold); border-radius: var(--r-md); box-shadow: var(--sh-window), inset 0 1px 0 var(--c-line-hi); }
  .tut-card.min { width: auto !important; max-width: min(24em, calc(100% - 16px)); background: rgba(21, 18, 34, .92); }
  .tut-talk { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
  .tut-face { width: 64px; height: 64px; image-rendering: pixelated; background: var(--c-sunken); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
  .tut-face.sm { width: 32px; height: 32px; flex: none; }
  .tut-body { display: grid; gap: var(--sp-2); min-width: 0; }
  .tut-body > p { margin: 0; }
  .tut-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-2); }
  .tut-who b { color: var(--c-gold); font: var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .tut-who small { color: var(--c-text-muted); font-size: var(--fs-xs); }
  .tut-say { color: var(--c-text-strong); }
  .tut-gift { padding: var(--sp-1) var(--sp-2); background: var(--c-sunken); border: 1px solid var(--c-gold-dark); border-radius: var(--r-sm); color: var(--c-text-2); font-size: var(--fs-sm); }
  .tut-gift b { color: var(--c-gold); }
  .tut-goal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--sp-2); color: var(--c-accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
  .tut-goal small { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
  .tut-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .tut-track { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--ctl-md); margin: 0; padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); background: none; border: 0; color: var(--c-text-strong); font: var(--fw-semi) var(--fs-sm)/1.25 var(--font-ui); text-align: left; cursor: pointer; }
  .tut-track:hover { background: var(--c-surface-2); }
  .tut-track-text { min-width: 0; }
  .tut-bar { flex: none; width: 3em; height: 6px; background: linear-gradient(90deg, var(--c-ok) calc(var(--p) * 100%), var(--c-sunken) 0); border: 1px solid var(--c-line); border-radius: var(--r-xs); }

  @media (pointer: coarse) {
    .tut-layer { font-size: 14px; }
    .tut-track { min-height: var(--touch); }
  }
  /* Celular deitado (pouca altura): a fala mais baixa. */
  @media (max-height: 500px) {
    .tut-talk { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
    .tut-body { gap: var(--sp-1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tut-ring, .tut-arrow { animation: none; }
    .tut-ring { transition: none; }
  }

  /* O tour da interface: o balão (título, "3 de 9", o texto e Anterior / Próximo / Pular tour). */
  .tut-tour { position: fixed; display: grid; gap: var(--sp-2); padding: var(--sp-3); pointer-events: auto; background: var(--c-window); border: var(--bw) solid var(--c-gold); border-radius: var(--r-md); box-shadow: var(--sh-window), 0 0 0 1px var(--c-gold-dark); }
  .tut-tour > p { margin: 0; }
  .tut-tour-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
  .tut-tour-head b { color: var(--c-gold); font: var(--fs-d-sm)/1 var(--font-display); letter-spacing: .02em; }
  .tut-tour-head small { flex: none; color: var(--c-text-muted); font-size: var(--fs-xs); }

  /* O "?" no topo de cada janela (fica antes do fechar). */
  .panel-head > .panel-help { order: 1; margin-left: auto; font-family: var(--font-display); font-size: 1.25em; }
  .panel-head > .panel-help:hover { background: var(--c-violet-deep); border-color: var(--c-violet); }
  .panel-head > #panelClose { order: 2; }
  .tut-cfg-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
  .panel-head > .panel-help[hidden] { display: none; }