/* Base: tokens, reset e tipografia. Mobile-first: tudo é pensado para toque. */
:root {
  --bg: #14110f;
  --bg-2: #1a1612;
  --surface: #221d17;
  --surface-2: #2b241c;
  --line: #3a3125;
  --text: #ece3d1;
  --muted: #a09481;
  --gold: #cfa95a;
  --gold-2: #e6c47e;
  --gold-ink: #241a08;
  --danger: #d0624c;
  --ok: #86b573;

  --radius: 14px;
  --radius-sm: 10px;
  --tap: 48px;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;

  --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);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(120% 60% at 50% -10%, #2a2118 0%, rgba(42, 33, 24, 0) 60%),
    var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none; /* evita puxar-para-recarregar sem querer */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.01em;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
}

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* Layout: a tela ocupa 100% da altura visível; só o miolo rola. */
#app {
  height: 100vh;
  height: 100dvh;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: screen-in 0.18s ease-out;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.screen__header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-t) + 8px) 12px 8px;
  min-height: 56px;
}
.screen__header .grow { flex: 1; min-width: 0; }
.screen__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 20px;
}

.screen__footer {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 10px 16px calc(var(--safe-b) + 10px);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.screen__footer > .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: nowrap; }
.screen__footer > .btn--primary { flex-grow: 1.6; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--tight { gap: 8px; }
.stack--loose { gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }

/* ---------- Assistente de criação ---------- */
.wizard__main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wizard__preview {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.wizard__preview .portrait { width: 64px; flex: none; }
.wizard__who { display: flex; flex-direction: column; min-width: 0; }
.wizard__who strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 0 16px; }
.progress > span { display: block; height: 100%; background: var(--gold); transition: width 0.25s ease; }

/* ---------- Painel do herói (abas) ---------- */
.hub { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hub__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tabbar {
  flex: none;
  display: flex;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
}

/* ---------- Paisagem em celular (pouca altura) ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  .screen__header { min-height: 48px; padding-top: calc(var(--safe-t) + 4px); padding-bottom: 4px; }
  .screen__body { padding-top: 4px; }
  .screen__footer { padding-top: 8px; padding-bottom: calc(var(--safe-b) + 8px); }

  /* Criação: retrato à esquerda, formulário à direita */
  .wizard__main { flex-direction: row; }
  .wizard__preview {
    flex-direction: column;
    justify-content: center;
    width: 190px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 8px 12px;
    text-align: center;
  }
  .wizard__preview .portrait { width: 110px; }
  .wizard__who { align-items: center; }
  .wizard__form { flex: 1; min-width: 0; }

  /* Painel do herói: abas viram uma coluna lateral */
  .hub { flex-direction: row-reverse; }
  .tabbar {
    flex-direction: column;
    width: 84px;
    border-top: 0;
    border-right: 1px solid var(--line);
    padding-bottom: 0;
  }
  .tabbar .tab { flex: 1; }

  /* (o layout do Início em paisagem fica em components.css, depois de .home__split) */
}

/* Telas largas (tablet/desktop): só centraliza, sem inventar layout novo */
@media (min-width: 700px) and (orientation: portrait) {
  .screen__body { padding-left: 24px; padding-right: 24px; }
}

/* Miniatura do herói na barra fixa. */
.header-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); background: var(--surface-2); }
.header-avatar__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.header-avatar .portrait, .header-avatar .portrait__img, .header-avatar svg { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: top center; display: block; border: 0; border-radius: 0; }

/* Criação: com o teclado aberto, só o formulário fica visível (evita retrato e botão espremidos) */
.screen.kbd-open .wizard__preview, .screen.kbd-open .screen__footer, .screen.kbd-open .progress { display: none; }
.screen.kbd-open .wizard__form { padding-bottom: 12px; }


/* Componentes. Alvos de toque >= 48px, sem depender de hover. */

/* ---------- Botões ---------- */
.btn {
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: scale(0.98); filter: brightness(1.1); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn--primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: #a98639;
  color: var(--gold-ink);
}
.btn--danger { color: var(--danger); border-color: rgba(208, 98, 76, 0.5); background: transparent; }
.btn--ghost { background: transparent; }
.btn--block { width: 100%; }
.btn--tall { min-height: 54px; font-size: 1.05rem; }

.icon-btn {
  width: var(--tap);
  height: var(--tap);
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text);
}
.icon-btn:active { background: var(--surface-2); }
.icon { display: block; flex: none; }

/* ---------- Cartões ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.card__title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 700;
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.notice {
  border: 1px solid rgba(208, 98, 76, 0.5);
  background: rgba(208, 98, 76, 0.08);
  color: #f0b8ab;
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* ---------- Início ---------- */
.home__brand { text-align: center; padding: 18px 0 10px; }
.home__emblem { width: 88px; height: 88px; margin: 0 auto 10px; color: var(--gold); }
.home__brand h1 {
  font-size: 2.1rem;
  color: var(--gold-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home__split { display: flex; flex-direction: column; gap: 8px; }

.campaign {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 4px 6px 6px;
}
.campaign__main {
  flex: 1;
  min-width: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.campaign__main:active { background: var(--surface-2); }
.campaign .portrait { width: 52px; flex: none; }
.campaign__text { display: flex; flex-direction: column; min-width: 0; }
.campaign__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Seleção (raças, classes, origens, opções) ---------- */
.choice { display: flex; flex-direction: column; gap: 8px; }
.choice--chips { flex-direction: row; flex-wrap: wrap; }
.choice__item {
  text-align: left;
  min-height: var(--tap);
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.choice__item[aria-checked="true"] {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(207, 169, 90, 0.16), rgba(207, 169, 90, 0.06));
  box-shadow: inset 0 0 0 1px var(--gold);
}
.choice__label { font-weight: 600; }
.choice__desc { color: var(--muted); font-size: 0.9rem; }
.choice--chips .choice__item { flex-direction: row; align-items: center; padding: 8px 16px; border-radius: 999px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(207, 169, 90, 0.15);
  color: var(--gold-2);
}

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--line);
  padding: 0;
  position: relative;
}
.swatch[aria-checked="true"] { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(230, 196, 126, 0.35); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.field__label .muted { font-weight: 400; }
.input {
  min-height: var(--tap);
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 1rem; /* >=16px: evita zoom automático no celular */
  color: var(--text);
}
.input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: 0.9rem; min-height: 1.3em; }

/* ---------- Atributos ---------- */
.attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.attr {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  text-align: center;
}
.attr__v { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.attr__k { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }
.bar { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--gold); }

/* ---------- Retratos e imagens provisórias ---------- */
.portrait { display: block; aspect-ratio: 120 / 140; line-height: 0; }
.portrait__img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 30%; border-radius: 12px; }
.portrait svg { width: 100%; height: 100%; display: block; border-radius: 12px; }
.portrait--hero { width: min(46vw, 180px); margin: 0 auto; }
.tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px dashed var(--muted);
  color: var(--muted);
  width: fit-content;
}
.art-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  color: var(--muted);
  border: 1px dashed var(--muted);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 12px, rgba(255, 255, 255, 0) 12px 24px),
    var(--surface);
}
.art-placeholder b { display: block; letter-spacing: 0.12em; font-size: 0.75rem; color: var(--gold); }
.art-placeholder code { font-size: 0.8rem; word-break: break-all; }

/* ---------- Abas do painel ---------- */
.tab {
  flex: 1;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.tab[aria-selected="true"] { color: var(--gold-2); }
.tab[aria-selected="true"] .icon { filter: drop-shadow(0 0 6px rgba(230, 196, 126, 0.5)); }

/* ---------- Segmentado (idioma) ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button {
  min-height: var(--tap);
  min-width: 52px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}
.seg button[aria-checked="true"] { background: var(--gold); color: var(--gold-ink); }
.seg--large button { min-height: var(--tap); padding: 0 20px; flex: 1; }
.seg--large { display: flex; }

/* ---------- Folha inferior (confirmações) ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.15s ease-out;
}
.sheet {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 20px 18px calc(var(--safe-b) + 18px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: sheet-up 0.2s ease-out;
  max-height: 90dvh;
  overflow-y: auto;
}
.sheet__title { font-family: var(--font-display); font-size: 1.2rem; }
.sheet__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sheet__actions .btn { min-height: 52px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (orientation: landscape) and (max-height: 540px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 20px; border-bottom: 1px solid var(--line); }
}

/* ---------- Avisos rápidos ---------- */
#toasts {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--safe-b) + 84px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.toast {
  background: #efe6d3;
  color: #1c1710;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  max-width: 100%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  animation: sheet-up 0.2s ease-out;
}
.toast--error { background: #f3c3b8; }

/* Com uma folha aberta, os avisos sobem para o topo e não cobrem os botões dela. */
body:has(.sheet-backdrop) #toasts {
  bottom: auto;
  top: calc(var(--safe-t) + 12px);
}

/* Início em paisagem (celular deitado): marca à esquerda, campanhas à direita.
   Fica aqui, depois de .home__split, para não ser sobrescrito. */
@media (orientation: landscape) and (max-height: 540px) {
  .home__split { flex-direction: row; gap: 20px; align-items: flex-start; }
  .home__split > .home__brand { flex: 0 0 36%; padding-top: 6px; }
  .home__split > .home__list { flex: 1; min-width: 0; }
  .home__emblem { width: 64px; height: 64px; margin-bottom: 6px; }
  #toasts { bottom: calc(var(--safe-b) + 72px); }
}

/* ---------- Fase 2: mapa, locais, diálogo, combate ---------- */
.map { position: relative; border-radius: var(--radius); overflow: hidden; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: 0; color: var(--text);
}
.pin__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--gold); }
.pin__label { font-size: 0.78rem; font-weight: 700; background: rgba(20, 17, 15, 0.82); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.poi-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  min-height: 64px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
}
.poi-card strong { font-family: var(--font-display); font-size: 1.05rem; }
.btn--left { justify-content: flex-start; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding-top: 10px; padding-bottom: 10px; }
.bubble { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.bubble__react { color: var(--muted); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: rgba(208, 169, 79, 0.16); color: var(--gold); border: 1px solid rgba(208, 169, 79, 0.4); border-radius: 999px; padding: 2px 10px; font-size: 0.85rem; font-weight: 600; }
.log { min-height: 5.2em; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.95rem; }
.log p:last-child { color: var(--text); }
.combat-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.combat-actions .btn { padding: 0 8px; }
.cbtn { flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 104px; padding: 8px 4px 6px !important; text-align: center; line-height: 1.15; position: relative; }
.cbtn__name { font-size: .8rem; font-weight: 700; }
.cbtn__sub { font-size: .68rem; color: #8fb3e6; font-weight: 600; }
.cbtn--primary { box-shadow: 0 0 0 1px var(--gold) inset; }
.cbtn--ghost { opacity: .85; }
.cbtn:disabled { opacity: .45; }
.cbtn:not(:disabled):active .cicon { transform: scale(.94); }
.cicon { --ci: 52px; width: var(--ci); height: var(--ci); flex: none; display: grid; place-items: center; border-radius: 12px; overflow: hidden; color: var(--gold);
  background: radial-gradient(circle at 50% 35%, #3a2d1e 0%, #15100a 85%); border: 1px solid rgba(208, 169, 79, .55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55), inset 0 0 10px rgba(208, 169, 79, .12); transition: transform .08s; }
.cicon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cicon--attack { color: #e9c982; } .cicon--defend { color: #8fb3e6; } .cicon--power { color: #f0a24a; } .cicon--flee { color: #b8c0a0; } .cicon--item { color: #c97a6a; }
.cicon--locked { filter: grayscale(1) brightness(.6); }
.cicon__glyph { filter: drop-shadow(0 0 3px currentColor); }
.notice--warn { border-color: var(--danger); color: #f3c3b8; background: rgba(208, 98, 76, 0.1); }
.bar--hp > span { background: #c0594a; }
.bar--mp > span { background: #4f7fc0; }
.bar--enemy > span { background: #8c8c8c; }
.tag--ok { color: var(--ok, #8fbf7a); border-color: currentColor; }
.entry { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gold { color: var(--gold); font-weight: 700; }

/* Fase 3: pontos de atributo e habilidades */
.attr { position: relative; }
.attr__plus { min-height: var(--tap); min-width: var(--tap); margin-top: 6px; padding: 0; font-size: 1.4rem; font-weight: 700; }
.skill { padding: 8px 0; border-top: 1px solid var(--line); }
.skill:first-of-type { border-top: 0; }
.skill--locked { opacity: 0.55; }

.chip--off { opacity: 0.5; }

.clue { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.clue--off { opacity: 0.5; text-align: center; }
.chip--btn { min-height: var(--tap); cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; }
.chip--on { border-color: var(--gold); color: var(--gold-2); }

.chip--bad { border-color: var(--danger); color: var(--danger); }

img.art { display: block; object-fit: cover; border-radius: var(--radius, 10px); border: 1px solid var(--line, #3a3028); background: #14110f; }

/* Looks prontos da criação de personagem */
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.look { display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; background: var(--surface, #1d1812); border: 2px solid transparent; border-radius: 12px; color: inherit; font: inherit; cursor: pointer; }
.look.is-on { border-color: var(--accent, #d9a441); }
.look .art { border-radius: 8px; object-fit: cover; }
.look__text { display: flex; flex-direction: column; gap: 2px; }

/* Logo da tela inicial */
.home__logo { width: min(64vw, 280px); margin: 0 auto 8px; }
.home__logo img { width: 100%; height: auto; display: block; }
.home__brand h1.sr-only::after { display: none; }
.home__logo img { mix-blend-mode: screen; }

.mini-art { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; margin-right: 8px; flex: none; }
.skill--locked .mini-art { filter: grayscale(1) brightness(.6); }

/* Conversa já lida: tom apagado + marca de visto (nunca só a cor). */
.btn--seen { opacity: .72; filter: saturate(.55); }
.btn--seen .seen-mark { color: var(--ok, #7fb069); font-weight: 700; }

/* Comparação de equipamentos (popup de drop): verde melhor, vermelho pior, sempre com seta e número. */
.cmp { display: grid; gap: 6px; margin: 8px 0 12px; }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 6px; align-items: center; }
.cmp__item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: .85rem; }
.cmp__row > span:nth-child(n+2) { text-align: center; }
.cmp__delta { font-weight: 700; }
.cmp__delta--up { color: #7fd17f; }
.cmp__delta--down { color: #ff8a80; }
.cmp__same { opacity: .6; }

/* Subabas (Diário): uma seção por vez, rolagem horizontal se faltar espaço. */
.subtabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { flex: none; min-height: var(--tap); padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.subtab--on { border-color: var(--gold); color: var(--gold-2); background: rgba(208, 169, 79, 0.14); }
.subtab__count { background: var(--gold); color: #1a1408; border-radius: 999px; font-size: .75rem; min-width: 20px; padding: 0 6px; text-align: center; }
.quest--failed { opacity: .85; }

/* Boneco de equipamentos e grade da mochila. */
.doll { display: flex; justify-content: center; }
.doll__figure { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 3.3; margin-bottom: 14px; }
.doll__shape { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(208, 169, 79, 0.08); stroke: rgba(208, 169, 79, 0.35); stroke-width: .8; }
.tile { position: relative; width: 56px; height: 56px; min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; font: inherit; }
.tile--slot { position: absolute; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(20, 16, 10, .75); border-style: dashed; }
.tile--filled { border-style: solid; border-color: var(--gold); }
.tile--sel { box-shadow: 0 0 0 2px var(--gold-2); }
.tile .item-icon { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.tile__glyph { font-weight: 700; color: var(--gold); }
.tile__empty { font-size: .62rem; opacity: .6; text-align: center; line-height: 1.1; padding: 2px; }
.tile__cap { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: .62rem; white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; color: var(--text); text-shadow: 0 1px 2px #000; pointer-events: none; }
.tile__qty { position: absolute; right: 2px; bottom: 2px; font-size: .7rem; font-weight: 700; background: rgba(0, 0, 0, .7); border-radius: 6px; padding: 0 4px; }
.tile__cmp { position: absolute; left: 2px; top: 2px; font-size: .7rem; font-weight: 800; background: rgba(0, 0, 0, .75); border-radius: 6px; padding: 0 4px; line-height: 1.3; }
.tile__cmp--up { color: #7fd17f; }
.tile__cmp--down { color: #ff8a80; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; justify-items: center; }
.detail--hint { text-align: center; }
.doll__bg { position: absolute; inset: 0; display: block; }

/* Lista de lugares: emblema, texto e contagem de ações. */
.poi-card { display: flex; align-items: center; gap: 12px; text-align: left; }
.poi-card__emblem { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--gold-2); border: 1px solid var(--gold); background: rgba(208, 169, 79, .12); }
.poi-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.poi-card__count { flex: none; min-width: 26px; text-align: center; border-radius: 999px; background: var(--gold); color: #1a1408; font-weight: 700; font-size: .8rem; padding: 2px 8px; }

/* ===== Visual mais limpo: tudo menor e discreto ===== */
.card--slim { padding: 8px 10px; }
.hero-head { display: flex; gap: 12px; align-items: center; padding: 8px 10px; }
.hero-head__pic { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); }
.hero-head__pic .portrait, .hero-head__pic .portrait__img, .hero-head__pic svg { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: top center; display: block; border: 0; border-radius: 0; }
.hero-head__info { min-width: 0; }
.hero-head__info h2 { font-size: 1.1rem; margin: 0; }
.meter { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; font-size: .75rem; }
.meter__k { color: var(--muted, #a89a7a); }
.meter__v { font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.bar--thin { height: 5px; }
.attrs--compact { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.attrs--compact .attr { padding: 2px; text-align: center; }
.attrs--compact .attr__v { font-size: 1rem; }
.attrs--compact .attr__k { font-size: .65rem; opacity: .75; }
.attrs--compact .attr__plus { min-height: 26px; padding: 0 8px; }
.skill--row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: .85rem; }
.skill__name { flex: 1; min-width: 0; }
.mini-art--sm { width: 24px; height: 24px; margin: 0; border-radius: 6px; }
.skill--row .cicon { border-radius: 9px; }
.tag--quiet { font-size: .68rem; opacity: .85; background: transparent; border: 0; padding: 0; }
.kv--tiny { font-size: .78rem; display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.rep-list { display: grid; gap: 0; }
.card--slim .card__title { font-size: .72rem; letter-spacing: .06em; opacity: .75; margin-bottom: 2px; }
.fold { border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.fold > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-size: .8rem; color: var(--muted, #a89a7a); list-style: none; }
.fold > summary::before { content: '▸'; margin-right: 6px; transition: transform .15s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold__body { padding: 0 0 8px; }

.poi-list { display: flex; flex-wrap: wrap; gap: 6px; }
.poi-row { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.poi-row__count { font-size: .7rem; color: var(--gold); opacity: .9; }
.more-row { background: none; border: 0; color: var(--muted, #a89a7a); font: inherit; font-size: .8rem; padding: 8px 4px; text-align: left; cursor: pointer; min-height: 36px; }
.chips--mini { gap: 4px; align-items: center; }
.chip--mini, .chip--btn.chip--mini { min-height: 26px; padding: 0 8px; font-size: .7rem; font-weight: 500; box-shadow: none; }

/* Alvo de toque de 44px com aparência de pílula pequena */
.hit { min-height: 30px; min-width: 30px; background: none; border: 0; box-shadow: none; padding: 0 1px; display: inline-flex; align-items: center; justify-content: center; font: inherit; color: var(--text); cursor: pointer; }
.hit .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: .72rem; line-height: 1.4; }
.hit--on .pill { border-color: var(--gold); color: var(--gold-2); }
.pill__n { color: var(--gold); font-size: .65rem; }
.poi-list, .chips--mini { gap: 0 2px; }
.attrs--compact .attr__plus { min-height: 30px; padding: 0; }
.attrs--compact .attr__plus .pill { padding: 0 9px; font-size: .9rem; }
/* Filtros da mochila: uma linha só, rolável, bem discretos */
.chips--mini { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips--mini::-webkit-scrollbar { display: none; }
.chips--mini .hit { flex: none; min-height: 26px; min-width: 0; }
.chips--mini .hit .pill { font-size: .62rem; padding: 1px 7px; opacity: .9; }
.chips--mini .small { font-size: .62rem; flex: none; }

/* ===== Efeitos visuais discretos ===== */
@keyframes fx-shake { 0%,100% { transform: none; filter: none; } 20% { transform: translateX(-5px); filter: brightness(1.8) saturate(1.4); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); filter: brightness(1.3); } 80% { transform: translateX(2px); } }
@keyframes fx-lunge { 0% { transform: scale(1); } 35% { transform: scale(1.06); filter: brightness(1.4) contrast(1.1); } 100% { transform: scale(1); } }
@keyframes fx-hurt { 0% { box-shadow: inset 0 0 0 0 rgba(220, 60, 40, 0); } 25% { box-shadow: inset 0 0 28px 6px rgba(220, 60, 40, .55); } 100% { box-shadow: inset 0 0 0 0 rgba(220, 60, 40, 0); } }
@keyframes fx-heal { 0% { box-shadow: inset 0 0 0 0 rgba(90, 200, 120, 0); } 30% { box-shadow: inset 0 0 28px 6px rgba(90, 200, 120, .5); } 100% { box-shadow: inset 0 0 0 0 rgba(90, 200, 120, 0); } }
@keyframes pin-pulse { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 2px rgba(224, 186, 98, .55); } 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 14px rgba(224, 186, 98, 0); } }
@keyframes gold-glint { 0%, 70% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes soft-glow { 0%, 100% { box-shadow: 0 0 6px rgba(224, 186, 98, .25); } 50% { box-shadow: 0 0 14px rgba(224, 186, 98, .6); } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes warn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 120, 60, 0); } 50% { box-shadow: 0 0 14px 2px rgba(224, 120, 60, .5); } }
@keyframes bar-fill { from { transform: scaleX(.4); } to { transform: scaleX(1); } }
.fx-hit { animation: fx-shake .38s ease-out; }
.fx-lunge { animation: fx-lunge .45s ease-out; }
.fx-hurt { animation: fx-hurt .55s ease-out; }
.fx-heal { animation: fx-heal .7s ease-out; }
.pin__dot { animation: pin-pulse 2.2s ease-out infinite; }
.gold, .hero-head .muted strong { color: var(--gold-2, #e6c47e); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.header-avatar { animation: soft-glow 3.6s ease-in-out infinite; }
.home__emblem { animation: float-y 4.5s ease-in-out infinite; }
.chip--on, .hit--on .pill { animation: soft-glow 3s ease-in-out infinite; }
.notice--warn { animation: warn-pulse 1.8s ease-in-out infinite; }
.bar > span { transform-origin: left center; animation: bar-fill .6s ease-out; }
.btn:active, .hit:active .pill, .tile:not(.tile--slot):active { transform: scale(.96); }
.btn--primary { background-image: linear-gradient(100deg, transparent 40%, rgba(255, 246, 207, .22) 50%, transparent 60%); background-size: 250% 100%; background-position: 150% 0; animation: gold-glint 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fx-hit, .fx-lunge, .fx-hurt, .fx-heal, .pin__dot, .gold, .header-avatar, .home__emblem, .chip--on, .notice--warn, .bar > span, .btn--primary { animation: none !important; } }
.chip--now { background: var(--gold); border-color: var(--gold-2); color: #1a120a; font-weight: 700; }
[data-test=dungeon-room] { white-space: nowrap; }
.setcard { border: 1px solid var(--line, #5a4630); border-radius: 10px; padding: 10px; display: grid; gap: 6px; background: rgba(0,0,0,.18); }

/* ---------- Criação: página única ---------- */
.namerow { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.namerow .field--name { flex: 1 1 180px; min-width: 0; }
.namerow .field--gender { flex: 0 0 auto; }
.pick-info { margin-top: 2px; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(207, 169, 90, 0.08); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; display: flex; flex-direction: column; gap: 6px; }
.pick-info__text { margin: 0; }
.pick-info__adv { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pick-info__k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pick-info .badges { margin-top: 0; }
.story { display: flex; flex-direction: column; gap: 14px; }
.story__title { margin: 0; font-size: 1.25rem; }
.qblock { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: rgba(0, 0, 0, 0.18); }
.qblock__q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, rgba(207, 169, 90, 0.28), rgba(207, 169, 90, 0.12)); border-bottom: 2px solid var(--gold); }
.qblock__n { flex: none; font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #1a130a; }
.qblock__title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--gold-2); }
.qblock__a { padding: 12px 12px 12px 18px; border-left: 4px solid rgba(207, 169, 90, 0.35); margin: 10px 0 10px 10px; }
.qblock__a .choice__item { font-weight: 400; }
.namerow { flex-wrap: nowrap; }
.namerow .field--name { flex: 1 1 0; }
.namerow .field--gender .choice--chips { flex-wrap: nowrap; gap: 6px; }
.namerow .field--gender .choice__item { padding: 6px 12px; min-height: var(--tap); }
.pick-info__gift { margin: 0; font-size: 0.9rem; color: var(--muted); }
.pick-info__gift strong { color: var(--gold-2); }

/* ---------- Ações de um local: grupos e ícones de imagem ---------- */
.actgroup__title { margin: 6px 2px 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-2); display: flex; align-items: center; gap: 10px; }
.actgroup__title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(207, 169, 90, 0.45), transparent); }
.btn__ic--img { width: 46px; height: 46px; padding: 0; overflow: hidden; background: #0c0a06; }
.btn__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btn__img--face { object-position: 50% 20%; }
.btn--ic.btn--tall:has(.btn__ic--img) { min-height: 64px; }
.btn--ic:disabled .btn__img { filter: grayscale(0.8) brightness(0.7); }


/* Tema: couro, pedra e ouro velho. Tudo procedural (SVG embutido), sem arquivos extras e sem depender de rede.
   Vem por último: só refina o que base.css e components.css definem. */

:root {
  --edge: #5b4a2c;          /* moldura de metal envelhecido */
  --edge-dark: #120e0a;
  --panel-a: #2d261c;
  --panel-b: #1c1711;

  /* grão fino (poeira clara) e mancha larga (couro/pedra) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .75 -.12'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23m)'/%3E%3C/svg%3E");

  /* losango dourado e cantoneiras */
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 .5 10.5 5.5 5.5 10.5 .5 5.5Z' fill='%23cfa95a' stroke='%23241a08' stroke-width='.8'/%3E%3C/svg%3E");
  --c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23cfa95a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1.5 15V4.5Q1.5 1.5 4.5 1.5H15'/%3E%3Cpath d='M5 5l3 0M5 5l0 3' opacity='.7'/%3E%3C/svg%3E");
  --c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23cfa95a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 1.5H15.5Q18.5 1.5 18.5 4.5V15'/%3E%3Cpath d='M15 5l-3 0M15 5l0 3' opacity='.7'/%3E%3C/svg%3E");
  --c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23cfa95a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1.5 5V15.5Q1.5 18.5 4.5 18.5H15'/%3E%3Cpath d='M5 15l3 0M5 15l0 -3' opacity='.7'/%3E%3C/svg%3E");
  --c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23cfa95a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 18.5H15.5Q18.5 18.5 18.5 15.5V5'/%3E%3Cpath d='M15 15l-3 0M15 15l0 -3' opacity='.7'/%3E%3C/svg%3E");
}

/* ---------- Fundo ---------- */
body {
  background:
    radial-gradient(130% 70% at 50% -12%, rgba(150, 100, 40, 0.3), rgba(150, 100, 40, 0) 62%),
    radial-gradient(125% 95% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%),
    url(art-ui.bg.webp) center top / cover no-repeat,
    linear-gradient(180deg, #1c1610 0%, #120e0a 100%);
  background-size: auto, auto, cover, auto;
}
#app { box-shadow: 0 0 0 1px rgba(207, 169, 90, 0.1), 0 0 70px rgba(0, 0, 0, 0.65); }

/* ---------- Títulos e filetes ornamentais ---------- */
h1, h2, h3, .screen__title { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }

.screen__header { position: relative; background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0)); }
.screen__header::after,
.home__brand h1::after {
  content: "";
  display: block;
  height: 11px;
  background:
    var(--diamond) center / 11px 11px no-repeat,
    linear-gradient(90deg, rgba(207, 169, 90, 0), rgba(207, 169, 90, 0.7) 50%, rgba(207, 169, 90, 0)) center / 100% 1px no-repeat;
}
.screen__header::after { position: absolute; left: 14px; right: 14px; bottom: -3px; pointer-events: none; }
.home__brand h1::after { margin: 10px auto 0; width: min(260px, 70%); }

.home__brand h1 {
  background: linear-gradient(180deg, #f6e2ad 0%, #d9b565 50%, #a07d36 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(207, 169, 90, 0.25));
}
.home__emblem { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(207, 169, 90, 0.2)); }

/* ---------- Painéis (cartões, balões, locais) ---------- */
.card,
.bubble,
.poi-card,
.campaign,
.clue {
  background:
    var(--grain),
    linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 170, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.38);
}
/* cantoneiras só nos painéis grandes */
.card,
.bubble,
.sheet {
  position: relative;
  background:
    var(--c-tl) top 5px left 5px / 16px 16px no-repeat,
    var(--c-tr) top 5px right 5px / 16px 16px no-repeat,
    var(--c-bl) bottom 5px left 5px / 16px 16px no-repeat,
    var(--c-br) bottom 5px right 5px / 16px 16px no-repeat,
    linear-gradient(180deg, rgba(40, 31, 21, 0.78), rgba(22, 17, 11, 0.9)),
    url(art-ui.bg.webp) center / 360px auto;
  background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, auto, 360px auto;
}
.card { padding: 16px; }
.card__title { display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 0 #000; }
.card__title::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 6px rgba(207, 169, 90, 0.6); }

.campaign:active, .poi-card:active { filter: brightness(1.12); }
.empty { background: rgba(0, 0, 0, 0.22); border: 1px dashed var(--edge); }
.attr { background: linear-gradient(180deg, #14100c, #1b1611); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); border-color: #3f3322; }
.attr__v { text-shadow: 0 1px 0 #000; }
.clue { border-radius: var(--radius-sm); }

/* ---------- Botões ---------- */
.btn {
  background: linear-gradient(180deg, #44382a 0%, #2a2218 100%);
  border: 1px solid #6a5632;
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 170, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 2px 5px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.btn:active { transform: translateY(1px); filter: brightness(1.12); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); }
.btn--primary {
  background: linear-gradient(180deg, #f0d189 0%, #cfa95a 52%, #a98030 100%);
  border-color: #6f5420;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 225, 0.7),
    inset 0 -2px 0 rgba(90, 60, 10, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(207, 169, 90, 0.22);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
}
.btn--danger { background: linear-gradient(180deg, rgba(90, 30, 22, 0.45), rgba(50, 16, 12, 0.55)); border-color: rgba(208, 98, 76, 0.6); }
.btn--ghost { background: rgba(0, 0, 0, 0.18); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.icon-btn:active { background: rgba(207, 169, 90, 0.16); }

/* ---------- Seleções ---------- */
.choice__item, .chip--btn {
  background: linear-gradient(180deg, #2a231a, #1e1913);
  border-color: #4d3f28;
  box-shadow: inset 0 1px 0 rgba(255, 228, 170, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.choice__item[aria-checked="true"] {
  border-color: var(--gold-2);
  background: linear-gradient(180deg, rgba(207, 169, 90, 0.26), rgba(207, 169, 90, 0.08)), #1f1a13;
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px rgba(207, 169, 90, 0.28);
}
.seg { background: #0f0c09; border-color: #4d3f28; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65); }
.seg button[aria-checked="true"] { background: linear-gradient(180deg, #f0d189, #b98f3f); box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.6); }
.input { background: #0f0c09; border-color: #4d3f28; box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.7); }
.badge, .chip { box-shadow: inset 0 0 0 1px rgba(207, 169, 90, 0.25); }

/* Visuais da criação de personagem */
.look {
  background: linear-gradient(180deg, #2d261c, #1c1711);
  border: 2px solid #4d3f28;
  box-shadow: inset 0 1px 0 rgba(255, 228, 170, 0.1), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.look.is-on { border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(207, 169, 90, 0.4), inset 0 0 22px rgba(207, 169, 90, 0.12); }

/* ---------- Molduras de imagem e retrato ---------- */
img.art, .art-placeholder {
  border: 1px solid #7a6238;
  box-shadow: 0 0 0 3px #17110b, 0 0 0 4px rgba(207, 169, 90, 0.4), 0 8px 18px rgba(0, 0, 0, 0.55);
}
.look img.art { box-shadow: 0 0 0 2px #17110b, 0 0 0 3px rgba(207, 169, 90, 0.3); }
.portrait { border-radius: 12px; box-shadow: 0 0 0 2px #7a6238, 0 0 0 3px #17110b, 0 5px 12px rgba(0, 0, 0, 0.55); }
.portrait--hero { box-shadow: 0 0 0 3px #7a6238, 0 0 0 4px #17110b, 0 0 22px rgba(207, 169, 90, 0.25), 0 8px 18px rgba(0, 0, 0, 0.6); }
.map { box-shadow: 0 0 0 2px #7a6238, 0 0 0 3px #17110b, 0 8px 18px rgba(0, 0, 0, 0.55); }
.pin__dot { background: radial-gradient(circle at 35% 30%, #f6e2ad, #c0922f); }
.pin__label { background: rgba(18, 14, 10, 0.9); border: 1px solid #5b4a2c; }

/* ---------- Barras ---------- */
.progress { height: 6px; background: #0f0c09; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #3f3322; }
.progress > span { background: linear-gradient(90deg, #a98030, #f0d189); box-shadow: 0 0 8px rgba(207, 169, 90, 0.6); }
.bar { height: 10px; background: #0f0c09; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #3f3322; }
.bar > span { background: linear-gradient(180deg, #e2bd6a, #a98030); }
.bar--hp > span { background: linear-gradient(180deg, #e0715f, #9c3d30); }
.bar--mp > span { background: linear-gradient(180deg, #6f9be0, #3a5f9e); }
.bar--enemy > span { background: linear-gradient(180deg, #b4b4b4, #707070); }

/* ---------- Rodapé, abas e folhas ---------- */
.screen__footer,
.wizard__preview {
  background: var(--grain), linear-gradient(180deg, #231c14, #17120d);
  background-size: 180px 180px, auto;
  border-top: 1px solid #6a5632;
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 228, 170, 0.12);
}
.wizard__preview { border-top: 0; border-bottom: 1px solid #6a5632; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }

.tabbar {
  background: var(--grain), linear-gradient(180deg, #2a2218, #15110c);
  background-size: 180px 180px, auto;
  border-top: 1px solid #7a6238;
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 228, 170, 0.16);
}
.tab { position: relative; }
.tab + .tab::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, rgba(207, 169, 90, 0.28), transparent); }
.tab[aria-selected="true"] {
  background: radial-gradient(75% 90% at 50% 0%, rgba(207, 169, 90, 0.26), rgba(207, 169, 90, 0) 75%);
  box-shadow: inset 0 2px 0 var(--gold-2);
  text-shadow: 0 0 10px rgba(230, 196, 126, 0.5);
}
@media (orientation: landscape) and (max-height: 540px) {
  .tabbar { border-right: 1px solid #7a6238; }
  .tab + .tab::before { left: 18%; right: 18%; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(207, 169, 90, 0.28), transparent); }
  .tab[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--gold-2); background: radial-gradient(90% 75% at 0% 50%, rgba(207, 169, 90, 0.26), rgba(207, 169, 90, 0) 75%); }
}

.sheet-backdrop { background: rgba(6, 4, 2, 0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet { border: 1px solid #7a6238; border-bottom: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 228, 170, 0.18); }
.sheet__title { text-shadow: 0 1px 0 #000; }

.toast {
  background: linear-gradient(rgba(255, 244, 214, 0.35), rgba(255, 244, 214, 0.35)), url(art-ui.parchment.webp) center / cover;
  border: 1px solid #a98639;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.toast--error { background: linear-gradient(rgba(214, 96, 70, 0.4), rgba(214, 96, 70, 0.4)), url(art-ui.parchment.webp) center / cover; border-color: #b3533f; }

/* ---------- Moldura de ferro e ouro (arte do Canva) ---------- */
.portrait--hero,
.map {
  box-sizing: border-box;
  border: 26px solid transparent;
  border-image: url(art-ui.frame.webp) 125 / 26px stretch;
  border-radius: 0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- Ícones de itens ---------- */
.item-icon { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px #7a6238, 0 0 0 2px #17110b, 0 3px 6px rgba(0, 0, 0, 0.5); }

/* ---------- Hora do dia: tinge cenas e mapas (sem imagens extras) ---------- */
.art { transition: filter 0.6s ease; }
[data-period="dawn"] img.art { filter: sepia(0.18) saturate(1.05) brightness(0.96) hue-rotate(-6deg); }
[data-period="dusk"] img.art { filter: sepia(0.38) saturate(1.3) brightness(0.86) hue-rotate(-12deg); }
[data-period="night"] img.art { filter: brightness(0.55) saturate(0.7) contrast(1.08) sepia(0.15) hue-rotate(185deg); }

/* ---------- Raridade (cor da borda do ícone e etiqueta) ---------- */
.item-icon--uncommon { box-shadow: 0 0 0 1px #6f9f5c, 0 0 0 2px #17110b, 0 0 10px rgba(134, 181, 115, 0.35); }
.item-icon--rare { box-shadow: 0 0 0 1px #5f8fd6, 0 0 0 2px #17110b, 0 0 12px rgba(95, 143, 214, 0.45); }
.item-icon--legendary { box-shadow: 0 0 0 1px #e6a43a, 0 0 0 2px #17110b, 0 0 14px rgba(230, 164, 58, 0.6); }
.rarity { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; }
.rarity--uncommon { color: #8fc47b; }
.rarity--rare { color: #7fa9ec; }
.rarity--legendary { color: #f0b650; }

/* Qualidade de fabricação: selo e brilho (Normal não tem enfeite) */
.item-icon-wrap { position: relative; flex: none; display: inline-block; width: 48px; height: 48px; border-radius: 8px; overflow: visible; }
.item-icon-wrap::after { content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; }
.item-icon-wrap--q1 .item-icon { box-shadow: 0 0 0 1px #8fd3e6, 0 0 0 2px #17110b, 0 0 12px rgba(143, 211, 230, 0.55); }
.item-icon-wrap--q2 .item-icon { box-shadow: 0 0 0 2px #f0b650, 0 0 0 3px #17110b, 0 0 16px rgba(240, 182, 80, 0.8); }
.item-icon-wrap--q2::after { animation: item-shine 3.2s ease-in-out infinite; }
.item-icon-seal { position: absolute; right: -5px; top: -6px; z-index: 1; min-width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 0.8rem; border-radius: 50%; background: #17110b; border: 1px solid currentColor; }
.item-icon-wrap--q1 .item-icon-seal { color: #8fd3e6; }
.item-icon-wrap--q2 .item-icon-seal { color: #f0b650; }
@keyframes item-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .item-icon-wrap--q2::after { animation: none; } }

/* Selo "?" de peça não identificada */
.item-icon-ident { position: absolute; left: -5px; top: -6px; z-index: 2; width: 18px; height: 18px; line-height: 16px; text-align: center; font-size: 0.82rem; font-weight: 800; border-radius: 50%; background: #2a1840; color: #e6c8ff; border: 1.5px solid #b98cff; box-shadow: 0 0 8px rgba(185, 140, 255, 0.6); }
.item-icon-wrap[data-unknown] .item-icon { outline: 1px dashed rgba(185, 140, 255, 0.7); outline-offset: 1px; }

/* Janela de recompensas */
.reward { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; max-height: 52vh; overflow-y: auto; }
.reward__row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #4d3f28; border-radius: 10px; background: linear-gradient(180deg, #241d13, #17120c); }
.reward__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reward__pic { flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #0c0a06; border: 1px solid #6b552f; }
.reward__pic img { width: 100%; height: 100%; object-fit: cover; }
.reward__pic--icon img { object-fit: contain; padding: 4px; }
.reward__pic--face { border-radius: 50%; border-color: #a98030; }
.reward__pic--face img { object-position: 50% 20%; }
.reward__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.reward__ident { font-size: 0.74rem; font-weight: 700; color: #e6c8ff; background: #2a1840; border: 1px solid #b98cff; border-radius: 999px; padding: 1px 8px; }
.reward__cmp { font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px solid currentColor; }
.reward__cmp--up, .reward__rep--up { color: #7fd17f; }
.reward__cmp--down, .reward__rep--down { color: #ff8a80; }
.reward__cmp--same { color: var(--muted); }
.reward__rep { flex: none; font-weight: 800; }

/* Vários inimigos na mesma luta (até 4): toque num deles para mudar o alvo. */
.foes { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
.foe { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 4px 6px; border-radius: 10px; border: 1px solid var(--line, #4a3b25); background: rgba(20, 15, 9, 0.75); color: var(--text); font: inherit; position: relative; cursor: pointer; }
.foe__pic { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.foe__name { font-size: .68rem; line-height: 1.1; text-align: center; }
.foe__hp { font-size: .62rem; opacity: .8; }
.foe .bar { width: 100%; }
.foe--target { border-color: var(--gold, #d9a441); box-shadow: 0 0 0 1px var(--gold, #d9a441) inset, 0 0 10px rgba(217, 164, 65, .35); }
.foe__tag { position: absolute; top: -7px; right: 4px; font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 6px; background: var(--gold, #d9a441); color: #1a1208; }
.foe--down { opacity: .4; filter: grayscale(1); }
.foe:disabled { cursor: default; }

/* Elite (dourado) e chefe (carmim): leitura imediata de quem é quem. */
.tag--elite { background: linear-gradient(180deg, #e8c15a, #b8862a); color: #1a1208; border-color: #f0d27a; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-left: 6px; }
.tag--boss { background: linear-gradient(180deg, #a8322e, #6a1814); color: #ffe8d8; border-color: #d0584e; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.art--elite { box-shadow: 0 0 0 2px #d9a441, 0 0 18px rgba(217, 164, 65, .45); border-radius: 10px; }
.art--boss { box-shadow: 0 0 0 2px #a8322e, 0 0 22px rgba(168, 50, 46, .55); border-radius: 10px; }
.foe--elite { border-color: #d9a441; box-shadow: 0 0 0 1px #d9a441 inset; }
.foe__elite { position: absolute; top: -7px; left: 4px; font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 6px; background: linear-gradient(180deg, #e8c15a, #b8862a); color: #1a1208; font-weight: 700; }


/* Visual "Crônica": pergaminho nas telas de leitura, escuro na navegação, ícones em traço dourado.
   Vem depois de theme.css: só refina. Tudo local, sem rede. */

:root {
  --ink: #3a2916;
  --ink-2: #6b5233;
  --ink-title: #fff0c4;
  --ink-line: rgba(110, 76, 32, 0.4);
  --leaf: #5f7a4a;
  --font-title: "Cinzel", "Trajan Pro", "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  --font-read: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
}

/* ---------- Tipografia ---------- */
h1, h2, .screen__title, .card__title, .sheet__title { font-family: var(--font-title); letter-spacing: 0.04em; }
.screen__title { font-size: 1.05rem; text-transform: none; }
h2 { font-size: 1.15rem; }
.card__title { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--gold-2); }
.bubble p, .poi-desc, .quest p { font-family: var(--font-read); line-height: 1.55; }

/* ---------- Pergaminho ---------- */
.card.parchment,
.card.quest,
.card[data-mystery],
.card[data-collection],
.card[data-test="achievements"],
.bubble,
.campaign {
  --text: var(--ink);
  --muted: var(--ink-2);
  --line: var(--ink-line);
  --gold: #8a5a1c;
  --gold-2: #7b3a12;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(232, 200, 140, 0.42), rgba(190, 140, 70, 0.5)),
    url(art-ui.parchment.webp) center / cover no-repeat;
  border: 1px solid #5b3d17;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 4px rgba(60, 38, 12, 0.18),
    inset 0 0 36px rgba(90, 55, 15, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.5);
  text-shadow: none;
}
.card.parchment::before,
.card.quest::before,
.card[data-mystery]::before,
.card[data-collection]::before,
.card[data-test="achievements"]::before,
.bubble::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(110, 76, 32, 0.55);
  border-radius: 3px;
  pointer-events: none;
}
.card.parchment h2, .card.parchment h3, .card.quest strong, .card[data-mystery] > .row strong, .card[data-collection] > .row strong,
.card.parchment .card__title, .card.quest .card__title { color: var(--ink-title); text-shadow: none; }
.card.parchment .card__title::before { background: var(--ink-title); box-shadow: none; }
.card.parchment .muted, .card.quest .muted, .bubble .muted, .campaign .muted { color: var(--ink-2); }
.bubble__react { color: var(--ink-2); }
.card.parchment .tag, .card.quest .tag, .card[data-collection] .tag, .card[data-mystery] .tag {
  color: var(--ink-title); background: rgba(255, 244, 214, 0.45); border-color: rgba(110, 76, 32, 0.5);
}
.card.parchment .tag--ok, .card.quest .tag--ok { color: #3f6b2b; }
.card.parchment .tag--bad, .card.quest .tag--bad { color: #9b2f1d; }
.card.parchment .chip, .card[data-collection] .chip, .card[data-test="achievements"] .chip {
  color: var(--ink-title); background: rgba(255, 244, 214, 0.4); border-color: rgba(110, 76, 32, 0.45);
}
.card .chip--off { opacity: 0.55; }
.card.parchment .kv, .card.quest .kv, .card[data-test="achievements"] .kv { border-bottom-color: var(--ink-line); }
.card.parchment .btn:not(.btn--primary), .card[data-mystery] .btn:not(.btn--primary) {
  color: #f1dfb8; background: linear-gradient(180deg, #4a3a28, #2c2217); border-color: #6a5632;
}
.card[data-mystery] .clue { background: rgba(255, 244, 214, 0.4); border-color: var(--ink-line); }
.card[data-mystery] .chip--btn { color: var(--ink); background: rgba(255, 244, 214, 0.5); }
.card[data-mystery] .chip--on { border-color: var(--ink-title); color: var(--ink-title); }
.card.quest .bar, .card.parchment .bar { background: rgba(60, 38, 12, 0.35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(90, 60, 25, 0.5); }
.card.quest .bar > span { background: linear-gradient(180deg, #8fb06a, #55743b); }
.card.quest--done, .card.is-done { filter: saturate(0.7) brightness(0.95); }
.card.quest { border-left: 4px solid #8a5a1c; }
.card.quest--done { border-left-color: #55743b; }
.card.quest--failed { border-left-color: #9b2f1d; }

/* Campanhas na tela inicial */
.campaign__main:active { background: rgba(60, 38, 12, 0.12); }
.campaign__name { color: var(--ink-title); font-family: var(--font-title); text-shadow: none; }
.campaign .icon-btn { color: var(--ink-2); }

/* ---------- Ficha do herói ---------- */
.sheet-hero { padding: 16px 14px 14px; }
.hero-head { padding: 0; gap: 14px; }
.hero-head__pic {
  width: 92px; height: 112px; border-radius: 46px 46px 10px 10px; border: 3px solid #7a5222;
  box-shadow: 0 0 0 2px #2a1b0a, inset 0 0 0 2px rgba(255, 230, 170, 0.35), 0 5px 10px rgba(0, 0, 0, 0.5);
  background: #1c1510;
}
.hero-head__info h2 { font-size: 1.45rem; line-height: 1.1; margin-bottom: 2px; color: var(--ink-title); }
.sheet-hero .gold, .sheet-hero .hero-head .muted strong {
  background: none; animation: none; -webkit-text-fill-color: currentColor; color: #7b3a12; font-weight: 800;
}
.sheet-hero .meter { grid-template-columns: 74px 1fr auto; gap: 8px; font-size: 0.8rem; }
.sheet-hero .meter__k { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-title); font-weight: 700; }
.meter__ic {
  width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a4528, #1f160b); color: #f0d189; border: 1px solid #c9a35a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.meter__ic .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.sheet-hero .bar { height: 11px; background: rgba(35, 22, 8, 0.7); box-shadow: inset 0 1px 3px #000, 0 0 0 1px #7a5222; }
.bar--xp > span { background: linear-gradient(180deg, #e2c46a, #a98030); }
.sheet-hero .meter__v { color: var(--ink); font-weight: 700; }
.attrs--icons { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.attrs--icons .attr {
  position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px;
  text-align: left; padding: 6px 8px 6px 6px; border-radius: 8px;
  background: rgba(255, 244, 214, 0.38); border: 1px solid rgba(110, 76, 32, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.attrs--icons .attr__ic {
  grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a4528, #1f160b); color: #f0d189; border: 1px solid #c9a35a;
}
.attrs--icons .attr__k { font-size: 0.66rem; letter-spacing: 0.08em; opacity: 1; color: var(--ink-2); font-weight: 700; text-transform: uppercase; }
.attrs--icons .attr__v { font-size: 1.25rem; font-family: var(--font-title); color: var(--ink-title); text-shadow: none; line-height: 1; }
.attrs--icons .attr__plus { position: absolute; right: 2px; top: 2px; min-height: 26px; min-width: 26px; }
.attrs--icons .attr__plus .pill { background: #7b3a12; color: #fff3d0; border-color: #3a1a06; padding: 0 7px; }
[data-test="points"] { color: var(--ink-title); font-weight: 700; }

/* ---------- Abas ---------- */
.tab { gap: 3px; font-family: var(--font-title); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tab .icon { width: 25px; height: 25px; stroke-width: 1.7; }
.tab[aria-selected="true"] .icon { stroke: var(--gold-2); }

/* ---------- Botões com ícone ---------- */
.btn--ic { flex-direction: row; align-items: center; gap: 12px; padding-left: 10px; padding-right: 10px; }
.btn--ic.btn--tall { min-height: 58px; }
.btn__ic {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a4528, #1f160b); color: #f0d189; border: 1px solid #a98030;
  box-shadow: inset 0 1px 0 rgba(255, 228, 170, 0.25), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.btn__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.btn__go { flex: none; color: var(--gold); opacity: 0.8; display: grid; }
.btn--ic:disabled .btn__ic { filter: grayscale(0.8) brightness(0.7); }
.btn--fight .btn__ic { background: radial-gradient(circle at 35% 30%, #7a2c20, #2a0d08); color: #ffd6c9; border-color: #b3533f; }
.btn--fight { border-color: #7a3a2c; }
.btn--ghost .btn__ic { background: transparent; border-color: rgba(207, 169, 90, 0.4); }

/* ---------- Mochila ---------- */
.pack {
  padding: 12px; border-radius: 14px; gap: 8px; justify-items: stretch;
  grid-template-columns: repeat(5, 1fr);
  background:
    var(--grain),
    radial-gradient(120% 90% at 50% 0%, #2f3a24, #1b2314 70%);
  border: 3px solid #5a3b1c;
  box-shadow: inset 0 0 0 2px #2a1b0a, inset 0 6px 18px rgba(0, 0, 0, 0.7), 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px #c9a35a33;
}
.pack .tile { width: 100%; height: auto; aspect-ratio: 1; min-height: 52px; background: rgba(8, 12, 5, 0.55); border: 1px solid rgba(201, 163, 90, 0.35); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }
.pack .tile--sel { border-color: var(--gold-2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--gold-2), 0 0 12px rgba(230, 196, 126, 0.5); }
.doll__figure { background: radial-gradient(60% 55% at 50% 45%, rgba(207, 169, 90, 0.1), transparent 70%); }
.tile--slot { border-style: solid; border-color: rgba(201, 163, 90, 0.4); background: rgba(10, 8, 5, 0.7); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7); }
.tile--filled { border-color: var(--gold-2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 10px rgba(207, 169, 90, 0.3); }
.detail.parchment { margin-top: 4px; }
.detail.parchment strong { font-family: var(--font-title); font-size: 1.05rem; }
.detail.parchment .cmp { color: var(--ink); }
[data-test="gold"] { font-family: var(--font-title); font-size: 1.15rem; letter-spacing: 0.05em; }
[data-test="gold"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #cfa95a 55%, #7a5a1c); box-shadow: 0 0 6px rgba(230, 196, 126, 0.6); }

/* ---------- Diário ---------- */
.subtab { font-family: var(--font-title); font-size: 0.78rem; letter-spacing: 0.05em; background: linear-gradient(180deg, #2d261c, #1c1711); border-color: #4d3f28; }
.subtab--on { background: linear-gradient(180deg, rgba(207, 169, 90, 0.3), rgba(207, 169, 90, 0.1)), #1f1a13; box-shadow: 0 0 12px rgba(207, 169, 90, 0.25); }
.card.quest { padding-left: 16px; }
.card.quest > .row strong { font-family: var(--font-title); font-size: 1rem; letter-spacing: 0.03em; }
.entry { border-left: 2px solid var(--gold); padding-left: 12px; position: relative; }
.entry::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; background: var(--gold-2); transform: rotate(45deg); box-shadow: 0 0 6px rgba(207, 169, 90, 0.6); }

/* ---------- Aventura e diálogo ---------- */
.bubble { padding: 16px 18px; position: relative; }
.bubble p { font-size: 1.02rem; }
.bubble > p:first-child::first-letter { font-family: var(--font-title); font-size: 1.35em; color: var(--ink-title); float: none; line-height: 1; padding: 0; }
.btn--left.btn--ic .small { color: var(--muted); }

/* ---------- Início ---------- */
.home__brand p.muted { font-family: var(--font-read); font-style: italic; letter-spacing: 0.02em; }
.home__list h2 { font-family: var(--font-title); color: var(--gold-2); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.14em; }
.campaign { margin-bottom: 2px; }
.campaign .portrait { border-radius: 8px; }

.tile--void { pointer-events: none; opacity: 0.55; }
[data-test="gold"] { background: none; animation: none; -webkit-text-fill-color: currentColor; color: var(--gold-2); text-shadow: 0 1px 0 #000; }

.tile__empty { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--gold); opacity: 0.75; }
.tile__empty .icon { stroke-width: 1.6; }
.tile__empty span { font-size: 0.58rem; color: var(--muted); }


/* Visual "Ornamentado": painéis quase pretos, filetes e cantoneiras em ouro, botões com brilho dourado.
   Vem por último e substitui o pergaminho das fichas e cartões. Tudo procedural/local, sem rede. */

:root {
  --bg: #0a0908;
  --bg-2: #0e0c0a;
  --text: #efe5cd;
  --muted: #a99d87;
  --line: rgba(207, 169, 90, 0.24);
  --gold: #cfa95a;
  --gold-2: #ecca7f;
  --gold-hi: #fff0c4;
  --edge: #6b552f;
  --panel-a: #15120e;
  --panel-b: #0b0a08;
  --font-title: "Cinzel", "Trajan Pro", "Marcellus", "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  --font-read: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  --plate: linear-gradient(180deg, rgba(23, 19, 14, 0.94), rgba(9, 8, 6, 0.96));
  --frame: 0 0 0 1px #6b552f, inset 0 0 0 1px #050403, inset 0 0 0 3px rgba(207, 169, 90, 0.22), inset 0 1px 0 rgba(255, 232, 180, 0.08);
}

/* ---------- Fundo ---------- */
body {
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(190, 130, 50, 0.20), rgba(190, 130, 50, 0) 60%),
    radial-gradient(130% 100% at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(rgba(6, 5, 4, 0.82), rgba(6, 5, 4, 0.9)),
    url(art-ui.bg.webp) center top / cover no-repeat,
    #0a0908;
}
#app { box-shadow: 0 0 0 1px rgba(207, 169, 90, 0.14), 0 0 80px rgba(0, 0, 0, 0.8); }

/* ---------- Cabeçalho ---------- */
.screen__header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15));
  padding-bottom: 12px;
}
.screen__title { font-family: var(--font-title); color: var(--gold-hi); letter-spacing: 0.06em; font-size: 1.1rem; text-shadow: 0 0 12px rgba(236, 202, 127, 0.25), 0 1px 0 #000; }
.screen__header .small.muted { font-family: var(--font-read); font-size: 0.86rem; letter-spacing: 0.02em; color: var(--muted); }
.header-avatar { border: 2px solid var(--gold); box-shadow: 0 0 0 2px #050403, 0 0 10px rgba(207, 169, 90, 0.3); animation: none; }
.header-gold {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px;
  font-family: var(--font-title); font-size: 0.9rem; font-weight: 700; color: var(--gold-hi); letter-spacing: 0.04em;
  background: linear-gradient(180deg, #1d170f, #0a0806); box-shadow: 0 0 0 1px #6b552f, inset 0 0 0 1px #050403, inset 0 1px 0 rgba(255, 232, 180, 0.12);
}
.header-gold .coin {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6cf, #d9b04e 52%, #7a5a1c);
  box-shadow: 0 0 0 1px #3b2a0b, 0 0 8px rgba(236, 202, 127, 0.5);
}

/* ---------- Painéis ---------- */
.card, .bubble, .sheet, .poi-card, .clue, .campaign {
  --text: #efe5cd; --muted: #a99d87; --line: rgba(207, 169, 90, 0.24); --gold: #cfa95a; --gold-2: #ecca7f;
  color: var(--text);
  border: 0; border-radius: 8px;
  text-shadow: none;
}
.card, .bubble, .sheet {
  background:
    var(--c-tl) top 4px left 4px / 18px 18px no-repeat,
    var(--c-tr) top 4px right 4px / 18px 18px no-repeat,
    var(--c-bl) bottom 4px left 4px / 18px 18px no-repeat,
    var(--c-br) bottom 4px right 4px / 18px 18px no-repeat,
    var(--plate);
  background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, auto;
  box-shadow: var(--frame), 0 8px 18px rgba(0, 0, 0, 0.55);
}
.poi-card, .clue, .campaign {
  background: var(--plate);
  box-shadow: var(--frame), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.sheet { border-radius: 14px 14px 0 0; }
.card.parchment::before, .card.quest::before, .card[data-mystery]::before, .card[data-collection]::before, .card[data-test="achievements"]::before, .bubble::before { display: none; }
.card__title { color: var(--gold-2); font-family: var(--font-title); }
.card__title::before { background: var(--gold-2); box-shadow: 0 0 8px rgba(236, 202, 127, 0.7); }
.card.parchment h2, .card.parchment h3, .card.quest strong, .card[data-mystery] > .row strong, .card[data-collection] > .row strong,
.card.parchment .card__title, .card.quest .card__title { color: var(--gold-hi); text-shadow: none; }
.card.parchment .card__title::before { background: var(--gold-2); box-shadow: 0 0 8px rgba(236, 202, 127, 0.7); }
.card.parchment .muted, .card.quest .muted, .bubble .muted, .campaign .muted { color: var(--muted); }
.bubble__react { color: var(--muted); }
.card.parchment .tag, .card.quest .tag, .card[data-collection] .tag, .card[data-mystery] .tag { color: var(--gold-2); background: rgba(207, 169, 90, 0.08); border-color: rgba(207, 169, 90, 0.4); }
.card.parchment .tag--ok, .card.quest .tag--ok { color: #9ccc86; }
.card.parchment .tag--bad, .card.quest .tag--bad { color: #e48a74; }
.card.parchment .chip, .card[data-collection] .chip, .card[data-test="achievements"] .chip { color: var(--gold-2); background: rgba(207, 169, 90, 0.08); border-color: rgba(207, 169, 90, 0.35); }
.card.parchment .kv, .card.quest .kv, .card[data-test="achievements"] .kv { border-bottom-color: rgba(207, 169, 90, 0.16); }
.card.parchment .btn:not(.btn--primary), .card[data-mystery] .btn:not(.btn--primary) { color: var(--text); }
.card[data-mystery] .clue { background: rgba(207, 169, 90, 0.06); border-color: var(--line); }
.card[data-mystery] .chip--btn { color: var(--text); background: rgba(207, 169, 90, 0.06); }
.card[data-mystery] .chip--on { border-color: var(--gold-2); color: var(--gold-hi); }
.card.quest .bar, .card.parchment .bar { background: #080706; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #3f3322; }
.card.quest .bar > span { background: linear-gradient(180deg, #a7cf86, #5f8a43); }
.card.quest { border-left: 0; box-shadow: var(--frame), inset 3px 0 0 var(--gold), 0 8px 18px rgba(0, 0, 0, 0.55); }
.card.quest--done { box-shadow: var(--frame), inset 3px 0 0 #6f9f5c, 0 8px 18px rgba(0, 0, 0, 0.55); }
.card.quest--failed { box-shadow: var(--frame), inset 3px 0 0 #b3533f, 0 8px 18px rgba(0, 0, 0, 0.55); }
.card.quest > .row strong, .card.quest strong { font-family: var(--font-title); letter-spacing: 0.04em; }
.empty { background: rgba(207, 169, 90, 0.04); border: 1px dashed rgba(207, 169, 90, 0.3); font-family: var(--font-read); font-size: 1.05rem; }

/* texto de leitura (aventura, diálogos): serifa grande sobre o painel escuro */
.bubble { padding: 18px 20px; }
.bubble p, .poi-desc, .quest p { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.5; color: #efe5cd; }
.bubble > p:first-child::first-letter { color: var(--gold-2); text-shadow: 0 0 12px rgba(236, 202, 127, 0.35); }
.campaign__name { color: var(--gold-hi); }
.campaign .icon-btn { color: var(--muted); }
.campaign__main:active { background: rgba(207, 169, 90, 0.1); }

/* ---------- Botões ---------- */
.btn {
  color: var(--text); font-family: var(--font-title); letter-spacing: 0.05em; border-radius: 7px; border: 0;
  background: linear-gradient(180deg, #1c1712, #0e0c09);
  box-shadow: 0 0 0 1px #6b552f, inset 0 0 0 1px #050403, inset 0 0 0 2px rgba(207, 169, 90, 0.16), inset 0 1px 0 rgba(255, 232, 180, 0.1), 0 3px 6px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 #000;
}
.btn:active { filter: brightness(1.25); box-shadow: 0 0 0 1px var(--gold), inset 0 0 0 1px #050403, 0 0 14px rgba(236, 202, 127, 0.35); }
.btn--primary {
  color: var(--gold-hi);
  background: linear-gradient(180deg, #4a3614 0%, #2a1d0a 55%, #1a1206 100%);
  box-shadow: 0 0 0 1px var(--gold-2), inset 0 0 0 1px #050403, inset 0 0 0 2px rgba(255, 232, 160, 0.4), 0 0 18px rgba(236, 202, 127, 0.35), 0 3px 8px rgba(0, 0, 0, 0.6);
  text-shadow: 0 0 10px rgba(255, 224, 140, 0.55), 0 1px 0 #000;
}
.btn--primary .icon { stroke: var(--gold-hi); }
.btn--danger { color: #f0b5a6; background: linear-gradient(180deg, #2c130f, #160807); box-shadow: 0 0 0 1px #8c3b2c, inset 0 0 0 1px #050403, inset 0 0 0 2px rgba(208, 98, 76, 0.2); }
.btn--ghost { background: transparent; box-shadow: 0 0 0 1px rgba(207, 169, 90, 0.35), inset 0 0 0 1px #050403; }
.btn--fight { box-shadow: 0 0 0 1px #8c3b2c, inset 0 0 0 1px #050403, inset 0 0 0 2px rgba(208, 98, 76, 0.2), 0 3px 6px rgba(0, 0, 0, 0.5); }
.btn:disabled { opacity: 0.5; filter: grayscale(0.4); }
.btn__ic { border-radius: 7px; background: linear-gradient(180deg, #241d13, #0c0a07); border: 1px solid #6b552f; color: var(--gold-2); box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.12); }
.btn--fight .btn__ic { background: linear-gradient(180deg, #4a1c14, #1c0a07); border-color: #b3533f; color: #ffd6c9; }
.btn__txt .small, .btn--left.btn--ic .small { font-family: var(--font-read); font-size: 0.92rem; color: var(--muted); }
.btn__go { color: var(--gold-2); }
.screen__footer, .wizard__preview { background: linear-gradient(180deg, #100d0a, #070605); border-top: 1px solid #5b4a2c; box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 232, 180, 0.08); }
.wizard__preview { border-top: 0; border-bottom: 1px solid #5b4a2c; }
.icon-btn:active { background: rgba(207, 169, 90, 0.16); }

/* ---------- Seleções ---------- */
.choice__item, .chip--btn, .subtab, .look {
  background: linear-gradient(180deg, #1a1611, #0d0b08); border-color: #4d3f28;
  box-shadow: inset 0 0 0 1px #050403, inset 0 1px 0 rgba(255, 232, 180, 0.08);
}
.choice__item[aria-checked="true"], .subtab--on, .chip--on, .look.is-on {
  border-color: var(--gold-2);
  background: linear-gradient(180deg, rgba(236, 202, 127, 0.22), rgba(236, 202, 127, 0.05)), #14100a;
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px #050403, inset 0 0 0 2px rgba(236, 202, 127, 0.3), 0 0 16px rgba(236, 202, 127, 0.35);
  animation: none;
}
.subtab { font-family: var(--font-title); border-radius: 6px; }
.seg { background: #070605; border-color: #4d3f28; }
.seg button[aria-checked="true"] { background: linear-gradient(180deg, #4a3614, #231706); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-2), 0 0 12px rgba(236, 202, 127, 0.3); }
.input { background: #070605; border-color: #4d3f28; }

/* ---------- Ficha do herói ---------- */
.sheet-hero { padding: 16px 14px 14px; }
.hero-head__pic { border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 2px #050403, 0 0 0 3px rgba(207, 169, 90, 0.5), 0 6px 12px rgba(0, 0, 0, 0.6); }
.hero-head__info h2 { color: var(--gold-hi); font-family: var(--font-title); font-size: 1.4rem; text-shadow: 0 0 14px rgba(236, 202, 127, 0.25); }
.sheet-hero .gold, .sheet-hero .hero-head .muted strong { color: var(--gold-2); }
.hero-head .muted { font-family: var(--font-read); font-size: 1rem; }
.sheet-hero .meter__k { color: var(--text); }
.sheet-hero .meter__v { color: var(--text); font-variant-numeric: tabular-nums; }
.sheet-hero .bar, .bar { background: #060504; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #5b4a2c; }
.meter__ic, .attrs--icons .attr__ic, .btn__ic { background: radial-gradient(circle at 35% 30%, #2a2113, #0c0a06); border: 1px solid #8a6d33; color: var(--gold-2); }
.attrs--icons .attr { background: linear-gradient(180deg, #15110c, #0a0806); border: 1px solid #3f3322; box-shadow: inset 0 0 0 1px #050403; }
.attrs--icons .attr__k { color: var(--muted); }
.attrs--icons .attr__v { color: var(--gold-hi); }
.attrs--icons .attr__plus .pill { background: var(--gold); color: #1b1206; border-color: #6b552f; }
[data-test="points"] { color: var(--gold-2); }
.attr { background: linear-gradient(180deg, #15110c, #0a0806); border-color: #3f3322; }

/* ---------- Mochila ---------- */
.pack {
  background: linear-gradient(180deg, #100d0a, #070605);
  border: 0; border-radius: 10px;
  box-shadow: var(--frame), inset 0 6px 18px rgba(0, 0, 0, 0.6);
}
.pack .tile, .tile--slot { background: linear-gradient(180deg, #14110d, #080706); border: 1px solid #4d3f28; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7); }
.pack .tile--sel { border-color: var(--gold-2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gold-2), 0 0 14px rgba(236, 202, 127, 0.5); }
.tile--filled { border-color: var(--gold); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 10px rgba(207, 169, 90, 0.25); }
.detail.parchment { color: var(--text); }
.detail.parchment strong { color: var(--gold-hi); }
.detail.parchment .cmp { color: var(--text); }
[data-test="gold"] { color: var(--gold-hi); }

/* ---------- Abas ---------- */
.tabbar { background: linear-gradient(180deg, #120f0b, #060504); border-top: 1px solid #6b552f; box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 232, 180, 0.1); padding: 3px 4px calc(var(--safe-b) + 3px); gap: 3px; }
.tab { border-radius: 6px; color: #b3a68c; }
.tab + .tab::before { display: none; }
.tab[aria-selected="true"] {
  color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(236, 202, 127, 0.24), rgba(236, 202, 127, 0.06));
  box-shadow: inset 0 0 0 1px var(--gold-2), 0 0 14px rgba(236, 202, 127, 0.3);
  text-shadow: 0 0 10px rgba(255, 224, 140, 0.55);
}
.tab[aria-selected="true"] .icon { stroke: var(--gold-hi); }
@media (orientation: landscape) and (max-height: 540px) {
  .tabbar { padding: 4px 3px; }
  .tab[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--gold-2), 0 0 14px rgba(236, 202, 127, 0.3); background: linear-gradient(90deg, rgba(236, 202, 127, 0.24), rgba(236, 202, 127, 0.06)); }
}

/* ---------- Molduras de imagem ---------- */
img.art, .art-placeholder { border: 1px solid var(--gold); box-shadow: 0 0 0 2px #050403, 0 0 0 3px rgba(207, 169, 90, 0.4), 0 8px 18px rgba(0, 0, 0, 0.6); }
.pin__label { background: linear-gradient(180deg, #1d170f, #0a0806); border: 1px solid #8a6d33; color: var(--gold-hi); font-family: var(--font-title); letter-spacing: 0.03em; }
.item-icon { border-radius: 6px; }

/* ---------- Títulos de seção, toast ---------- */
.home__list h2, .stack > h2, .stack > h3 {
  font-family: var(--font-title); color: var(--gold-2); letter-spacing: 0.1em; font-size: 0.95rem;
  display: flex; align-items: center; gap: 10px;
}
.home__list h2::after, .stack > h2::after, .stack > h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(207, 169, 90, 0.6), rgba(207, 169, 90, 0)); }
.entry { border-left-color: var(--gold); }
.toast {
  color: var(--gold-hi); font-family: var(--font-read); font-size: 1.05rem;
  background: linear-gradient(180deg, #1d170f, #0a0806);
  border: 0; box-shadow: 0 0 0 1px var(--gold-2), inset 0 0 0 1px #050403, inset 0 0 0 2px rgba(236, 202, 127, 0.25), 0 8px 22px rgba(0, 0, 0, 0.7);
}
.toast--error { background: linear-gradient(180deg, #3a1710, #1a0a07); color: #ffd6c9; box-shadow: 0 0 0 1px #b3533f, inset 0 0 0 1px #050403, 0 8px 22px rgba(0, 0, 0, 0.7); }
.sheet-backdrop { background: rgba(0, 0, 0, 0.78); }
.rarity { font-family: var(--font-title); }

/* ---------- Início ---------- */
.home__brand p.muted { font-family: var(--font-read); font-size: 1.1rem; color: var(--gold-2); opacity: 0.85; }
.home__emblem, .home__logo img { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 22px rgba(236, 202, 127, 0.25)); }

/* os cartões que antes eram pergaminho (maior especificidade no skin.css) */
.card:is(.parchment, .quest, [data-mystery], [data-collection], [data-test="achievements"]),
.bubble, .campaign, .detail.parchment {
  background:
    var(--c-tl) top 4px left 4px / 18px 18px no-repeat,
    var(--c-tr) top 4px right 4px / 18px 18px no-repeat,
    var(--c-bl) bottom 4px left 4px / 18px 18px no-repeat,
    var(--c-br) bottom 4px right 4px / 18px 18px no-repeat,
    var(--plate);
  background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, auto;
  border: 0; border-radius: 8px;
  color: var(--text);
  --text: #efe5cd; --muted: #a99d87; --line: rgba(207, 169, 90, 0.24); --gold: #cfa95a; --gold-2: #ecca7f;
  box-shadow: var(--frame), 0 8px 18px rgba(0, 0, 0, 0.55);
}
.campaign, .detail.parchment { background: var(--plate); }
.home__logo img { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mix-blend-mode: normal; }

/* ================= Início: arte de fundo + menu empilhado (como no esboço) ================= */
.screen--home { position: relative; isolation: isolate; }
.screen--home::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: min(78vh, 640px); z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 7, 6, 0.55) 0%, rgba(8, 7, 6, 0.05) 28%, rgba(8, 7, 6, 0.55) 62%, #0a0908 100%),
    url(art-scene.key.webp) center top / cover no-repeat;
}
.screen--home .screen__header { background: none; }
.screen--home .screen__header::after { display: none; }
.screen--home .home__brand { padding-top: 6vh; }
.home__logo { width: min(74vw, 320px); }
.home__logo img { -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.home__brand p.muted { text-shadow: 0 2px 8px #000; margin-bottom: 14px; }
.home__menu { display: flex; flex-direction: column; gap: 10px; width: min(78vw, 300px); margin: 6px auto 4px; }
.home__menu .btn { min-height: 50px; justify-content: center; font-size: 1.02rem; background-color: rgba(10, 8, 6, 0.8); }
.home__menu .btn[hidden] { display: none; }
.home__menu .btn--primary { min-height: 54px; font-size: 1.1rem; }
.screen--home .home__list { margin-top: 18px; }
@media (orientation: landscape) and (max-height: 540px) {
  .screen--home::before { height: 100%; }
  .screen--home .home__brand { padding-top: 0; }
}

/* ================= Títulos de página, ficha em duas colunas, combate ================= */
.page-title {
  display: block !important; text-align: center; font-family: var(--font-title); font-size: 1.5rem; letter-spacing: 0.08em; color: var(--gold-hi);
  text-shadow: 0 0 16px rgba(236, 202, 127, 0.3), 0 2px 0 #000; margin: 2px 0 0;
}
.page-title::after { content: ""; display: block; height: 11px; margin-top: 6px; background: var(--diamond) center / 11px 11px no-repeat, linear-gradient(90deg, rgba(207, 169, 90, 0), rgba(207, 169, 90, 0.75) 50%, rgba(207, 169, 90, 0)) center / 100% 1px no-repeat; flex: none; }
.hero-head__pic { width: 116px; height: 146px; border-radius: 8px; }
.hero-head__info h2 { font-size: 1.6rem; }
.attrs--icons { grid-template-columns: 1fr 1fr; }
.attrs--icons .attr { padding: 8px 10px 8px 8px; }

.combat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.combat-actions .cbtn { min-height: 56px; justify-content: flex-start; }
.combat-actions .cbtn--primary { box-shadow: 0 0 0 1px var(--gold-2), inset 0 0 0 1px #050403, inset 0 0 0 2px rgba(255, 232, 160, 0.4), 0 0 16px rgba(236, 202, 127, 0.3); }
.bar--enemy > span { background: linear-gradient(180deg, #e0715f, #8a2f24); }
.bar--enemy { height: 14px; }
.log { font-family: var(--font-read); font-size: 1.08rem; line-height: 1.45; background: var(--plate); border-radius: 8px; box-shadow: var(--frame); padding: 12px 14px; }

/* ================= Mochila em duas colunas (grade + painel do item) ================= */
.bag-split { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; align-items: start; }
.bag-split .pack { grid-template-columns: repeat(4, 1fr); }
.bag-split .detail { position: sticky; top: 8px; text-align: center; padding: 10px 8px; }
.bag-split .detail .row { flex-direction: column; align-items: stretch; gap: 6px; justify-content: center; }
.bag-split .detail .row--between { align-items: center; }
.bag-split .detail .item-icon { width: 64px; height: 64px; margin: 0 auto; }
.bag-split .detail .btn { width: 100%; min-height: 40px; padding: 6px 4px; font-size: 0.9rem; }
.bag-split .detail p { font-size: 0.82rem; }
@media (min-width: 560px) { .bag-split { grid-template-columns: minmax(0, 1fr) 190px; } .bag-split .pack { grid-template-columns: repeat(5, 1fr); } }
.doll__figure { width: min(100%, 236px); margin-bottom: 4px; }
.tile--slot { width: 50px; height: 50px; min-width: 44px; min-height: 44px; }
.tile--slot .tile__empty span:last-child { font-size: 0.62rem; }
p.gold[data-test="gold"] { display: none; }

.equip-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.equip-mini__slot { aspect-ratio: 1; border-radius: 10px; border: 1px solid #4d3f28; background: linear-gradient(180deg, #14110d, #080706); box-shadow: inset 0 2px 6px rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text); font: inherit; cursor: pointer; overflow: hidden; }
.equip-mini__slot.is-filled { border-color: var(--gold); box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 0 10px rgba(207,169,90,.25); }
.equip-mini__slot .item-icon { width: 100%; height: 100%; object-fit: cover; }
.equip-mini__ph { font-size: .62rem; opacity: .55; text-align: center; padding: 2px; }

/* Diário: abas internas quebram em linhas (sem rolagem lateral) */
.subtabs { flex-wrap: wrap; overflow: visible; }
.subtab { flex: 1 1 calc(33% - 6px); justify-content: center; min-width: 0; padding: 0 8px; white-space: normal; text-align: center; line-height: 1.15; min-height: 44px; }
.header-avatar { padding: 0; cursor: pointer; }

/* ================= Arte nova: ícones dourados, molduras e mapa-múndi ================= */
.tab-ic { width: 28px; height: 28px; object-fit: contain; filter: saturate(.75) brightness(.8); }
.tab[aria-selected="true"] .tab-ic { filter: none drop-shadow(0 0 6px rgba(255, 214, 120, .6)); }
.meter-ic { width: 18px; height: 18px; object-fit: contain; display: block; }
.header-gold .coin { background: url(art-ui.coin.webp) center / contain no-repeat; box-shadow: none; border-radius: 0; width: 22px; height: 22px; }
.page-title::after { height: 16px; background: url(art-ui.divider.webp) center / contain no-repeat; margin-top: 4px; }
/* cantos filigranados nos painéis */
.card, .bubble, .sheet, .poi-card, .clue, .campaign, :is(.parchment, .quest) {
  background-image:
    url(art-ui.corner_tl.webp), url(art-ui.corner_tr.webp), url(art-ui.corner_bl.webp), url(art-ui.corner_br.webp), var(--plate);
  background-position: top 2px left 2px, top 2px right 2px, bottom 2px left 2px, bottom 2px right 2px, 0 0;
  background-size: 26px auto, 26px auto, 26px auto, 26px auto, auto;
  background-repeat: no-repeat;
}
.btn--primary { border-image: url(art-ui.plate_on.webp) 40 60 fill / 14px 20px stretch; border-style: solid; border-width: 14px 20px; }
/* retratos com moldura */
.hero-head__pic { position: relative; }
.hero-head__pic::after { content: ""; position: absolute; inset: -16px -11px; background: url(art-ui.pframe.webp) center / 100% 100% no-repeat; pointer-events: none; }
.header-avatar { overflow: visible; border: 0; box-shadow: none; position: relative; padding: 0; background: none; }
.header-avatar__img { width: 100%; height: 100%; }
.header-avatar__img { border-radius: 50%; }
.header-avatar .portrait, .header-avatar .portrait__img, .header-avatar__img { border: 0; border-radius: 50%; box-shadow: none; overflow: hidden; }
.header-avatar::after { content: ""; position: absolute; inset: -6px; background: url(art-ui.ring.webp) center / contain no-repeat; pointer-events: none; }
/* mapa-múndi */
.map--world { border: 0; border-image: none; padding: 0; box-shadow: 0 0 0 2px #7a6238, 0 0 0 3px #17110b, 0 8px 18px rgba(0,0,0,.55); border-radius: 6px; }
.pin--world:disabled { opacity: 1; cursor: default; }
.pin--world .pin__dot { width: 12px; height: 12px; opacity: .85; }
.pin--world .pin__label { font-size: .6rem; padding: 1px 4px; white-space: nowrap; }
.pin--near .pin__dot { box-shadow: 0 0 0 3px rgba(255, 224, 140, .45); animation: pin-pulse 1.6s ease-in-out infinite; opacity: 1; }
.pin--here .pin__dot { background: radial-gradient(circle at 35% 30%, #fff, #4fd0a0); box-shadow: 0 0 0 3px rgba(80, 220, 170, .55), 0 0 12px rgba(80, 220, 170, .8); opacity: 1; }
.pin--here .pin__label { border-color: #4fd0a0; color: #bff5e0; }
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 224, 140, .1); } }
@media (prefers-reduced-motion: reduce) { .pin--near .pin__dot { animation: none; } }

/* ================= Diário: página de pergaminho e moldura nas missões ================= */
.history-page { background: url(art-ui.page.webp) center / 100% 100% no-repeat; padding: 34px 30px 40px; min-height: 280px; color: #3b2a14; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.history-page .entry { border-bottom: 1px solid rgba(90, 60, 20, .25); padding-bottom: 6px; display: flex; flex-direction: column; gap: 2px; font-family: var(--font-read); font-size: 1.05rem; }
.history-page .entry .muted, .history-page .entry .small { color: #7a5a2c; font-style: italic; }
.history-page:empty::before { content: ""; }
.card.quest, :is(.parchment, .quest).card.quest { background: var(--plate); background-image: var(--plate); border: 14px solid transparent; border-image: url(art-ui.panel.webp) 70 / 14px stretch; border-radius: 0; box-sizing: border-box; padding: 6px 4px; }

/* ================= Barras com moldura ornamentada ================= */
.bar, .sheet-hero .bar, .card.quest .bar, .card.parchment .bar {
  box-sizing: border-box; height: 20px; background: none; box-shadow: none; overflow: hidden;
  border: solid transparent; border-width: 0 10px; border-image: url(art-ui.bar.webp) 0 40 fill / 0 10px stretch; padding: 4px 0;
}
.bar > span { border-radius: 999px; }
.bar--thin, .sheet-hero .bar--thin { height: 16px; padding: 3px 0; }
.bar--enemy { height: 22px; padding: 5px 0; }

/* rótulos de pinos nas bordas do mapa não saem da imagem */
.pin--edge-l .pin__label { position: absolute; left: -6px; top: 100%; transform: none; }
.pin--edge-r .pin__label { position: absolute; right: -6px; left: auto; top: 100%; transform: none; }
.pin--edge-l, .pin--edge-r { align-items: center; }

/* mapa-múndi: o ponto fica no ponto exato do mapa; o rótulo vai abaixo ou, com 'pin--up', acima */
.pin--world { transform: translate(-50%, -50%); min-height: 0; min-width: 0; width: 28px; height: 28px; justify-content: center; }
.pin--world .pin__label { position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%); }
.pin--world.pin--up .pin__label { top: auto; bottom: calc(100% - 4px); }
.pin--world.pin--edge-l .pin__label { left: -6px; transform: none; }
.pin--world.pin--edge-r .pin__label { left: auto; right: -6px; transform: none; }

/* baú de recompensa */
.chest-reward { width: 58%; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.chest-reward img { border-radius: 0; }

/* cartões de loja/depósito com a moldura grande */
.card[data-shop-item], .card[data-depot-item] { border: 14px solid transparent; border-image: url(art-ui.panel.webp) 70 / 14px stretch; border-radius: 0; box-sizing: border-box; padding: 6px 4px; }

/* ===== Diário (v0.64) ===== */
.subtabs { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding: 4px; background: #0a0806; border: 1px solid #3f3322; border-radius: 6px; }
.subtab { flex: 1 0 auto; border-radius: 4px; justify-content: center; padding: 0 10px; font-family: var(--font-title); font-size: .78rem; letter-spacing: .03em; background: linear-gradient(180deg, #17120c, #0c0a07); border-color: #2d2418; color: #bfae86; white-space: nowrap; }
.subtab--on { border-color: var(--gold); color: var(--gold-hi); background: linear-gradient(180deg, #2c2212, #14100a); box-shadow: 0 0 10px rgba(207,169,90,.25), inset 0 0 0 1px rgba(255,230,160,.12); }
.jsec { gap: 8px; }
.jsec__head { margin: 6px 0 2px; display: flex; align-items: center; gap: 10px; font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .05em; color: var(--gold-hi); font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, #8a6d33, rgba(138,109,51,.05)) 1; }
.jsec__head i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(207,169,90,.7); flex: none; }
.qrow { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 12px; border-radius: 6px; border: 1px solid #3a2f1e; background: linear-gradient(180deg, #17130d, #0b0907); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.45); }
.qrow--main.quest--active { border-color: var(--gold); box-shadow: 0 0 14px rgba(207,169,90,.22), inset 0 0 0 1px rgba(255,230,160,.12), 0 4px 10px rgba(0,0,0,.45); background: linear-gradient(180deg, #2a2112, #120e08); }
.qrow__ic { width: 34px; height: 34px; display: grid; place-items: center; transform: rotate(45deg); border: 2px solid #8a6d33; border-radius: 4px; background: #0b0907; }
.qrow__ic i { transform: rotate(-45deg); font-style: normal; font-weight: 800; color: var(--gold); font-size: 1rem; }
.qrow--main .qrow__ic { border-color: var(--gold); box-shadow: 0 0 10px rgba(207,169,90,.35); }
.quest--done .qrow__ic { border-color: #5d8a4c; } .quest--done .qrow__ic i { color: #9ccc86; }
.quest--failed .qrow__ic { border-color: #a24b38; } .quest--failed .qrow__ic i { color: #e48a74; }
.qrow__body { min-width: 0; }
.qrow__title { display: block; font-family: var(--font-title); color: var(--gold-hi); letter-spacing: .03em; font-size: .98rem; }
.qrow .qrow__sub { margin: 3px 0 0; color: #b9ab8b; font-size: .8rem; line-height: 1.35; font-family: var(--font-body, inherit); }
.qrow .qrow__meta { margin: 4px 0 0; font-size: .72rem; color: #d9b96a; }
.qrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.qrow__step { font-size: .7rem; color: #9f916f; white-space: nowrap; }
.qrow .tag { font-size: .68rem; }

/* mapa da localidade: moldura fina como a do mapa-mundi e marcadores menores */
.map:not(.map--world) { border: 0; border-image: none; padding: 0; box-shadow: 0 0 0 2px #7a6238, 0 0 0 3px #17110b, 0 8px 18px rgba(0,0,0,.55); border-radius: 6px; }
/* o ponto fica exatamente na coordenada do mapa; o rótulo fica logo abaixo, sem empurrar o ponto */
.map:not(.map--world) .pin { width: 36px; height: 36px; min-width: 0; min-height: 0; justify-content: center; }
.map:not(.map--world) .pin__label { position: absolute; top: calc(100% - 9px); left: 50%; transform: translateX(-50%); }
.map:not(.map--world) .pin--edge-l .pin__label { left: -6px; transform: none; }
.map:not(.map--world) .pin--edge-r .pin__label { left: auto; right: -6px; transform: none; }
.map:not(.map--world) .pin__dot { width: 14px; height: 14px; border-width: 2px; }
.map:not(.map--world) .pin__label { font-size: .64rem; padding: 0 6px; }

/* ===== Códice ===== */
.codex { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: start; }
.codex__nav { display: flex; flex-direction: column; gap: 6px; }
.codex__tab { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; text-align: left; border-radius: 4px; border: 1px solid #2d2418; background: linear-gradient(180deg, #17120c, #0c0a07); color: #bfae86; font-family: var(--font-title); font-size: .78rem; cursor: pointer; }
.codex__tab i { width: 8px; height: 8px; transform: rotate(45deg); background: #6b5630; flex: none; }
.codex__tab--on { border-color: var(--gold); color: var(--gold-hi); background: linear-gradient(180deg, #2c2212, #14100a); box-shadow: 0 0 10px rgba(207,169,90,.25); }
.codex__tab--on i { background: var(--gold); box-shadow: 0 0 6px rgba(207,169,90,.8); }
.codex__page { min-width: 0; padding: 32px 30px 38px 26px; }
.codex__page h3 { margin: 4px 0 2px; font-family: var(--font-title); color: #3b2a14; font-size: 1.05rem; text-align: center; letter-spacing: .04em; }
.codex__page p { margin: 0; color: #3b2a14; font-family: var(--font-read); font-size: .95rem; line-height: 1.4; }
.codex__page .codex__meta, .codex__page .codex__count, .codex__page .codex__unknown { color: #7a5a2c; font-style: italic; font-size: .82rem; text-align: center; }
.codex__page img.art { border-radius: 2px; box-shadow: 0 0 0 1px #5b4524, 0 3px 8px rgba(40,25,5,.45); }
.codex__entries { display: flex; flex-direction: column; }
.codex__entry { text-align: left; min-height: 40px; padding: 6px 4px; background: none; border: 0; border-bottom: 1px solid rgba(90,60,20,.25); color: #3b2a14; font-family: var(--font-read); font-size: 1rem; cursor: pointer; }
.codex__entry:active { background: rgba(90,60,20,.12); }
.codex__back { align-self: flex-start; background: none; border: 0; color: #7a5a2c; font: inherit; font-size: .85rem; padding: 4px 0; cursor: pointer; }
.codex__list { margin: 0; padding-left: 18px; color: #3b2a14; font-family: var(--font-read); font-size: .92rem; }
.codex__empty { text-align: center; font-style: italic; }

/* avisos no topo (abaixo do cabeçalho), menores: não cobrem mais os botões de combate */
#toasts { bottom: auto; top: calc(var(--safe-t) + 70px); gap: 6px; }
.toast { font-size: .9rem; padding: 7px 14px; }
.log:empty { display: none; }

/* explicação das habilidades (ficha e combate) */
.skill--tap { cursor: pointer; }
.skill--tap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cbtn-wrap { position: relative; display: flex; }
.cbtn-wrap > .cbtn { flex: 1; }
.cbtn__info { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #8a6d33; background: rgba(10, 8, 6, .85); color: var(--gold-hi); font: italic 700 .9rem/1 var(--font-title, serif); display: grid; place-items: center; padding: 0; cursor: pointer; }
.cbtn__info:focus-visible { outline: 2px solid var(--gold); }
.skillinfo__wrap { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 10px; }
.skillinfo__icon { flex: 0 0 auto; }
.skillinfo { text-align: left; font-size: .95rem; }
.skillinfo p { margin: 0; }
.skillinfo__cost, .skillinfo__damage { color: var(--text); font-weight: 600; }
.skillinfo__inflict { color: #e8c27a; }
.skillinfo__heal { color: #8fe0b0; }
.skillinfo__tier { padding-left: 10px; font-size: .88rem; color: var(--muted); }
.skillinfo__rank { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.skillinfo__locked { color: #e08a7a; }

/* Aviso de nova versão (service worker) */
.update-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--panel, #241c14); color: var(--text, #f0e6d2); border: 1px solid var(--gold, #c9a45c); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }